three.js - 发光效果着色器适用于桌面，但不适用于移动设备

Question

我目前正在从事一个个人项目，以使用程序方法生成一个行星。问题是我正在尝试使用 glsl 实现发光效果。预期效果适用于桌面，但不适用于移动设备。以下链接说明了问题：

预期效果

iPhone6S结果

行星组成如下：四个IcosahedronBufferGeometry网格组成地球、水、云和发光效果。我尝试禁用发光效果，然后它可以按预期用于移动设备。因此，结论是问题出在辉光效应上。

以下是发光效果的代码（片段和顶点着色器）：

顶点着色器：

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 );
}

片段着色器

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);
}

三.js 代码

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([
        THREE.UniformsLib["ambient"],
        THREE.UniformsLib["lights"],
        glowUniforms
    ]),
    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);
scene.add(glowObj);

使用远程 Web 检查器的台式机和移动设备的控制台中都没有错误/警告消息。如前所述，对于移动设备来说，发光是纯白色的，而对于桌面设备，材料的强度/颜色/不透明度基于顶点着色器中的点积值起作用。

标签： three.jsglslfragment-shadervertex-shader