透明对象隐藏其他透明对象(alphaTest 不起作用并且 depthWrite = false 引起一些麻烦) [英] Transparent Object hides other transparent Objects (alphaTest don't works and depthWrite = false causes some trouble)

问题描述

我目前在透明度方面存在问题.正如您在图片中看到的，显示了透明对象后面的非透明对象.但是其他透明物体的backside没有显示，我设置了material.side = THREE.DoubleSide.

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.

它是可见的，当我设置 material.depthWrite = false 时，但随后出现了可见的故障，您可以在第二张图中看到.

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

我使用 THREE.MeshPhongMaterial 和最新版本的 Three.js.这是您可以在图片中看到的材料的值

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;

depthwrite = false;

这里应该是什么样子，只有当后面的物体不透明时才有效

Here how it should look, only works if object behind is NOT transparent

好像从另一边我可以看到后面的透明物体.

It seems like from the other side I can see the transparent object behind.

为了解决我对这个问题的困惑，我必须发布另一张图片.在这里，您可以从另一侧(场景旋转 180°)看到图片(1)，因为您可以看到这些视图不同，因为背面缺少一个物体(也是一个透明的物体)，它显示在另一个视图中.所有这些物体都具有完全相同的材料！

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!

envMap textureCube 创建如下

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);

推荐答案

我不能从你的图片中完全看出你的问题，但你能告诉我这是否是同一件事吗?

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

转到threejs.org/docs/#Reference/Materials/MeshStandardMaterial，在现场示例中将环境设置为白色，在材质中打开透明并将不透明度设置为0.7左右.

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.

不幸的是，这是一个 WebGL 限制，暂时不是three.js可以修复的.

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

这篇关于透明对象隐藏其他透明对象(alphaTest 不起作用并且 depthWrite = false 引起一些麻烦)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！