Question

我在THREE.ShaderMaterial启用场景Fog时遇到了麻烦。目前，雾仅影响其他几何，但使用THREE.ShaderMaterial创建的天幕不受雾的影响。

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

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

基于webgl_materials_lightmap.html示例的测试用例：http://jsfiddle.net/HXhb4/ 如果在第62行中将雾设置为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想出了如何做到这一点。以下是步骤：

将着色器写在外部.js文件中
添加UniformsLib
添加ShaderChunks
在片段着色器中，声明vec3 outgoingLight
在输出outgoingLight

gl_FragColor

以下示例：

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

};

ShaderMaterial雾参数不起作用

2 个答案: