The Complete Production SOP: How to Deploy and Run Babylon.js WebGPU & WebGL 3D Scene in Autonomous AI Agents

import { Engine, WebGPUEngine } from '@babylonjs/core';

export async function createRobustEngine(canvas: HTMLCanvasElement): Promise<Engine | WebGPUEngine> {
  if (await WebGPUEngine.IsSupportedAsync) {
    const webgpuEngine = new WebGPUEngine(canvas, {
      deviceDescriptor: {
        requiredFeatures: ['shader-f16']
      }
    });
    await webgpuEngine.initAsync();
    return webgpuEngine;
  }
  return new Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
}

import { Scene, Vector3, HavokPlugin } from '@babylonjs/core';
import HavokPhysics from '@babylonjs/havok';

export async function configurePhysics(scene: Scene, gravityVector = new Vector3(0, -9.81, 0)): Promise<HavokPlugin> {
  const havokInstance = await HavokPhysics();
  const havokPlugin = new HavokPlugin(true, havokInstance);
  scene.enablePhysics(gravityVector, havokPlugin);
  return havokPlugin;
}

import { Scene, ArcRotateCamera, Vector3, MeshBuilder, PBRMetallicRoughnessMaterial, Color3 } from '@babylonjs/core';
import { createRobustEngine } from './engineFactory';
import { configurePhysics } from './physicsSetup';

export async function initMainScene(canvas: HTMLCanvasElement) {
  const engine = await createRobustEngine(canvas);
  const scene = new Scene(engine);
  
  const camera = new ArcRotateCamera('MainCamera', -Math.PI / 2, Math.PI / 2.5, 10, Vector3.Zero(), scene);
  camera.attachControl(canvas, true);
  camera.lowerRadiusLimit = 2;
  camera.upperRadiusLimit = 50;

  await configurePhysics(scene);

  const pbr = new PBRMetallicRoughnessMaterial('pbrMat', scene);
  pbr.baseColor = new Color3(0.2, 0.4, 0.8);
  pbr.metallic = 0.9;
  pbr.roughness = 0.1;

  const sphere = MeshBuilder.CreateSphere('sphere', { diameter: 2 }, scene);
  sphere.material = pbr;
  sphere.position.y = 5;

  engine.runRenderLoop(() => {
    scene.render();
  });

  window.addEventListener('resize', () => {
    engine.resize();
  });

  return { engine, scene };
}

import { Engine, Scene } from '@babylonjs/core';

export function registerDisposalHooks(engine: Engine, scene: Scene, resizeListener: () => void) {
  return () => {
    window.removeEventListener('resize', resizeListener);
    scene.dispose();
    engine.dispose();
  };
}