Question

我有一个球体，我通过自定义着色器添加光晕。

我的场景中有雾，这会影响球体，但不会影响光晕（当我缩小球体时会消失，但是光晕仍然存在）。

如何让雾影响光晕？

这是整个场景的编码：

http://codepen.io/marjan-georgiev/pen/WrmPLY?editors=0010

这是我的发光材料代码

glowMaterial(){
  return new THREE.ShaderMaterial({
    side: THREE.BackSide,
    blending: THREE.AdditiveBlending,
    transparent: true,
    fog: true,

    uniforms: THREE.UniformsUtils.merge([
      THREE.UniformsLib[ "fog" ],
      {
        "c":   { type: "f", value: 0 },
        "p":   { type: "f", value: 4.5 },
        glowColor: { type: "c", value: Node.defaults.glowColor },
        viewVector: { type: "v3", value: {x: 0, y: 0, z: 400} },
        fog: true
      },
    ]),

    fragmentShader: `
      uniform vec3 glowColor;
      varying float intensity;
      ${THREE.ShaderChunk[ "common" ]}
      ${THREE.ShaderChunk[ "fog_pars_fragment" ]}
      void main()
      {
        vec3 outgoingLight = vec3( 0.0 );
        vec3 glow = glowColor * intensity;
        ${THREE.ShaderChunk[ "fog_fragment" ]}
        gl_FragColor = vec4(glow, 1.0 );
      }
    `,

    vertexShader: `
      uniform vec3 viewVector;
      uniform float c;
      uniform float p;
      varying float intensity;
      void main()
      {
        vec3 vNormal = normalize( normalMatrix * normal );
        vec3 vNormel = normalize( normalMatrix * viewVector );
        intensity = pow( c - dot(vNormal, vNormel), p );

        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
      }
    `
  });
}

Answer 1

看看r70（你正在使用的）HERE的雾碎片，你会发现它正在向gl_FragColor施加雾。
在设置gl_FragColor之后将fog_fragment移动到应该使雾对着色器产生影响。

fragmentShader: '
  uniform vec3 glowColor;
  varying float intensity;
  ${THREE.ShaderChunk[ "common" ]}
  ${THREE.ShaderChunk[ "fog_pars_fragment" ]}
  void main()
  {
    vec3 outgoingLight = vec3( 0.0 );
    vec3 glow = glowColor * intensity;
    gl_FragColor = vec4(glow, 1.0 );
    ${THREE.ShaderChunk[ "fog_fragment" ]}
  }
',

自定义着色器不受Three.js中的雾影响

1 个答案: