发光效果着色器可在台式机上使用,但不能在移动设备上使用

时间:2019-08-07 11:37:28

标签: three.js glsl fragment-shader vertex-shader

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

0 个答案:

没有答案