Material alphaMap looks whiter

#1

Hi, my problem is that I need to apply an alphaMap to a material, but when I do that the object looks whiter because thre renderer.alpha is set to true, but I can’t set it to false because I need it to true, how can I fix this?

Here is how I initialize the renderer:

var renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
premultipliedAlpha: false,
preserveDrawingBuffer: true
});

And here is how I initialize the material:

var material = new THREE.MeshPhysicalMaterial( {
color: 0xeaeaea,
bumpMap: texture_bump,
alphaMap: alpha_map,
bumpScale: 0.01,
alphaTest: 0
} );

#2

Why are you applying an alpha map and then set alphaTest to 0? That means the alpha map can’t fulfill its actual purpose (creating alpha cutouts).

An alpha map should be used like in this fiddle: https://jsfiddle.net/rgjm6039/1/

If you set alphaTest to 0, it’s like applying no map at all.

Besides, what are the reasons for setting premultipliedAlpha to false and preserveDrawingBuffer to true. There are only a few special use cases where it makes sense to change their default values.

1 Like
#3

The alphaTest is set to 0 by default, I change it while the program runs.
The premultipliedAlpha and preserveDrawingBuffer I don’t need change them, that was a mistake.
But the problem is that if I set renderer.alpha = true and I apply an alphaMap, with any value in the alphaTest it looks whiter.

#4

I solved it, the solution was sitting transparent=true on the material of the object, and do it only with the object that I apply the alphaMap, if I don’t apply the transparent=true it looks whiter, and if I apply transparency to all the objects the transparency of the alphaMap returns the background of the scene not the object is behind.