WebGL - 几何学：初学者指南

こんにちは、未来的 WebGL マエストロたち！この興奮的な WebGL 几何学の旅にあなたをお連れします。10年以上にわたってコンピュータグラフィックスを教えてきた者として、WebGLにおける幾何学の理解はコードで絵を描くことのようだとお伝えできます。それは挑戦的ですが、非常に報酬があります！では、袖をまくって潜りましょう！

WebGL - Geometry

必要な幾何学の定義

魅力的な 3D グラフィックスを創作する前に、WebGLにおける幾何学とは何かを理解する必要があります。基本的に、幾何学は画面上に見えるすべてのものの背骨です。それは点、線、形で構成され、私たちの 3D オブジェクトの構造を形成します。

LEGOブロックで家を建てていることを想像してください。それぞれのブロックは 3D 空間の点を表し、これらの点を結ぶことで辺と面を作成します。それはまさに WebGL で行うことですが、プラスチックブロックではなくコードで！

簡単な例から始めましょう - 三角形の作成：

const triangleVertices = [
0.0,  1.0,  0.0,
-1.0, -1.0,  0.0,
1.0, -1.0,  0.0
];

ここでは、3D 空間の3つの点を定義しています。それぞれの点は3つの数(x, y, z)で表されます。この数の配列は、WebGLに三角形をどこに描くかを伝えるために使用します。

バッファオブジェクト

幾何学データを定義したら、GPUにこのデータを送信する方法が必要です。ここでバッファオブジェクトが登場します。バッファオブジェクトは、私たちの幾何学データを保持し、GPUに簡単にアクセスできる特別なコンテナと考えられます。

バッファの作成

バッファを作成することは、GPUに向けて幾何学を準備する最初のステップです。以下のようにします：

const buffer = gl.createBuffer();

この行は空のバッファオブジェクトを作成します。それは空の箱を用意してLEGOブロックを詰める準備をしているようなものです。

バッファのバインド

バッファを作成した後、WebGLにこのバッファで作業したいと伝える必要があります。バッファをバインドします：

gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

これはLEGO箱を手に取り、「Hey WebGL、今からこの箱にブロックを入れる」と言うようなものです！

データをバッファにパス

さて、興奮の瞬間です - バッファに幾何学データを詰めます：

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

これを分解すると：

gl.bufferData() はバッファにデータを詰めるためのメソッドです。
gl.ARRAY_BUFFER は現在バインドしているバッファに対して作業を行うことを伝えます。
new Float32Array(triangleVertices) は JavaScript 配列を typed 配列に変換します（これについて詳しくは後述します）。
gl.STATIC_DRAW はこのデータの使用方法について WebGL にヒントを与えます。

タイプ化配列

前のステップで Float32Array を使用した理由に疑問があるかもしれません。WebGLはデータタイプに非常に厳しいです。効率のために typed 配列を好みます。Typed 配列は、各データのサイズとタイプが一貫していることを確保します。

以下に、WebGLでよく使用される typed 配列の表を示します：

タイプ化配列	説明	使用例
Float32Array	32ビット浮動小数点数	頂点位置、テクスチャ座標
Int8Array	8ビット符号付き整数	小さな整数
Uint8Array	8ビット符号なし整数	色の成分
Int16Array	16ビット符号付き整数	大きな整数
Uint16Array	16ビット符号なし整数	頂点インデックス
Int32Array	32ビット符号付き整数	非常に大きな整数
Uint32Array	32ビット符号なし整数	非常に大きな正の整数

私たちのケースでは、頂点位置が浮動小数点数であるため Float32Array を使用しました。

バッファのアンバインド

バッファとの作業が完了したら、アンバインドするのが良い習慣です：

gl.bindBuffer(gl.ARRAY_BUFFER, null);

これはLEGO箱を棚に戻すようなものです。これにより、バッファに対する不注意な変更を防ぎ、WebGLの状態をきれいに保つことができます。

そして、みなさん！私たちは成功裏に幾何学を定義し、バッファを作成し、データを詰め、typed 配列について学びました。これが3Dオブジェクトを作成するための基礎です。

忘れないでください、WebGLの学習は旅です。最初は難しいと感じる概念があっても心配しないでください。練習を重ねることで、すぐに素晴らしい3Dグラフィックスを作成できるようになります！私の教師生活の中で、多くの学生が困惑した初心者からWebGLの達人に成長しました。あなたもその仲間入りを果たすまでの道のりを歩んでいます！

次のレッスンでは、これらのバッファを使用して実際に画面に幾何学を描く方法を探求します。準備を整えて、最初の WebGL 三角形を生き返らせるのを楽しみにしてください！それまで、快適なコードを続けて、コーディングの手を伸ばしてみてください！

Credits: Image by storyset