canvas - HTML5 キャンバスを WebGL テクスチャとして使用する方法

Question

したい：

1. ケース i の均一値を設定します。
2. ケース i の計算シェーダーを HTML5<canvas>タグにレンダリングします。
3. <canvas>次のレンダー パスでコンテンツ (レンダリング出力の場合) をテクスチャとして使用します。
4. すべてのケースで繰り返します。
5. カラーデータから答えをJSに抽出します。

計算シェーダーを作成しようとしていますが、各レンダー パスでピクセル (フラグメント) ごとに値を運ぶ必要があります。簡単な例は、各レンダー呼び出しでピクセルの青の値をインクリメントすることです。

いえ

pass 1: b=1
pass 2: b=2
pass 2: b=3
etc.

1. この種のシェーダー ループは可能ですか?

2. マルチパス処理 (標準のシェーダー内マルチパス処理とは異なり、パス間で均一な値を変更する必要がある場合) のためにビデオ メモリに「キャリー」テクスチャを保持するより良い方法はありますか?

Answer 1

短い答えは、あなたができないということです

現在、キャンバスにテクスチャとしてアクセスすることはできません。その他の解決策

1. キャンバスをテクスチャにコピーする

   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, gl.canvas);
   

   キャンバスの現在の内容をテクスチャにコピーします。

2. フレームバッファにアタッチして、独自のテクスチャにレンダリングします。

   この場合、フレーム バッファへのアタッチメントとして設定されたテクスチャにレンダリングしてから、そのテクスチャをキャンバスにレンダリングします (計算だけでなく、結果を確認したい場合)。こことここに例があります。