Thông số sương mù ShaderMaterial không hoạt động

Question

Tôi đang gặp sự cố khi bật cảnh Fog trong THREE.ShaderMaterial. Hiện tại, sương mù chỉ ảnh hưởng đến các hình dạng khác, nhưng Skydome được tạo ra bằng cách sử dụng BA.ShaderMaterial, không bị ảnh hưởng bởi sương mù.

Dường như có tham số boolean fog trong ShaderMaterial, có vẻ như được đặt thành true để sử dụng sương mù cảnh. Tuy nhiên, việc sử dụng kết quả là các lỗi uniforms.fogColor is undefined. Lỗi xảy ra tại WebGLRenderer chức năng refreshUniformsFog.

Có phải là lỗi hoặc tôi đang sử dụng thông số sai?

Trường hợp thử nghiệm dựa trên webgl_materials_lightmap.html ví dụ tại đây: http://jsfiddle.net/HXhb4/ Nếu bạn đặt sương mù thành đúng ở dòng 62 và chạy thử nghiệm, bạn sẽ gặp lỗi. Những gì tôi muốn xảy ra là skydome bị ảnh hưởng bởi sương mù như một mô hình hoặc skydome tạo ra với MeshPhongMaterial bình thường.

Answer 1

Nếu bạn muốn sử dụng sương mù với tùy chỉnh ShaderMaterial, bạn cần đảm bảo chỉ định sương mù bắt buộc uniforms. Ví dụ:

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 
}); 

Đồng thời chỉ định fogDensity nếu bạn quyết định sử dụng. Bạn cũng sẽ phải kết hợp logic sương mù vào trình đổ bóng của bạn.

three.js r.59

Answer 2

Trong câu trả lời chấp nhận WestLangley đề cập:

Bạn cũng sẽ phải kết hợp logic sương mù vào shader của bạn.

Tôi đã tìm ra cách thực hiện điều đó bằng cách đọc ví dụ NormalDisplacementShader.js. Dưới đây là các bước:

1. Viết shader của bạn trong một .js bên ngoài nộp
2. Thêm UniformsLib
3. Thêm ShaderChunks
4. Trong shader mảnh, kê khai vec3 outgoingLight
5. Sử dụng outgoingLight ở đầu ra của bạn gl_FragColor

Ví dụ bên dưới:

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

};