Rendu WebGL sur Firefox - Les effets de lumière sont plus sombres que dans Chrome

Question

J'ai une scène où il y a une lumière et des diamants. Propriétés de la lumière: Lumière ponctuelle, position: 0 0 30, Intensité: 1, distance 60, Couleur: Blanc. Le matériel de diamants est Phong, couleur: rouge, non émissive, spéculaires: Blanc, shininess 10.

Sur Chrome, le diamons brillera supposer, mais sur Firefox les diamants brillent pas du tout, et semble très sombre (comme avoir quelque chose de noir dessus).

J'ai essayé d'utiliser à la fois Firefox sur le bureau Windows et le téléphone mobile Android.

Je voudrais demander à savoir ce qu'il manque?

Voici les paramètres de mon 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 }); 

exemple en direct peut voir ici: https://www.crazygao.com/VideoGames/Lamps, depuis le premier niveau (chargement peut prend un peu de temps seulement pour la première fois, la scène d'ouverture bien est encore une incomplet). Le problème de différence d'éclairage peut être vu même dans la scène de progrès (avec le flash un)

Ma question: Que dois-je faire pour que les diamants brillent dans Firefox, mais ne pas rendre toute la scène trop lumineuse dans Chrome? (J'ai essayé d'ajouter de la lumière ambiante à la scène, puis dans Chrome, il devient trop lumineux ....)

Le problème provient-il de mes paramètres, ou est-ce la nature de Firefox? Quelles sont les meilleures mesures que je puisse prendre pour résoudre ce problème?

Merci beaucoup

Answer 1

Je pense que vous manque que la toile de WebGL est composé avec le code HTML derrière elle. Par défaut, le navigateur s'attend à ce que les valeurs des pixels dans le canevas représentent des valeurs alpha prémultipliées. Cela signifie qu'il ya beaucoup de possibles couleurs invalides

Exemple RGBA = 1,1,1,0

C'est une couleur invalide parce que depuis alpha = 0 et en multipliant par 0 = 0 alors R, G, B et doivent également être zéro

Lorsque les valeurs sont invalides les résultats ne sont pas définis et que vous obtiendrez des résultats différents sur les différents navigateurs

This answers covers some of the solutions.