Firefox上的WebGL渲染 - 灯光效果比Chrome更暗 [英] WebGL rendering on Firefox - Light effects show darker than in Chrome

问题描述

我有一个场景，那里有一盏灯，还有钻石。
光源属性：
点光源，位置：0 0 30，亮度：1，距离60，颜色：白色。
钻石的材料是Phong，颜色：红色，没有发光，镜面：白色，光泽10.

在Chrome浏览器上，diamons闪耀着，在Firefox上，钻石不会闪耀，而且看起来很暗（就像黑色的东西一样）。

我试图在桌面Windows和Android手机上同时使用Firefox手机。

我想问一下我错过了什么？

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

  // Renderer ：
 ren = new THREE.WebGLRenderer（{antialias：true，alpha：true}）; 
 ren.shadowMap.enabled = true; 
 elm.appendChild（ren.domElement）; //将渲染器添加到DOM元素elm
 
 // Light 
 var o = new THREE.PointLight（0xffffff，1,60）; 
 o.position.set（0,0,30）; 
 o.name =sun; //灯光稍后会添加到场景中，并使用更新素材标志来更新整个场景的素材。 
 
 //钻石的材质:(我给了一个新的参数name，供以后使用，我想这不应该对引擎造成麻烦....）
 var mt =新的THREE.MeshPhongMaterial（{名称：RedDiamond，透明：真，不透明度：0.85，雾：假，颜色：0xff0020，镜面：0xffffff，闪亮度：10}）; 
  

现场示例可以在这里看到： https://www.crazygao.com/VideoGames/Lamps ，因为第一级（加载可能只需要一点时间，但是开场景虽然是尚未完成）。即使在进度场景中也可以看到照明差异问题（使用闪光灯）

我的问题：我应该怎么做钻石闪耀在火狐浏览器，但不是让整个场景过于明朗的铬？ （我尝试在场景中添加环境光线，然后在Chrome中变得太亮......）

是问题来自我的设置，还是性质Firefox的？我可以采取什么最好的措施来解决这个问题？

非常感谢

解决方案

我的猜测是，错过了webgl画布与其背后的HTML组合。默认情况下，浏览器需要画布中像素的值代表预乘alpha值。这意味着有很多可能的无效的颜色

示例RGBA = 1,1,1,0

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

结果是未定义的，所以你会得到不同的结果在不同的浏览器

这个答案涵盖了一些解决方案。

I have a scene where one light is present, and diamonds. Light properties: Point light, position: 0 0 30, intensity: 1, distance 60, color: White. The diamonds material is Phong, color:Red, no emissive, specular: White, shininess 10.

On Chrome, the diamons shine as suppose to, but on Firefox the diamonds not shine at all, and looks very dark (like have something black on it).

I have tried to use both Firefox on desktop Windows and Android mobile phone.

I would like to ask what I am missing?

Below are the settings in my code:

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

Live example can see here: https://www.crazygao.com/VideoGames/Lamps, since the first level (loading may takes a bit time only for the first time, the opening scene though is yet not complete). The lighting difference issue can be seen even in the progress scene (with the flash one)

My question: What should I do to make the diamonds shine in Firefox, but not make the entire scene too bright in Chrome? (I tried adding Ambient light to the scene, then in Chrome it becomes too bright....)

Is the problem comes from my settings, or it is the nature of Firefox? What are the best steps I can take to solve this issue?

Thanks a lot

解决方案

My guess is that you're missing that the webgl canvas is composited with the HTML behind it. By default the browser expects the values of the pixels in the canvas to represent premultiplied alpha values. That means there are many possible invalid colors

Example RGBA = 1,1,1,0

That's an invalid color because since alpha = 0 and multiplying by 0 = 0 then R, G, and B also have to be zero

When the values are invalid the results are undefined and so you'll get different results on different browsers

This answers covers some of the solutions.

这篇关于Firefox上的WebGL渲染 - 灯光效果比Chrome更暗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！