WebGL - 基礎：初学者向けのやさしい導入

こんにちは、未来のWebGL魔法使いさんたち！このエキサイティングな旅にあなたをお連れするのがとても楽しみです。コンピュータグラフィックスを教えてきた年数を重ねてきた者として、WebGLの魔法をあなたたちと共有することを待ちきれません。プログラミングが初めての方也不用担心——從頭开始、ステップバイステップに知識を築いていきましょう。コーヒー（またはあなたが好むお茶）を飲みながら、一緒にどびり込もう！

WebGL - Basics

WebGLとは？

本格的な内容に進む前に、まずWebGLとは何かを理解しましょう。WebGL（Web Graphics Library）は、強力なJavaScript APIで、ブラウザ内で素晴らしい3Dグラフィックスを作成できるものです。まるで手元にミニ映画スタジオがあるようなものです！

WebGLを、ブラウザとコンピュータのグラフィックスハードウェアの橋渡しと考えてください。GPU（グラフィックスプロセッシングユニット）の力を借りて、スムーズなパフォーマンスで複雑な3Dシーンをレンダリングすることができます。すごいですね？

WebGL - 座標系

それでは、WebGLの座標系について話しましょう。巨大な見えない3D立方体の真ん中に立っていると考えましょう。それがWebGLの座標系そのものです！

デカルト座標系

WebGLは3Dのデカルト座標系を使用しています。数学の授業で学んだ2Dシステムと似ていますが、一つの追加の次元があります：

X軸：水平方向（左から右）
Y軸：垂直方向（下から上）
Z軸：奥方向（後ろから前）

以下のシンプルな例でイメージしてみましょう：

// 3D空間の頂点（点）を定義
var vertex = [
0.5,  // X座標
0.7,  // Y座標
0.0   // Z座標
];

この例では、中心から少し右（0.5）そして上（0.7）に位置し、画面の表面に直接ある点を定義しています。

クリップスペース

WebGLの特徴のひとつとして、特殊な座標範囲「クリップスペース」を使用している点があります。すべての座標は各軸上で-1.0から1.0の範囲に収まらなければなりません。この範囲外のものは「クリップ」され（描画されません）。

// クリップスペースの右上角の点
var cornerPoint = [1.0, 1.0, 0.0];

// クリップされる（表示されない）点
var clippedPoint = [1.5, 0.5, 0.0];

WebGL グラフィックス

座標系を理解したので、WebGLが実際にどうやって描画するかについて話しましょう。

プリミティブ

WebGLはシンプルな形をプリミティブと呼ばれるものを使ってすべてを描画します。主な3つの種類があります：

ポイント：単一のピクセル
ライン：点同士の直線
トライアングル：三点の形

以下の表でこれらのプリミティブをまとめます：

プリミティブ	説明	使用例
ポイント	単一のピクセル	パーティクルエフェクト、星
ライン	点同士の直線	ワイヤーフレーム、グラフ
トライアングル	三点の形	ほとんどの3Dモデル、地形

以下にシンプルなトライアングルを定義する例を見てみましょう：

var triangleVertices = [
0.0,  0.5,  0.0,  // 天頂点
-0.5, -0.5,  0.0,  // 左下点
0.5, -0.5,  0.0   // 右下点
];

このコードはトライアングルの三点を定義しています。各点は三つの数（x, y, z）で表されます。

バッファー

トライアングルを画面に表示するためには、バッファーというものを使う必要があります。バッファーは頂点データを保持し、GPUに送信する容器のようなものです。

以下にバッファーの作成とデータの填充方法を示します：

// バッファーを作成
var buffer = gl.createBuffer();

// バッファーをバインド（アクティブにする）
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

// バッファーにトライアングルデータを填充
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

今のところ少し混乱するかもしれませんが、後で詳しく説明します！

シェーダープログラム

さて、本当にエキサイティングな部分に進みましょう：シェーダー！シェーダーはGPU上で動作する特別なプログラムで、3Dシーンの各頂点とピクセルを処理する小さな工場のようなものです。

シェーダーの種類

WebGLには主に2つの種類のシェーダーがあります：

頂点シェーダー：3Dシーンの各頂点（点）を処理する
フラグメントシェーダー：各ピクセルの色を決定する

以下にそれぞれのシンプルな例を示します：

// 頂点シェーダー
attribute vec4 a_position;

void main() {
gl_Position = a_position;
}

// フラグメントシェーダー
precision mediump float;

void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);  // 明るい赤色
}

頂点シェーダーは各点（頂点）の位置を決定し、フラグメントシェーダーはこれらの点の間のすべてのピクセルを色付けします。

シェーダーのコンパイルとリンク

シェーダーを使うためには、コンパイルしてプログラムにリンクする必要があります：

// シェーダープログラムを作成
var program = gl.createProgram();

// シェーダーをアタッチしてコンパイル
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

// プログラムをリンク
gl.linkProgram(program);

このプロセスは通常のプログラムのコンパイルとリンクに似ていますが、GPU上で行われます！

OpenGL ES SL 変数

最後に、OpenGL ES シェーディング言語（シェーダーが書かれる言語）で使用される特別な変数について話しましょう。

属性

属性は頂点シェーダーで使用される入力変数で、通常各頂点のデータ（位置や色）を含みます。

attribute vec4 a_position;

ユニフォーム

ユニフォームはすべての頂点とフラグメントに対して同じ値を持つグローバル変数で、変換行列やライティング情報などに非常に適しています。

uniform mat4 u_modelViewMatrix;

ヴァリング

ヴァリングは頂点シェーダーからフラグメントシェーダーにデータを渡すための変数で、頂点間で補間されます。

varying vec4 v_color;

以下の表でこれらの変数の種類をまとめます：

変数の種類	使用される場所	目的
属性	頂点シェーダー	各頂点の入力データ
ユニフォーム	両方	グローバルデータ
ヴァリング	両方	頂点からフラグメントシェーダーへのデータ渡し

以上でWebGLの基本をカバーしました。座標系からシェーダーまで、WebGLを学ぶのは絵を描くのと同じで、練習と忍耐が必要です。すぐに全部が理解できない也不用气馁。继续実験を続ければ、すぐにブラウザで素晴らしい3Dグラフィックスを作成できるようになります！

未来のWebGLマスターさんたち、快くコーディングを続けましょう！

Credits: Image by storyset

前のチュートリアル:

WebGL - HTML5 Canvasの概要

次のチュートリアル:

WebGL - グラフィックスパイプライン