在THREE.js场景中使用适当的分层很困难

Question

我正在开发基于十六进制的游戏。我目前正在尝试添加“战争迷雾”效果，其中某些瓷砖位于alpha蒙版下以显示信息未知。不幸的是，我遇到了一些实现我想要的效果的问题。我实现雾的方法是在所有瓷砖上创建一个网格，如果瓷砖是“可见的”则没有alpha，如果不是，则为.7。我认为根据摄像机位置调整网格位置，使其始终保持透视。这是效果：

不幸的是，我尝试这样做的第一种方法在低视角时会产生不良影响。因为即使在视角变化的情况下，我也会将雾转移到瓷砖上，在低角度时它也会覆盖山脉和树木的顶部。见下文：

我尝试的第二件事是从How to change the zOrder of object with Threejs?实施两个场景解决方案。我将雾和看不见的瓷砖放在一个场景中，将看到的瓷砖放在另一个场景中，然后将看到的瓷砖渲染在看不见的顶部。这解决了远瓦片的黑暗问题，但现在它引入了近瓦片的另一个问题。见下文：

我有点难过该做什么。我是THREE.js的新手（至少是图书馆中更高级的部分），所以我想知道是否有一些我可能会有用的东西。

作为参考，这是雾的顶点着色器：

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

  if(color.x == 1.0 && color.y == 1.0 && color.z == 1.0) {
    vColor = vec4(0.0, 0.0, 0.0, 0.0);
  } else {
    vColor = vec4(color, 0.7);
  }
}

和我的片段着色器：

varying vec4 vColor;

float expGradient(float val, float max) {
  return (max + 1.0 / 10.0) * val / (val + 1.0 / 10.0);
}

void main() {
  gl_FragColor = vec4(
    vColor.x,
    vColor.y,
    vColor.z,
    expGradient(vColor.w, 0.7)
  );
}

我使用（1.0,1.0,1.0）的颜色来表示应该“看到”。