WebGL - 三角形を描く

こんにちは、未来のWebGL魔法使いたち！今日は、コンピュータグラフィックスの世界へのエキサイティングな旅に出発します。WebGLを使って三角形を描く方法を学びます。簡単そうに聞こえるかもしれませんが、信じてください、これはゲームや映画で見る素晴らしい3Dグラフィックスの基礎です。しっかりと準備して、一緒に潜りましょう！

WebGLとは？

三角形を描く前に、まずWebGLとは何かを理解しましょう。WebGL（Web Graphics Library）は、プラグインなしでブラウザ内で2Dおよび3Dグラフィックスを描画できるJavaScript APIです。ブラウザ内で素晴らしいビジュアルを創造できるスーパーパワーを持っているようなものです！

三角形を描くための手順

WebGLで三角形を描くことは最初は難しそうに思えるかもしれませんが、心配しないでください！手順を簡単なステップに分解します。以下の手順が必要です：

1. HTMLキャンバスを設定する
2. WebGLコンテキストを取得する
3. ヴェクターシェーダーを作成してコンパイルする
4. フラグメントシェーダーを作成してコンパイルする
5. シェーダープログラムを作成する
6. 三角形の頂点を定義する
7. バッファーを作成して頂点データをロードする
8. ヴェクター属性をリンクする
9. 三角形を描画する

それぞれの手順を詳しく説明します。

1. HTMLキャンバスを設定する

まず、WebGLが三角形を描画するためのキャンバスを作成します。以下のようにHTMLファイルに記述します：

<canvas id="glCanvas" width="640" height="480"></canvas>

これはIDが"glCanvas"で、サイズが640x480ピクセルのキャンバスを作成します。必要に応じてサイズを調整できます。

2. WebGLコンテキストを取得する

次にJavaScriptに移り、WebGLコンテキストをキャンバスから取得します：

const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');

if (!gl) {
console.error('WebGLを初期化できません。あなたのブラウザはサポートしていない可能性があります。');
return;
}

このコードはキャンバスを見つけ、WebGLコンテキストを要求し、ブラウザがWebGLをサポートしているか確認します。

3. ヴェクターシェーダーを作成してコンパイルする

ヴェクターシェーダーは頂点データを処理するプログラムです。以下のように作成します：

const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;

function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('シェーダーのコンパイル中にエラーが発生しました: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}

return shader;
}

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);

このコードはヴェクターシェーダーのソースを定義し、シェーダーを作成してコンパイルする関数を作成します。

4. フラグメントシェーダーを作成してコンパイルする

フラグメントシェーダーは各ピクセルの色を決定します。以下のように作成します：

const fsSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);

このフラグメントシェーダーは三角形を赤色にします。

5. シェーダープログラムを作成する

次にシェーダーをリンクしてプログラムを作成します：

const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
console.error('シェーダープログラムの初期化に失敗しました: ' + gl.getProgramInfoLog(shaderProgram));
return;
}

6. 三角形の頂点を定義する

次に三角形の頂点を定義します：

const vertices = [
0.0,  0.5,  0.0,
-0.5, -0.5,  0.0,
0.5, -0.5,  0.0
];

これらの座標はクリップ空間内の三角形を定義します。各座標の範囲は-1から1です。

7. バッファーを作成して頂点データをロードする

次にバッファーを作成し、頂点データをロードします：

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

8. ヴェクター属性をリンクする

WebGLに頂点データの解釈方法を伝えます：

const aVertexPosition = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aVertexPosition);

9. 三角形を描画する

最後に三角形を描画します：

gl.useProgram(shaderProgram);
gl.drawArrays(gl.TRIANGLES, 0, 3);

すべてを合わせる

以下は三角形を描画するための完全なコードです：

// WebGLコンテキストを取得
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');

if (!gl) {
console.error('WebGLを初期化できません。あなたのブラウザはサポートしていない可能性があります。');
return;
}

// ヴェクターシェーダーのソース
const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;

// フラグメントシェーダーのソース
const fsSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

// シェーダー作成関数
function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('シェーダーのコンパイル中にエラーが発生しました: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}

return shader;
}

// シェーダーを作成
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);

// シェーダープログラムを作成
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
console.error('シェーダープログラムの初期化に失敗しました: ' + gl.getProgramInfoLog(shaderProgram));
return;
}

// 頂点を定義
const vertices = [
0.0,  0.5,  0.0,
-0.5, -0.5,  0.0,
0.5, -0.5,  0.0
];

// バッファーを作成して頂点データをロード
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// ヴェクター属性をリンク
const aVertexPosition = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aVertexPosition);

// 三角形を描画
gl.useProgram(shaderProgram);
gl.drawArrays(gl.TRIANGLES, 0, 3);

これで、初めてのWebGL三角形を描画しました！簡単な三角形の描画には多くの手順が必要ですが、これは複雑な3Dグラフィックスの基礎です。各ステップはより高度なレンダリングに非常に重要です。

結論

初めてのWebGL三角形を描画したお祝いです！コンピュータグラフィックスプログラミングのエキサイティングな世界への第一歩を踏み出しました。すべての旅は一歩から始まります。練習を続け、探索を続けると、すぐに人々を驚かせる素晴らしい3Dグラフィックスを創造できるようになるでしょう！

以下は、私たちが使用した主要なWebGLメソッドの表です：

メソッド	説明
getContext('webgl')	WebGLレンダリングコンテキストを取得
createShader()	シェーダーオブジェクトを作成
shaderSource()	シェーダーのソースコードを設定
compileShader()	シェーダーをコンパイル
createProgram()	プログラムオブジェクトを作成
attachShader()	シェーダーをプログラムにアタッチ
linkProgram()	プログラムをリンク
createBuffer()	バッファーオブジェクトを作成
bindBuffer()	バッファーオブジェクトをターゲットにバインド
bufferData()	バッファーオブジェクトのデータストアを作成および初期化
getAttribLocation()	属性変数の位置を取得
vertexAttribPointer()	ヴェクター属性のレイアウトを指定
enableVertexAttribArray()	ヴェクター属性配列を有効に
useProgram()	指定されたプログラムを現在のレンダリングステートに設定
drawArrays()	配列データからプリミティブをレンダリング

この表を手元に置いて、WebGLの旅を続けてください。幸せなコーディングをし、あなたの三角形が常に完璧にレンダリングされることを祈っています！

Credits: Image by storyset