WebGL - ポイントの描画
こんにちは、志を抱くプログラマーさんたち！今日は、WebGLの世界に興味深い旅に出発します。特に、ポイントの描画に焦点を当てます。あなたの近所の親切なコンピュータの先生として、私はこの冒険をステップバイステップで案内します。心配しないでください。コードを書いたことがない方でも、基本的なところから始めて、段階的に進めます。では、仮想の鉛筆を手に取り、一緒に飛び込みましょう！
WebGLとは？
ポイントを描画する前に、まずWebGLとは何かを理解しましょう。WebGL（Web Graphics Library）は、ブラウザ内で2Dおよび3Dグラフィックスを作成できる強力なJavaScript APIです。まるで魔法の絵の具で、ウェブページに直接描画できるようなものです！
必要なステップ
WebGLを使用してポイントを描画するためには、いくつかのステップをFollowする必要があります。これをデジタルアートを作るためのレシピと考えてください。以下に、これらのステップをまとめた表を示します：
| ステップ | 説明 |
|---|---|
| 1 | キャンバス要素を取得 |
| 2 | WebGLレンダリングコンテキストを取得 |
| 3 | 几何形状（頂点）を定義 |
| 4 | ヴェクターシェーダを作成 |
| 5 | フラグメントシェーダを作成 |
| 6 | シェーダープログラムを作成 |
| 7 | データをGPUにロード |
| 8 | ビューポートを設定 |
| 9 | キャンバスを消去 |
| 10 | ポイントを描画 |
では、それぞれのステップを分解して、どうやってこれらが一起にして名作を創るか見ていきましょう！
例 – WebGLを使用して三点を描画
私たちがキャンバスに三点を描画する例を一緒に見ていきましょう。コードのそれぞれの部分を詳細に説明しますので、何が起こっているかを完全に理解できるようにします。
ステップ1: HTMLを設定
まず、キャンバス要素を含むHTMLファイルを作成します：
<!DOCTYPE html>
<html>
<head>
<title>私の最初のWebGLポイント</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">
あなたのブラウザはキャンバス要素をサポートしていません。
</canvas>
<script src="webgl-points.js"></script>
</body>
</html>これにより、描画板として使用するキャンバスが作成されます。次に作成するJavaScriptファイルがすべての魔法を起こす！
ステップ2: JavaScriptファイルを作成
次に、webgl-points.jsという名前のファイルを作成し、WebGLアプリケーションのコードを書き始めます：
// ステップ1: キャンバス要素を取得
const canvas = document.getElementById('myCanvas');
// ステップ2: WebGLレンダリングコンテキストを取得
const gl = canvas.getContext('webgl');
if (!gl) {
console.error('WebGLがサポートされていません');
throw new Error('WebGLがサポートされていません');
}
// ステップ3: 几何形状（頂点）を定義
const vertices = new Float32Array([
0.0, 0.5, // ポイント1
-0.5, -0.5, // ポイント2
0.5, -0.5 // ポイント3
]);
// ステップ4: ヴェクターシェーダを作成
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
gl_PointSize = 10.0;
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
// ステップ5: フラグメントシェーダを作成
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
// ステップ6: シェーダープログラムを作成
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// ステップ7: データをGPUにロード
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
// ステップ8: ビューポートを設定
gl.viewport(0, 0, canvas.width, canvas.height);
// ステップ9: キャンバスを消去
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// ステップ10: ポイントを描画
gl.drawArrays(gl.POINTS, 0, 3);このコードを分解して、それぞれの部分が何をしているか理解しましょう：
コードの理解
ステップ1と2: WebGLの設定
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');ここでは、キャンバス要素を取得し、WebGLレンダリングコンテキストを取得しています。これが絵の具とパレットを用意するようなものです！
ステップ3: 几何形状の定義
const vertices = new Float32Array([
0.0, 0.5, // ポイント1
-0.5, -0.5, // ポイント2
0.5, -0.5 // ポイント3
]);ここで、3つのポイントの2D空間における位置を定義しています。座標はxとyの範囲が-1から1です。
ステップ4と5: シェーダーの作成
シェーダーはGPU上で動作する特別なプログラムです。以下の2種類があります：
- ヴェクターシェーダ: ポイントの位置を決定します。
- フラグメントシェーダ: ポイントの色を決定します。
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
gl_PointSize = 10.0;
}
`;
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;ヴェクターシェーダはポイントの位置とサイズを設定し、フラグメントシェーダはポイントの色を赤色に設定します。
ステップ6と7: プログラムの作成とデータのロード
これらのステップでは、シェーダープログラムを作成し、頂点データをGPUのメモリにロードします。
ステップ8と9: ビューポートの設定
ビューポートをキャンバスのサイズに設定し、キャンバスを黒色に消去します。
ステップ10: ポイントの描画
gl.drawArrays(gl.POINTS, 0, 3);最後に、三点を描画します！
結論
おめでとうございます！あなたは刚刚、最初のWebGLアプリケーションを作成し、ポイントを描画しました。これはコンピュータグラフィックスの fascinéeな世界への旅の始まりです。あなたが進むにつれて、より複雑な形状を作成し、アニメーションを追加し、さらには3Dグラフィックスに挑戦することもできます。
忘れないでください、WebGLを学ぶことは絵を描くのと同じで、練習と忍耐が必要です。最初は完璧にいくまいとしても、気にしないでください。続けて実験をし、すぐにデジタルの名作を創作できるようになるでしょう！
次のレッスンでは、ポイントに異なる色を追加し、より複雑な形状を作成する方法を探求します。それまでは、编程を楽しんでください！
Credits: Image by storyset