5

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

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

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

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

4

2 回答 2

9

如果您想在自定义中使用雾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您是否决定使用它。您还必须将雾逻辑合并到您的着色器中。

三.js r.59

于 2013-07-20T01:32:42.553 回答
2

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

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

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

  1. 将着色器写入外部 .js 文件
  2. 添加制服库
  3. 添加 ShaderChunks
  4. 在片段着色器中，声明vec3 outgoingLight
  5. 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")

};
于 2015-09-14T11:53:27.370 回答