Three.jsで扱う3DCGの基本構造を理解する
概要
Webサイトで3DCGを扱う時のハードルは、3D関連の用語の理解やデータの全体像の把握が難しい事だと思います。（その他にもハードルは100個くらいある）
この記事の目的は、3DCGの構造を理解することです。3D関連が専門外のWeb系エンジニア、デザイナーを対象としています。
Webサイトでの3DCGの表示にはThree.jsの使用を想定していますが、この記事にコードは出てきません。実装については、別の記事で紹介する予定です。
Scene
一番大きな要素は「Scene」です。Sceneに必要な要素を含めた上で、renderすることで画像や映像を出力します。この記事では詳しく触れませんが、renderの過程でShader（GLSL、WGSL）を使った Post Proccessを挟み、独自のエフェクトを加えることも可能です。
Scene の中にある主な要素は、Mesh、Light、Cameraです。Mesh はいわゆる3Dモデルで、人や車や建物、抽象的なオブジェなど様々です。そのMeshをLightで照らし、Cameraで見え方を決めます。
また、SceneにEnvironmentとして特殊な画像を設定することで、より現実に近い光（反射）を設定できます（詳細は「Light」を参照）
Mesh
Meshはいわゆる3Dモデルです。Meshの中にはGeometory（形）とMaterial（材質）が含まれます。MeshはGroup化することで、まとめて移動や回転をすることが可能です。
Geometry
3Dモデルを形づくる頂点群です。デフォルトで様々なモデルが用意されています。より複雑なモデルを使用したい場合は、Blenderなどの3DツールからglTFファイルを書き出し、表示することができます。
Three.jsのExampleを流用
Material
Materialで3Dモデルの材質を設定する事で、色、ツルツル／ザラザラ、ピカピカといった表現が可能です。さらに、Textureを設定することで、表面に画像を貼り付けたり、凹みや反射の分布、形状の変化といった複雑な素材感を表現できます。
Camera
Scene内に置いたCameraから、最終的な画像や映像を出力します。様々な種類のCameraが用意されており、実際のカメラのように画角を調整することが可能です。
Three.jsにはCameraを制御するControlsが用意されてます。Controlsを使うことで、ブラウザ上で自由に視点を切り替える仕組みが簡単に追加できます。
Light
Three.jsのライティング方法は大まかに3種類あります。
以下のExampleを操作すれば、3つの種類の違いを体感することができると思います。
| タイプ | 説明 |
|---|---|
| さまざまなライト | スポットライトや並行ライトです。下に代表的なライトを記載しました。 |
| 環境マップ | 3Dオブジェクトの表面に擬似的な周囲環境の映り込みを再現する手法です。 |
| Light Probe | 物体を照らす照明環境です。光を発するのではなく、3D 空間の観測点を通過する光に関する情報を保存して使います。球面調和関数という難しい計算を行います。 |
まとめ
3Dデータの全体像や用語の概念を、Webサイト（Three.js）で使う前提で整理しました。
今後、wegGLが後継のwebGPUに進化したり、3Dモデル作成や3DGS（Gaussian Splatting）にAI技術を使う例が増えてきたりと、面白いことがたくさん起こりそうな分野です。はじめの一歩として、この記事を活用してもらえればと思います。
Discussion