ShaderMaterial雾参数不起作用

Question

在THREE.ShaderMaterial中启用场景雾时遇到问题。当前雾仅影响其他几何体，但使用THREE.ShaderMaterial创建的天穹不受雾的影响。

ShaderMaterial中似乎有一个布尔型fog参数，显然应该将其设置为true才能使用场景雾。但是，使用它会导致uniforms.fogColor is undefined错误。错误发生在WebGLRenderer函数refreshUniformsFog上。

是错误还是我使用了错误的参数？

基于webgl_materials_lightmap.html示例的测试用例：http://jsfiddle.net/HXhb4/如果您在第62行将fog设置为true并运行测试，则会得到错误。我想要发生的是天顶受到雾的影响，就像用普通MeshPhongMaterial创建的模型或天顶一样。

Answer 1

如果要将雾与自定义ShaderMaterial一起使用，则需要确保指定所需的雾uniforms。例如,

var uniforms = {
    topColor:    { type: "c", value: new THREE.Color( 0x0077ff ) },
    bottomColor: { type: "c", value: new THREE.Color( 0xffffff ) },
    offset:      { type: "f", value: 33 },
    exponent:    { type: "f", value: 0.6 },
    fogColor:    { type: "c", value: scene.fog.color },
    fogNear:     { type: "f", value: scene.fog.near },
    fogFar:      { type: "f", value: scene.fog.far }
}

var skyMat = new THREE.ShaderMaterial( {
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    uniforms: uniforms,
    side: THREE.BackSide,
    fog: true
} );

如果您决定使用fogDensity，还要指定它。您还必须将雾逻辑合并到着色器中。

three.js r.59

Answer 2

在WestLangley提到的被接受的答案中：

您还必须将雾逻辑合并到着色器中。

我通过阅读示例NormalDisplacementShader.js了解了如何做到这一点。以下是步骤：

将着色器写入外部片段文件中，并在输出gl_FragColor中声明ShaderChunks

• In

• UniformsLib

• Add

• outgoingLight

示例如下：

THREE.YourCustomShader = {

uniforms: THREE.UniformsUtils.merge( [

    THREE.UniformsLib[ "fog" ],

    {

    "someCustomUniform" : { type: 'f', value: 1.0 }

    }

] ),

fragmentShader: [

    "varying float someCustomVarying;",

    THREE.ShaderChunk[ "common" ],
    THREE.ShaderChunk[ "fog_pars_fragment" ],

    "void main() {",

        "vec3 outgoingLight = vec3( 0.0 );",

        THREE.ShaderChunk[ "fog_fragment" ],

        "gl_FragColor = vec4(outgoingLight, 1.0);",

    "}"

].join("\n"),

vertexShader: [

    "uniform float someCustomUniform;",

    "varying float someCustomVarying;",

    "void main() {",

        "someCustomVarying = 1.0 * someCustomUniform;",

        "gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0 );",

    "}"

].join("\n")

};