フラグメントシェーダの読み込みと書き込みのテクスチャを設定するにはどうすればよいですか？

Question

私はWebGLのnoobです。このチュートリアルを読むことによってWebGLテクスチャの仕組みを理解しようとしています：WebGL Image Processing Continued

別exampleは、入力テクスチャユニット0と明示1の両方にuniform Sを設定することにより、2つのテクスチャを使用している同じチュートリアルセリエであり：

// set which texture units to render with. 
gl.uniform1i(u_image0Location, 0); // texture unit 0 
gl.uniform1i(u_image1Location, 1); // texture unit 1 

しかし、最初の例では、フラグメントシェーダであります入力テクスチャ用sampler2D u_imageを使用して、私はそこにコードでのようなものでなければなら期待：

gl.uniform1i(gl.getUniformLocation(program, "u_image"), 0); 

...しかし、私はそれを見つけることができません。 これはどのように機能しますか？ちょうど推測：テクスチャユニット0は、すべてのWebGLプログラムのすべての2Dサンプラのデフォルトとして使用されていますか？次に、2番目の例ではgl.uniform1i(u_image0Location, 0);が必要ですか？

EDIT：

これまでのところ、私は上記のチュートリアルから理解して持っているもの - 私が間違っている場合は、単に私を修正：

：

はテクスチャを使用するには少なくとも2つの方法があります

1. 入力テクスチャ、ここでは から読み取ることができます。フラグメントシェーダに位置（つまり「u_image」）を渡す必要があります
2. 出力テクスチャ、ここに書き込むことができます - thisテクスチャが現在

（テクスチャユニット0に、上記のチュートリアルで）バインドされている私は完全にu_image均一が設定され、しかもコードで「そこにISNされていないため、この例では、どのように動作するかを理解することはできませんよトン任意のgl.activeTexture()コール

EDIT 2：

Rabbid76のおかげで、私はそのquestionにgmanのコメント（上記のチュートリアルの著者）in this answerのさらなる明確化を発見したと信じて：

フレームバッファが必要です。テクスチャをフレームバッファに添付して をフレームバッファにバインドすると、シェーダは テクスチャに書き込みます。私から読み取ることができる

Answer 1

1. 入力テクスチャ、 - ここでは、フラグメントシェーダに位置（すなわち、 "u_image"）を渡す必要が

はい、テクスチャとすることができますこの方法で使用されます。

フラグメントシェーダで異なるテクスチャを使用する場合は、異なるテクスチャユニットにテクスチャをバインドする必要があります。そして、テクスチャユニットのインデックスをテクスチャサンプラーの一様変数に設定する必要があります。

テクスチャがバインドされているテクスチャユニットは、WebGLRenderingContext.activeTexture()によって設定することができる。

var textureObj = gl.createTexture(); 
..... 

var texUnit = 0; // texture unit 0 in this example 
gl.activeTexture(gl.TEXTURE0 + texUnit); 
gl.bindTexture(gl.TEXTURE_2D, textureObj); 

プログラムがリンクされた後（linkProgram）、テクスチャサンプラ均一の位置を検索することができる。

u_image0Location = gl.getUniformLocation(program, "u_image"); 

プログラムがACTIVプログラム（useProgram）になった後、テクスチャサンプラ均一に設定することができる。

gl.uniform1i(u_image0Location, texUnit); 

私は書き込むことができ

出力テクスチャ、 - これは、現在結合テクスチャである（上記のチュートリアルにおいて、テクスチャユニット0）

いいえ、完全に間違っています。出力テクスチャのようなものはなく、テクスチャユニット0にバインドされているテクスチャは出力テクスチャではありません。

フラグメントシェーダーでは、gl_FragColorに書き込みます。 gl_FragColorに書き込む色は、フレームバッファのフラグメント位置に格納されます。

あなたはテクスチャへの書き込みをワットあれば、あなたはWebGLRenderingContext.framebufferTexture2D()によってフレームバッファにテクスチャを添付する必要があります：あなたは（gl.bindTexture）を結合して、指定

var vp_w, vp_h; // withd and height of the viewport 

var fbTexObj = gl.createTexture(); 
gl.bindTexture(gl.TEXTURE_2D, fbTexObj); 
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, vp_w, vp_h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 
..... 

var fbo = gl.createFramebuffer(); 
gl.bindFramebuffer(gl.FRAMEBUFFER, fbo); 

gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, fbTexObj, 0); 

注、（gl.texImage2D）fbTexObj任意のテクスチャユニットをアクティブにすることができます。