bg2e-js 2.1.2 → 2.2.1

package/src/render/SceneAppController.ts

@@ -0,0 +1,238 @@
+import AppController from "../app/AppController";
+import SelectionHighlight from "../manipulation/SelectionHighlight";
+import SelectionManager from "../manipulation/SelectionManager";
+import { registerComponents } from "../scene";
+import Camera from "../scene/Camera";
+import DebugRenderer from "../debug/DebugRenderer";
+import Vec from "../math/Vec";
+import Node from "../scene/Node";
+import type SceneRenderer from "./SceneRenderer";
+import type Environment from "./Environment";
+import Bg2KeyboardEvent from "../app/Bg2KeyboardEvent";
+import Bg2MouseEvent from "../app/Bg2MouseEvent";
+import Bg2TouchEvent from "../app/Bg2TouchEvent";
+
+export default class SceneAppController extends AppController {
+    _sceneRoot: Node | null = null;
+    _sceneRenderer: SceneRenderer | null = null;
+    _environment: Environment | null = null;
+    _selectionManager: SelectionManager | null = null;
+    _selectionHighlight: SelectionHighlight | null = null;
+    _updateOnInputEvents: boolean | undefined;
+    _debugRenderer: DebugRenderer | null = null;
+
+    get sceneRoot(): Node | null {
+        return this._sceneRoot;
+    }
+
+    get sceneRenderer(): SceneRenderer | null {
+        return this._sceneRenderer;
+    }
+
+    get environment(): Environment | null {
+        return this._environment;
+    }
+
+    get selectionManager(): SelectionManager | null {
+        return this._selectionManager;
+    }
+
+    get selectionHighlight(): SelectionHighlight | null {
+        return this._selectionHighlight;
+    }
+
+    get selectionManagerEnabled(): boolean {
+        return true;
+    }
+
+    get selectionHighlightEnabled(): boolean {
+        return true;
+    }
+
+    get updateOnInputEvents(): boolean {
+        return this._updateOnInputEvents ?? true;
+    }
+
+    set updateOnInputEvents(update: boolean) {
+        this._updateOnInputEvents = update;
+    }
+
+    async loadScene(): Promise<Node> {
+        return new Node("Scene Root");
+    }
+
+    async loadEnvironment(): Promise<Environment | null> {
+        return null;
+    }
+
+    async registerLoaders(): Promise<void> {
+
+    }
+
+    async loadDone(): Promise<void> {
+
+    }
+
+    async init(): Promise<void> {
+        registerComponents();
+
+        await this.registerLoaders();
+
+        this._sceneRoot = await this.loadScene();
+
+        if (!this._sceneRoot) {
+            throw new Error("SceneAppController.init: Failed to load scene.");
+        }
+
+        this._environment = await this.loadEnvironment();
+
+        if (!this._environment) {
+            this._environment = this.renderer.factory.environment();
+            await this._environment?.load();   // Load black environment
+        }
+
+        this._sceneRenderer = this.renderer.factory.scene();
+        await this.sceneRenderer?.init({ shadowMapSize: new Vec(4096, 4096) });
+        if (this.environment) {
+            await this.sceneRenderer?.setEnvironment(this.environment);
+        }
+
+        await this.sceneRenderer?.bindRenderer(this.sceneRoot!);
+
+        if (this.selectionManagerEnabled) {
+            this._selectionManager = new SelectionManager(this.renderer);
+            await this._selectionManager.init();
+            this._selectionManager.sceneRoot = this.sceneRoot;
+        }
+
+        if (this.selectionHighlightEnabled) {
+            this._selectionHighlight = new SelectionHighlight(this.renderer);
+            await this._selectionHighlight.init();
+        }
+
+        this._debugRenderer = DebugRenderer.Get(this.renderer);
+        await this._debugRenderer?.init();
+
+        await this.loadDone();
+    }
+
+    reshape(width: number, height: number): void {
+        if (!this.sceneRoot || !this.sceneRenderer) {
+            return;
+        }
+
+        this.sceneRenderer.resize(this.sceneRoot,width,height);
+        this.selectionManager?.setViewportSize(width,height);
+        this.selectionHighlight?.setViewportSize(width,height);
+        this._debugRenderer?.setViewportSize(width,height);
+    }
+
+    async frame(delta: number): Promise<void> {
+        if (!this.sceneRoot || !this.sceneRenderer) {
+            return;
+        }
+        this._debugRenderer?.beginFrame();
+
+        await this.sceneRenderer?.frame(this.sceneRoot, delta);
+    }
+
+    display(): void {
+        if (!this.sceneRoot || !this.sceneRenderer) {
+            return;
+        }
+        this.sceneRenderer.draw();
+        const camera = Camera.GetMain(this.sceneRoot);
+        if (camera) {
+            this.selectionHighlight && this.selectionHighlight.draw(this.sceneRoot, camera);
+            this._debugRenderer?.draw(camera);
+        }
+    }
+
+    destroy(): void {
+        this.sceneRenderer?.destroy();
+        if (this.selectionManagerEnabled) {
+            this.selectionManager?.destroy();
+        }
+    }
+
+    keyDown(evt: Bg2KeyboardEvent): void {
+        this.sceneRoot && this.sceneRenderer?.keyDown(this.sceneRoot, evt);
+        if (this.updateOnInputEvents) {
+            this.mainLoop.postRedisplay();
+        }
+    }
+
+    keyUp(evt: Bg2KeyboardEvent): void {
+        this.sceneRoot && this.sceneRenderer?.keyUp(this.sceneRoot, evt);
+        if (this.updateOnInputEvents) {
+            this.mainLoop.postRedisplay();
+        }
+    }
+
+    mouseUp(evt: Bg2MouseEvent): void {
+        this.sceneRoot && this.sceneRenderer?.mouseUp(this.sceneRoot, evt);
+        this.selectionManager?.mouseUp(evt);
+        if (this.updateOnInputEvents) {
+            this.mainLoop.postRedisplay();
+        }
+    }
+
+    mouseDown(evt: Bg2MouseEvent): void {
+        this.sceneRoot && this.sceneRenderer?.mouseDown(this.sceneRoot, evt);
+        this.selectionManager?.mouseDown(evt);
+        if (this.updateOnInputEvents) {
+            this.mainLoop.postRedisplay();
+        }
+    }
+
+    mouseMove(evt: Bg2MouseEvent): void {
+        this.sceneRoot && this.sceneRenderer?.mouseMove(this.sceneRoot, evt);
+        if (this.updateOnInputEvents) {
+            this.mainLoop.postRedisplay();
+        }
+    }
+
+    mouseOut(evt: Bg2MouseEvent): void {
+        this.sceneRoot && this.sceneRenderer?.mouseOut(this.sceneRoot, evt);
+        if (this.updateOnInputEvents) {
+            this.mainLoop.postRedisplay();
+        }
+    }
+
+    mouseDrag(evt: Bg2MouseEvent): void {
+        this.sceneRoot && this.sceneRenderer?.mouseDrag(this.sceneRoot, evt);
+        if (this.updateOnInputEvents) {
+            this.mainLoop.postRedisplay();
+        }
+    }
+
+    mouseWheel(evt: Bg2MouseEvent): void {
+        this.sceneRoot && this.sceneRenderer?.mouseWheel(this.sceneRoot, evt);
+        if (this.updateOnInputEvents) {
+            this.mainLoop.postRedisplay();
+        }
+    }
+
+    touchStart(evt: Bg2TouchEvent): void {
+        this.sceneRoot && this.sceneRenderer?.touchStart(this.sceneRoot, evt);
+        this.selectionManager?.touchStart(evt);
+        if (this.updateOnInputEvents) {
+            this.mainLoop.postRedisplay();
+        }
+    }
+
+    touchMove(evt: Bg2TouchEvent): void {
+        this.sceneRoot && this.sceneRenderer?.touchMove(this.sceneRoot, evt);
+        if (this.updateOnInputEvents) {
+            this.mainLoop.postRedisplay();
+        }
+    }
+
+    touchEnd(evt: Bg2TouchEvent): void {
+        this.sceneRoot && this.sceneRenderer?.touchEnd(this.sceneRoot, evt);
+        this.selectionManager?.touchEnd(evt);
+        if (this.updateOnInputEvents) {
+            this.mainLoop.postRedisplay();
+        }
+    }   
+}

package/src/render/SceneRenderer.ts

@@ -0,0 +1,373 @@
+import { RenderLayer } from "../base/PolyList";
+import { BlendFunction } from "./Pipeline";
+import RenderQueue from "./RenderQueue";
+import NodeVisitor from "../scene/NodeVisitor";
+import Mat4 from "../math/Mat4";
+import Vec from "../math/Vec";
+import Camera from "../scene/Camera";
+import FindNodeVisitor from "../scene/FindNodeVisitor";
+import Transform from "../scene/Transform";
+import { bindRenderer, init } from "../scene/Node";
+import LightComponent from "../scene/LightComponent";
+import Renderer from "./Renderer";
+import Node from "../scene/Node";
+import type Pipeline from "./Pipeline";
+import type SkyCube from "./SkyCube";
+import type ShadowRenderer from "./ShadowRenderer";
+import type EnvironmentRenderer from "../render/Environment";
+import type EnvironmentComponent from "../scene/EnvironmentComponent";
+import KeyboardEvent from "../app/KeyboardEvent"
+import MouseEvent from "../app/MouseEvent"
+import TouchEvent from "../app/TouchEvent";
+
+export class FrameVisitor extends NodeVisitor {
+    _renderQueue: RenderQueue;
+    _delta: number;
+    _modelMatrix: Mat4;
+    _matrixStack: Mat4[];
+
+    constructor(renderQueue: RenderQueue) {
+        super();
+        this._renderQueue = renderQueue;
+        this._delta = 0;
+        this._modelMatrix = Mat4.MakeIdentity();
+        this._matrixStack = [];
+    }
+
+    get delta(): number { return this._delta; }
+    set delta(d: number) { this._delta = d; }
+
+    get modelMatrix(): Mat4 { return this._modelMatrix; }
+    
+    visit(node: Node): void {
+        this._matrixStack.push(new Mat4(this._modelMatrix));
+        node.frame(this._delta, this._modelMatrix, this._renderQueue);
+    }
+
+    didVisit(node: Node): void {
+        this._modelMatrix = this._matrixStack[this._matrixStack.length - 1] || Mat4.MakeIdentity();
+        this._matrixStack.pop();
+    }
+}
+
+export class BindRendererVisitor extends NodeVisitor {
+    _renderer: Renderer;
+
+    constructor(renderer: Renderer) {
+        super();
+        this._renderer = renderer;
+    }
+
+    visit(node: Node): void {
+        bindRenderer(node, this._renderer);
+    }
+}
+
+export class InitVisitor extends NodeVisitor {
+    constructor() {
+        super();
+    }
+
+    async asyncVisit(node: Node): Promise<void> {
+        await init(node);
+    }
+}
+
+export class EventCallbackVisitor extends NodeVisitor {
+    _callbackName: string;
+    _event: KeyboardEvent | MouseEvent | TouchEvent | null;
+
+    constructor(callbackName: string)  {
+        super();
+        this._callbackName = callbackName;
+        this._event = null;
+    }
+
+    set event(evt: KeyboardEvent | MouseEvent | TouchEvent | null) {
+        this._event = evt;
+    }
+
+    get event(): KeyboardEvent | MouseEvent | TouchEvent | null {
+        return this._event;
+    }
+
+    visit(node: Node): void {
+        (node as any)[this._callbackName](this._event);
+    }
+}
+
+export default class SceneRenderer {
+    _renderer: Renderer;
+    _keyDownVisitor: EventCallbackVisitor;
+    _keyUpVisitor: EventCallbackVisitor;
+    _mouseUpVisitor: EventCallbackVisitor;
+    _mouseDownVisitor: EventCallbackVisitor;
+    _mouseMoveVisitor: EventCallbackVisitor;
+    _mouseOutVisitor: EventCallbackVisitor;
+    _mouseDragVisitor: EventCallbackVisitor;
+    _mouseWheelVisitor: EventCallbackVisitor;
+    _touchStartVisitor: EventCallbackVisitor;
+    _touchMoveVisitor: EventCallbackVisitor;
+    _touchEndVisitor: EventCallbackVisitor;
+    _sceneEnvironment: EnvironmentComponent | null;
+    _shadowMapSize: Vec | null = null;
+    _mainDirectionalLight: LightComponent | null = null;
+    _opaquePipeline: Pipeline | null = null;
+    _transparentPipeline: Pipeline | null = null;
+    _renderQueue: RenderQueue | null = null;
+    _initVisitor: InitVisitor | null = null;
+    _frameVisitor: FrameVisitor | null = null;
+    _skyCube: SkyCube | null = null;
+    _shadowRenderer: ShadowRenderer | null = null;
+    _environment: EnvironmentRenderer | null = null;
+    _defaultViewMatrix: Mat4 = Mat4.MakeIdentity();
+    _defaultProjectionMatrix: Mat4 = Mat4.MakeIdentity();
+    _sceneRoot: Node | null = null;
+
+    constructor(renderer: Renderer) {
+        this._renderer = renderer;
+        this._keyDownVisitor = new EventCallbackVisitor('keyDown');
+        this._keyUpVisitor = new EventCallbackVisitor('keyUp');
+        this._mouseUpVisitor = new EventCallbackVisitor('mouseUp');
+        this._mouseDownVisitor = new EventCallbackVisitor('mouseDown');
+        this._mouseMoveVisitor = new EventCallbackVisitor('mouseMove');
+        this._mouseOutVisitor = new EventCallbackVisitor('mouseOut');
+        this._mouseDragVisitor = new EventCallbackVisitor('mouseDrag');
+        this._mouseWheelVisitor = new EventCallbackVisitor('mouseWheel');
+        this._touchStartVisitor = new EventCallbackVisitor('touchStart');
+        this._touchMoveVisitor = new EventCallbackVisitor('touchMove');
+        this._touchEndVisitor = new EventCallbackVisitor('touchEnd');
+
+        // This will be the EnvironmentComponent component, if one is defined in the scene.
+        this._sceneEnvironment = null;
+    }
+
+    // Implement in subclasses
+    get brightness(): number { return 0; }
+    set brightness(_value: number) { }
+    get contrast(): number { return 0; }
+    set contrast(value: number) { }
+
+    get renderer(): Renderer {
+        return this._renderer;
+    }
+
+    get renderQueue(): RenderQueue | null {
+        return this._renderQueue;
+    }
+
+    async init({ shadowMapSize = new Vec(1024, 1024) }: { shadowMapSize?: Vec | number } = {}): Promise<void> {
+        if (typeof(shadowMapSize) === "number") {
+            shadowMapSize = new Vec(shadowMapSize, shadowMapSize);
+        }
+
+        // TODO: Create function to resize shadow map
+        this._shadowMapSize = shadowMapSize;
+
+        this._mainDirectionalLight = null;
+
+        this._opaquePipeline = this.renderer.factory.pipeline();
+        this._opaquePipeline?.setBlendState({ enabled: false });
+        this._opaquePipeline?.create();
+
+        this._transparentPipeline = this.renderer.factory.pipeline();
+        this._transparentPipeline?.setBlendState({
+            enabled: true,
+            blendFuncSrc: BlendFunction.SRC_ALPHA,
+            blendFuncDst: BlendFunction.ONE_MINUS_SRC_ALPHA,
+            blendFuncSrcAlpha: BlendFunction.ONE,
+            blendFuncDstAlpha: BlendFunction.ONE_MINUS_SRC_ALPHA
+        });
+        this._transparentPipeline?.create();
+
+        this._renderQueue = new RenderQueue(this.renderer);
+        this._initVisitor = new InitVisitor();
+        this._frameVisitor = new FrameVisitor(this._renderQueue);
+
+        this._skyCube = this.renderer.factory.skyCube();
+
+        this._shadowRenderer = this.renderer.factory.shadowRenderer();
+        await this._shadowRenderer?.create(this._shadowMapSize);
+    }
+
+    async setEnvironment(env: EnvironmentRenderer): Promise<void> {
+        this._environment = env;
+        if (this._environment?.environmentMap) {
+            this._skyCube?.load(this._environment?.environmentMap);
+        }
+    }
+
+    get environment(): EnvironmentRenderer | null {
+        return this._environment;
+    }
+
+    get defaultViewMatrix(): Mat4 {
+        return this._defaultViewMatrix || Mat4.MakeIdentity();
+    }
+
+    set defaultViewMatrix(mat: Mat4) {
+        this._defaultViewMatrix = mat;
+    }
+
+    get defaultProjectionMatrix(): Mat4 {
+        return this._defaultProjectionMatrix || Mat4.MakePerspective(55,this.renderer.viewport.aspectRatio, 0.2, 100.0);
+    }
+
+    set defaultProjectionMatrix(mat: Mat4) {
+        this._defaultProjectionMatrix = mat;
+    }
+    
+    async bindRenderer(sceneRoot: Node): Promise<void> {
+        const bindRendererVisitor = new BindRendererVisitor(this.renderer);
+        sceneRoot.accept(bindRendererVisitor);
+
+        await sceneRoot.asyncAccept(this._initVisitor);        
+
+        const findVisitor = new FindNodeVisitor();
+        findVisitor.hasComponents("Environment");
+        sceneRoot.accept(findVisitor);
+        if (findVisitor.result.length) {
+            const comp = findVisitor.result[0].component("Environment") as EnvironmentComponent;
+            comp && this.setEnvironment(comp.environment);
+            this._sceneEnvironment = comp;
+        }
+    }
+
+    resize(sceneRoot: Node, width: number, height: number): void {
+        this.renderer.viewport = new Vec([0, 0, width, height]);
+        this.renderer.canvas.updateViewportSize();
+        const mainCamera = Camera.GetMain(sceneRoot);
+        if (mainCamera) {
+            mainCamera.resize(width,height);
+        }
+    }
+
+    async frame(sceneRoot: Node, delta: number): Promise<void> {
+        if (!this._frameVisitor || !this._renderQueue || !this._initVisitor) {
+            throw new Error("SceneRenderer.frame(): SceneRenderer not initialized. Call SceneRenderer.init() first.");
+        }
+
+        if (sceneRoot.sceneChanged) {
+            await sceneRoot.asyncAccept(this._initVisitor);
+        }
+        this._sceneRoot = sceneRoot;
+
+        this._renderQueue?.newFrame();
+        this._frameVisitor.delta = delta;
+        this._frameVisitor.modelMatrix.identity();
+
+        const mainCamera = Camera.GetMain(sceneRoot);
+
+        let viewMatrix = this.defaultViewMatrix;
+        let projectionMatrix = this.defaultProjectionMatrix;
+        if (mainCamera) {
+            projectionMatrix = mainCamera.projectionMatrix;
+            viewMatrix = Mat4.GetInverted(Transform.GetWorldMatrix(mainCamera.node));
+        }
+
+        this._renderQueue.viewMatrix = viewMatrix;
+        this._renderQueue.projectionMatrix = projectionMatrix;
+
+        sceneRoot.accept(this._frameVisitor);
+
+        this._skyCube?.updateRenderState({
+            viewMatrix: viewMatrix,
+            projectionMatrix: projectionMatrix
+        });
+    }
+
+    draw({ clearBuffers = true, drawSky = true }: { clearBuffers?: boolean; drawSky?: boolean } = {}): void {
+        if (!this._renderQueue || !this._shadowRenderer || !this._sceneRoot) {
+            throw new Error("SceneRenderer.draw(): SceneRenderer not initialized. Call SceneRenderer.init() first.");
+        }
+
+        const mainLight = LightComponent.GetMainDirectionalLight(this._sceneRoot);
+        const camera = Camera.GetMain(this._sceneRoot);
+
+        // Update the light projection based on the camera focus distance, to optimize
+        // the shadow map size
+        if (mainLight && camera) {
+            const focus = camera.focusDistance;
+            const lightProjection = Mat4.MakeOrtho(-focus,focus,-focus,focus,0.1,500.0);
+            mainLight.light.projection = lightProjection;
+        }
+        if (mainLight && camera) {
+            this._shadowRenderer.update(camera, mainLight, this._renderQueue);
+        }
+        
+        if (clearBuffers) {
+            this.renderer.frameBuffer.clear();
+        }
+
+        if (this.environment && !this.environment.updated) {
+            this.environment.updateMaps();
+        }
+
+        if (drawSky && (!this._sceneEnvironment || this._sceneEnvironment.showSkybox)) {
+            this._skyCube?.draw();
+        }
+
+        this._renderQueue.draw(RenderLayer.OPAQUE_DEFAULT);
+        this._renderQueue.draw(RenderLayer.TRANSPARENT_DEFAULT);
+    }
+
+    destroy(): void {
+
+    }
+
+    keyDown(sceneRoot: Node, evt: KeyboardEvent): void {
+        this._keyDownVisitor.event = evt;
+        sceneRoot.accept(this._keyDownVisitor);
+    }
+
+    keyUp(sceneRoot: Node, evt: KeyboardEvent): void {
+        this._keyUpVisitor.event = evt;
+        sceneRoot.accept(this._keyUpVisitor);
+    }
+
+    mouseUp(sceneRoot: Node, evt: MouseEvent): void {
+        this._mouseUpVisitor.event = evt;
+        sceneRoot.accept(this._mouseUpVisitor);
+    }
+
+    mouseDown(sceneRoot: Node, evt: MouseEvent): void {
+        this._mouseDownVisitor.event = evt;
+        sceneRoot.accept(this._mouseDownVisitor);
+    }
+
+    mouseMove(sceneRoot: Node, evt: MouseEvent): void {
+        this._mouseMoveVisitor.event = evt;
+        sceneRoot.accept(this._mouseMoveVisitor);
+    }
+
+    mouseOut(sceneRoot: Node, evt: MouseEvent): void {
+        this._mouseOutVisitor.event = evt;
+        sceneRoot.accept(this._mouseOutVisitor);
+    }
+
+    mouseDrag(sceneRoot: Node, evt: MouseEvent): void {
+        this._mouseDragVisitor.event = evt;
+        sceneRoot.accept(this._mouseDragVisitor);
+    }
+
+    mouseWheel(sceneRoot: Node, evt: MouseEvent): void {
+        this._mouseWheelVisitor.event = evt;
+        sceneRoot.accept(this._mouseWheelVisitor);
+    }
+
+    touchStart(sceneRoot: Node, evt: TouchEvent): void {
+        this._touchStartVisitor.event = evt;
+        sceneRoot.accept(this._touchStartVisitor);
+    }
+
+    touchMove(sceneRoot: Node, evt: TouchEvent): void {
+        this._touchMoveVisitor.event = evt;
+        sceneRoot.accept(this._touchMoveVisitor);
+    }
+
+    touchEnd(sceneRoot: Node, evt: TouchEvent): void {
+        this._touchEndVisitor.event = evt;
+        sceneRoot.accept(this._touchEndVisitor);
+    }
+
+}

package/src/render/Shader.ts

@@ -0,0 +1,32 @@
+import type Renderer from "./Renderer";
+import type PolyListRenderer from "./PolyListRenderer";
+import type MaterialRenderer from "./MaterialRenderer";
+import Mat4 from "../math/Mat4";
+
+export default class Shader {
+    protected _renderer: Renderer;
+
+    constructor(renderer: Renderer) {
+        this._renderer = renderer;
+    }
+
+    get renderer(): Renderer { return this._renderer; }
+
+    async load(): Promise<void> {
+
+    }
+    
+    setup(
+        plistRenderer: PolyListRenderer,
+        materialRenderer: MaterialRenderer,
+        modelMatrix: Mat4 = Mat4.MakeIdentity(),
+        viewMatrix: Mat4 = Mat4.MakeIdentity(),
+        projectionMatrix: Mat4 = Mat4.MakeIdentity()
+    ): void {
+        throw new Error("Error: using an abstract implementation of render.Shader.");
+    }
+
+    destroy(): void {
+        throw new Error("Error: using an abstract implementation of render.Shader.destroy()");
+    }
+}