WebGL - サンプルアプリケーション：ビギナーズガイド
こんにちは、未来的なWebGLの魔法使いさんたち！このエキサイティングな旅にあなたをお連れするガイドとして、嬉しく思います。コンピュータサイエンスの教師として数多くの経験を積んでおり、生徒たちがウェブ上で初めて3Dグラフィックスを作成したときに目を輝かせるのを見てきました。今日、私たちはその冒険を一緒に(start)ます。しっかりと準備して、潜り込もう！
WebGLとは？
コードを書き始める前に、まずWebGLについて理解しましょう。WebGL（Web Graphics Library）は、プラグインなしでウェブブラウザ内にインタラクティブな3Dおよび2DグラフィックスをレンダリングできるJavaScript APIです。まるであなたのウェブページに素晴らしいビジュアルを作成するためのスーパーパワーを与えるようなものです！
WebGLアプリケーションの構造
WebGLアプリケーションは通常、いくつかの主要なコンポーネントで構成されています。それ们を分解してみましょう：
1. HTML Canvas
キャンバスは私たちの描画板です。ここですべての魔法が起こります！
<canvas id="myCanvas" width="640" height="480">
あなたのブラウザはHTML5キャンバスタグをサポートしていません。
</canvas>これで、あなたのウェブページに640x480ピクセルのキャンバスが作成されます。画家のエaselとして、あなたの傑作の準備ができています！
2. JavaScriptコード
ここでは、私たちのWebGLコマンドを書きます。まるで仮想のアーティストに指示を与えるようなものです。
3. ヴァーティックスシェーダーとフラグメントシェーダー
これらはGPU上で動作する特別なプログラムで、3Dグラフィックスのペンと絵の具のようなものです。
4. バッファー
バッファーは私たちの3Dオブジェクトのデータを保存します。まるで3D彫刻のための原材料のようなものです。
これらの材料を知ったところで、美味しいWebGLアプリケーションを作ってみましょう！
サンプルアプリケーション
彩りある三角形を描画するシンプルなWebGLアプリケーションを作成しましょう。それぞれのステップを詳細に説明します。
ステップ1：HTMLを設定する
まず、キャンバス要素を持つHTMLファイルを作成します：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="640" height="480">
あなたのブラウザはHTML5キャンバスタグをサポートしていません。
</canvas>
<script src="webgl-demo.js"></script>
</body>
</html>これで、キャンバスを作成し、次に作成するJavaScriptファイルにリンクします。
ステップ2：WebGLを初期化する
次に、webgl-demo.jsファイルを作成し、WebGLを設定します：
function main() {
const canvas = document.getElementById("myCanvas");
const gl = canvas.getContext("webgl");
if (!gl) {
alert("あなたのブラウザはWebGLをサポートしていません！");
return;
}
// WebGLは使用可能です！
}
window.onload = main;この関数はキャンバスを取得し、WebGLを初期化し、サポートされているか確認します。まるで絵の具が揃っているか確認するようなものです。
ステップ3：シェーダーを作成する
次に、頂点シェーダーとフラグメントシェーダーを作成します：
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 vertexShaderSource = `
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
`;
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1, 0, 0.5, 1);
}
`;
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);これらのシェーダーは、三角形の配置と色を定義します。頂点シェーダーは三角形を配置し、フラグメントシェーダーは美しいピンク色を与えます。
ステップ4：プログラムを作成する
次に、シェーダーをプログラムにリンクします：
function createProgram(gl, vertexShader, fragmentShader) {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('シェーダープログラムの初期化に失敗しました: ' + gl.getProgramInfoLog(program));
return null;
}
return program;
}
const program = createProgram(gl, vertexShader, fragmentShader);これはまるで絵の具を準備し、絵を描く準備をするようなものです！
ステップ5：バッファーを作成する
次に、三角形の頂点を保存するバッファーを作成します：
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [
0, 0,
0, 0.5,
0.7, 0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);これは三角形の形状を定義します。まるで描画する前に基本形状をスケッチするようなものです。
ステップ6：三角形を描画する
最後に、三角形を描画します：
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, 3);ここで魔法が起こります！キャンバスをクリアし、プログラムとバッファーを設定し、最後に三角形を描画します。
結論
おめでとうございます！あなたは初めてのWebGLアプリケーションを作成しました。ウェブ上の3Dグラフィックスの更大的な世界への第一歩を踏み出しました。覚えておいてください、アートの形態として、WebGLのマスターには練習と忍耐が必要です。しかし、書かれるコードの每一行ごとに、より鮮やかでインタラクティブなウェブを作成しています。探索を続け、創造を続け、最も重要なのは、楽しむことです！
以下に、私たちが使用した主要なメソッドの表を示します：
| メソッド | 説明 |
|---|---|
getContext("webgl") |
WebGLを初期化します |
createShader() |
シェーダーを作成します |
shaderSource() |
シェーダーのソースコードを定義します |
compileShader() |
シェーダーをコンパイルします |
createProgram() |
プログラムを作成します |
attachShader() |
シェーダーをプログラムにアタッチします |
linkProgram() |
プログラムをリンクします |
createBuffer() |
バッファーを作成します |
bindBuffer() |
バッファーをバインドします |
bufferData() |
バッファーにデータを格納します |
viewport() |
ビューポートを設定します |
clearColor() |
クリアカラーを設定します |
clear() |
キャンバスをクリアします |
useProgram() |
プログラムを使用します |
getAttribLocation() |
属性の位置を取得します |
enableVertexAttribArray() |
ヴェクタ属性配列を有効にします |
vertexAttribPointer() |
ヴェクタデータのレイアウトを指定します |
drawArrays() |
プリミティブをレンダリングします |
この表を手元に置いて、WebGLの旅を続けてください。ハッピーコーディング！
Credits: Image by storyset