WIP Babylon.jsでawaitを使った処理を書く時の注意点

こんにちは、rickyです。

この記事ではBabyylon.jsでawaitを使った処理を書く際のポイントについて解説していきます。
あくまでロジックベースではなく対処法となります。

例えばPlayGroundのこちらのコード

var 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("light1", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.7;
    var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
    sphere.position.y = 2;
    sphere.position.z = 5;

    const xr = await scene.createDefaultXRExperienceAsync({
        uiOptions: {
            sessionMode: 'immersive-ar'
        }
    });

    return scene;
};

const xrの箇所でawaitが使われています。
このコードをテンプレートhttps://doc.babylonjs.com/setup/starterHTMLVScodeを用意して以下のコードと一緒にスクリプトタグの中に書きます。

const scene = createScene();

engine.runRenderLoop(function () {
	scene.render();
});

window.addEventListener("resize", function () {
	engine.resize();
});

するとエラーUncaught TypeError: scene.render is not a function
が表示されます。
解決方法としてはscene.thenを用意してrunRenderLoopを行います。

const scene = createScene();

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

	engine.runRenderLoop(function () {
		sceneToRender.render();
	});
});

window.addEventListener("resize", function () {
	engine.resize();
});

非同期のお話が絡んできて理解がまだしきれていないのでロジックについては現時点では説明できません。
後日知見が深まり次第修正いたします。