FirefoxでのWebGLレンダリング - 明るいエフェクトがChromeよりも暗く表示される

Question

光が1つ存在するシーンとダイヤモンドがあります。 ライトプロパティ： ポイントライト、位置：0 0 30、強度：1、距離60、色：白。 ダイヤモンドの材質はフォンです。色：赤、発光しない、鏡面：白、光沢10.

クロムでは、ダイヤモンドが輝きますが、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と合成されていることを逃しているということです。デフォルトでは、ブラウザは、キャンバス内のピクセルの値が事前に乗算されたアルファ値を表すことを期待しています。それは、多くの可能無効な色があることを意味

例RGBA = 1,1,1,0

無効な色です

のでアルファ= 0と0 = 0の場合、R、G、及びBを掛けるのでまた、値が無効な結果は定義されていませんので、あなたが別のブラウザ

This answers covers some of the solutionsに異なる結果を得ることができますされている場合はゼロ

でなければなりません。