WebGL Transform Feedback Varying: 頂点属性キャプチャの詳細

Transform Feedbackは、頂点シェーダーの出力をキャプチャし、その後のレンダリングパスの入力として使用できる強力なWebGL機能です。この技術は、高度なレンダリングエフェクトやジオメトリ処理タスクをGPU上で直接行うための扉を開きます。Transform Feedbackの重要な側面の1つは、どの頂点属性をキャプチャするかを指定する方法を理解することです。これは「varying」と呼ばれています。このガイドでは、varyingを使用した頂点属性キャプチャに焦点を当てた、WebGL Transform Feedbackの包括的な概要を提供します。

Transform Feedbackとは？

従来、WebGLレンダリングでは、頂点データをGPUに送信し、頂点およびフラグメントシェーダーで処理し、結果のピクセルを画面に表示します。クリッピングと透視除算後の頂点シェーダーの出力は、通常破棄されます。Transform Feedbackは、これらの頂点シェーダー後の結果をインターセプトしてバッファオブジェクトに保存できるようにすることで、このパラダイムを変更します。

粒子物理学をシミュレートしたいシナリオを想像してみてください。各フレームで、CPU上で粒子の位置を更新し、更新されたデータをレンダリングのためにGPUに送り返すことができます。Transform Feedbackは、GPUで物理計算（頂点シェーダーを使用）を実行し、更新された粒子の位置をバッファに直接キャプチャして、次のフレームのレンダリングに備えることで、より効率的なアプローチを提供します。これにより、CPUのオーバーヘッドが削減され、特に複雑なシミュレーションの場合にパフォーマンスが向上します。

Transform Feedbackの重要な概念

• 頂点シェーダー： Transform Feedbackの中核。頂点シェーダーは、結果がキャプチャされる計算を実行します。
• Varying変数： キャプチャする頂点シェーダーからの出力変数です。これらの変数は、どの頂点属性をバッファオブジェクトに書き戻すかを定義します。
• バッファオブジェクト： キャプチャされた頂点属性が書き込まれるストレージ。これらのバッファはTransform Feedbackオブジェクトにバインドされます。
• Transform Feedbackオブジェクト： 頂点属性をキャプチャするプロセスを管理するWebGLオブジェクト。ターゲットバッファとvarying変数を定義します。
• プリミティブモード： 頂点シェーダーによって生成されるプリミティブの種類（点、線、三角形）を指定します。これは、正しいバッファレイアウトのために重要です。

WebGLでのTransform Feedbackの設定

Transform Feedbackを使用するプロセスには、いくつかの手順が含まれます。

1. Transform Feedbackオブジェクトの作成と設定：

   gl.createTransformFeedback()を使用してTransform Feedbackオブジェクトを作成します。次に、gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback)を使用してバインドします。

2. バッファオブジェクトの作成とバインド：

   gl.createBuffer()を使用して、キャプチャされた頂点属性を格納するバッファオブジェクトを作成します。gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, index, buffer)を使用して、各バッファオブジェクトをgl.TRANSFORM_FEEDBACK_BUFFERターゲットにバインドします。`index`は、シェーダープログラムで指定されたvarying変数の順序に対応します。

3. Varying変数の指定：

   これは重要なステップです。シェーダープログラムをリンクする前に、頂点シェーダーからのどの出力変数（varying変数）をキャプチャする必要があるかをWebGLに伝える必要があります。gl.transformFeedbackVaryings(program, varyings, bufferMode)を使用します。

   • program：シェーダープログラムオブジェクト。
   • varyings：文字列の配列で、各文字列は頂点シェーダーのvarying変数の名前です。これらの変数の順序は、バッファバインディングインデックスを決定するため重要です。
   • bufferMode：varying変数をバッファオブジェクトに書き込む方法を指定します。一般的なオプションは、gl.SEPARATE_ATTRIBS（各varyingは個別のバッファに書き込まれる）とgl.INTERLEAVED_ATTRIBS（すべてのvarying変数が1つのバッファにインターリーブされる）です。
4. シェーダーの作成とコンパイル：

   頂点シェーダーとフラグメントシェーダーを作成します。頂点シェーダーは、キャプチャするvarying変数を必ず出力する必要があります。フラグメントシェーダーは、アプリケーションによっては必要ない場合があります。デバッグに役立つ場合があります。

5. シェーダープログラムのリンク：

   gl.linkProgram(program)を使用してシェーダープログラムをリンクします。プログラムをリンクする*前に*gl.transformFeedbackVaryings()を呼び出すことが重要です。

6. Transform Feedbackの開始と終了：

   頂点属性のキャプチャを開始するには、gl.beginTransformFeedback(primitiveMode)を呼び出します。ここで、primitiveModeは、生成されるプリミティブの種類（例：gl.POINTS、gl.LINES、gl.TRIANGLES）を指定します。レンダリング後、gl.endTransformFeedback()を呼び出してキャプチャを停止します。

7. ジオメトリを描画する：

   gl.drawArrays()またはgl.drawElements()を使用して、ジオメトリをレンダリングします。頂点シェーダーが実行され、指定されたvarying変数がバッファオブジェクトにキャプチャされます。

例：粒子の位置のキャプチャ

粒子の位置をキャプチャする簡単な例を使用して、これを説明しましょう。速度と重力に基づいて粒子の位置を更新する頂点シェーダーがあるとします。

頂点シェーダー（particle.vert）

#version 300 es

in vec3 a_position;

in vec3 a_velocity;

uniform float u_timeStep;

out vec3 v_position;

out vec3 v_velocity;

void main() {
 vec3 gravity = vec3(0.0, -9.8, 0.0);
 v_velocity = a_velocity + gravity * u_timeStep;
 v_position = a_position + v_velocity * u_timeStep;

 gl_Position = vec4(v_position, 1.0);
}

この頂点シェーダーは、a_positionとa_velocityを入力属性として受け取ります。各粒子の新しい速度と位置を計算し、結果をv_positionとv_velocityのvarying変数に格納します。`gl_Position`はレンダリング用に新しい位置に設定されます。

JavaScriptコード

// ... WebGLコンテキストの初期化...

// 1. Transform Feedbackオブジェクトを作成する
const transformFeedback = gl.createTransformFeedback();
gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback);

// 2. 位置と速度のバッファオブジェクトを作成する
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, particlePositions, gl.DYNAMIC_COPY); // 初期粒子の位置

const velocityBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, velocityBuffer);
gl.bufferData(gl.ARRAY_BUFFER, particleVelocities, gl.DYNAMIC_COPY); // 初期粒子の速度

// 3. Varying変数を指定する
const varyings = ['v_position', 'v_velocity'];
gl.transformFeedbackVaryings(program, varyings, gl.SEPARATE_ATTRIBS);  // プログラムをリンクする*前に*呼び出す必要があります。

// 4. シェーダーを作成してコンパイルする（簡潔にするために省略）
// ...

// 5. シェーダープログラムをリンクする
gl.linkProgram(program);

// Transform Feedbackバッファをバインドする
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, positionBuffer);  // v_positionのインデックス0
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 1, velocityBuffer);  // v_velocityのインデックス1

// 属性の場所を取得する
const positionLocation = gl.getAttribLocation(program, 'a_position');
const velocityLocation = gl.getAttribLocation(program, 'a_velocity');

// --- レンダリングループ ---
function render() {
 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

 gl.useProgram(program);

 // 属性を有効にする
 gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionLocation);

 gl.bindBuffer(gl.ARRAY_BUFFER, velocityBuffer);
gl.vertexAttribPointer(velocityLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(velocityLocation);

 // 6. Transform Feedbackを開始する
 gl.enable(gl.RASTERIZER_DISCARD); // ラスタライズを無効にする
gl.beginTransformFeedback(gl.POINTS);

 // 7. ジオメトリを描画する
 gl.drawArrays(gl.POINTS, 0, numParticles);

 // 8. Transform Feedbackを終了する
 gl.endTransformFeedback();
gl.disable(gl.RASTERIZER_DISCARD); // ラスタライズを再び有効にする

 // バッファを交換する（オプション、ポイントをレンダリングする場合）
 // たとえば、更新された位置バッファを再度レンダリングします。

 requestAnimationFrame(render);
}

render();

この例では、次のようになります。

• 粒子の位置と速度の2つのバッファオブジェクトを作成します。
• v_positionとv_velocityをvarying変数として指定します。
• 位置バッファをインデックス0、速度バッファをTransform Feedbackバッファのインデックス1にバインドします。
• 頂点属性データのみをキャプチャするため、gl.enable(gl.RASTERIZER_DISCARD)を使用してラスタライズを無効にします。このパスでは何もレンダリングしたくありません。これはパフォーマンスにとって重要です。
• gl.drawArrays(gl.POINTS, 0, numParticles)を呼び出して、各粒子で頂点シェーダーを実行します。
• 更新された粒子の位置と速度がバッファオブジェクトにキャプチャされます。
• Transform Feedbackパスの後、入力バッファと出力バッファを交換し、更新された位置に基づいて粒子をレンダリングできます。

Varying変数：詳細と考慮事項

gl.transformFeedbackVaryings()のvaryingsパラメータは、キャプチャする頂点シェーダーからの出力変数の名前を表す文字列の配列です。これらの変数は、次の条件を満たす必要があります。

• 頂点シェーダーでout変数として宣言されていること。
• 頂点シェーダー出力とバッファオブジェクトストレージの間で一致するデータ型を持っていること。たとえば、varying変数がvec3の場合、対応するバッファオブジェクトは、すべての頂点に対してvec3値を格納できる十分な大きさである必要があります。
• 正しい順序であること。varyings配列の順序は、バッファバインディングインデックスを決定します。最初のvaryingはバッファインデックス0に書き込まれ、2番目はインデックス1に書き込まれ、というように続きます。

データアライメントとバッファレイアウト

Transform Feedbackを正しく操作するには、データアライメントを理解することが不可欠です。バッファオブジェクトにキャプチャされた頂点属性のレイアウトは、gl.transformFeedbackVaryings()のbufferModeパラメータによって異なります。

• gl.SEPARATE_ATTRIBS： 各varying変数は、個別のバッファオブジェクトに書き込まれます。インデックス0にバインドされたバッファオブジェクトには、最初のvaryingのすべての値が含まれ、インデックス1にバインドされたバッファオブジェクトには、2番目のvaryingのすべての値が含まれます。このモードは、一般的に理解しやすく、デバッグが容易です。
• gl.INTERLEAVED_ATTRIBS： すべてのvarying変数は、1つのバッファオブジェクトにインターリーブされます。たとえば、v_position（vec3）とv_velocity（vec3）の2つのvarying変数がある場合、バッファには、vec3（位置）、vec3（速度）、vec3（位置）、vec3（速度）などのシーケンスが含まれます。このモードは、特定のユースケース、特にキャプチャされたデータがその後のレンダリングパスでインターリーブされた頂点属性として使用される場合に、より効率的です。

データ型のマッチング

頂点シェーダーのvarying変数のデータ型は、バッファオブジェクトのストレージ形式と互換性がある必要があります。たとえば、varying変数をout vec3 v_colorとして宣言した場合、すべての頂点に対してvec3値（通常、浮動小数点値）を格納するのに十分な大きさのバッファオブジェクトがあることを確認する必要があります。データ型の不一致は、予期しない結果やエラーにつながる可能性があります。

ラスタライザーの破棄の処理

頂点属性データのみをキャプチャするためにTransform Feedbackを使用する場合（最初のパスで何もレンダリングしない場合）、gl.beginTransformFeedback()を呼び出す前に、gl.enable(gl.RASTERIZER_DISCARD)を使用してラスタライズを無効にすることが重要です。これにより、GPUが不要なラスタライズ操作を実行するのを防ぎ、パフォーマンスを大幅に向上させることができます。後続のパスで何かをレンダリングする場合は、gl.endTransformFeedback()を呼び出した後、gl.disable(gl.RASTERIZER_DISCARD)を使用してラスタライズを再度有効にすることを忘れないでください。

Transform Feedbackのユースケース

Transform Feedbackは、WebGLレンダリングで多くのアプリケーションがあります。これには以下が含まれます。

• パーティクルシステム： 例で示したように、Transform Feedbackは、GPU上で直接粒子の位置、速度、およびその他の属性を更新するのに理想的であり、効率的な粒子シミュレーションを可能にします。
• ジオメトリ処理： Transform Feedbackを使用して、メッシュの変形、細分化、または簡素化などのジオメトリ変換をGPU上で完全に実行できます。アニメーションのためにキャラクターモデルを変形することを想像してください。
• 流体ダイナミクス： GPUでの流体シミュレーションは、Transform Feedbackで実現できます。流体粒子の位置と速度を更新し、別のレンダリングパスを使用して流体を視覚化します。
• 物理シミュレーション： より一般的には、頂点属性の更新が必要な物理シミュレーションは、Transform Feedbackの恩恵を受けることができます。これには、布のシミュレーション、剛体ダイナミクス、またはその他の物理ベースのエフェクトが含まれます。
• ポイントクラウド処理： ポイントクラウドから処理されたデータをキャプチャして、視覚化または分析を行います。これには、GPUでのフィルタリング、平滑化、または特徴抽出が含まれる場合があります。
• カスタム頂点属性： 他の頂点データに基づいて、法線ベクトルやテクスチャ座標などのカスタム頂点属性を計算します。これは、プロシージャル生成技術に役立つ場合があります。
• 遅延シェーディングのプリパス： 位置データと法線データをGバッファにキャプチャして、遅延シェーディングパイプラインに使用します。この技術により、より複雑なライティング計算が可能になります。

パフォーマンスに関する考慮事項

Transform Feedbackは大幅なパフォーマンス向上を提供する可能性がありますが、次の要素を考慮することが重要です。

• バッファオブジェクトのサイズ： バッファオブジェクトが、キャプチャされたすべての頂点属性を格納するのに十分な大きさであることを確認します。頂点の数とvarying変数のデータ型に基づいて、正しいサイズを割り当てます。
• データ転送のオーバーヘッド： CPUとGPU間の不要なデータ転送を避けます。Transform Feedbackを使用して、できるだけ多くの処理をGPUで実行します。
• ラスタライズの破棄： Transform Feedbackがデータのキャプチャのみに使用される場合は、gl.RASTERIZER_DISCARDを有効にします。
• シェーダーの複雑さ： 頂点シェーダーコードを最適化して、計算コストを最小限に抑えます。複雑なシェーダーは、特に多数の頂点を処理する場合、パフォーマンスに影響を与える可能性があります。
• バッファのスワッピング： ループでTransform Feedbackを使用する場合（たとえば、粒子シミュレーションの場合）、二重バッファリング（入力バッファと出力バッファの交換）を使用して、読み取り-書き込み後のハザードを回避することを検討してください。
• プリミティブタイプ： プリミティブタイプ（gl.POINTS、gl.LINES、gl.TRIANGLES）の選択は、パフォーマンスに影響を与える可能性があります。アプリケーションに最適なプリミティブタイプを選択してください。

Transform Feedbackのデバッグ

Transform Feedbackのデバッグは困難な場合がありますが、いくつかのヒントを以下に示します。

• エラーの確認： Transform Feedbackのセットアップの各ステップの後に、gl.getError()を使用してWebGLエラーを確認します。
• バッファサイズの確認： バッファオブジェクトが、キャプチャされたデータを格納するのに十分な大きさであることを確認します。
• バッファの内容を検査する： gl.getBufferSubData()を使用して、バッファオブジェクトの内容をCPUに読み戻し、キャプチャされたデータを検査します。これは、データアライメントまたはシェーダー計算の問題の特定に役立ちます。
• デバッガーを使用する： WebGLデバッガー（Spector.jsなど）を使用して、WebGLの状態とシェーダーの実行を検査します。これは、Transform Feedbackプロセスに関する貴重な洞察を提供できます。
• シェーダーを簡素化する： 最初のうちは、いくつかのvarying変数のみを出力する単純な頂点シェーダーから開始します。各ステップを確認しながら、徐々に複雑さを追加します。
• varyingの順序を確認する： varyings配列のvarying変数の順序が、頂点シェーダーとバッファバインディングインデックスで書き込まれる順序と一致していることを再確認してください。
• 最適化を無効にする： デバッグを容易にするために、シェーダーの最適化を一時的に無効にします。

互換性と拡張機能

Transform Feedbackは、WebGL 2およびOpenGL ES 3.0以降でサポートされています。WebGL 1では、OES_transform_feedback拡張機能が同様の機能を提供します。ただし、WebGL 2の実装はより効率的で、機能が豊富です。

拡張機能のサポートを確認するには、次を使用します。

const transformFeedbackExtension = gl.getExtension('OES_transform_feedback');
if (transformFeedbackExtension) {
 // 拡張機能を使用する
}

結論

WebGL Transform Feedbackは、GPU上で直接頂点属性データをキャプチャするための強力な技術です。varying変数、バッファオブジェクト、およびTransform Feedbackオブジェクトの概念を理解することにより、この機能を活用して、高度なレンダリングエフェクトを作成し、ジオメトリ処理タスクを実行し、WebGLアプリケーションを最適化できます。Transform Feedbackを実装する際には、データアライメント、バッファサイズ、およびパフォーマンスへの影響を注意深く検討してください。慎重な計画とデバッグにより、この貴重なWebGL機能の可能性を最大限に引き出すことができます。