WebGL - 四角形を描く
こんにちは、Web開発者を目指す皆さん！今日は、WebGLの世界に足を踏み入れて、四角形（略して「quad」）を描く方法を学びます。プログラミングが初めての方でも心配しないでください。私は、多くの学生を助けた経験豊富な先生のように、忍耐強くそれぞれのステップをガイドします。
WebGLとは？
四角形を描く前に、まずWebGLとは何かを理解しましょう。WebGL（Web Graphics Library）は、Webブラウザ内で素晴らしい2Dおよび3Dグラフィックスを作成できる強力なJavaScript APIです。まるで魔法の絵の具を持って、Webページに思い思いのイメージを描けるようなものです！
四角形を描く手順
それでは、四角形を描くプロセスを管理可能なステップに分けてみましょう。家を建てることに例えると、基礎から始めて段階的に作業を進める感じです。
ステップ1: HTMLキャンバスの設定
まず、描画するキャンバスが必要です。HTMLでは<canvas>要素を使用します。これが絵を描くためのエaselのようなものです。
<canvas id="myCanvas" width="600" height="400">
あなたのブラウザはHTML5キャンバスタグをサポートしていません。
</canvas>ステップ2: WebGLコンテキストの初期化
次に、WebGLコンテキストを取得します。これが魔法のWebGL絵の具を手に取るようなものです。
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
console.log('WebGLがサポートされていません。experimental-webglにフォールバックします');
gl = canvas.getContext('experimental-webgl');
}
if (!gl) {
alert('あなたのブラウザはWebGLをサポートしていません');
}ステップ3: ヴァーテックスシェーダーの作成
次に、ヴァーテックスシェーダーを作成します。これはWebGLに四角形の角をどこに描くかを伝えます。
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);ステップ4: フラグメントシェーダーの作成
フラグメントシェーダーは、四角形の色を決定します。今回は明るい青色にします！
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);ステップ5: プログラムの作成とシェーダーのリンク
次に、プログラムを作成し、シェーダーをリンクします。これが絵の具とブラシを組み合わせるようなものです。
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);ステップ6: バッファーの作成と頂点データのロード
四角形の角を定義する時がきました！
const positions = [
-0.7, -0.5,
0.7, -0.5,
0.7, 0.5,
-0.7, 0.5
];
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);ステップ7: ポジションバッファーをアトリビュートに接続
WebGLにポジションデータを読み取る方法を伝える必要があります。
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);ステップ8: 四角形を描画
やっと描画の瞬間です。四角形を描いてみましょう！
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);四角形を描く例
それでは、すべてを一つの完全な例にまとめてみましょう：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL Quad</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="400">
あなたのブラウザはHTML5キャンバスタグをサポートしていません。
</canvas>
<script>
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
alert('あなたのブラウザはWebGLをサポートしていません');
}
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
const positions = [
-0.7, -0.5,
0.7, -0.5,
0.7, 0.5,
-0.7, 0.5
];
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
</script>
</body>
</html>これで、あなた独自のWebGL四角形が完成しました。このHTMLファイルをブラウザで開くと、キャンバス上に美しい青い四角形が表示されるはずです。
結論
初めてのWebGL四角形を描いたお祝いです！今日は多くのことをカバーしました。キャンバスの設定からシェーダーの作成、そして最終的に形を描くまでです。WebGLを学ぶことは絵を描くことと同じで、練習と忍耐が必要です。すぐに理解できない場合も、くじけずに続けてください。実験を続けることで、すぐにWeb上に素晴らしい3Dグラフィックスを作成できるようになるでしょう！
次のレッスンでは、WebGL作品にインタラクティブな要素を追加する方法を探ります。それまで、编程を楽しんでください！
Credits: Image by storyset