bg2e-js 2.1.2 → 2.2.1

package/src/render/Environment.ts

@@ -0,0 +1,136 @@
+import Texture, { TextureRenderTargetAttachment, TextureTarget } from "../base/Texture";
+import IrradianceMapCubeShader from "../shaders/IrradianceMapCubeShader";
+import SpecularMapCubeShader from "../shaders/SpecularMapCubeShader";
+import RenderBuffer from "./RenderBuffer";
+import Renderer from "./Renderer";
+import SkySphere from "./SkySphere";
+import SkyCube from "./SkyCube";
+import Mat4 from "../math/Mat4";
+
+type TextureResources = {
+    renderer: Renderer;
+    texture: Texture;
+    renderBuffer: RenderBuffer;
+    skyShape: SkySphere | SkyCube | null;
+}
+
+const createTextureResources = async (renderer: Renderer, size: [number, number]) : Promise<TextureResources> => {
+    const texture = new Texture();
+    texture.renderTargetAttachment = TextureRenderTargetAttachment.COLOR_ATTACHMENT_0;
+    texture.target = TextureTarget.CUBE_MAP;
+    
+    const renderBuffer = renderer.factory.renderBuffer();
+    await renderBuffer.attachTexture(texture);
+    renderBuffer.size = size;
+
+    return { renderer, texture, renderBuffer, skyShape: null };
+}
+
+const destroyTextureResources = (resources: TextureResources) => {
+    resources.texture.destroy();
+    resources.renderBuffer.destroy();
+}
+
+const updateMap = (mapResources: TextureResources) => { 
+    const { renderBuffer, skyShape } = mapResources;
+    renderBuffer.update((face,viewMatrix,projectionMatrix) => {
+        mapResources.renderer.clearBuffer();
+        skyShape?.updateRenderState({
+            viewMatrix: viewMatrix || Mat4.MakeIdentity(),
+            projectionMatrix
+        });
+        skyShape?.draw();
+    })
+}
+
+export default class Environment {
+    protected _renderer: Renderer;
+    protected _updated: boolean = false;
+
+    protected _environmentMapResources: TextureResources | null = null;
+    protected _specularMapResources: TextureResources | null = null;
+    protected _irradianceMapResources: TextureResources | null = null;
+    protected _envMapSize: [number, number] = [512, 512];
+    protected _specMapSize: [number, number] = [128, 128];
+    protected _irrMapSize: [number, number] = [32, 32];
+
+    constructor(renderer: Renderer) {
+        this._renderer = renderer;
+    }
+
+    get renderer() {
+        return this._renderer;
+    }
+
+    get updated() {
+        return this._updated;
+    }
+
+    get environmentMap(): Texture | null {
+        return this._environmentMapResources?.texture || null;
+    }
+
+    get specularMap(): Texture | null {
+        return this._specularMapResources?.texture || null;
+    }
+
+    get irradianceMap(): Texture | null {
+        return this._irradianceMapResources?.texture || null;
+    }
+
+    async load({ 
+        textureUrl = null,
+        environmentMapSize = [ 512, 512 ],
+        specularMapSize = [ 128, 128 ],
+        irradianceMapSize = [32, 32]
+    } : {
+        textureUrl?: string | null,
+        environmentMapSize?: [number, number],
+        specularMapSize?: [number, number],
+        irradianceMapSize?: [number, number]
+    } = {}): Promise<void> {
+        this._envMapSize = environmentMapSize;
+        this._specMapSize = specularMapSize;
+        this._irrMapSize = irradianceMapSize;
+
+        this._environmentMapResources = await createTextureResources(this.renderer, environmentMapSize);
+        const envShape = this.renderer.factory.skySphere();
+        await envShape.load(textureUrl || null);
+        this._environmentMapResources.skyShape = envShape;
+
+        this._specularMapResources = await createTextureResources(this.renderer, specularMapSize);
+        const specShape = this.renderer.factory.skyCube();
+        specShape.load(this._environmentMapResources.texture, SpecularMapCubeShader, [0.5]);
+        this._specularMapResources.skyShape = specShape;
+
+        this._irradianceMapResources = await createTextureResources(this.renderer, irradianceMapSize);
+        const irrShape = this.renderer.factory.skyCube();
+        await irrShape.load(this._environmentMapResources.texture, IrradianceMapCubeShader);
+        this._irradianceMapResources.skyShape = irrShape;
+        this._updated = false;
+    }
+
+    destroy() {
+        this._environmentMapResources && destroyTextureResources(this._environmentMapResources);
+        this._specularMapResources && destroyTextureResources(this._specularMapResources);
+        this._irradianceMapResources && destroyTextureResources(this._irradianceMapResources);
+        this._updated = false;
+    }
+
+    updateMaps() {
+        this._environmentMapResources && updateMap(this._environmentMapResources);
+        this._specularMapResources && updateMap(this._specularMapResources);
+        this._irradianceMapResources && updateMap(this._irradianceMapResources);
+        this._updated = true;
+    }
+
+    async reloadImage(imageUrl: string) {
+        if (!this._environmentMapResources) {
+            return;
+        }
+        if (this._environmentMapResources.skyShape instanceof SkySphere) {
+            await this._environmentMapResources.skyShape.setTexture(imageUrl);
+        }
+        this._updated = false;
+    }
+}

package/src/render/FrameBuffer.ts

@@ -0,0 +1,35 @@
+import type Renderer from "./Renderer";
+
+export interface ClearOptions {
+    color?: boolean;
+    depth?: boolean;
+    stencil?: boolean;
+}
+
+export default class FrameBuffer {
+    protected _renderer: Renderer;
+
+    constructor(renderer: Renderer) {
+        this._renderer = renderer;
+    }
+
+    get renderer(): Renderer {
+        return this._renderer;
+    }
+
+    clearColor(): void {
+        this.clear({ color: true, depth: false, stencil: false });
+    }
+
+    clearDepth(): void {
+        this.clear({ color: true, depth: true, stencil: false });
+    }
+
+    clearStencil(): void {
+        this.clear({color: false, depth: false, stencil: true });
+    }
+
+    clear({ color = true, depth = true, stencil = false }: ClearOptions = {}): void {
+        throw new Error("FrameBuffer: calling base implementation of clear()");
+    }
+}

package/src/render/MaterialRenderer.ts

@@ -0,0 +1,34 @@
+import Texture from "../base/Texture";
+import Renderer from "./Renderer";
+import Material from "../base/Material";
+import TextureRenderer from "./TextureRenderer";
+
+export default class MaterialRenderer {
+    protected _renderer: Renderer;
+    protected _material: Material;
+
+    constructor(renderer: Renderer, material: Material) {
+        this._renderer = renderer;
+        this._material = material;
+    }
+
+    get renderer() {
+        return this._renderer;
+    }
+
+    get material() {
+        return this._material;
+    }
+
+    getTextureRenderer(materialAttribute: keyof Material): TextureRenderer | null {
+        const element = this.material[materialAttribute];
+        if (element instanceof Texture) {
+            // The texture renderer factory will create a texture renderer, or
+            // return the existing one
+            return this.renderer.factory.texture(element);
+        }
+        return null;
+    }
+
+}
+

package/src/render/Pipeline.ts

@@ -0,0 +1,109 @@
+export enum BlendEquation {
+    ADD = 1,
+    SUBTRACT = 2,
+    REVERSE_SUBTRACT = 3
+}
+
+export enum BlendFunction {
+    NULL = 0,
+    ZERO = 1,
+    ONE = 2,
+    SRC_COLOR = 3,
+    ONE_MINUS_SRC_COLOR = 4,
+    DST_COLOR = 5,
+    ONE_MINUS_DST_COLOR = 6,
+    SRC_ALPHA = 7,
+    ONE_MINUS_SRC_ALPHA = 8,
+    DST_ALPHA = 9,
+    ONE_MINUS_DST_ALPHA = 10
+}
+
+export interface BlendState {
+    enabled: boolean;
+    blendEquation: BlendEquation;
+    blendFuncSrc: BlendFunction;
+    blendFuncDst: BlendFunction;
+    blendFuncSrcAlpha: BlendFunction;
+    blendFuncDstAlpha: BlendFunction;
+}
+
+export interface BlendStateParams {
+    enabled?: boolean;
+    blendEquation?: BlendEquation;
+    blendFuncSrc?: BlendFunction;
+    blendFuncDst?: BlendFunction;
+    blendFuncSrcAlpha?: BlendFunction;
+    blendFuncDstAlpha?: BlendFunction;
+}
+
+export default class Pipeline {
+    protected _renderer: any;
+    protected _blendState: BlendState = {
+        enabled: false,
+        blendEquation: BlendEquation.ADD,
+        blendFuncSrc: BlendFunction.SRC_ALPHA,
+        blendFuncDst: BlendFunction.ONE_MINUS_SRC_ALPHA,
+        blendFuncSrcAlpha: BlendFunction.SRC_ALPHA,
+        blendFuncDstAlpha: BlendFunction.ONE_MINUS_SRC_ALPHA
+    }
+    protected _depthTestEnabled: boolean;
+    protected _cullFace: boolean;
+
+    constructor(renderer: any) {
+        this._renderer = renderer;
+
+        this._depthTestEnabled = true;
+
+        this._cullFace = true;
+    }
+
+    get renderer(): any {
+        return this._renderer;
+    }
+
+    setBlendState({
+        enabled = false,
+        blendEquation = BlendEquation.ADD,
+        blendFuncSrc = BlendFunction.SRC_ALPHA,
+        blendFuncDst = BlendFunction.ONE_MINUS_SRC_ALPHA,
+        blendFuncSrcAlpha = BlendFunction.SRC_ALPHA,
+        blendFuncDstAlpha = BlendFunction.ONE_MINUS_SRC_ALPHA
+    }: BlendStateParams = {}): void {
+        this._blendState = {
+            enabled,
+            blendEquation,
+            blendFuncSrc,
+            blendFuncDst,
+            blendFuncSrcAlpha,
+            blendFuncDstAlpha
+        }
+    }
+
+    get blendState(): BlendState {
+        return this._blendState;
+    }
+
+    get depthTest(): boolean {
+        return this._depthTestEnabled;
+    }
+
+    set depthTest(dt: boolean) {
+        this._depthTestEnabled = dt;
+    }
+
+    set cullFace(cf: boolean) {
+        this._cullFace = cf;
+    }
+
+    get cullFace(): boolean {
+        return this._cullFace;
+    }
+    
+    create(): void {
+        throw new Error("Pipeline.create(): calling base class method.");
+    }
+
+    activate(): void {
+        throw new Error("Pipeline.activate(): calling base class method.");
+    }
+}

package/src/render/PolyListRenderer.ts

@@ -0,0 +1,47 @@
+import type Renderer from "./Renderer";
+import type PolyList from "../base/PolyList";
+
+export default class PolyListRenderer {
+    protected _renderer: Renderer;
+    protected _polyList: PolyList;
+
+    constructor(renderer: Renderer, polyList: PolyList) {
+        if ((polyList as any).renderer) {
+            throw new Error("Invalid initialization of polyList renderer: the polyList is already controlled by another polyList renderer.")
+        }
+        this._renderer = renderer;
+        this._polyList = polyList;
+        (this._polyList as any)._renderer = this;
+    }
+
+    get polyList(): PolyList {
+        return this._polyList;
+    }
+
+    get renderer(): Renderer {
+        return this._renderer;
+    }
+
+    init(): void {
+
+    }
+
+    // Updates the internal state of the renderer. It is necessary to call this
+    // function if the polyList has been modified, so that the internal objects
+    // of the specific rendering API are updated.
+    refresh(): void {
+
+    }
+
+    bindBuffers(): void {
+
+    }
+
+    draw(): void {
+
+    }
+
+    destroy(): void {
+        
+    }
+}

package/src/render/RenderBuffer.ts

@@ -0,0 +1,197 @@
+import Texture, { TextureDataType, TextureTarget, TextureRenderTargetAttachmentNames } from "../base/Texture";
+import Vec from "../math/Vec";
+import Mat4 from "../math/Mat4";
+
+export enum RenderBufferType {
+    UNINITIALIZED = 0,
+    TEXTURE = 1,
+    CUBE_MAP = 2
+}
+
+export const RenderBufferTypeName: Record<RenderBufferType, string> = {
+    [RenderBufferType.UNINITIALIZED]: 'UNINITIALIZED',
+    [RenderBufferType.TEXTURE]: 'TEXTURE',
+    [RenderBufferType.CUBE_MAP]: 'CUBE_MAP'
+};
+
+export enum CubeMapFace {
+    NONE = 0,
+    POSITIVE_X = 1,
+    NEGATIVE_X = 2,
+    POSITIVE_Y = 3,
+    NEGATIVE_Y = 4,
+    POSITIVE_Z = 5,
+    NEGATIVE_Z = 6
+}
+
+export type DrawFunc = (face?: CubeMapFace, viewMatrix?: Mat4, projectionMatrix?: Mat4) => void;
+
+function getTargetType(texture: Texture): RenderBufferType | undefined {
+    if (texture.target === TextureTarget.TEXTURE_2D) {
+        return RenderBufferType.TEXTURE;
+    }
+    else if (texture.target === TextureTarget.CUBE_MAP) {
+        return RenderBufferType.CUBE_MAP;
+    }
+}
+
+function getRenderBufferTypeName(type: RenderBufferType): string {
+    return RenderBufferTypeName[type];
+}
+
+
+export default class RenderBuffer {
+    protected _renderer: any;
+    protected _attachments: Record<string, any>;
+    protected _size: Vec;
+    protected _dirty: boolean;
+    protected _type: RenderBufferType;
+
+    constructor(renderer: any, size: Vec = new Vec([512,512])) {
+        this._renderer = renderer;
+        this._attachments = {};
+        this._size = size;
+        this._dirty = true;
+        this._type = RenderBufferType.UNINITIALIZED;
+    }
+
+    get renderer(): any { return this._renderer; }
+
+    get type(): RenderBufferType { return this._type; }
+
+    get size(): Vec { return this._size; }
+
+    set size(s: Vec | number[]) {
+        this._size = new Vec(s); 
+        for (const att in this.attachments) {
+            const textureRenderer = this.attachments[att];
+            const texture = textureRenderer.texture;
+            if (!Vec.Equals(texture.size, this.size)) {
+                texture.size = this.size;
+            }
+        }
+        this._dirty = true;
+    }
+
+    // This is an object of type { TextureRenderTargetAttachmentName: TextureRenderer }
+    get attachments(): Record<string, any> { return this._attachments; }
+
+    getTextureRenderer(attachment: string): any {
+        return this._attachments[attachment];
+    }
+
+    getTexture(attachment: string): Texture | undefined {
+        return this.getTextureRenderer(attachment)?.texture;
+    }
+
+    get dirty(): boolean { return this._dirty; }
+
+    setUpdated(updated: boolean = true): void { this._dirty = !updated; }
+
+    async attachTexture(texture: Texture): Promise<void> {
+        if (this._attachments[texture.renderTargetAttachment]) {
+            throw new Error(`RenderBuffer.attachTexture(): The attachment is occupied by another texture ${TextureRenderTargetAttachmentNames[texture.renderTargetAttachment]}`);
+        }
+
+        if (this.type !== RenderBufferType.UNINITIALIZED) {
+            const type = getTargetType(texture);
+            if (this.type !== type) {
+                throw new Error(`Invalid texture attachment. RenderBuffer is ${ getRenderBufferTypeName(this.type) }, but the new attachment is ${ getRenderBufferTypeName(type || RenderBufferType.UNINITIALIZED) }`);
+            }
+        }
+        else {
+            this._type = getTargetType(texture) || RenderBufferType.UNINITIALIZED;
+        }
+
+        texture.dataType = TextureDataType.RENDER_TARGET;
+        texture.size = this.size;
+        await texture.loadImageData();
+        const textureRenderer = this.renderer.factory.texture(texture);
+        this._attachments[texture.renderTargetAttachment] = textureRenderer;
+    }
+
+    detachTexture(texture: Texture): void {
+        const textureRenderer = this._attachments[texture.renderTargetAttachment];
+        if (!textureRenderer) {
+            throw new Error(`RenderBuffer.detachTexture(): no texture attached to ${TextureRenderTargetAttachmentNames[texture.renderTargetAttachment]}`);
+        }
+
+        if (textureRenderer.texture !== texture) {
+            throw new Error(`RenderBuffer.detachTexture(): the texture is not attached to ${TextureRenderTargetAttachmentNames[texture.renderTargetAttachment]}`);
+        }
+
+        this._attachments[texture.renderTargetAttachment] = null;
+        textureRenderer.deleteTexture();
+        this._dirty = true;
+    }
+
+    beginUpdate(textureFace: CubeMapFace = CubeMapFace.NONE): void {
+        throw new Error("RenderBuffer.beginUpdate(): calling base implementation.");
+    }
+
+    endUpdate(textureFace: CubeMapFace = CubeMapFace.NONE): void {
+        throw new Error("RenderBuffer.endUpdate(): calling base implementation.");
+    }
+
+    destroy(): void {
+        throw new Error("RenderBuffer.destory(): calling base implementation.");
+    }
+
+    get frameBuffer(): any {
+        throw new Error("RenderBuffer.frameBuffer: calling base implementation");
+    }
+
+    // Save and restore buffer states must save the currently binded array buffer and restore it
+    saveVertexBufferState(): void {
+        throw new Error("RenderBuffer.saveVertexBufferState: callig base implementation");
+    }
+
+    restoreVertexBufferState(): void {
+        throw new Error("RenderBuffer.restoreVertexBufferState: calling base implementation");
+    }
+
+    update(drawFunc: DrawFunc): void {
+        this.saveVertexBufferState();
+        if (this.type === RenderBufferType.TEXTURE) {
+            this.beginUpdate();
+            drawFunc();
+            this.endUpdate();
+        }
+        else if (this.type === RenderBufferType.CUBE_MAP) {
+            const viewMatrix = Mat4.MakeIdentity();
+            const projectionMatrix = Mat4.MakePerspective(90, 1, 0.1, 100000);
+            for (let i = 0; i<6; ++i) {
+                const face = CubeMapFace.POSITIVE_X + i;
+                switch (face) {
+                case CubeMapFace.POSITIVE_X:
+                    viewMatrix.lookAt(new Vec([-1, 0, 0]), new Vec([0, 0, 0]), new Vec([0,-1, 0]));
+                    break;
+                case CubeMapFace.NEGATIVE_X:
+                    viewMatrix.lookAt(new Vec([ 1, 0, 0]), new Vec([0, 0, 0]), new Vec([0,-1, 0]));
+                    break;
+                case CubeMapFace.POSITIVE_Y:
+                    viewMatrix.lookAt(new Vec([ 0,-1, 0]), new Vec([0, 0, 0]), new Vec([0, 0, 1]));
+                    break;
+                case CubeMapFace.NEGATIVE_Y:
+                    viewMatrix.lookAt(new Vec([ 0, 1, 0]), new Vec([0, 0, 0]), new Vec([0, 0,-1]));
+                    break;
+                case CubeMapFace.POSITIVE_Z:
+                    viewMatrix.lookAt(new Vec([ 0, 0,-1]), new Vec([0, 0, 0]), new Vec([0,-1, 0]));
+                    break;
+                case CubeMapFace.NEGATIVE_Z:
+                    viewMatrix.lookAt(new Vec([ 0, 0, 1]), new Vec([0, 0, 0]), new Vec([0,-1, 0]));
+                    break;
+                }
+                
+                this.beginUpdate(face);
+                drawFunc(face,viewMatrix,projectionMatrix);
+                this.endUpdate(face);
+            }
+        }
+        this.restoreVertexBufferState();
+    }
+
+    readPixels(x: number, y: number, width: number, height: number): Uint8Array | undefined {
+        return undefined;
+    }
+ }