Webgl-graphics-pipeline
WebGL-グラフィックパイプライン
3Dグラフィックスをレンダリングするには、一連の手順に従う必要があります。 これらのステップは*グラフィックスパイプライン*または*レンダリングパイプライン*と呼ばれます。 次の図は、WebGLグラフィックパイプラインを示しています。
次のセクションでは、パイプラインの各ステップの役割を1つずつ説明します。
JavaScript
WebGLアプリケーションの開発中に、GPUと通信するシェーダー言語コードを作成します。 JavaScriptは、次のアクションを含むプログラムの制御コードを記述するために使用されます-
- * WebGLの初期化*-JavaScriptを使用してWebGLコンテキストを初期化します。
- 配列の作成-ジオメトリのデータを保持するJavaScript配列を作成します。
- バッファオブジェクト-配列をパラメータとして渡すことにより、バッファオブジェクト（頂点とインデックス）を作成します。
- シェーダー-JavaScriptを使用してシェーダーを作成、コンパイル、リンクします。
- 属性-属性を作成し、有効にし、JavaScriptを使用してバッファオブジェクトに関連付けることができます。
- ユニフォーム-JavaScriptを使用してユニフォームを関連付けることもできます。
- 変換マトリックス-JavaScriptを使用して、変換マトリックスを作成できます。
最初に、必要なジオメトリのデータを作成し、バッファーの形でシェーダーに渡します。 シェーダー言語の属性変数は、頂点シェーダーへの入力として渡されるバッファーオブジェクトを指します。
頂点シェーダー
メソッド* drawElements（）および drawArray（）を呼び出してレンダリングプロセスを開始すると、頂点バッファーオブジェクトで提供される各頂点に対して頂点シェーダーが実行されます。 プリミティブポリゴンの各頂点の位置を計算し、さまざまな *gl_position に格納します。 また、通常は頂点に関連付けられている*色、テクスチャ座標*、*頂点*などの他の属性も計算します。
プリミティブアセンブリ
各頂点の位置とその他の詳細を計算した後、次のフェーズは*プリミティブアセンブリステージ*です。 ここで三角形が組み立てられ、ラスタライザに渡されます。
ラスタライズ
ラスタライズのステップでは、プリミティブの最終画像のピクセルが決定されます。 それには2つのステップがあります-
- カリング-最初に、多角形の向き（正面か背面か）が決定されます。 ビュー領域に表示されない不適切な向きの三角形はすべて破棄されます。 このプロセスはカリングと呼ばれます。
- クリッピング-三角形の一部が表示領域の外側にある場合、表示領域の外側の部分は削除されます。 このプロセスはクリッピングと呼ばれます。
フラグメントシェーダ
フラグメントシェーダーは
- さまざまな変数の頂点シェーダーからのデータ、
- ラスタライズステージのプリミティブ、そして
- 頂点間の各ピクセルのカラー値を計算します。
フラグメントシェーダーは、各フラグメントのすべてのピクセルのカラー値を保存します。 これらのカラー値は、フラグメント操作中にアクセスできます。これについては、次に説明します。
フラグメント操作
フラグメント操作は、プリミティブの各ピクセルの色を決定した後に実行されます。 これらのフラグメント操作には、次のものが含まれる場合があります-
- 深さ
- カラーバッファーブレンド *ディザリング
すべてのフラグメントが処理されると、2Dイメージが形成され、画面に表示されます。* フレームバッファ*は、レンダリングパイプラインの最終的な宛先です。
フレームバッファ
フレームバッファは、シーンデータを保持するグラフィックメモリの一部です。 このバッファーには、表面の幅と高さ（ピクセル単位）、各ピクセルの色、深度バッファーとステンシルバッファーなどの詳細が含まれます。
