ShaderMaterial 雾参数不起作用 [英] ShaderMaterial fog parameter does not work

问题描述

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

I'm having troubles enabling scene Fog in THREE.ShaderMaterial. Currently the fog only affects other geometries, but the Skydome that is created using THREE.ShaderMaterial, is unaffected by the fog.

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

There appears to be a boolean fog parameter in ShaderMaterial, which apparently should be set to true to use scene fog. Using it results in uniforms.fogColor is undefined errors however. The error happens at WebGLRenderer function refreshUniformsFog.

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

Is it a bug or am I using the parameter wrong?

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

Test case based on webgl_materials_lightmap.html example here: http://jsfiddle.net/HXhb4/ If you set fog to true in line 62 and run the test, you get the errors. What I would like to happen is the skydome to be affected by the fog like a model or skydome created with normal MeshPhongMaterial.

推荐答案

如果你想在你的自定义 ShaderMaterial 中使用雾，你需要确保指定所需的雾 uniforms.例如，

If you want to use fog with your custom ShaderMaterial, you need to be sure to specify the required fog uniforms. For example,

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.您还必须将雾逻辑合并到您的着色器中.

Also specify fogDensity if you decide to use it. You will also have to incorporate the fog logic into your shader.

three.js r.59

three.js r.59

这篇关于ShaderMaterial 雾参数不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！