部分透明着色器遮挡 THREE.js 中的对象

Question

我正在制作一款游戏，游戏的棋盘上覆盖着一层战争迷雾。我希望在玩家将鼠标悬停在瓷砖上时显示一个光标，并且我正在使用瓷砖周围的发光效果来实现这一点，也使用着色器来实现。

我遇到了一个奇怪的问题：发光效果适用于正 x 值（当相机设置为 x = -250、y = 250 时）但我看不到负 x 值，除非相机旋转到几乎完全垂直（或者我将相机移动到战争迷雾层下）。

很难解释，所以我做了一个 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，两个框会渲染。

版本 0.87.1