Teilweise transparente Shader verschließende Objekte in THREE.js

Question

Ich mache ein Spiel mit einem Nebel der Kriegsschicht über das Brett. Ich möchte einen Cursor haben, der angezeigt wird, wenn der Spieler über eine Kachel mauset, und ich implementiere dies mit einem Glow-Effekt um die Kachel, der ebenfalls mit einem Shader implementiert wurde.

ich in ein fremdes Thema renne: der Schein-Effekt arbeitet für positive x-Werte in Ordnung (wenn die Kamera bei x = -250 gesetzt ist, y = 250), aber ich kann es nicht für negative x-Werte sehen, wenn die Kamera gedreht wird fast ganz vertikal (oder ich bewege die Kamera unter den Nebel der Kriegsschicht).

Es ist schwer zu erklären, also habe ich eine CodePen demonstriert das Problem gemacht: https://codepen.io/jakedluhy/pen/QqzajN?editors=0010

Ich bin ziemlich neu, um benutzerdefinierte Shadern, so dass jede Einsicht oder Hilfe würde geschätzt. Hier ist die Shadern für den Nebel des Krieges:

// 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; 
} 

und die Shadern für die „glow“:

// 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; 
} 

Die Mathematik in dem Vertex-Shader für den Nebel des Krieges ist, den Nebel in einem halten relative Position zum Spielbrett.

Tagging Three.js und GLSL, weil ich nicht sicher bin, ob dies ein Three.js exklusives Problem ist oder nicht ...

Edit: Version 0.87.1

Answer 1

Ihr Beispiel sehen ziemlich seltsam. Indem Sie depthWrite:false auf Ihr Nebelmaterial setzen, rendern die beiden Boxen.

Version 0.87.1