Firefox 上的 WebGL 渲染 - 灯光效果比 Chrome 中显示的更暗

Question

我有一个场景，其中存在一盏灯和钻石。光属性：点光源，位置：0 0 30，强度：1，距离 60，颜色：白色。钻石 material 是 Phong，color:Red，无自发光，镜面反射：白色，光泽度 10。

在 Chrome 上，钻石会发光，但在 Firefox 上，钻石根本不发光，而且看起来很黑（就像上面有黑色的东西）。

我尝试在桌面 Windows 和 Android 移动 phone 上使用 Firefox。

请问我缺少什么？

以下是我的代码中的设置：

// Renderer: 
ren=new THREE.WebGLRenderer({ antialias:true,alpha:true });
ren.shadowMap.enabled=true;
elm.appendChild(ren.domElement); // the renderer is added to a DOM element "elm"

// Light
var o=new THREE.PointLight(0xffffff,1,60);
o.position.set(0,0,30);
o.name="sun"; // light will be later added to the scene, and use "update materials" flag to update the materials of the entire scene.

// The diamond's material: (I gave a new parameter "name", for later use. I guess it should not makes trouble to the engine....)
var mt=new THREE.MeshPhongMaterial({ name:"RedDiamond", transparent:true, opacity:0.85, fog:false, color:0xff0020, specular:0xffffff, shininess:10 });

实例可以看这里：https://www.crazygao.com/VideoGames/Lamps，从第一关开始（第一次加载可能需要一点时间，虽然开场还没有完成）。即使在进度场景中（有闪光灯）也可以看到光线差异问题

我的问题：我应该怎么做才能让钻石在Firefox中闪闪发光，但又不会让整个场景在Chrome中太亮？（我尝试在场景中添加环境光，然后在 Chrome 中它变得太亮了....）

问题出在我的设置上，还是Firefox的特性？我可以采取哪些最佳步骤来解决此问题？

非常感谢

Answer 1

我的猜测是您错过了 webgl canvas 与它后面的 HTML 的合成。默认情况下，浏览器期望 canvas 中的像素值表示预乘的 alpha 值。这意味着有很多可能的无效颜色

示例 RGBA = 1,1,1,0

这是一种无效的颜色，因为 alpha = 0 并且乘以 0 = 0，那么 R、G 和 B 也必须为零

当值为无效时，结果未定义，因此您会在不同的浏览器上得到不同的结果

.

Firefox 上的 WebGL 渲染 - 灯光效果比 Chrome 中显示的更暗

WebGL rendering on Firefox - Light effects show darker than in Chrome

firefox

light

webgl