2

WebGL でブレンディング モードを実行する方法を理解しようとしています。これまでは、ネイティブの HTML5 Canvas 描画関数を使用していました。たとえば、次のようなことができます。

var ctx = new Document.getElementById('canvas').getContext('2d');
ctx.globalCompositeOperation = 'lighter'

現在、パフォーマンス上の理由から、これを WebGL に移植しようとしています。ただし、WebGL でブレンド モードに影響を与える方法を理解するのに苦労しています。私が理解しているように、頂点シェーダーは、異なるテクスチャ/ポリゴンのどの部分が表示されるかを決定し、次に、これらのテクスチャ/ポリゴンの表示部分の各ピクセルに対してフラグメント シェーダーが呼び出されます。ただし、より明るい (下にある色と新しい上にある色の各コンポーネントの高い方を使用する) などのブレンド モードがある場合、この場合の頂点シェーダーとフラグメント シェーダーの役割について混乱します。 .

さらに、現在 WebGL での描画に使用している Pixi.js ライブラリでは、すべてのオブジェクトがフレーム バッファーに描画された後、つまり、すべてのオブジェクトが配置された後にのみ、頂点シェーダーとフラグメント シェーダーが呼び出されると考えています。(このライブラリが使用するシェーダーは、ここで見つけることができます)

誰かが WebGL でブレンディング モードを適切に使用する方法を説明できますか?

4

1 に答える 1

2

頂点シェーダーはすべての頂点を描画空間に配置し、必要に応じて特定の可変変数をフラグメント シェーダーに渡します。

フラグメント シェーダーは、ピクセル/フラグメントの最終的な色に関するすべての計算が行われる場所です。

では、ブレンドはどこで行われるのでしょうか。

シーンをレンダリングするとき、最終的なカラー バッファー(フレーム バッファー) と深度バッファー(レンダー バッファー) があります。カラー バッファーは、画面上の (x,y) 位置にあるフラグメントの RGBA 値を保持し、深度バッファーは、同じフラグメントの深度値を保持します。

ブレンディングがアクティブでない場合、一部のフラグメントが同じ (x,y) 位置にある場合、最初に深度コンポーネントが比較され (現在のピクセルと深度バッファーからのピクセル)、現在レンダリングされているフラグメントがカメラに近い場合、その色は次のようになります。カラーバッファにすでに書き込まれているものを上書きします。そうしないと、両方のバッファがそのまま残ります。

ブレンディングがオンの場合、カラー バッファの一部が何らかの方法で変更され、どのように変更されるかは、ブレンディングに使用される式によって異なります。使用できるさまざまなブレンド モードと数式が多数あります。必要に応じて調整するだけです。

便利なリンク:

お役に立てれば。

于 2013-09-02T18:10:06.040 に答える