const engine = new BABYLON.NativeEngine();
const scene = new BABYLON.Scene(engine);
scene.createDefaultCamera(true, true, true);
scene.createDefaultLight(true);
engine.runRenderLoop(() => scene.render());

const avatarUrls = [
    "app:///Assets/avatar-a.vrm",
    "app:///Assets/avatar-b.vrm",
    "app:///Assets/avatar-c.vrm",
    "app:///Assets/avatar-d.vrm",
];

const matrices = new Float32Array(4 * 16);
for (let index = 0; index < 4; ++index) {
    BABYLON.Matrix.Translation((index - 1.5) * 1.5, 0, 0).copyToArray(matrices, index * 16);
}

const waitFrames = (count) =>
    new Promise((resolve) => {
        const observer = scene.onAfterRenderObservable.add(() => {
            if (--count === 0) {
                scene.onAfterRenderObservable.remove(observer);
                resolve();
            }
        });
    });

(async () => {
    let containers = [];
    for (let cycle = 0; cycle < 10; ++cycle) {
        for (const container of containers) {
            container.dispose();
        }
        containers = [];

        for (const url of avatarUrls) {
            const response = await fetch(url);
            const blob = await response.blob();
            const objectUrl = URL.createObjectURL(blob);
            try {
                const container = await BABYLON.SceneLoader.LoadAssetContainerAsync(
                    "",
                    objectUrl,
                    scene,
                    undefined,
                    ".glb"
                );
                container.addAllToScene();
                for (const mesh of container.meshes) {
                    if (mesh.getTotalVertices() > 0) {
                        mesh.thinInstanceSetBuffer("matrix", matrices, 16, true);
                    }
                }
                containers.push(container);
            } finally {
                URL.revokeObjectURL(objectUrl);
            }
        }

        await waitFrames(180);
    }
})();