Parametr mgły ShaderMaterial nie działa

Question

Mam problemy z włączaniem mgły sceny w THREE.ShaderMaterial. Obecnie mgła wpływa tylko na inne geometrie, ale mgła nie ma wpływu na Skydome, który jest tworzony przy użyciu THREE.ShaderMaterial.

Wygląda na to, że w ShaderMaterial jest parametr boolowski fog, który najwyraźniej powinien mieć wartość true, aby użyć mgły sceny. Używanie jej prowadzi jednak do błędów w wersji uniforms.fogColor is undefined. Błąd występuje przy WebGLRenderer funkcji refreshUniformsFog.

Czy to błąd, czy też używam tego parametru nieprawidłowo?

Walizka testowa oparta na webgl_materials_lightmap.html przykład tutaj: http://jsfiddle.net/HXhb4/ Jeśli ustawisz mgła na true w linii 62 i wykonasz test, otrzymasz błędy. To, co chciałbym zrobić, to skydome, na które ma wpływ mgła, jak model lub skydome stworzony przy użyciu normalnego MeshPhongMaterial.

Answer 1

Jeśli chcesz użyć mgły z niestandardowym ShaderMaterial, musisz koniecznie określić wymaganą mgiełkę uniforms. Na przykład:

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

Proszę również podać fogDensity, jeśli zdecydujesz się z niego skorzystać. Będziesz musiał również wprowadzić logikę mgły do ​​swojego modułu cieniującego.

Three.js r.59

Answer 2

w przyjętym odpowiedź WestLangley wymienić:

Będziesz mieć również włączyć logikę mgła w swojej cieniującego.

Dowiedziałem się, jak to zrobić, czytając przykład NormalDisplacementShader.js. Oto kroki:

1. Wpisz swój shader w zewnętrznym pliku js
2. Dodaj UniformsLib
3. Dodać ShaderChunks
4. W cieniującego fragmentu oświadczyć vec3 outgoingLight
5. Korzystając outgoingLight w produkcji gl_FragColor

Przykład poniżej:

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

};