Objet transparent cache d'autres objets transparents (alphaTest ne fonctionne pas et depthWrite = false provoque des problèmes)

Question

J'ai actuellement un problème de transparence. Comme vous pouvez le voir sur les images, les objets non transparents derrière l'objet transparent sont affichés. Mais le backside de l'autre objet transparent n'est pas montré, j'ai mis material.side = THREE.DoubleSide.

Il est visible, lorsque je définis material.depthWrite = false, mais le problème est alors visible, vous pouvez voir dans la deuxième image. J'utilise THREE.MeshPhongMaterial et la toute dernière version de Three.js. Voici les valeurs pour le matériel que vous pouvez voir dans l'image

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; 

Voici comment il doit chercher, ne fonctionne que si l'objet est derrière Occultant

Il semble que de l'autre côté, je peut voir l'objet transparent derrière. Pour compléter ma confusion à propos de ce problème, je dois poster une autre photo. Ici vous pouvez voir l'image (1) juste de l'autre côté (scène tournée de 180 °) comme vous pouvez voir que la vue est différente car il y a un objet manquant dans le dos (également transparent) qui est montré dans l'autre vue . Tous ces objets ont exactement le même matériau!

Le envmap textureCube est créé comme suit

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 ne peut pas tout à fait faire ressortir votre problème à partir de vos photos, mais pouvez-vous me dire si c'est la même ing? Allez dans threejs.org/docs/#Reference/Materials/MeshStandardMaterial, dans l'exemple live, réglez ambiant sur blanc, activez transparent dans le matériau et définissez l'opacité sur environ 0,7. Pouvez-vous voir la façon dont la partie transparente du tore au premier plan obstrue les autres parties quand elles passent derrière? Cela peut prendre du temps mais si vous le regardez tourner, vous devriez voir ce que je veux dire.

Malheureusement, il s'agit d'une limitation de WebGL, pas de quoi que ce soit qui puisse être corrigé par three.js pour le moment.

Answer 2

Lors de la création d'un objet transparent, essayez de premultipliedAlpha à true, et qui pourrait résoudre le problème:

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