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

Question

我有一个球，可以通过自定义着色器向其添加光晕。

我的场景上有雾，这会影响球体，但不会影响发光（当我缩小球体时，雾会消失，但发光会保持）。

如何使雾影响光晕？

这是整个场景的codepen：

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的雾化片段（正在使用），您将看到它正在对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" ]}
  }
',