Objets d'occlusion de shader partiellement transparents dans THREE.js

Question

Je fais un jeu avec un brouillard de guerre recouvrant le plateau. Je veux avoir un curseur qui apparait lorsque le joueur survole une tuile, et j'implémente cela avec un effet de lueur autour de la tuile, également implémenté en utilisant un shader. Je rencontre un problème étrange: l'effet de lueur fonctionne bien pour les valeurs x positives (lorsque l'appareil photo est réglé sur x = -250, y = 250) mais je ne peux pas le voir pour les valeurs x négatives sauf si l'appareil photo est tourné vers presque complètement vertical (ou je déplace la caméra sous le brouillard de la couche de guerre).

Il est difficile d'expliquer, donc je l'ai fait une démonstration CodePen le problème: https://codepen.io/jakedluhy/pen/QqzajN?editors=0010

Je suis assez nouveau pour les shaders personnalisés, de sorte que toute idée ou aide serait appréciée. Voici les shaders pour le brouillard de guerre:

// Vertex 
varying vec4 vColor; 

void main() { 
    vec3 cRel = cameraPosition - position; 

    float dx = (20.0 * cRel.x)/cRel.y; 
    float dz = (20.0 * cRel.z)/cRel.y; 

    gl_Position = projectionMatrix * 
       modelViewMatrix * 
       vec4(
        position.x + dx, 
        position.y, 
        position.z + dz, 
        1.0 
       ); 

    vColor = vec4(0.0, 0.0, 0.0, 0.7); 
} 

// Fragment 
varying vec4 vColor; 

void main() { 
    gl_FragColor = vColor; 
} 

Et les shaders pour la « lueur »:

// Vertex 
varying vec4 vColor; 
attribute float alpha; 

void main() { 
    vColor = vec4(color, alpha); 

    gl_Position = projectionMatrix * 
       modelViewMatrix * 
       vec4(position, 1.0); 
} 

// Fragment 
varying vec4 vColor; 

void main() { 
    gl_FragColor = vColor; 
} 

Les mathématiques dans le vertex shader pour le brouillard de guerre est de garder le brouillard dans un position relative au plateau de jeu.

Tagging Three.js et GLSL parce que je ne suis pas sûr que ce soit un problème exclusif Three.js ou non ...

Edit: la version 0.87.1

Answer 1

Votre exemple semble assez bizarre. En réglant depthWrite:false sur votre matériau de brouillard, les deux boîtes s'affichent.

Version 0.87.1