Babylon.jsでglTFの組み込みカメラで遊んでみよう

この記事はBabylon.js Advent Calendar 2024の7日目の記事です。

はじめに

3D モデルのフォーマット glTF の仕様を策定している Khronos Group のリポジトリで多くのサンプルモデルを公開しています。

今回は glTF 1.0 の頃からある Virtual City モデルを使ってみようと思います。 Virtual City モデルは15個の組み込みカメラが設定されている興味深いモデルになります。

今回の実行結果

以下は Camera Gizmo を使ったサンプルの実行結果になります。

https://playground.babylonjs.com/#P81SPG#17

Camera Gizmo について

Camera Gizmo はカメラの設定内容を視覚的に表示することが出来る機能です。残念ながら公式ドキュメントにサンプルが無かった為、どうやって表示するのかが疑問だったのですが最近使い方を発見しました。
使い方は簡単です。CameraGizmo のインスタンスを作成し camera プロパティに追随したいカメラをセットするだけです。

  // "camera6" を検索
  const camera6 = scene.cameras.find(cam => cam.name === "camera6");
  const cameraGizmo = new BABYLON.CameraGizmo();
  cameraGizmo.camera = camera6;  // Camera Gizmo を表示

Camera Gizmo のその他のオプションについて

Camera Gizmo にいくつかのオプションが用意されています。
カメラや視錐台の色、Gizmo のサイズを変更するといったことも可能なようです。

 const utilLayer = new BABYLON.UtilityLayerRenderer(scene);    // Gizmo 用のレンダラー
 utilLayer.utilityLayerScene.autoClearDepthAndStencil = false; // Gizmo を既存のシーンに埋め込む場合は「false」
 const gizmoColor = new BABYLON.Color3(1, 0, 0);               // カメラの色
 const frustumLinesColor = new BABYLON.Color3(1, 1, 0);        // 視錐台の色
 const cameraGizmo = new BABYLON.CameraGizmo(utilLayer, gizmoColor, frustumLinesColor);
 cameraGizmo.scaleRatio = 0.5;                                 // Gizmo のサイズを変更

おまけ（複数のカメラを同時に使ってみよう）

https://playground.babylonjs.com/#P81SPG#1

複数のカメラにそれぞれViewportを割り当てることで同時に複数のカメラを表示することが可能です。
Viewportの指定は左下隅を基準としてx,y座標とwidth,heightで行います。指定はそれぞれの割合を表す0～1の値を指定します。

 // +---------+---------+
 // | camera2 | camera3 |
 // +---------+---------+
 // |      camera1      |
 // +-------------------+
 camera1.viewport = new BABYLON.Viewport(0.0, 0.0, 1.0, 0.5);
 camera2.viewport = new BABYLON.Viewport(0.0, 0.5, 0.5, 0.5);
 camera3.viewport = new BABYLON.Viewport(0.5, 0.5, 0.5, 1.0);
 scene.activeCameras.push(camera1);
 scene.activeCameras.push(camera2);
 scene.activeCameras.push(camera3);

おわりに

Virtual City モデルはだいぶ古臭いモデルですが、カメラワーク等参考になることも多いです。
glTF サンプルモデルには組み込みカメラが設定されているものがいくつかあるので探してみるのも良いかもしれません。