Search code examples
three.jswebgltransparency

Transparent Object hides other transparent Objects (alphaTest don't works and depthWrite = false causes some trouble)

I currently have a problem with transparency. As you can see in the pictures, the non transparent objects behind the transparent object are shown. But the backsideof the other transparent object is not shown, I set material.side = THREE.DoubleSide.

It is visible, when I set material.depthWrite = false, but then the visible glitch happens, you can see in the second picture.

I use THREE.MeshPhongMaterial and the newest Version of Three.js. Here are the values for the material you can see in the picture

material.color.setHex(0x9ed7f5);
material.emissive.setHex(0x062f61);
material.transparent = true;
material.opacity = 0.5;
material.needsUpdate = true;
material.reflectivity = 0.8;
material.envMap = textureCube;
material.side = THREE.DoubleSide;
material.roughness = 0.2;
material.metalness = 1;
depthWrite = true;

enter image description here

depthwrite = false;

enter image description here

Here how it should look, only works if object behind is NOT transparent enter image description here

It seems like from the other side I can see the transparent object behind. enter image description here

Just to complete my confusion about this problem I have to post another picture. Here you can see picture (1) just from the other side (scene rotated by 180°) as you can see those view is different as there is an object missing in the back (also a transparent one) which is shown in the other view. All of these objects have the exact same material!

enter image description here

The envMap textureCube is created as follows

textureCube = new THREE.CubeTextureLoader().load(urls);
textureCube.format = THREE.RGBFormat;
var shader = THREE.ShaderLib["cube"];
shader.uniforms["tCube"].value = textureCube;
var shaderMaterial = new THREE.ShaderMaterial({
    fragmentShader: shader.fragmentShader
    , vertexShader: shader.vertexShader
    , uniforms: shader.uniforms
    , depthWrite: false
    , side: THREE.BackSide
});
var skyBox = new THREE.Mesh(new THREE.BoxGeometry(1500, 1500, 1500), shaderMaterial);
scene.add(skyBox);
Solution

  • I can't quite make out your issue from your pictures but can you tell me if this is the same thing?

    Go to threejs.org/docs/#Reference/Materials/MeshStandardMaterial, in the live example set ambient to white, turn on transparent in the material and set opacity to about 0.7.

    Can you see the way that the transparent part of the torus in the foreground occludes other parts when they go behind it? It might take a while but if you watch it as it rotates you should see what I mean.

    Unfortunately this is a WebGL limitation, not anything that can be fixed by three.js for the time being.