SceneAppController

An AppController derivative that wraps a SceneRenderer for convenient scene-based rendering. Handles the app lifecycle (init, frame, display) and automatically forwards all input events to the scene renderer.

This is the recommended approach for most applications — it automates init, render queue management and frame rendering.

import SceneAppController from "bg2e-js/ts/render/SceneAppController.js";

class MyApp extends SceneAppController {
    async init() {
        super.init();  // ← Always call super first

        // Create scene, set environment and camera...
    }
}

Setup Pattern

const canvas = new Canvas(canvasElem, new WebGLRenderer());
canvas.domElement.style.width = "100vw";
canvas.domElement.style.height = "100vh";

const appController = new MyApp();

const mainLoop = new MainLoop(canvas, appController);
await mainLoop.run();  // FrameUpdate.AUTO by default

Methods

init() (Override this)

The main initialization hook. Called after mainLoop.run() starts and before the first frame:

async init() {
    super.init();  // Load default shader (PBRLightIBL), load camera, load environment

    const sceneRoot = this.createScene();  // ← Define your custom scene
}

This method:

1. Sets default state on the renderer (enableDepth, viewport synced to canvas, clear color dark gray).
2. Binds key/mouse input handlers: keydown, keyup, mousedown, mousemove, dragstart, wheel.
3. Initializes the scene renderer (load camera, load environment, set render root + cameras).