Glow effect works on desktop but not on mobile

I’m currently working on a personal project to generate a planet using procedural methods. The problem is that I am trying to achieve a glow effect using glsl. The intended effect works for desktop but not for mobile.
The following link illustrate the problem:

The planet are composed as follows: Four IcosahedronBufferGeometry meshes composing earth, water, cloud and glow effect. I have tried disabling glow effect, then it works as intended for mobile. Therefore, the conclusion is that the problem lies within the glow effect.

Here are the code for the glow effect (fragment and vertex shader):

Vertex shader:

varying float intensity;

void main() {
  /* Calculates dot product of the view vector (cameraPosition) and the normal */
  /* High value exponent = less intense since dot product is always less than 1 */
  vec3 vNormal = vec3(modelMatrix * vec4(normal, 0.0));
  intensity = pow(0.2 - dot(normalize(cameraPosition), vNormal), 2.8);

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

Fragment Shader

varying float intensity;

void main() {
  vec3 glow = vec3(255.0/255.0, 255.0/255.0, 255.0/255.0) * intensity;
  gl_FragColor = vec4( glow, 1.0);

THREE.js Code

var glowMaterial, glowObj, glowUniforms, sUniforms;
sUniforms = sharedUniforms();

/* Uniforms */
glowUniforms = {
    lightPos: {
        type: sUniforms["lightPos"].type,
        value: sUniforms["lightPos"].value,

/* Material */
glowMaterial = new THREE.ShaderMaterial({
    uniforms: THREE.UniformsUtils.merge([
    vertexShader: glow_vert,
    fragmentShader: glow_frag,
    lights: true,
    side: THREE.FrontSide,
    blending: THREE.AdditiveBlending,
    transparent: true

/* Add object to scene */
glowObj = new THREE.Mesh(new THREE.IcosahedronBufferGeometry(35, 4), glowMaterial);

There are no error/warning messages in the console both for desktop and mobile using remote web inspector. As previously shown, it seems for mobile, the glow is plain white meanwhile for desktop, the intensity/color/opactiy of the material based on the value of the dot product in vertex shader works.


Any chances to provide a link to your application? Or a live demo that demonstrates the broken glow effect?

Hi Mugen87,

Here is a live-demo of the application:
Try accessing it on desktop and on mobile.


Yeah, I can see that the glow is missing on my Pixel 1 (tested with latest Chrome). Is it possible for you to extract the glow effect into a separate demo? Besides, please avoid to bundle/minify your code otherwise it’s not possible to debug.

Have you implement your GLSL code based on some sort of reference? Or is it your personal invention?

Have you considered to implement a bloom effect based on the following official post-processing demo? It’s a proper implementation inspired by the unreal engine’s bloom effect and it also runs on mobile devices.

BTW: Keep in mind that glow and bloom are often used as synonyms. Sometimes it’s also called light bleeding.

Here is a live demo of the glow:

The glow has been inspired by the following article:

No I have not, I figured since it is just a small part of my project (procedural methods being the main focus) then simply creating a mesh and modifying fragment/vertex shader would be enough.

The respective demo runs fine on my Pixel 1.

Seems to render fine on my LG V30 using chrome webview.

Hi Mike,

Weird, the intended effect is not visible on your LG V30. It is supposed to have a glowing effect wrapping around the planet but it is not visible there. See for reference.

Weird, I looked at the source code and tried to emulate it on my project and it still does not work (same vertex/fragment shader as well as mesh)