基礎編3: Babylon.jsの守備範囲

本章では、Babylon.jsを使って3D空間を構築していく上で、最初に必ず知っておくべき「ルール」と「ツールの役割分担」について解説します。

１．空間構築のルール：左手座標系 (Left-Handed System)

3D空間でオブジェクトの配置を決めるには、X（横）、Y（縦）、Z（奥行き）の3つの軸からなるXYZ座標系を使用します。

3Dの世界には大きく分けて「右手座標系」と「左手座標系」の2つが存在します。
Babylon.jsは、デフォルトで「左手座標系 (Left-Handed System)」を採用しています。自分の手前から奥に行けば行くほどプラスになります。

Unity等のゲームエンジンも左手座標系を採用していることが多いですが、Blenderなどのツールは「右手座標系」であり手前がプラスになるため注意が必要です。

２．空間を構成する4つの基本要素

Babylon.jsで世界を作る際、必ず登場する4つの絶対的な要素があります。これらが揃って初めて、私たちは画面上で3Dオブジェクトを見ることができます。

1. Scene（シーン / 空間全体）
   すべてのオブジェクトを収容する「透明な箱（スタジオ）」です。背景色や環境光など、空間全体に影響するベース設定はこのSceneに対して行います。
   
   プログラムで書くコードの例は以下のようになります。HTMLのブラウザ画面とBabylon.jsを繋いで描画処理を行うレンダリングエンジンを呼び出し、それをsceneとするコードです。

   const scene = new BABYLON.Scene(engine);

2. Camera（カメラ / 視点）
   ユーザーの目となる存在です。カメラがScene内に配置され、どこかを向いていなければ、画面には何も映りません。Babylon.jsには、ArcRotateCamera や、動き回れる UniversalCamera など、便利なカメラが最初から豊富に用意されています。
3. Light（ライト / 光源）
   光がなければ、3D空間は真っ暗闇です。全体を照らす DirectionalLight や、電球のように周囲を照らす PointLight などを配置することで、オブジェクトに陰影が生まれ認識できるようになります。
   オブジェクト自体を光源とする emissiveColor などのアプローチもあります。
4. Mesh（メッシュ / 物体）
   キャラクター、床、建物など、空間に配置される「実体を持った3Dモデル」のことです。Babylon.jsのコード内で球体や立方体を作ったり、外部ファイル（GLTFやPMXなど）から読み込んだりしてSceneに追加します。

３．Babylon.jsの得意分野と不得意分野

プログラムから何でも作れるBabylon.jsですが、「外部の専用ツールに任せるべきこと」の守備範囲を明確に分けておくことが、開発をスムーズに進める最大のコツです。

不得意なこと：複雑な形状やアニメーションの「ゼロからの作成」

Babylon.jsのコードだけで「人間の顔」や「精巧な車」のMesh（3Dモデル）を頂点データから計算して作ったり、キャラクターの複雑なダンスアニメーションをコードの数値入力だけで作ったりするのは、不可能ではありませんが著しく非効率です。
高度なモデリング、テクスチャ作成、ボーンの設定、複雑なアニメーションの作成は、BlenderやMayaなどの3Dグラフィックソフトのような専用ツールで行うべきです。

得意なこと：「素材の統合」と「インタラクティブな制御」

Babylon.jsは、それらの外部ツールで作られた「モデル」や「モーション」の完成データをブラウザ上で素早く読み込み、1つの空間（Scene）に統合することに向いています。
クリックしたらキャラクターが振り返る、時間経過に合わせて照明（Light）の色合いを変える、物理エンジンを適用して髪を自然に揺らすなど、１つのシーンで表現可能な体験をクイックに作り出すことができるのが強みです。

お疲れ様でした。これでBabylon.jsの得意分野と基本要素を把握できました。