Webgl-shaders
WebGL-シェーダー
シェーダーは、GPUで実行されるプログラムです。 シェーダーはOpenGL ESシェーダー言語（ES SLとして知られています）で記述されています。 ES SLには、独自の変数、データ型、修飾子、組み込みの入力および出力があります。
データ型
次の表に、OpenGL ES SLが提供する基本的なデータ型を示します。
| Sr.No. | Type & Description |
|---|---|
| 1 |
void 空の値を表します。 |
| 2 |
bool trueまたはfalseを受け入れます。 |
| 3 |
int これは符号付き整数データ型です。 |
| 4 |
float これは、浮動スカラーデータ型です。 |
| 5 |
vec2, vec3, vec4 n成分の浮動小数点ベクトル |
| 6 |
bvec2, bvec3, bvec4 ブールベクトル |
| 7 |
ivec2, ivec3, ivec4 符号付き整数ベクトル |
| 8 |
mat2, mat3, mat4 2x2、3x3、4x4 floatマトリックス |
| 9 |
sampler2D 2Dテクスチャにアクセスする |
| 10 |
samplerCube キューブマップテクスチャへのアクセス |
予選
OpenGL ES SLには3つの主要な修飾子があります-
| Sr.No. | Qualifier & Description |
|---|---|
| 1 |
attribute この修飾子は、頂点シェーダーと頂点ごとのデータのOpenGL ES間のリンクとして機能します。 この属性の値は、頂点シェーダーの実行ごとに変化します。 |
| 2 |
uniform この修飾子は、シェーダープログラムとWebGLアプリケーションをリンクします。 属性修飾子とは異なり、ユニフォームの値は変更されません。 制服は読み取り専用です。変数を宣言するために、任意の基本データ型でそれらを使用できます。 例-均一 vec4 lightPosition; |
| 3 |
varying この修飾子は、補間データの頂点シェーダーとフラグメントシェーダー間のリンクを形成します。 float、vec2、vec3、vec4、mat2、mat3、mat4、または配列のデータ型で使用できます。 例-変化する vec3 通常; |
頂点シェーダー
頂点シェーダーは、すべての頂点で呼び出されるプログラムコードです。 ジオメトリ（例：三角形）をある場所から別の場所に変換（移動）します。 頂点座標、法線、色、テクスチャ座標など、各頂点のデータ（頂点ごとのデータ）を処理します。
頂点シェーダーのES GLコードでは、プログラマはデータを処理する属性を定義する必要があります。 これらの属性は、JavaScriptで記述された頂点バッファーオブジェクトを指します。 次のタスクは、頂点変換とともに頂点シェーダーを使用して実行できます-
- 頂点変換
- 通常の変換と正規化
- テクスチャ座標生成
- テクスチャ座標変換
- 点灯 *色材用途
事前定義された変数
OpenGL ES SLは、頂点シェーダーに次の定義済み変数を提供します-
| Sr.No. | Variables & Description |
|---|---|
| 1 |
頂点の位置を保持します。 |
| 2 |
mediump float gl_PointSize; 変換されたポイントサイズを保持します。 この変数の単位はピクセルです。 |
サンプルコード
次の頂点シェーダーのサンプルコードをご覧ください。 三角形の頂点を処理します。
attribute vec2 coordinates;
void main(void) {
gl_Position = vec4(coordinates, 0.0, 1.0);
};上記のコードを注意深く観察すると、 coordinates という名前の属性変数が宣言されています。 （この変数は、メソッド* getAttribLocation（）を使用して頂点バッファーオブジェクトに関連付けられます。 属性 *coordinates は、パラメーターとしてシェーダープログラムオブジェクトと共にこのメソッドに渡されます。
指定された頂点シェーダープログラムの2番目のステップで、 gl_position 変数が定義されます。
gl_Position
gl_Positionは、頂点シェーダープログラムでのみ使用可能な定義済み変数です。 頂点の位置が含まれています。 上記のコードでは、 coordinates 属性はベクトルの形式で渡されます。 頂点シェーダーは頂点ごとの操作であるため、gl_position値は各頂点に対して計算されます。
後で、gl_position値は、頂点の処理が終了した後にプリミティブを操作するプリミティブアセンブリ、クリッピング、カリング、およびその他の固定機能操作で使用されます。
頂点シェーダーのすべての可能な操作用の頂点シェーダープログラムを作成できます。これについては、このチュートリアルで個別に説明します。
フラグメントシェーダ
- メッシュ*は複数の三角形で構成され、各三角形の表面は*フラグメント*と呼ばれます。 フラグメントシェーダーは、各フラグメントのすべてのピクセルで実行されるコードです。 これは、個々のピクセルの色を計算して塗りつぶすために書かれています。 次のタスクは、フラグメントシェーダーを使用して実行できます-
- 補間値の操作
- テクスチャアクセス
- テクスチャアプリケーション
- Fog *色の合計
事前定義された変数
OpenGL ES SLは、フラグメントシェーダーに次の定義済み変数を提供します-
| Sr.No. | Variables & Description |
|---|---|
| 1 |
mediump vec4* gl_FragCoord*; フレームバッファー内のフラグメントの位置を保持します。 |
| 2 |
bool gl_FrontFacing; 前向きのプリミティブに属するフラグメントを保持します。 |
| 3 |
mediump vec2 gl_PointCoord; ポイント内のフラグメントの位置を保持します（ポイントラスタライズのみ）。 |
| 4 |
mediump vec4 gl_FragColor; シェーダーの出力フラグメントカラー値を保持します |
| 5 |
mediump vec4 gl_FragData[n] カラーアタッチメント n のフラグメントカラーを保持します。 |
サンプルコード
次のフラグメントシェーダーのサンプルコードは、三角形のすべてのピクセルに色を適用する方法を示しています。
void main(void) {
gl_FragColor = vec4(0, 0.8, 0, 1);
}上記のコードでは、 color 値は変数 `+ gl.FragColor +`に保存されます。 フラグメントシェーダープログラムは、固定関数変数を使用して出力をパイプラインに渡します。 FragColorはその1つです。 この変数は、モデルのピクセルの色の値を保持します。
シェーダープログラムの保存とコンパイル
シェーダーは独立したプログラムであるため、それらを個別のスクリプトとして記述し、アプリケーションで使用できます。 または、以下に示すように、 string 形式で直接保存できます。
var vertCode =
'attribute vec2 coordinates;' +
'void main(void) {' +
' gl_Position = vec4(coordinates, 0.0, 1.0);' +
'}';シェーダーのコンパイル
コンパイルには次の3つの手順が含まれます-
- シェーダーオブジェクトの作成
- 作成されたシェーダーオブジェクトへのソースコードの添付
- プログラムをコンパイルする
頂点シェーダーの作成
空のシェーダーを作成するために、WebGLには* createShader（）*というメソッドが用意されています。 シェーダーオブジェクトを作成して返します。 その構文は次のとおりです-
Object createShader (enum type)構文で見られるように、このメソッドはパラメーターとして事前定義された列挙値を受け入れます。 これには2つのオプションがあります-
- 頂点シェーダーを作成するための gl.VERTEX_SHADER
- フラグメントシェーダーを作成するための gl.FRAGMENT_SHADER 。
ソースをシェーダーにアタッチする
メソッド* shaderSource（）*を使用して、作成したシェーダーオブジェクトにソースコードを添付できます。 その構文は次のとおりです-
void shaderSource(Object shader, string source)このメソッドは、2つのパラメータを受け入れます-
- shader -作成したシェーダーオブジェクトを1つのパラメーターとして渡す必要があります。
- ソース-シェーダープログラムコードを文字列形式で渡す必要があります。
プログラムのコンパイル
プログラムをコンパイルするには、* compileShader（）*メソッドを使用する必要があります。 その構文は次のとおりです-
compileShader(Object shader)このメソッドは、シェーダープログラムオブジェクトをパラメーターとして受け入れます。 シェーダープログラムオブジェクトを作成した後、ソースコードをアタッチし、そのオブジェクトをこのメソッドに渡します。
次のコードスニペットは、頂点シェーダーとフラグメントシェーダーを作成してコンパイルし、三角形を作成する方法を示しています。
//Vertex Shader
var vertCode =
'attribute vec3 coordinates;' +
'void main(void) {' +
' gl_Position = vec4(coordinates, 1.0);' +
'}';
var vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, vertCode);
gl.compileShader(vertShader);
//Fragment Shader
var fragCode =
'void main(void) {' +
' gl_FragColor = vec4(0, 0.8, 0, 1);' +
'}';
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragCode);
gl.compileShader(fragShader);複合プログラム
両方のシェーダープログラムを作成してコンパイルした後、両方のシェーダー（頂点とフラグメント）を含む結合プログラムを作成する必要があります。 次の手順に従う必要があります-
- プログラムオブジェクトを作成する
- 両方のシェーダーを取り付けます
- 両方のシェーダーをリンクする
- プログラムを使用する
プログラムオブジェクトを作成する
メソッド* createProgram（）*を使用して、プログラムオブジェクトを作成します。 空のプログラムオブジェクトを返します。 ここにその構文があります-
createProgram();シェーダーを取り付けます
メソッド* attachShader（）*を使用して、作成したプログラムオブジェクトにシェーダーをアタッチします。 その構文は次のとおりです-
attachShader(Object program, Object shader);このメソッドは、2つのパラメータを受け入れます-
- プログラム-作成された空のプログラムオブジェクトを1つのパラメーターとして渡します。
- Shader -コンパイルされたシェーダープログラム（頂点シェーダー、フラグメントシェーダー）のいずれかを渡す
注-このメソッドを使用して両方のシェーダーをアタッチする必要があります。
シェーダーをリンクする
シェーダーをアタッチしたプログラムオブジェクトを渡すことにより、メソッド* linkProgram（）*を使用してシェーダーをリンクします。 その構文は次のとおりです-
linkProgram(shaderProgram);プログラムを使用する
WebGLは、* useProgram（）*というメソッドを提供します。 リンクされたプログラムをそれに渡す必要があります。 その構文は次のとおりです-
useProgram(shaderProgram);次のコードスニペットは、組み合わせたシェーダープログラムを作成、リンク、および使用する方法を示しています。
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);