如何

使用ShaderMaterial支持雾


如何使用ShaderMaterial支持雾

为了在自定义着色器中支持雾化,必须在顶点着色器和像素着色器中添加一些代码行。

Vertex shader

顶点着色器

首先,您需要声明一个变量:

然后,您必须在着色器内部计算该值:

fFogDistance = (view * worldPosition).z; // This is the distance of the vertex from the point of view of the camera (Camera space)

像素着色器

接下来,您需要添加以下代码,以便能够根据场景发送的参数来计算雾度:

#define FOGMODE_NONE 0.
#define FOGMODE_EXP 1.
#define FOGMODE_EXP2 2.
#define FOGMODE_LINEAR 3.
#define E 2.71828

uniform vec4 vFogInfos;
uniform vec3 vFogColor;
varying float fFogDistance;

float CalcFogFactor()
{
 float fogCoeff = 1.0;
 float fogStart = vFogInfos.y;
 float fogEnd = vFogInfos.z;
 float fogDensity = vFogInfos.w;

 if (FOGMODE_LINEAR == vFogInfos.x)
 {
  fogCoeff = (fogEnd - fFogDistance) / (fogEnd - fogStart);
 }
 else if (FOGMODE_EXP == vFogInfos.x)
 {
  fogCoeff = 1.0 / pow(E, fFogDistance * fogDensity);
 }
 else if (FOGMODE_EXP2 == vFogInfos.x)
 {
  fogCoeff = 1.0 / pow(E, fFogDistance * fFogDistance * fogDensity * fogDensity);
 }

 return clamp(fogCoeff, 0.0, 1.0);
}

然后,在着色器内部,您必须使用此函数来获取雾色:

float fog = CalcFogFactor();
color.rgb = fog * color.rgb + (1.0 - fog) * vFogColor;

Java脚本

然后,您必须为ShaderMaterial的onBind回调添加以下代码:

shaderMaterial.onBind = function(mat, mesh) {
    var effect = mat.getEffect();
    effect.setMatrix("view", scene.getViewMatrix());
    effect.setFloat4("vFogInfos", scene.fogMode, scene.fogStart, scene.fogEnd, scene.fogDensity); 
    effect.setColor3("vFogColor", scene.fogColor);
}

并且,您完成了:)

在这里找到一个例子 -