How to add fog to texture in shader (THREE.JS R76)

问题

So firstly, I am aware of this post: ShaderMaterial fog parameter does not work

My question is a bit different... I am trying to apply the fog in my three.js scene to a shader thats using a TEXTURE and I can't figure it out. My best guess as to what is supposed to go into the frag was:

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

This works when the texture2D part is just a normal color but as a texture it doesn't render.

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

}

回答1:

Here is a fiddle that shows a ShaderMaterial with a texture and red fog

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

Here is a bit of how to create the material

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

来源：https://stackoverflow.com/questions/37243172/how-to-add-fog-to-texture-in-shader-three-js-r76

标签

three.js

glsl

shader