I have implemented a custom shader to add glow to a sphere on my scene.
However, I noticed that the fog in the scene affects the sphere but not the glow. When I zoom out, the sphere disappears but the glow remains visible.
Is there a way to make the fog also affect the glow?
For reference, here is the complete scene on Codepen:
http://codepen.io/marjan-georgiev/pen/WrmPLY?editors=0010
Below is the code for my glow material:
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 );
}
`
});
}