Recently, I incorporated a radiant glow effect into a 3D aircraft tracker:
https://i.sstatic.net/9SnSv.jpg
The brilliance is generated through the implementation of a THREE.ShaderMaterial
. Strangely, the glow effect seems to function properly on certain PCs but remains invisible on others without any error messages. After conducting tests on multiple machines and operating systems, it appears that the issue may be hardware-related rather than related to the OS.
Below is an excerpt of the code responsible for the dazzling glow
effect:
private _createGlow(radius: number, segments: number) {
let material = new THREE.ShaderMaterial({
uniforms: {
"c": { type: "f", value: 0.01 },
"p": { type: "f", value: 6 },
glowColor: { type: "c", value: new THREE.Color(0x002296) },
viewVector: { type: "v3", value: this._camera.position }
},
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 );
}`,
fragmentShader: `
uniform vec3 glowColor;
varying float intensity;
void main()
{
vec3 glow = glowColor * intensity;
gl_FragColor = vec4( glow, 1.0 );
}`,
side: THREE.FrontSide,
blending: THREE.AdditiveBlending,
transparent: true
});
let geometry = new THREE.SphereGeometry(radius, segments, segments);
let mesh = new THREE.Mesh(geometry, material);
mesh.scale.multiplyScalar(1.2);
return mesh;
}
The setup of the scene involves the following lines of code:
this._scene = new THREE.Scene();
this._scene.add(this._universe);
this._scene.add(this._glow);
this._scene.add(this._atmosphere1);
this._scene.add(this._atmosphere2);
this._scene.add(this._earth);
this._scene.add(this._light);
this._scene.add(new THREE.AmbientLight(0x333333, 0.9));
Could this discrepancy in rendering the effect be attributed to GPU drivers or similar issues? Any suggestions on how to rectify this problem would be greatly appreciated. Thank you!