WebGL-基本

WebGLは、主に3D APIではなく低レベルのラスタライズAPIです。 WebGLを使用して画像を描画するには、画像を表すベクトルを渡す必要があります。次に、OpenGL SLを使用して、指定されたベクトルをピクセル形式に変換し、画面に画像を表示します。 WebGLアプリケーションの作成には、この章で説明する一連の手順が含まれます。

WebGL-座標系

他の3Dシステムと同様に、WebGLにはx、y、z軸があり、 z 軸は depth を示します。 WebGLの座標は、（1、1、1）および（-1、-1、-1）に制限されています。つまり、WebGLグラフィックを投影する画面をキューブと見なす場合、キューブの1つのコーナーは（1、1、1）になり、反対側のコーナーは（-1、-1、-1）になります。 WebGLは、これらの境界を越えて描画されるものを表示しません。

次の図は、WebGL座標系を示しています。 Z軸は深さを示します。 zの正の値は、オブジェクトがスクリーン/ビューアーの近くにあることを示し、zの負の値は、オブジェクトがスクリーンから離れていることを示します。同様に、xの正の値は、オブジェクトが画面の右側にあることを示し、負の値は、オブジェクトが左側にあることを示します。同様に、yの正と負の値は、オブジェクトが画面の上部にあるか下部にあるかを示します。

WebGL座標系

WebGLグラフィックス

キャンバスオブジェクトのWebGLコンテキストを取得したら、JavaScriptのWebGL APIを使用してグラフィカル要素の描画を開始できます。

WebGLを開始する前に知っておく必要がある基本的な用語を次に示します。

頂点

一般に、ポリゴンなどのオブジェクトを描画するには、平面上のポイントをマークし、それらを結合して目的のポリゴンを形成します。 *頂点*は、3Dオブジェクトのエッジの結合を定義するポイントです。それぞれx、y、z軸を表す3つの浮動小数点値で表されます。

例

次の例では、次の頂点を持つ三角形を描画しています-（0.5、0.5）、（-0.5、0.5）、（-0.5、-0.5）。

頂点の例

注-JavaScript配列を使用してこれらの頂点を手動で保存し、頂点バッファーを使用してWebGLレンダリングパイプラインに渡す必要があります。

指標

WebGLでは、数値を使用して頂点を識別します。これらの数値はインデックスとして知られています。これらのインデックスは、WebGLでメッシュを描画するために使用されます。

インデックス

注-頂点と同様に、JavaScript配列を使用してインデックスを保存し、インデックスバッファーを使用してWebGLレンダリングパイプラインに渡します。

配列

OpenGLやJoGLとは異なり、頂点を直接レンダリングするためのWebGLには事前定義されたメソッドはありません。 JavaScript配列を使用して手動で保存する必要があります。

例

var vertices = [ 0.5, 0.5, 0.1,-0.5, 0.5,-0.5]

バッファ

バッファは、データを保持するWebGLのメモリ領域です。描画バッファ、フレームバッファ、ベテックスバッファ、インデックスバッファなど、さまざまなバッファがあります。 vertex buffer および index buffer は、モデルのジオメトリを記述および処理するために使用されます。

頂点バッファーオブジェクトは頂点に関するデータを格納し、インデックスバッファーオブジェクトはインデックスに関するデータを格納します。頂点を配列に格納した後、これらのBufferオブジェクトを使用して頂点をWegGLグラフィックパイプラインに渡します。

フレームバッファ*は、シーンデータを保持するグラフィックメモリの一部です。このバッファーには、表面の幅と高さ（ピクセル単位）、各ピクセルの色、深さ、ステンシルバッファーなどの詳細が含まれます。

Mesh

2Dまたは3Dオブジェクトを描画するために、WebGL APIは2つのメソッド、つまり* drawArrays（）および drawElements（）を提供します。これら2つのメソッドは、描画するオブジェクトを選択できる *mode というパラメーターを受け入れます。このフィールドで提供されるオプションは、ポイント、ライン、および三角形に制限されています。

これらの2つの方法を使用して3Dオブジェクトを描画するには、ポイント、ライン、または三角形を使用して1つ以上のプリミティブポリゴンを構築する必要があります。その後、これらのプリミティブポリゴンを使用して、メッシュを形成できます。

プリミティブポリゴンを使用して描画された3Dオブジェクトは、*メッシュ*と呼ばれます。 WebGLは3Dグラフィカルオブジェクトを描画するいくつかの方法を提供しますが、ユーザーは通常メッシュを描画することを好みます。

例

次の例では、2つの三角形→\ {1、2、3}および\ {4、1、3}を使用して正方形を描いていることがわかります。

メッシュの例

シェーダープログラム

通常、三角形を使用してメッシュを構築します。 WebGLはGPUアクセラレーションコンピューティングを使用するため、これらの三角形に関する情報はCPUからGPUに転送される必要があり、通信のオーバーヘッドが大きくなります。

WebGLは、通信のオーバーヘッドを削減するソリューションを提供します。 GPUで実行されるES SL（Embedded System Shader Language）を使用するため、* shaderプログラム*（OpenGL ES Shading Language/GLSL を使用して記述するプログラム）を使用して、クライアントシステムにグラフィカル要素を描画するために必要なすべてのプログラムを記述します）。

これらのシェーダーはGPU用のプログラムであり、シェーダープログラムの記述に使用される言語はGLSLです。これらのシェーダーでは、頂点、変換、マテリアル、ライト、カメラが相互作用して特定の画像を作成する方法を正確に定義します。

つまり、メッシュのピクセルを取得するアルゴリズムを実装するスニペットです。シェーダーについては、後の章で詳しく説明します。シェーダーには、頂点シェーダーとフラグメントシェーダーの2種類があります。

頂点シェーダー

Vertextシェーダーは、すべての頂点で呼び出されるプログラムコードです。ジオメトリ（例：三角形）をある場所から別の場所に変換（移動）するために使用されます。頂点座標、法線、色、テクスチャ座標など、各頂点のデータ（頂点ごとのデータ）を処理します。

頂点シェーダーの ES GL コードでは、プログラマはデータを処理する属性を定義する必要があります。これらの属性は、JavaScriptで記述された Vertex Buffer Object を指します。

次のタスクは、頂点シェーダーを使用して実行できます-

頂点変換
通常の変換と正規化
テクスチャ座標生成
テクスチャ座標変換
点灯
色材用途

フラグメントシェーダー（ピクセルシェーダー）

メッシュは複数の三角形で形成され、各三角形の表面は*フラグメント*として知られています。フラグメントシェーダーは、すべてのフラグメントのすべてのピクセルで実行されるコードです。 _個々のピクセル_の色を計算して塗りつぶすために書かれています。

以下のタスクは、フラグメントシェーダーを使用して実行できます-

補間値の操作
テクスチャアクセス
テクスチャアプリケーション
Fog
色の合計

フラグメントシェーダー

OpenGL ES SL変数

*OpenGL ES SL* の完全な形式は、OpenGL Embedded System Shading Languageです。 シェーダープログラムでデータを処理するために、ES SLは3種類の変数を提供します。 彼らは次のとおりです-

属性-これらの変数は、頂点シェーダープログラムの入力値を保持します。属性は、頂点ごとのデータを含む頂点バッファーオブジェクトを指します。頂点シェーダーが呼び出されるたびに、属性は異なる頂点のVBOを指します。
Uniforms -これらの変数は、ライトポジション、テクスチャ座標、色など、頂点シェーダーとフラグメントシェーダーの両方に共通の入力データを保持します。
変数-これらの変数は、頂点シェーダーからフラグメントシェーダーにデータを渡すために使用されます。

これだけ多くの基本事項があるので、次にグラフィックスパイプラインについて説明します。

Webgl-basics

目次