如何在着色器中为纹理添加雾(THREE.JS R76) [英] How to add fog to texture in shader (THREE.JS R76)

问题描述

首先，我知道以下信息: ShaderMaterial雾参数不起作用

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

我的问题有点不同... 我试图将我的Three.js场景中的雾应用到使用TEXTURE的着色器中，但我无法弄清楚.关于应该放入碎片中的最好的猜测是:

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

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

当texture2D部件只是普通颜色但不能渲染时，此功能有效.

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

}

推荐答案

这是一个小提琴显示具有纹理和红色雾的ShaderMaterial

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

这篇关于如何在着色器中为纹理添加雾(THREE.JS R76)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！