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

Question

我有一个场景，其中存在一盏灯和钻石。 光属性： 点光源，位置：0 0 30，强度：1，距离60，颜色：白色。 钻石材质为Phong，颜色：红色，不发光，镜面：白色，光泽度10。

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

我曾尝试在桌面 Windows 和 Android 手机上同时使用 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 画布与它背后的 HTML 的合成。默认情况下，浏览器期望画布中的像素值代表预乘的 alpha 值。这意味着有许多可能的无效颜色

示例 RGBA = 1,1,1,0

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

当值是无效时，结果是不确定的，所以你会在不同的浏览器上得到不同的结果

This answers covers some of the solutions.