この投稿はBabylon.js Advent Calendar 2025の記事です。
今回はBabylon.js Editor v5以降に搭載されたCinematic Editorを使って、カメラを動かしてみました。
11秒の動画ですが、こんな感じです。
使用した環境
- Mac OS Tahoe 26.1
- Babylon.js Editor v5.2.4
- 1. Cinematic Editorとは
- 2. Cinematic Machine機能を有効にする
- 3. Cinematic オブジェクトを追加し、タイムラインを作る
- 4. 動画として出力する
- 5. おわりに
1. Cinematic Editorとは
Babylon.js Editor v5で搭載された機能です。カメラワークやオブジェクト移動をタイムラインで調整できるため、映画のようなシーンを簡単に作ることができます。
ここの後半で少し紹介しました。
Editor開発者によって、とてもかっこいい動画が紹介されています。
これらはすべてBabylon.js Editorだけで作られたそうです。
まだ実証段階なので、と言われていました。You Tubeのコメント欄より抜粋です。
I'll create a new video to announce the release of it. I suggest to not try to make short films with it for instance until the cinematic editor is officially released, it is missing too much features.
機械翻訳
リリースのお知らせとして新しい動画を作成します。シネマティックエディターが正式リリースされるまでは、例えばショートフィルムの制作には適さないと思います。まだ機能が不足しているからです。
2. Cinematic Machine機能を有効にする
そのままでは無効化されているので、Preferenceを開き、 Edit Preference > Experimental Featuresのチェックを有効にします。
設定画面で、"Enable experimental features"を有効にしてから画面を閉じます。
これでCinematicのオブジェクトを作成できるようになりました。
3. Cinematic オブジェクトを追加し、タイムラインを作る
Cinematic Editorのウインドウを開くには、CinematicオブジェクトをProject>Assetsフォルダに追加し、開く必要があります。
次に、作成されたCinematicオブジェクトをダブルクリックします。
これでCinematic Editorのウインドウが開きます。
制御対象にするオブジェクトをタイムラインに追加し、キーフレームを入力します。
キーフレームの左側で"+"ボタンを押して、"Property Track"を選択します。
新しい行ができたら、一番左側のアイコンに向かってScene View上のオブジェクトをドラッグします。上記の画像では行に向かって矢印が引かれているのですが、この場所では何も反応しません。
次に、No Propertyと書かれているところを左クリックすると、そのオブジェクトに応じたプロパティを選択できます。
Cameraの場合
Spot Lightの場合
たとえばCameraのFovを設定すれば、時間経過で見える範囲を変更できます。Spot LightのIntensityを設定すれば、時間経過で光の強弱をつけることができます。
今回はCameraのPositionとRotationをセットしました。
Cinematic Editor上でPositionを選択し、まずは始点と終点にキーフレームを登録します。
そして、終点のキーフレームを選択して、カメラを動かしてから Set Current Valueボタンを押します。これで、スペースキーを押すと始点から終点までの約8秒間でカメラが直線移動します。
次に、ちょっと歩いているような動きをつけます。これはY軸の値を±10程度変化させることで実現しました。
始点と終点の間の適当な間隔で右クリックを押して、Add Key at Tracker Position を選択してその場所にキーフレームを追加します。これはその瞬間の値をもった状態でキーフレームを追加します。
一方、Add Key Hereを選択すると、都度初期状態の値が入ったキーフレームが追加されてしまいます。
これらを前提として、キーフレームをつけてみました。最後に懐中電灯に向かって視線を移す、という雰囲気を出すため、最後だけrotationを少し変化させています。
大まかにこのようなキーフレームになります。
4. 動画として出力する
現時点のCinematic Editorは、通常の再生シーンでは動作しないようです。
一方、Rendererというボタンを押すとmp4形式で現在のシーンを書き出すことができます。
まずはシーンに存在する豆電球やGizmoアイコンは不要なので非表示にします。
ランプ？みたいなアイコンを選択して、Axis Helper, Icons Helperのチェックを外します。
また、シーンの表示対象をEditor からCamera にします。Cameraにするとカメラ視点の表示になります。
この状態で、Cinematic EditorウインドウにあるRenderというボタンを押すと、720p, 1080p, 4k を選択してmp4に出力できます。
その結果、このようになりました。(冒頭に紹介した動画の再掲です)
5. おわりに
それっぽくなったと思います。Cinematic Editorは現時点でも色々なオブジェクトを制御できるので、うまく使えば様々な表現ができそうですね。
