操作感、機能改善がされたBabylon.js Editor v5について

以前から色々と書いているBabylon.js (OSSで提供されているWebGLフレームワーク。3DCGを扱うブラウザ向けコンテンツを開発できる) について、新しいバージョンのEditorが発表されています。

今回は新しいEditorの概要を紹介します。また、製作者の方から許可いただけたのでPreview扱いになっているCinematic Editorという機能も紹介します。

使用した環境

1. Babylon.js Editorとは

GUI画面で3DCGモデルを並べて、直感的に制御できるツールのことです。UnityやUnreal Engine、Godot Engineなどと似たような考え方の仕組みです。

通常、Babylon.jsを使ってアプリケーションを作るには、JavaScript/TypeScriptでさまざまな処理を書く必要があります。しかし、Babylon.js Editorを使えばUnityなどのようなツールと同じようにアプリケーションを作ることができます。

以前、Babylon.js Editor v4のときに色々と試したことがあります。どんなことができるか、という意味でご参考ください。

以下のリンクからWindowsまたはMac版をダウンロードし実行するだけです。
editor.babylonjs.com

基本的な使い方はこちらに書かれています。
Babylon.js Editor Documentation

v5では、Unityと同じようにProject単位で管理し、１つ１つの画面や処理のまとまりをSceneと呼びます。
(v4のときはProject = Workspaceという呼び方でした)

.exeまたは.appを開くとこのような画面になります。

ここでNew Projectを押す>プロジェクトの作成フォルダを選択>実行すると、メインの画面が表示されます。

Unityを使っている方は直感的に使えそうな画面です。「オブジェクトにスクリプトをアタッチする」もできます。

今回は省略しますが、以前作ったような具体的なゲームなども作ることができます。
www.crossroad-tech.com

製作者の方に教えていただきました。まだバグが残っているので設定で有効にしないと表示されないそうです。

これはUnityやBlenderのTimeline機能と同等です。タイムライン上でキーフレームを設定していくことで細かい動作を制御できます。そのため、ちょっとしたアニメーション動画を作ることができます。

非常にシンプルな例ですが、このようにカメラとオブジェクトを同時に動かすことも可能です。

製作者の方はQuixelやSketchfabから入手したアセットをさっと並べてカメラワークを制御し、かっこいいムービーを作られていました。

使い方ですが、通常状態ではCinematic Editorのタブが表示されていないため、まずは設定 (Preference)を開きます。

設定画面で、"Enable experimental features"を有効にしてから画面を閉じます。

これでCinematicのオブジェクトを作成できるようになりました。Cinematic Editorのウインドウを開くには、CinematicオブジェクトをProjectフォルダに追加し、開く必要があります。

次に、作成されたCinematicオブジェクトをダブルクリックします。

これでCinematic Editorのウインドウが開きます。制御対象にするオブジェクトをタイムラインに追加し、キーフレームを入力します。

キーフレームの左側で"+"ボタンを押して、"Property Track"を選択します。

あとはオブジェクトやカメラをタイムラインにドラッグし、どんなもの(例：position, rotation, scale) をキーフレーム対象にするかを選んでいくと、先ほど紹介したようなアニメーションを定義できます。

まだ改良中の機能もあるため、Unityに慣れた方には使いづらいと感じる部分があるかもしれません。しかし、GUIで調整できて、Web nativeで作れる仕組みはあまりないです。そのため、Editorの進化でうまく使える例も増えるかもしれません。

久しぶりにEditorで何か作ってみたくなってきたので、時間調整できたら試してみたいと思います。