OpenGLとWebGLのアルファレンダリングの違い

Question

同じシーンを同じ正確なC++コードでレンダリングしています.WindowsではネイティブOpenGLに、EmscriptenからWebGLを使用しています。シーン内のすべては、アルファ！= 1.0で何かをレンダリングしている場合を除いて、まったく同じように見えます。違いは次のようになります。

青キューブカラーキューブを描画するために使用されたシェーダが色を描く除いて何もしない(0.0, 0.0, 1.0, 0.5)
です。
右はOpenGLでどのように見えているのか、期待される結果です。半透明の半透明です。左側はEmscripten + WebGLの外観です。これは、レンダリングされる色は、実際にあるように見える(0.5, 0.5, 1.0, 0.5)私が使用したブレンド機能が標準である

：WebGLのアルファとの違いのいくつかの種類が

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); 

ありますか？おそらくこれが起こる原因は何ですか？

Answer 1

キャンバスを非公式に設定しましたか？

gl = someCanvas.getContext("webgl", { premultipliedAlpha: false }); 

WebGLのデフォルトはtrueです。ほとんどのOpenGLアプリケーションのデフォルトはfalseです

これ以外にも、WebGLは他のページと合成されています。少なくとも、それはキャンバスの背景色か、それが内部にあるもの（文書の本体）です。

これが問題紫や

<canvas ... style="background-color: #F0F;"></canvas> 

またはCSSで

canvas { background-color: #F0F; } 

を固執するのOpenGLアプリケーションはほとんどどこのものの上に合成されていない何かにあなたのキャンバスの背景色を設定してみてくださいであるかどうかを確認するためにWebGLアプリケーションが効果的に合成されるためです。あなたがあなたの目的地でのアルファを必要としない場合は今すぐアルファは効果的に1

になります

いくつかのソリューション

• オフにアルファ

  あなたはオフ

  gl = someCanvas.getContext("webgl", { alpha: false }); 
  

  それを回すことができます

• フレームの最後にアルファを1に設定します。

  // clear only the alpha channel to 1 
  gl.clearColor(1, 1, 1, 1); 
  gl.colorMask(false, false, false, true); 
  gl.clear(gl.COLOR_BUFFER_BIT); 
  

  あなたは色バッファをクリアする が必要な場合は戻って、すべての真にマスクの色を設定することを忘れないでください、後で

• 黒

  canvas { background-color: #000; } 
  

にキャンバスの背景色を設定します。

可能であれば、私はアルファをオフにすることを選択します。alphaがoffに設定されている場合、キャンバスをブラウザに描画するときにブラウザがブレンドをオフにすることができます。これは、GPUに応じて速度が10〜20％またはそれ以上増加する可能性があります。どのブラウザでも最適化が行われているという保証はありませんが、他の2つのソリューションでは可能ではない、またははるかに少ない可能性があります。