我目前正在一个个人项目中,使用程序方法来生成一个行星。问题是我正在尝试使用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);
}
THREE.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检查器的台式机和移动版控制台中均没有错误/警告消息。如前所示,对于移动设备而言,发光似乎是纯白色,而对于台式机来说,基于顶点着色器中点积值的材质的强度/颜色/透明性起作用。