「ハードウェアアクセラレーション」のキャンバス2D描画を可能にする気の利いたJavaScriptライブラリを見つけました：https ：//github.com/corbanbrook/webgl-2d
例を試してみたところ、最初のフレームは正常にレンダリングされましたが、最初のフレームの後、キャンバスは白になりました。
ここでフィドルを設定します：http：//jsfiddle.net/RaW5x/5/
これはリポジトリからの例であるため、ライブラリであると想定する必要があります。
1 に答える
4
簡単な答え：それは図書館のせいではないと思いますが、それは間違いなく図書館が解決すべき問題です。
具体的には、webgl-2dは、初期化中に--を使用してGLカラーマスクを設定gl.colorMask(1, 1, 1, 0)します。これにより、アルファチャネルへの書き込みがブロックされます。
さて、画面を白くするために何が起こっているのか完全にはわからないことを認めなければなりません。ブレンド関数は（src alpha、1マイナスsrc alpha）です。これは、書き出されるすべての色について、ソースアルファコンポーネントに従って背景色とブレンドされることを意味します。説明を簡単にするために、Redチャネルのみの式を次に示します。
Red = Rs * As + Rd * (1 - As)
...ここで、Rsはソース（新しい）Redチャネル、AsはソースAlphaチャネル、Rdは宛先（現在のバックグラウンド）Redチャネルです。
したがって、赤色を50（WebGLでは約0.196）と仮定すると、何が起こるかは次のようになります。
Red = 0.196 * 1 + 0.196 * (1 - 1) = 0.196
つまり、以前の色を新しい色に置き換える必要があります。
ソースチャネルがデスティネーションチャネルと等しい限り、1.0以外のアルファが含まれている場合でも、数値は少し変化しますが、結果は変化しません。
Red = 0.196 * 0.5 + 0.196 * (1 - 0.5) = 0.196
宛先の赤チャンネルが実際にソースチャンネルと異なる場合、結果は明らかに変化しますが、それでも、それがどのように白色に機能するかはわかりません。問題がブレンドのみに起因する場合、単一フレームでの白への「ジャンプ」ではなく、アルファチャネルの値に基づいて白への段階的なステップが予想されます。
数学的には、私には問題ないように見えます。ただし、アルファ書き込みを防ぐためにカラーマスクを設定することで、この問題を自分のWebGLフレームワーク（Jax）で再現できるため、ライブラリの完全な障害ではありません。私の推測では、これはあなたと私の（そして他の無数の）マシンのOpenGLドライバーのバグである可能性があります。
私はこの問題を調査し続け、何かを学ぶことができればこの答えを更新します。
とにかく、問題はwebgl-2dライブラリ内で解決できます。開発者にプルリクエストを送信しました。（参考までに、質問でリンクしたリポジトリは元のリポジトリからのフォークでした。現在のメンテナが誰であるかわからないため、プルリクエストを元のリポジトリに送信しました。）
プルリクエストが（うまくいけば）受け入れられるまで、または問題が解決されるまで、私はあなたがこれを行うことができると信じています：
ctxGL.colorMask(1, 1, 1, 1);
...レンダリングを行う前に、それはうまくいくはずです。
于 2012-07-12T23:45:58.960 に答える