技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

WebGL レンダリング パイプライン

次の図は、WebGL レンダリング パイプラインの概略図です。

頂点バッファオブジェクト (VBO)

VBOS には、ジオメトリを記述するために使用される情報が含まれています。たとえば、ジオメトリの頂点座標、法線座標、色、テクスチャ座標などです。

インデックス バッファ オブジェクト (IBO)

IBO には、頂点の関係を説明する情報が含まれています。 VBO 内の頂点のインデックス位置を使用します。

頂点シェーダー

頂点シェーダーはすべての頂点で実行されます。頂点座標、法線座標、色、テクスチャ座標などの頂点関連情報を処理します。この情報は VBO から取得され、頂点シェーダーで使用される属性に関連付けられます。

フラグメントシェーダー

フラグメント シェーダは各フラグメントに対して実行され、各フラグメントの色が計算されます。

フレームバッファ

フレーム バッファは、フラグメント シェーダで処理されたフラグメントを格納するために使用される 2 次元のバッファです。すべてのフラグメントが処理されると、レンダリング結果が画面に表示されます。

属性

プロパティは、頂点シェーダーの入力変数です。バッファからデータを読み取り、そのデータを頂点シェーダーに渡す方法を指定します。位置情報（32ビット浮動小数点データ3個）をバッファに格納できます。次に、位置情報をどのバッファから読み取るか、位置情報のデータ型は何か、バッファ内のどの位置から読み取りを開始するか、合計で何バイト読み取るかを指定します。頂点シェーダーは頂点ごとに実行する必要があるため、実行するたびに属性値が同じになるわけではありません。

制服

ユニフォームは、頂点シェーダーとフラグメント シェーダーへの入力変数です。属性とは異なり、Uniforms 変数はレンダリング ループ内で固定されます。たとえば、光源の位置です。

テクスチャ

テクスチャには画像データが含まれることがよくありますが、他のデータを含むこともできます。

変化

可変変数は、頂点シェーダーからフラグメント シェーダーにデータを渡すためによく使用されます。頂点シェーダーの Varyings 変数は、フラグメント シェーダーに渡される前に補間されます。