ShaderMaterialフォグパラメータが機能しない

Question

シーンフォグをTHREE.ShaderMaterialで有効にする際に問題が発生しています。現在の霧は他のジオメトリにのみ影響しますが、THREE.ShaderMaterialを使用して作成されたSkydomeはフォグの影響を受けません。

ShaderMaterialにブール値fogがあります。これは、シーンフォグを使用するためには、明らかにtrueに設定する必要があります。しかし、それを使用するとエラーuniforms.fogColor is undefinedになります。エラーはWebGLRendererファンクションrefreshUniformsFogで発生します。

バグですか？またはパラメータを間違って使用していますか？

webg_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と指定します。また、フォグロジックをシェーダに組み込む必要があります。 WestLangleyが言及した受け入れ答えで

three.js r.59

Answer 2

：

はまた、あなたのシェーダに霧のロジックを組み込む必要があります。

私は例NormalDisplacementShader.jsを読んで、その方法を理解しました。ここでの手順は以下のとおりです。

1. は、あなたの出力にvec3 outgoingLight
2. 使用outgoingLightを宣言し、ShaderChunksフラグメントシェーダで
3. を追加ファイルの外部の.jsにUniformsLib
4. を
5. をあなたのシェーダを書きます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") 

};