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