Babylonjsとは(2021年4月)【WebXRサンプルコード有】

Babylon.jsとは、WebGLベースの3Dエンジンです。この場合の”エンジン”は実行環境のことであり、キーボードやマウスからの入力データを受け取り3Dグラフィックスを操作できるようにし、ブラウザなどに描画するものです。TypeScriptで開発されていますが、JavaScriptに変換されて配布されています。
開発者はDavid Catuhe氏とDavid Rousset氏です。2人はMicrosoftの社員で、最初は本業ではないサイドプロジェクトとして開発していたようです。YouTubeに David Catuhe氏のプレゼン動画があったので貼っておきます。
Microsoftフランスの方のようですね。現在ではMicrosoftが公式メンテナーとなっているようです。

From WebGL to WebGPU: A perspective from Babylon js by David Catuhe

Babylon.js

トランスコンパイラのbabelと関係あるのかと思ったのですが、無さそうです。
babalプロジェクトのリポジトリに”babylon”があったり、そもそもBabylon.jsがMicrosoft社員による開発物であるためTypeScript採用していたりということで、何かしら関係がありそうだがないという印象です。
MRに力を入れるMicrosoftですが、どこまで本気かは分かりません。

WebGLベースの3Dエンジンとしては他にThree.jsなどがありますが、ただの実行環境ではなくコミュニティなどのエコシステムを持つ大きなプロジェクトである点から、Three.jsのラッパーであるA-Frameに似たような方向性を持っています。

ドキュメントは以下です。
https://doc.babylonjs.com/

TypeScriptのPlaygroundのようなものがあり、以下からサンプルの検索ができます。
https://doc.babylonjs.com/playground

以下のようにして、CDNからBabylon.jsを読み込めます。

<script src="https://cdn.babylonjs.com/babylon.js"></script>

デフォルトがminifyで、非minifyが “babylon.max.js” というようにしているようです。
また特定のバージョン指定がなく、常に最新の安定版が読み込まれるようになっているようですが、以下のcdnjsを利用すればバージョンを指定して読み込むことが出来ます。
https://cdnjs.com/libraries/babylonjs

サンプルコードを読む限り、Three.jsのような感じです。

WebXRアプリケーションを作ってみる

Babylon.jsはWebXR対応しています。
https://doc.babylonjs.com/divingDeeper/webXR

WebXRについては以下の記事でまとめてあります。

WebXR向けのヘルパ関数が用意されています。

Babylon.js docs

カメラ作成などを含むベーシックヘルパと、ベーシックヘルパを含むデフォルトヘルパが存在します。
そもそもヘルパ関数であって使わなければならないというワケではないので、以下のような印象です。

ヘルパなし：自力でゴリゴリと書くことになる
ベーシックヘルパ：カメラなど細部にまでこだわりたい場合に使う
デフォルトヘルパ：XRアプリに必要な機能が詰まっている

デモの中の一番カンタンそうなアプリケーションに取り組んでみます。
https://doc.babylonjs.com/divingDeeper/webXR/webXRDemos#basic-scene-with-xr-support

Uncaught TypeError: scene.render is not a function
デモとして紹介されているスニペット以外の部分でエラーが出ました…

書き直しました。
ローカルでも何でもよいのでサーバーに置いてアクセスすると、球体が表示されます。
パソコンでアクセスするとマウスで視線変更、キーボードの矢印キーでバーチャル空間を前後左右に移動できるようになっています。

※追記：Page Up/Downで高さも調整できそうです。

<!DOCTYPE html>
<head>
    <title>babylonjs sample</title>
    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
</head>

<body>
    <canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->

    <script>
        const canvas = document.getElementById("renderCanvas"); // Get the canvas element
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
        var sceneToRender = null;

        const createScene = async function () {
            var scene = new BABYLON.Scene(engine);
            var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
            camera.setTarget(BABYLON.Vector3.Zero());
            camera.attachControl(canvas, true);
            var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;
            var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2, segments: 32 }, scene);
            sphere.position.y = 1;
            scene.createDefaultEnvironment();
            try {
                const xrHelper = await WebXRExperienceHelper.CreateAsync(scene);
            } catch (e) {
                // no XR support
            }
            return scene;
        };

        var scene = createScene();

        scene.then(returnedScene => { sceneToRender = returnedScene; });

        engine.runRenderLoop(async function () {
            if (sceneToRender && sceneToRender.activeCamera) {
                await sceneToRender.render();
            }
        });

        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

https://doc.babylonjs.com/divingDeeper/webXR/introToWebXR

所感

Three.jsのサンプルに出てこなかった(ように思う)async/awaitなどが普通に出てきたので、もしかしたら新しめのJSライブラリに慣れている人は取っ付きやすいのかなと思いました。
JavaScripterの方にとっては自身の土俵に上げてしまえばこっちのもの、という感じでしょうか。

ドキュメントに関してですが、WebXRに興味があって始めるという人には難しいように感じました。Getting Startedを無視して、Diving Deeperの中から必要そうなところをピックアップして読み進めていくというのもアリだと思います。
もしWebXRのゲームを作るとしたらbabylonjsの方が良さそうだなという印象です。Three.jsと比較して、将来性などもあるのかも知れません。

ただ、もしVRゲームを開発しようと考えた時、そもそもネイティブアプリかUnityかを考えるぐらいでbabylonjsを使うかどうかは選択肢に上がらないような気もします。チームメンバーがJavaScripterばかりというのであれば、検討に値するかも知れません。
VRゲーム以外の用途であれば、Three.js (A-frame)でも変わらないようにも思いました。むしろ、様々なデータフォーマットを読み込めるThree.jsの方がマッチする場合があるかもしれません。