투명한 개체는 다른 투명한 개체를 숨 깁니다 (alphaTest가 작동하지 않고 depthWrite = false가 문제를 일으킴)

Question

나는 현재 투명성 문제가 있습니다. 사진에서 볼 수 있듯이 투명 오브젝트 뒤에있는 비 투명 오브젝트가 표시됩니다. 그러나 다른 투명한 오브젝트의 backside은 표시되지 않습니다. material.side = THREE.DoubleSide을 설정합니다.

내가 볼 때 material.depthWrite = false으로 설정하면 눈에 띄는 결함이 발생하며 두 번째 그림에서 볼 수 있습니다.

나는 과 Three.js의 최신 버전을 사용합니다. 객체가 뒤에 투명하지 않은 경우 여기에만 작동합니다, 당신은

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; 

여기에 보이게하는 방법을 그림에서 볼 수있는 재료의 값입니다

다른 측면에서 본 것 같습니다. 뒤에있는 투명 오브젝트를 볼 수 있습니다.

이 문제에 대한 혼란을 마무리하기 위해 다른 그림을 게시해야합니다. 다른보기 (180 ° 회전 된 장면)에서 사진 (1)을 볼 수 있습니다. 다른보기에 표시된 물체가 뒷면에 누락 된 것처럼 보이므로 다른보기에서도 볼 수 있습니다 (투명 한 것도 있음). . 이 모든 객체는 똑같은 재질을 가지고 있습니다! 투명한 객체를 생성 할 때

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

Answer 1

I을 당신의 사진에서 당신의 쟁점을 확실히 밝힐 수는 없지만, 이것이 동일한지를 제게 말해 줄 수 있습니까? 보내고있어?

live 예제 세트에서 threejs.org/docs/#Reference/Materials/MeshStandardMaterial로 이동하여 앰비언트에서 흰색으로 설정하고 재료에서 투명을 켜고 불투명도를 약 0.7로 설정하십시오.

전경에있는 원환 체의 투명한 부분이 다른 부분을 뒤쫓아 가리는 방식을 볼 수 있습니까? 시간이 좀 걸릴 수도 있지만, 회전하는 동안 시계를 보면 내 말을 알아야합니다.

이것은 당분간 three.js로 고칠 수있는 것이 아니라 WebGL 제한 사항입니다.

Answer 2

을 다음과 같이

envMap textureCube가 생성되고, true에 premultipliedAlpha 설정을 시도하고 그 문제를 해결할 수 :

var material = new THREE.MeshPhongMaterial({color: 'color', transparent: true,opacity:0.5,premultipliedAlpha: true});