THREE.jsのオブジェクトを遮る部分透過シェーダ

Question

私はボードを覆う戦争層の霧でゲームを作っています。プレーヤーがタイルの上にマウスを置いたときに現れるカーソルを持っていて、タイルの周りのグロー効果でこれを実装しています。シェーダを使って実装しました。

私は奇妙な問題に遭遇しています：正のx値（カメラがx = -250に設定されているときは、y = 250に設定されているとき）はグロー効果がうまく動作しますが、カメラが回転しない限りほぼ完全に垂直（または私はの下にカメラを戦争層の霧の下に動かす）。

それは説明するのは難しいので、私は問題を実証CodePenを作りました：https://codepen.io/jakedluhy/pen/QqzajN?editors=0010

私はカスタムシェーダにはかなり新しいですので、任意の洞察力や助けいただければ幸いです。 「グロー」の

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

シェーダ：ここでは、戦争の霧のためのシェーダをだ

は

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

戦争の霧のための頂点シェーダにおける数学は中に霧を維持することですゲームボードに対する相対位置。

タグ付けTHREE.jsとGLSL私はこれがTHREE.js排他的な問題であるかどうかわからないので...

編集：バージョン0.87.1

Answer 1

あなたの例では、かなり奇妙に見えます。あなたの霧の材料にdepthWrite:falseを設定すると、2つのボックスがレンダリングされます。

バージョン0.87.1