bg2e-js 2.1.2 → 2.2.1

package/src/render/RenderQueue.ts

@@ -0,0 +1,199 @@
+
+import { getLayers, RenderLayer } from "../base/PolyList";
+import Mat4 from "../math/Mat4";
+import { BlendFunction } from "./Pipeline";
+import RenderState from "./RenderState";
+import type Renderer from "./Renderer";
+import type Shader from "./Shader";
+import type PolyListRenderer from "./PolyListRenderer";
+import type MaterialRenderer from "./MaterialRenderer";
+import type Pipeline from "./Pipeline";
+import type Light from "../base/Light";
+
+export interface QueuePipelines {
+    cullBackFace: Pipeline;
+    cullFaceDisabled: Pipeline;
+}
+
+export interface QueueItem {
+    layer: RenderLayer;
+    shader: Shader;
+    beginOperation: ((layer: RenderLayer) => void) | null;
+    endOperation: ((layer: RenderLayer) => void) | null;
+    enabled: boolean;
+    pipelines: QueuePipelines;
+    queue: RenderState[];
+}
+
+export interface LightData {
+    light: Light;
+    transform: Mat4;
+}
+
+export interface EnableQueueOptions {
+    beginOperation?: ((layer: RenderLayer) => void) | null;
+    endOperation?: ((layer: RenderLayer) => void) | null;
+    enabled?: boolean;
+}
+
+export default class RenderQueue {
+    protected _renderer: Renderer;
+    protected _queues: QueueItem[];
+    protected _viewMatrix: Mat4;
+    protected _projectionMatrix: Mat4;
+    protected _lights: LightData[];
+
+    constructor(renderer: Renderer) {
+        this._renderer = renderer;
+
+        this._queues = [];
+
+        this._viewMatrix = Mat4.MakeIdentity();
+        this._projectionMatrix = Mat4.MakeIdentity();
+
+        this._lights = [];
+    }
+
+    get renderer(): Renderer {
+        return this._renderer;
+    }
+
+    get queues(): QueueItem[] {
+        return this._queues;
+    }
+
+    get viewMatrix(): Mat4 {
+        return this._viewMatrix;
+    }
+
+    set viewMatrix(m: Mat4) {
+        this._viewMatrix.assign(m);
+    }
+
+    get projectionMatrix(): Mat4 {
+        return this._projectionMatrix;
+    }
+
+    set projectionMatrix(m: Mat4) {
+        this._projectionMatrix.assign(m);
+    }
+
+    get lights(): LightData[] {
+        return this._lights;
+    }
+
+    getQueue(layer: RenderLayer): QueueItem | undefined {
+        return this._queues.find(l => l.layer === layer);
+    }
+
+    enableQueue(layer: RenderLayer, shader: Shader, { beginOperation = null, endOperation = null, enabled = true }: EnableQueueOptions = {}): void {
+        // TODO: Create pipelines for different render states (cull face, front face etc.)
+        const cullBackFace = this.renderer.factory.pipeline();
+        const cullFaceDisabled = this.renderer.factory.pipeline();
+        if (layer === RenderLayer.TRANSPARENT_DEFAULT) {
+            const blendState = {
+                enabled: true,
+                blendFuncSrc: BlendFunction.SRC_ALPHA,
+                blendFuncDst: BlendFunction.ONE_MINUS_SRC_ALPHA,
+                blendFuncSrcAlpha: BlendFunction.ONE,
+                blendFuncDstAlpha: BlendFunction.ONE_MINUS_SRC_ALPHA
+            };
+            cullBackFace.setBlendState(blendState);
+            cullFaceDisabled.setBlendState(blendState);
+        }
+        cullBackFace.create();
+        cullFaceDisabled.cullFace = false;
+        cullFaceDisabled.create();
+
+    
+        
+
+        const queue = this.getQueue(layer);
+        if (!queue) {
+            this._queues.push({
+                layer,
+                shader,
+                beginOperation,
+                endOperation,
+                enabled,
+                pipelines: {
+                    cullBackFace,
+                    cullFaceDisabled
+                },
+                queue: []
+            });
+        }
+        else {
+            queue.enabled = true;
+        }
+    }
+
+    disableQueue(layer: RenderLayer): void {
+        const queue = this.getQueue(layer);
+        if (queue) {
+            queue.enabled = true;
+        }
+    }
+
+    isQueueEnabled(layer: RenderLayer): boolean {
+        return this.getQueue(layer)?.enabled || false;
+    }
+
+    newFrame(): void {
+        this._queues.forEach(q => q.queue = []);
+        this._lights = [];
+    }
+
+    addPolyList(polyListRenderer: PolyListRenderer, materialRenderer: MaterialRenderer, modelMatrix: Mat4): void {
+        const plistLayers = getLayers(polyListRenderer.polyList, materialRenderer.material);
+        this._queues.forEach(({ layer, shader, queue, pipelines }) => {
+            if (plistLayers & layer) {
+                const { polyList } = polyListRenderer;
+                let pipeline = null;
+                // TODO: Select pipeline based on material and polyList properties
+                if (polyList.enableCullFace) {
+                    pipeline = pipelines.cullBackFace;
+                }
+                else {
+                    pipeline = pipelines.cullFaceDisabled;
+                }
+                queue.push(new RenderState({
+                    shader,
+                    polyListRenderer,
+                    materialRenderer,
+                    modelMatrix,
+                    viewMatrix: this.viewMatrix,
+                    projectionMatrix: this.projectionMatrix,
+                    pipeline
+                }))
+            }
+        });
+    }
+
+    addLight(light: Light, transform: Mat4): void {
+        // Clear the depth texture, because this parameter
+        // is set each frame by the ShadowRenderer
+        light.depthTexture = null;
+        this._lights.push({ light, transform });
+    }
+
+    draw(layer: RenderLayer): void {
+        const queue = this.getQueue(layer);
+        if (queue) {
+            if (typeof(queue.beginOperation) === "function") {
+                queue.beginOperation(layer);
+            }
+            
+            //queue.pipeline.activate();
+            queue.queue.forEach(rs => {
+                rs.draw();
+            });
+            if (typeof(queue.endOperation) === "function") {
+                queue.endOperation(layer);
+            }
+        }
+        else {
+            console.warn(`No render queue found for layer ${layer}`);
+        }
+    }
+}

package/src/render/RenderState.ts

@@ -0,0 +1,116 @@
+
+import { RenderLayer } from "../base/PolyList";
+import Mat4 from "../math/Mat4";
+import type Shader from "./Shader";
+import type PolyListRenderer from "./PolyListRenderer";
+import type MaterialRenderer from "./MaterialRenderer";
+import type Renderer from "./Renderer";
+import type Pipeline from "./Pipeline";
+
+export interface RenderStateOptions {
+    shader?: Shader | null;
+    polyListRenderer?: PolyListRenderer | null;
+    materialRenderer?: MaterialRenderer | null;
+    modelMatrix?: Mat4;
+    viewMatrix?: Mat4;
+    projectionMatrix?: Mat4;
+    pipeline?: Pipeline | null;
+}
+
+export interface DrawOptions {
+    overrideShader?: Shader | null;
+    overrideViewMatrix?: Mat4 | null;
+    overrideProjectionMatrix?: Mat4 | null;
+}
+
+export default class RenderState {
+    protected _shader: Shader | null;
+    protected _polyListRenderer: PolyListRenderer | null;
+    protected _materialRenderer: MaterialRenderer | null;
+    protected _modelMatrix: Mat4;
+    protected _viewMatrix: Mat4;
+    protected _projectionMatrix: Mat4;
+    protected _pipeline: Pipeline | null;
+
+    constructor({
+        shader = null,
+        polyListRenderer = null,
+        materialRenderer = null,
+        modelMatrix = Mat4.MakeIdentity(),
+        viewMatrix = Mat4.MakeIdentity(),
+        projectionMatrix = Mat4.MakeIdentity(),
+        pipeline = null
+    }: RenderStateOptions = {}) {
+        this._shader = shader;
+        this._polyListRenderer = polyListRenderer;
+        this._materialRenderer = materialRenderer;
+        this._modelMatrix = modelMatrix;
+        this._viewMatrix = viewMatrix;
+        this._projectionMatrix = projectionMatrix;
+        this._pipeline = pipeline;
+    }
+
+    get valid(): boolean {
+        return this._shader && this._polyListRenderer !== null && this._materialRenderer !== null || false;
+    }
+
+    get renderer(): Renderer | undefined { return this._polyListRenderer?.renderer; }
+
+    set shader(shader: Shader | null) { this._shader = shader; }
+    get shader(): Shader | null { return this._shader; }
+    set polyListRenderer(polyListRenderer: PolyListRenderer | null) { this._polyListRenderer = polyListRenderer; }
+    get polyListRenderer(): PolyListRenderer | null { return this._polyListRenderer; }
+    set materialRenderer(materialRenderer: MaterialRenderer | null) { this._materialRenderer = materialRenderer; }
+    get materialRenderer(): MaterialRenderer | null { return this._materialRenderer; }
+    set modelMatrix(model: Mat4) { this._modelMatrix = model; }
+    get modelMatrix(): Mat4 { return this._modelMatrix; }
+    set viewMatrix(view: Mat4) { this._viewMatrix = view; }
+    get viewMatrix(): Mat4 { return this._viewMatrix; }
+    set projectionMatrix(projection: Mat4) { this._projectionMatrix = projection; }
+    get projectionMatrix(): Mat4 { return this._projectionMatrix; }
+    get pipeline(): Pipeline | null { return this._pipeline; }
+    set pipeline(pl: Pipeline | null) { this._pipeline = pl; }
+
+    isLayerEnabled(layer: RenderLayer): boolean {
+        const { polyList } = this._polyListRenderer || {};
+        const { material } = this._materialRenderer || {};
+        if (!polyList || !material) {
+            return false;
+        }
+
+        const renderLayers = polyList.renderLayers === RenderLayer.AUTO ?
+            (material.isTransparent ? RenderLayer.TRANSPARENT_DEFAULT : RenderLayer.OPAQUE_DEFAULT) :
+            (polyList.renderLayers);
+        
+        return (renderLayers & layer) !== 0;
+    }
+
+    draw({ overrideShader = null, overrideViewMatrix = null, overrideProjectionMatrix = null}: DrawOptions = {}): void {
+        const shader = overrideShader || this.shader;
+        if (!this.polyListRenderer?.polyList.visible || !shader || !this.materialRenderer) {
+            return;
+        }
+        if ((this.renderer as any)?.debugMode) {
+            console.log(`======= Begin render polyList "${this.polyListRenderer.polyList.name}"    ==============`);
+        }
+
+        if (this.pipeline) {
+            this.pipeline.activate();
+        }
+        this.polyListRenderer.bindBuffers();
+        
+        const viewMatrix = overrideViewMatrix || this.viewMatrix;
+        const projectionMatrix = overrideProjectionMatrix || this.projectionMatrix;
+        shader.setup(
+            this.polyListRenderer,
+            this.materialRenderer,
+            this.modelMatrix,
+            viewMatrix,
+            projectionMatrix
+        );
+        this.polyListRenderer.draw();
+        if ((this.renderer as any)?.debugMode) {
+            console.log(`======= End render polyList "${this.polyListRenderer.polyList.name}"      ==============`);
+        }
+    }
+}

package/src/render/Renderer.ts

@@ -0,0 +1,248 @@
+import Canvas from "../app/Canvas";
+import Material from "../base/Material";
+import PolyList from "../base/PolyList";
+import Texture from "../base/Texture";
+import Color from "../base/Color";
+import Environment from "./Environment";
+import TextureMergerRenderer from "./TextureMergerRenderer";
+import PolyListRenderer from "./PolyListRenderer";
+import MaterialRenderer from "./MaterialRenderer";
+import TextureRenderer from "./TextureRenderer";
+import RenderBuffer from "./RenderBuffer";
+import Pipeline from "./Pipeline";
+import PresentTextureShader from "../shaders/PresentTextureShader";
+import Vec from "../math/Vec";
+import SkySphere from "./SkySphere";
+import SkyCube from "./SkyCube";
+import ShadowRenderer from "./ShadowRenderer";
+import SceneRenderer from "./SceneRenderer";
+
+export enum EngineFeatures {
+    RENDER_TARGET_TEXTURES = 0x1 << 0,
+    RENDER_TARGET_FLOAT = 0x1 << 1,
+    RENDER_TARGET_DEPTH = 0x1 << 2
+}
+
+
+interface RendererFactory {
+    polyList(plist: PolyList): PolyListRenderer;
+    material(material: Material): MaterialRenderer;
+    texture(texture: Texture): TextureRenderer;
+    renderBuffer(): RenderBuffer;
+    skySphere(): SkySphere;
+    skyCube(): SkyCube;
+    environment(): Environment;
+    textureMerger(): TextureMergerRenderer;
+    pipeline(): Pipeline;
+    scene(): SceneRenderer;
+    shadowRenderer(): ShadowRenderer;
+}
+
+export default class Renderer {
+    protected _identifier: string;
+    protected _frameBuffer: any;
+    protected _canvas!: Canvas;
+    protected _presentTextureSurface?: PolyListRenderer;
+    protected _presentTextureShader?: PresentTextureShader;
+    protected _presentTextureMaterial?: MaterialRenderer;
+
+    constructor(identifier: string) {
+        this._identifier = identifier;
+        this._frameBuffer = null;
+    }
+
+    get uniqueId(): string {
+        throw new Error("Calling Renderer.uniqueId base implementation.");
+    }
+
+    get typeId(): string {
+        throw new Error("Calling Renderer.typeId base implementation");
+    }
+
+    async init(canvas: Canvas): Promise<void> {
+        this._canvas = canvas;
+    }
+
+    get canvas(): Canvas {
+        return this._canvas;
+    }
+
+    get frameBuffer(): any {
+        throw new Error("Calling Renderer.frameBuffer base implementation.");
+    }
+
+    set viewport(vp: Vec) {
+        throw new Error("Calling Renderer.viewport setter base implementation.");
+    }
+
+    get viewport(): Vec {
+        throw new Error("Calling Renderer.viewport getter base implementation.");
+    }
+
+    get presentTextureSurfaceRenderer(): PolyListRenderer {
+        if (!this._presentTextureSurface) {
+            const plist = new PolyList();
+            plist.vertex = [
+                -1, -1, 0,
+                 1, -1, 0,
+                 1,  1, 0,
+                -1,  1, 0
+            ];
+            plist.texCoord0 = [
+                0, 0,
+                1, 0,
+                1, 1,
+                0, 1
+            ];
+            plist.index = [
+                0, 1, 2,
+                2, 3, 0
+            ];
+            this._presentTextureSurface = this.factory.polyList(plist);
+        }
+        return this._presentTextureSurface;
+    }
+
+    async initPresentTextureShader(): Promise<PresentTextureShader> {
+        if (!this._presentTextureShader) {
+            this._presentTextureShader = new PresentTextureShader(this);
+            this._presentTextureShader.load();
+        }
+        return this._presentTextureShader;
+    }
+
+    get presentTextureShader(): PresentTextureShader {
+        return this._presentTextureShader!;
+    }
+
+    get presentTextureMaterialRenderer(): MaterialRenderer {
+        if (!this._presentTextureMaterial) {
+            this._presentTextureMaterial = this.factory.material(new Material());
+        }
+        return this._presentTextureMaterial;
+    }
+
+    postReshape(width: number, height: number): void {
+
+    }
+
+    postRedisplay(): void {
+
+    }
+
+    polyListFactory(plist: PolyList): PolyListRenderer {
+        throw new Error("Calling base implementation of Renderer.polyListFactory()");
+    }
+
+    materialFactory(material: Material): MaterialRenderer {
+        throw new Error("Calling base implementation of Renderer.materialFactory()");
+    }
+
+    textureFactory(texture: Texture): TextureRenderer {
+        throw new Error("Calling base implementation of Renderer.textureFactory()");
+    }
+
+    renderBufferFactory(): RenderBuffer {
+        throw new Error("Calling base implementation of Renderer.renderBufferFactory()");
+    }
+
+    skySphereFactory(): SkySphere {
+        throw new Error("Calling base implementation of Renderer.skySphereFactory()");
+    }
+    
+    skyCubeFactory(): SkyCube {
+        throw new Error("Calling base implementation of Renderer.skyCubeFactory()");
+    }
+
+    environmentFactory(): Environment {
+        return new Environment(this);
+    }
+
+    textureMergerFactory(): TextureMergerRenderer {
+        return new TextureMergerRenderer(this);
+    }
+
+    pipelineFactory(): any {
+        throw new Error("Calling base implementation of Renderer.pipelineFactory()");
+    }
+
+    sceneRendererFactory(): any {
+        throw new Error("Calling base implementation of Renderer.sceneRendererFactory()");
+    }
+
+    shadowRendererFactory(): any {
+        throw new Error("Calling base implementation of Renderer.shadowRendererFactory()");
+    }
+
+    get clearColor(): Color {
+        throw new Error("Calling base implementation of Renderer.clearColor getter.");
+    }
+
+    set clearColor(c: Color) {
+        throw new Error("Calling base implementation of Renderer.clearColor setter.");
+    }
+
+    clearBuffer(): void {
+        throw new Error("Calling base implementation of Renderer.clearBuffer()");
+    }
+
+    get factory(): RendererFactory {
+        const renderer = this;
+        return {
+            polyList(plist: PolyList): PolyListRenderer {
+                return renderer.polyListFactory(plist);
+            },
+            material(material: Material): MaterialRenderer {
+                return renderer.materialFactory(material);
+            },
+            texture(texture: Texture): TextureRenderer {
+                return renderer.textureFactory(texture);
+            },
+            renderBuffer(): RenderBuffer {
+                return renderer.renderBufferFactory();
+            },
+            skySphere(): SkySphere {
+                return renderer.skySphereFactory();
+            },
+            skyCube(): SkyCube {
+                return renderer.skyCubeFactory();
+            },
+            environment(): Environment {
+                return renderer.environmentFactory();
+            },
+            textureMerger(): TextureMergerRenderer {
+                return renderer.textureMergerFactory();
+            },
+            pipeline(): Pipeline {
+                return renderer.pipelineFactory();
+            },
+            scene(): SceneRenderer {
+                return renderer.sceneRendererFactory();
+            },
+            shadowRenderer(): ShadowRenderer {
+                return renderer.shadowRendererFactory();
+            }
+        }
+    }
+
+    presentTexture(texture: Texture | null, {
+        clearBuffers = true,
+        shader = null,
+        viewport = null
+    }: {
+        clearBuffers?: boolean;
+        shader?: any;
+        viewport?: number[] | null;
+    } = {}): void {
+        
+    }
+
+    // Compatibility function
+    supportsFeatures(feature: number): boolean {
+        return false;
+    }
+
+    getMaximumRenderTargets(): number {
+        return 1;
+    }
+}