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

＆＃34;发光＆＃34;

的着色器

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

部分透明着色器遮挡THREE.js

1 个答案: