Question

首先，我知道这篇文章：ShaderMaterial fog parameter does not work

我的问题有点不同...... 我试图将我的three.js场景中的雾应用到使用纹理的着色器，我无法弄明白。关于应该进入碎片的最佳猜测是：

resulColor = mix（texture2D（glowTexture，vUv），fogColor，fogFactor）;

当texture2D部分只是一个普通的颜色但作为一个它不会渲染的纹理时，这是有效的。

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显示带有纹理和红雾的ShaderMaterial

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

以下是一些如何创建材料

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

如何在着色器中为纹理添加雾（THREE.JS R76）

1 个答案: