Wie Nebel Textur in Shader (Three.js R76)

Question

Also erstens hinzufügen, ich bin mir dessen bewusst diesen Beitrag: ShaderMaterial fog parameter does not work

Meine Frage ist ein bisschen anders ... Ich versuche, den Nebel gelten meine three.js-Szene zu einem Shader, der eine TEXTURE verwendet und ich kann es nicht herausfinden. Meine beste Vermutung, was in den frag gehen soll, war:

resultingColor = mix (texture2D (glowTexture, vUv), fogColor, fogFactor);

Dies funktioniert, wenn der texture2D Teil nur eine normale Farbe ist, aber als eine Textur es nicht rendert.

THREE.glowShader = { 

vertexShader: [ 

    ` 
    varying vec2 vUv; 

    void main() { 
     vUv = uv; 
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); 
    } 

    ` 

].join("\n"), 

fragmentShader: [ 


    "uniform sampler2D glowTexture;", 
    "varying vec2 vUv;", 
    "uniform vec3 fogColor;", 
    "uniform float fogNear;", 
    "uniform float fogFar;", 

    "void main() {", 
     ` 
     vec4 resultingColor = texture2D(glowTexture, vUv); 
     `, 
     `#ifdef USE_FOG 

      #ifdef USE_LOGDEPTHBUF_EXT 

       float depth = gl_FragDepthEXT/gl_FragCoord.w; 

      #else 

       float depth = gl_FragCoord.z/gl_FragCoord.w; 

      #endif 

      #ifdef FOG_EXP2 

       float fogFactor = whiteCompliment(exp2(- fogDensity * fogDensity * depth * depth * LOG2)); 

      #else 

       float fogFactor = smoothstep(fogNear, fogFar, depth); 

      #endif`, 

      // resultingColor = mix(texture2D(glowTexture, vUv), fogColor, fogFactor); 

     `#endif`, 
     "gl_FragColor = resultingColor;", 
    "}" 



].join("\n") 

}

Answer 1

Here is a fiddle, die eine ShaderMaterial mit einer Textur und roten Nebel zeigt

<script id="vertexShader" type="x-shader/x-vertex"> 
    varying vec2 vUv; 
    varying vec3 vPosition; 
    void main(void) { 
     vUv = uv; 
     vPosition = position; 
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); 
    } 
    </script> 

    <script id="fragmentShader" type="x-shader/x-fragment"> 
    varying vec2 vUv; 
    uniform sampler2D texture; 
    uniform vec3 fogColor; 
    uniform float fogNear; 
    uniform float fogFar; 
    void main() { 
     gl_FragColor = texture2D(texture, vUv); 
     #ifdef USE_FOG 
      #ifdef USE_LOGDEPTHBUF_EXT 
       float depth = gl_FragDepthEXT/gl_FragCoord.w; 
      #else 
       float depth = gl_FragCoord.z/gl_FragCoord.w; 
      #endif 
      float fogFactor = smoothstep(fogNear, fogFar, depth); 
      gl_FragColor.rgb = mix(gl_FragColor.rgb, fogColor, fogFactor); 
     #endif 
    } 
    </script> 

Hier ist ein bisschen wie das Material

erstellen

var uniforms = { 
    texture:  { type: "t", value: texture}, 
    fogColor: { type: "c", value: scene.fog.color }, 
    fogNear:  { type: "f", value: scene.fog.near }, 
    fogFar:  { type: "f", value: scene.fog.far } 
}; 
var vertexShader = document.getElementById('vertexShader').text; 
var fragmentShader = document.getElementById('fragmentShader').text; 
material = new THREE.ShaderMaterial(
    { 
    uniforms : uniforms, 
    vertexShader : vertexShader, 
    fragmentShader : fragmentShader, 
    fog: true 
    } 
);