WebGL - シェーダー：入門ガイド
こんにちは、未来のプログラマーさんたち！今日は、WebGL シェーダーの世界への興味深い旅に出発しましょう。コードを一行も書いたことがない方もご安心ください－このコンピュータグラフィックスのカラフルな風景を案内するお手伝いをします。
シェーダーとは？
まず、シェーダーとは何かを理解しましょう。絵を描いていると想像してみてください。キャンバスはあなたのコンピュータ画面で、シェーダーはコンピュータに各ピクセルをどのように色付けするかを指示する魔法の絵筆のようなものです。すごいでしょう？
データ型
シェーダーの世界には、特別なデータ型があります。見てみましょう：
| データ型 | 説明 | 例 |
|---|---|---|
| float | 単精度浮動小数点数 | 3.14 |
| vec2 | 2次元ベクトル | vec2(1.0, 2.0) |
| vec3 | 3次元ベクトル | vec3(1.0, 2.0, 3.0) |
| vec4 | 4次元ベクトル | vec4(1.0, 2.0, 3.0, 4.0) |
| mat2 | 2x2マトリックス | mat2(1.0, 2.0, 3.0, 4.0) |
| mat3 | 3x3マトリックス | mat3(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0) |
| mat4 | 4x4マトリックス | mat4(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0) |
これらがやや複雑に見えるかもしれませんが、少しずつ使っていきましょう！
クオリファイヤー
クオリファイヤーは、変数に付ける特別なラベルのようなものです。シェーダーがこれらの変数をどのように扱うかを指示します。主なものを以下に示します：
| クオリファイヤー | 説明 |
|---|---|
| attribute | 頂点ごとに変わる入力値 |
| uniform | 全ての頂点で一定の入力値 |
| varying | 頂点シェーダーからフラグメントシェーダーへの値 |
頂点シェーダー
頂点シェーダーは、私たちの3Dモデルの骨組みのようなものです。モデルの各点（頂点）が画面上何处に表示されるかを計算します。以下は簡単な頂点シェーダーの例です：
attribute vec3 aVertexPosition;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
void main(void) {
gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aVertexPosition, 1.0);
}これを分解すると：
-
attributeをaVertexPositionと宣言します - これは私たちの頂点の位置です。 - 2つの
uniformマトリックスがあります - これらはモデルを位置付けるためと投影するためのものです。 -
main関数では、頂点の最終位置を計算します。
フラグメントシェーダー
頂点シェーダーが骨組みなら、フラグメントシェーダーは皮膚です。各ピクセルの色を決定します。以下は簡単なフラグメントシェーダーの例です：
precision mediump float;
void main(void) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}このシェーダーはすべてを赤色に描画します！vec4(1.0, 0.0, 0.0, 1.0) は完全な赤、緑なし、青なし、完全な不透明度を表します。
シェーダープログラムの保存とコンパイル
シェーダーを書いたら、WebGLにそれを伝える必要があります。以下はJavaScriptでどのようにするかです：
function getShader(gl, id) {
const shaderScript = document.getElementById(id);
if (!shaderScript) return null;
const str = shaderScript.text;
let shader;
if (shaderScript.type === "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type === "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}この関数は以下のことを行います：
- HTMLドキュメント内のシェーダーコードを見つけます。
- 正しいタイプのシェーダーを作成します（頂点またはフラグメント）。
- シェーダーをコンパイルし、エラーをチェックします。
組合せプログラム
最後に、頂点シェーダーとフラグメントシェーダーをプログラムに組み合わせます：
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("シェーダーの初期化ができませんでした");
}
gl.useProgram(shaderProgram);このコードはプログラムを作成し、シェーダーをアタッチし、リンクし、WebGLに使用するように指示します。
それで、WebGLシェーダーの世界への初歩が踏み出されました！新しい言語を学ぶのと同様に、練習が必要です。すぐに理解できない場合でもあきらめず－実験を続けると、すぐに素晴らしい3Dグラフィックスをブラウザで作成できるようになります！
私が教えてきた年間、数多くの学生が完全な初心者からシェーダーの達人に成長しました。ある学生は、これらのスキルを使って仮想の美術館を作成し、最終プロジェクトに提出しました－ブラウザの中で3Dの美術館を歩くことを想像してみてください！
では、あなたは新しいシェーダースキルで何を作成するでしょう？唯一の限界はあなたの想像力です！未来のグラフィックスの達人たち、编程を楽しんでください！
Credits: Image by storyset