複数の32ビット値を保存するWebGLシェーダ

Question

各WebGLフラグメントシェーダ呼び出し（最大OES_texture_floatまたはOES_texture_half_float拡張が利用可能な場合を含む）で32ビット値を8個まで保存する必要があります。私は4x8bits RGBA gl_FragColorに1つの32ビット値を格納することしかできないようです。 8つの値を格納する方法はありますか？

Answer 1

フラグメントシェーダで1コールにつき1つ以上のvec4分のデータを描画する唯一の方法は、WEBGL_draw_buffersを使用することです。これにより、複数のカラー添付をフレームバッファにバインドしてから、1つのフラグメントシェーダコールWEBGL_draw_buffersが利用できない場合

gl_FragData[constAttachmentIndex] = result; 

唯一の回避策は、複数の描画呼び出しで

1. レンダリングは、私が考えることができるされています。

   gl.drawArraysを呼び出して最初のvec4をレンダリングし、次に別のパラメータまたは別のシェーダでもう一度レンダリングしてvec4をレンダリングします。

2. 各ピクセルの出力を変更するgl_FragCoordに基づいてレンダリングします。換言すれば

   、第1画素は第vec4を取得し、第2の画素は、第vec4を取得し、等たとえば

   float mode = mod(gl_Fragcoord.x, 2.); 
   gl_FragColor = mix(result1, result2, mode); 
   

   結果が1に本

   1212121212 
   1212121212 
   1212121212 
   

   ように格納されている。このようにテクスチャあなたができるvec4s詳細はこの

   float mode = mod(gl_Fragcoord.x, 4.); // 4 vec4s 
   if (mode < 0.5) { 
       gl_FragColor = result1; 
   } else if (mode < 1.5) { 
       gl_FragColor = result2; 
   } else if (mode < 2.5) { 
       gl_FragColor = result3; 
   } else { 
       gl_FragColor = result4; 
   } 
   

   これは、またはメソッド＃1よりも高速であってもなくてもよいです。シェーダーは、result1とresult2の両方の計算をピクセル単位で行う可能性があるため、複雑になりますが、GPUやパイプラインによっては、その一部を無料で入手できるかもしれません。あなたは基本的には上記3つのいずれかの方法を使用して、さらに8ビット値を書き出すために必要があるとしている何OES_texture_floatがない場合でも、32ビットの値を取得するためとして

。

WebGL2の描画バッファでは、WebGL1ではオプションであるため、必要な機能です。 WebGL2には、頂点シェーダ（バリエーション）の出力をバッファに書き込む変換フィードバックもあります。