Question

例如，给定一个带有化身的地形，相机远离头顶：是否有可能呈现雾，以便化身保持完全不动，同时化身周围的地形逐渐消失在雾中？

Answer 1

当然，据我所知，你必须制作自己的着色器，而不是使用随three.js提供的着色器。可能有一种方法可以通过这种方式自定义它们，但如果存在，我就不熟悉它了。

查看this answer做雾时与相机的距离。如上所述，这个想法是将相机位置作为一个均匀的方式传递到着色器，然后在所有对象的顶点着色器中，找到从相机位置到您正在变换的顶点的距离。然后，您将该距离作为变化传递到片段着色器，您可以计算每个像素的距离，用于在模糊颜色和对象的常规颜色之间进行混合。您可以在this example from the OpenGL ES 2.0 Programming guide。

中看到

要将其更改为基于与角色的距离很简单：您只需将角色位置作为您正在计算距离而不是相机位置的制服传入（在该示例代码中，您将替换{{ 1}}类似于u_eyePos，可能会更改u_characterPos到v_eyeDist之间的变化。除了任何名称更改之外，片段着色器可以完全相同。

所以，像这样的事情（警告：没有测试。你将不得不解决这个问题，让三个人很高兴使用它。但是，有很多例子，例如{{3} }）：

顶点着色器：

v_characterDist

片段着色器：

uniform mat4 matViewProjection;
uniform mat4 matView;
uniform vec4 u_characterPos;

attribute vec4 rm_Vertex;
attribute vec2 rm_TexCoord0;

varying vec2 v_texCoord;
varying float v_characterDist;

void main() {
  // Transform vertex to view-space
  vec4 vViewPos = matView * rm_Vertex;

  // Compute the distance to character
  v_characterDist = length(vViewPos - u_characterPos);                  

  gl_Position = matViewProjection * rm_Vertex;
  v_texCoord    = rm_TexCoord0.xy;
}

是否可以从独立于相机的three.js场景中的点应用雾？

1 个答案: