bg2e-js 2.1.2 → 2.2.1

package/src/render/ShadowRenderer.ts

@@ -0,0 +1,176 @@
+import { RenderLayer } from "../base/PolyList";
+import Texture, {
+    TextureComponentFormat,
+    TextureRenderTargetAttachment,
+    TextureWrap
+} from "../base/Texture";
+import Mat4 from "../math/Mat4";
+import Vec from "../math/Vec";
+import Color from "../base/Color";
+import Camera from "../scene/Camera";
+import LightComponent from "../scene/LightComponent";
+import Transform from "../scene/Transform";
+import DebugRenderer from "../debug/DebugRenderer";
+import DepthRenderShader from "../shaders/DepthRenderShader";
+import Renderer from "./Renderer";
+import Node from "../scene/Node";
+import type RenderBuffer from "./RenderBuffer";
+import type RenderQueue from "./RenderQueue";
+
+export default class ShadowRenderer {
+    _renderer: Renderer;
+    _size: Vec | null = null;
+    _texture: Texture | null = null;
+    _renderBuffer: RenderBuffer | null = null;
+    _depthTexture: Texture | null = null;
+    _shader: DepthRenderShader | null = null;
+    _shadowMapRenderDistance: number;
+    _debug: boolean;
+
+    constructor(renderer: Renderer) {
+        this._renderer = renderer;
+        this._shadowMapRenderDistance = 100;
+        this._debug = false;
+    }
+
+    get renderer(): Renderer { return this._renderer; }
+
+    get size(): Vec {
+        return this._size || new Vec(0, 0);
+    }
+
+    get shadowMapRenderDistance(): number {
+        return this._shadowMapRenderDistance;
+    }
+
+    get debug(): boolean {
+        return this._debug;
+    }
+
+    set debug(d: boolean) {
+        this._debug = d;
+    }
+
+    set shadowMapRenderDistance(d: number) {
+        this._shadowMapRenderDistance = d;
+    }
+
+    // TODO: set size. Update the shadow map size
+
+    get depthTexture(): Texture | null {
+        return this._depthTexture;
+    }
+
+    async create(size: Vec = new Vec(1024, 1024)): Promise<void> {
+        this._size = size;
+
+        this._texture = new Texture();
+        this._texture.name = `ShadowMap_${ size.width }x${ size.height }`;
+        this._texture.renderTargetAttachment = TextureRenderTargetAttachment.COLOR_ATTACHMENT_0;
+        this._texture.componentFormat = TextureComponentFormat.UNSIGNED_BYTE;
+        this._texture.wrapModeXY = TextureWrap.CLAMP;
+
+        this._renderBuffer = this.renderer.factory.renderBuffer();
+
+        await this._renderBuffer.attachTexture(this._texture);
+
+        this._depthTexture = new Texture();
+        this._depthTexture.name = `ShadowMapDepth_${ size.width }x${ size.height }`;
+        this._depthTexture.renderTargetAttachment = TextureRenderTargetAttachment.DEPTH_ATTACHMENT;
+        this._depthTexture.componentFormat = TextureComponentFormat.UNSIGNED_BYTE;
+        this._depthTexture.wrapModeXY = TextureWrap.CLAMP;
+        await this._renderBuffer.attachTexture(this._depthTexture);
+
+        this._renderBuffer.size = this._size;
+
+        this._shader = new DepthRenderShader(this.renderer);
+        await this._shader.load();
+    }
+
+    getLightTransform(camera: Camera | Node, light: LightComponent | Node): Mat4 {
+        let cameraNode: Node | null = null;
+        let cameraComponent: Camera | null = null;
+        let lightComponent: LightComponent | null = null;
+        
+        if (camera instanceof Camera) {
+            cameraNode = camera.node;
+            cameraComponent = camera;
+        }
+        else if (camera instanceof Node) {
+            cameraNode = camera;
+            cameraComponent = cameraNode.camera ?? null;
+        }
+
+        if (!cameraNode || !cameraComponent) {
+            throw Error(`ShadowRenderer.getLightPosition(): invalid camera parameter. Camera must be a Node or a Camera component, and the camera must be added to the scene.`);
+        }
+
+        let lightNode: Node | null = null;
+        if (light instanceof LightComponent) {
+            lightNode = light.node;
+            lightComponent = light;
+        }
+        else if (light instanceof Node) {
+            lightNode = light;
+            lightComponent = light.lightComponent || null;
+        }
+
+        if (!lightNode || !lightComponent) {
+            throw Error(`ShadowRenderer.getLightPosition(): invalid light. Light must be a Node or a LightComponent`);
+        }
+
+        // Get the camera focus point
+        const focus = cameraComponent!.focusDistance;
+        const cameraTransform = Transform.GetWorldMatrix(cameraNode);
+        const cameraPos = Vec.Add(Mat4.GetPosition(cameraTransform), Vec.Mult(cameraTransform.forwardVector, -focus)); 
+
+        // Get the light rotation vector and scale it to the light shadow map render distance
+        const lightTransform = Transform.GetWorldMatrix(lightNode);
+        const lightVector = Mat4.GetRotation(lightTransform).forwardVector;
+        lightVector.scale(this._shadowMapRenderDistance);
+
+        // Get the light render position, adding the camera focus point to the light vector
+        const lightPos = Vec.Add(cameraPos, lightVector);
+
+        // Set the light render position to the light transform matrix
+        lightTransform.setPosition(lightPos);
+
+        if (this._debug) {
+            DebugRenderer.Get(this._renderer).drawSphere({ radius: 0.1, color: Color.Red(), position: cameraPos });
+            DebugRenderer.Get(this.renderer).drawSphere({ radius: 0.1, color: Color.Blue(), position: lightPos });
+            DebugRenderer.Get(this.renderer).drawArrow({ length: 0.8, color: Color.Green(), transformMatrix: lightTransform });
+        }
+
+        return lightTransform;
+    }
+
+    update(camera: Camera | Node, lightComponent: LightComponent, renderQueue: RenderQueue): void {  
+        const viewMatrix: Mat4 = Mat4.GetInverted(this.getLightTransform(camera, lightComponent));
+        
+        this._renderBuffer?.update(() => {
+            this._renderBuffer!.renderer.state.clear();
+            const layer: RenderLayer = RenderLayer.OPAQUE_DEFAULT;
+            const queue = renderQueue.getQueue(layer);
+            if (queue) {
+
+                if (typeof(queue.beginOperation) === "function") {
+                    queue.beginOperation(layer);
+                }
+                queue.queue.forEach(rs => {
+                    rs.draw({
+                        overrideShader: this._shader,
+                        overrideViewMatrix: viewMatrix,
+                        overrideProjectionMatrix: lightComponent.light.projection
+                    });
+                });
+                if (typeof(queue.endOperation) === "function") {
+                    queue.endOperation(layer);
+                }
+            }
+        });
+
+        // Set the depthTexture to the light component. If the shader needs the depth texture, it will use it
+        lightComponent.depthTexture = this._depthTexture;
+        lightComponent.viewMatrix = viewMatrix;
+    }
+}

package/src/render/SkyCube.ts

@@ -0,0 +1,106 @@
+import Material from "../base/Material";
+import { createCube } from "../primitives";
+import RenderState from "./RenderState";
+import SkyCubeShader from "../shaders/SkyCubeShader";
+import Mat4 from "../math/Mat4";
+import { PolyListCullFace } from "../base/PolyList";
+import type Renderer from "./Renderer";
+import type Texture from "../base/Texture";
+import type Shader from "./Shader";
+import type PolyListRenderer from "./PolyListRenderer";
+
+export interface UpdateRenderStateOptions {
+    viewMatrix: Mat4;
+    projectionMatrix?: Mat4 | null;
+}
+
+export default class SkyCube {
+    protected _renderer: Renderer;
+    protected _texture: Texture | null;
+    protected _material: Material | null;
+    protected _shader: Shader | null;
+    protected _plistRenderer: PolyListRenderer | null;
+    protected _renderState: RenderState | null;
+
+    constructor(renderer: Renderer) {
+        this._renderer = renderer;
+        this._texture = null;
+        this._material = null;
+        this._shader = null;
+        this._plistRenderer = null;
+        this._renderState = null;
+    }
+
+    get renderer(): Renderer { return this._renderer; }
+
+    set texture(texture: Texture) {
+        if (!this._texture) {
+            throw new Error("SkyCube: setting texture to an uninitialized sky cube. The texture setter is used to change the skyCube texture once created. Use the load() method instead.");
+        }
+        if (!this._material) {
+            throw new Error("SkyCube: internal error, material is null when setting texture.");
+        }
+        this._texture = texture;
+        this._material.albedoTexture = this._texture;
+    }
+
+    async load(cubemapTexture: Texture, Shader: (new (renderer: Renderer) => any) | null = null, shaderParams: any[] = []): Promise<void> {
+        
+        this._texture = cubemapTexture;
+
+        this._material = new Material();
+        this._material.albedoTexture = this._texture;
+
+        this._shader = Shader ? new Shader(this.renderer) : new SkyCubeShader(this.renderer);
+        await this._shader?.load();
+    }
+
+    updateRenderState({ viewMatrix, projectionMatrix = null }: UpdateRenderStateOptions): RenderState {
+        const rotationMatrix = Mat4.GetRotation(viewMatrix);
+        if (!this._renderState) {
+            if (!this._material) {
+                throw new Error("SkyCube: internal error, material is null when updating render state.");
+            }
+
+            this._renderState = new RenderState({
+                shader: this._shader,
+                polyListRenderer: this.polyListRenderer,
+                materialRenderer: this.renderer.factory.material(this._material),
+                viewMatrix: rotationMatrix,
+                projectionMatrix: projectionMatrix || Mat4.MakeIdentity()
+            });
+        }
+        else {
+            this._renderState.viewMatrix = rotationMatrix;
+            if (projectionMatrix) {
+                this._renderState.projectionMatrix = projectionMatrix;
+            }
+        }
+        return this._renderState;
+    }
+
+    draw(): void {
+        throw new Error("SkyCube.draw(): Calling base implementation of SkyCube");
+    }
+
+    get polyListRenderer(): PolyListRenderer {
+        if (!this._plistRenderer) {
+            const cube = createCube(1,1,1);
+            cube.cullFace = PolyListCullFace.FRONT;  // Draw back face
+            this._plistRenderer = this.renderer.factory.polyList(cube);
+        }
+        return this._plistRenderer;
+    }
+
+    destroy(): void {
+        this._shader?.destroy();
+        this._texture?.destroy();
+        this._plistRenderer?.destroy();
+        this._material?.destroy();
+        this._shader = null;
+        this._texture = null;
+        this._material = null;
+        this._plistRenderer = null;
+        this._renderState = null;
+    }
+}

package/src/render/SkySphere.ts

@@ -0,0 +1,118 @@
+import { createSphere } from "../primitives";
+import SkySphereShader from "../shaders/SkySphereShader";
+import RenderState from "./RenderState";
+import Material from "../base/Material";
+import Texture, { ProceduralTextureFunction, TextureFilter, TextureWrap } from "../base/Texture";
+import Mat4 from "../math/Mat4";
+import { PolyListCullFace, PolyListFrontFace } from "../base/PolyList";
+import Color from "../base/Color";
+import type Renderer from "./Renderer";
+import type Shader from "./Shader";
+import type PolyListRenderer from "./PolyListRenderer";
+
+export interface UpdateRenderStateOptions {
+    viewMatrix: Mat4;
+    projectionMatrix?: Mat4 | null;
+}
+
+export default class SkySphere {
+    protected _renderer: Renderer;
+    protected _texture: Texture | null;
+    protected _material: Material | null;
+    protected _shader: Shader | null;
+    protected _plistRenderer: PolyListRenderer | null;
+    protected _renderState: RenderState | null;
+
+    constructor(renderer: Renderer) {
+        this._renderer = renderer;
+        this._texture = null;
+        this._material = null;
+        this._shader = null;
+        this._plistRenderer = null;
+        this._renderState = null;
+    }
+
+    get renderer(): Renderer { return this._renderer; }
+
+    async load(equirectangularTextureUrl: string | null, Shader: (new (renderer: Renderer) => any) | null = null): Promise<void> {
+        this._texture = new Texture();
+        if (equirectangularTextureUrl) {
+            this._texture.fileName = equirectangularTextureUrl;
+        }
+        else {
+            // Load black texture
+            this._texture.magFilter = TextureFilter.NEAREST;
+            this._texture.minFilter = TextureFilter.NEAREST;
+            this._texture.wrapModeXY = TextureWrap.REPEAT;
+            this._texture.proceduralFunction = ProceduralTextureFunction.PLAIN_COLOR;
+            this._texture.proceduralParameters = Color.Black();
+            this._texture.size = [2, 2];
+        }
+        await this._texture.loadImageData();
+
+        this._material = new Material();
+        this._material.albedoTexture = this._texture;
+
+        this._shader = Shader ? new Shader(this.renderer) : new SkySphereShader(this.renderer);
+        await this._shader?.load();
+    }
+
+    async setTexture(equirectangularTextureUrl: string): Promise<void> {
+        if (!this._texture || !this._material) {
+            throw new Error("SkySphere: setting texture to an uninitialized sky sphere. Use the load() method instead.");
+        }
+        this._texture.destroy();
+        this._texture.fileName = equirectangularTextureUrl;
+        await this._texture.loadImageData();
+
+        this._material.albedoTexture = this._texture;
+    }
+
+    updateRenderState({ viewMatrix, projectionMatrix = null }: UpdateRenderStateOptions): RenderState {
+        if (!this._material) {
+            throw new Error("SkySphere: internal error, material is null when updating render state.");
+        }
+        const rotationMatrix = Mat4.GetRotation(viewMatrix);
+        if (!this._renderState) {
+            this._renderState = new RenderState({
+                shader: this._shader,
+                polyListRenderer: this.polyListRenderer,
+                materialRenderer: this.renderer.factory.material(this._material),
+                viewMatrix: rotationMatrix,
+                projectionMatrix: projectionMatrix || Mat4.MakeIdentity()
+            });
+        }
+        else {
+            this._renderState.viewMatrix = rotationMatrix;
+            if (projectionMatrix) {
+                this._renderState.projectionMatrix = projectionMatrix;
+            }
+        }
+        return this._renderState;
+    }
+
+    draw(): void {
+        throw new Error("SkySphere.draw(): Calling base implementation of SkySphere");
+    }
+
+    get polyListRenderer(): PolyListRenderer {
+        if (!this._plistRenderer) {
+            const sphere = createSphere(3.5);
+            sphere.cullFace = PolyListCullFace.FRONT;  // Draw back face
+            this._plistRenderer = this.renderer.factory.polyList(sphere);
+        }
+        return this._plistRenderer;
+    }
+
+    destroy(): void {
+        this._shader?.destroy();
+        this._texture?.destroy();
+        this._plistRenderer?.destroy();
+        this._shader = null;
+        this._texture = null;
+        this._material?.destroy();
+        this._material = null;
+        this._plistRenderer = null;
+        this._renderState = null;
+    }
+}

package/src/render/TextureMergerRenderer.ts

@@ -0,0 +1,70 @@
+import Texture, { TextureChannel, TextureComponentFormat, TextureRenderTargetAttachment, TextureWrap } from "../base/Texture";
+import TextureMergerShader from "../shaders/TextureMergerShader";
+import Renderer from "./Renderer";
+import type RenderBuffer from "./RenderBuffer";
+
+export default class TextureMergerRenderer {
+    _renderer: Renderer;
+    _shader: TextureMergerShader;
+    _dirty: boolean;
+    _mergedTexture: Texture;
+    _renderBuffer: RenderBuffer;
+
+    constructor(renderer: Renderer) {
+        this._renderer = renderer;
+
+        this._shader = TextureMergerShader.GetUnique(this.renderer);
+
+        this._dirty = true;
+
+        this._mergedTexture = new Texture();
+        this._mergedTexture.renderTargetAttachment = TextureRenderTargetAttachment.COLOR_ATTACHMENT_0;
+        this._mergedTexture.componentFormat = TextureComponentFormat.UNSIGNED_BYTE;
+        this._mergedTexture.wrapModeXY = TextureWrap.REPEAT;
+
+        this._renderBuffer = this.renderer.factory.renderBuffer();
+        this._renderBuffer.attachTexture(this._mergedTexture);
+
+        this._shader.load();
+    }
+
+    get renderer(): Renderer {
+        return this._renderer;
+    }
+
+    get dirty(): boolean {
+        return this._dirty;
+    }
+
+    set dirty(d: boolean) {
+        this._dirty = d;
+    }
+
+    setTexture(tex: Texture | null, channel: TextureChannel, dstChannel: TextureChannel = TextureChannel.R): void {
+        if (!tex) {
+            throw new Error("TextureMergerRenderer: cannot set null texture");
+        }
+
+        this._shader.setTexture(tex, channel, dstChannel);
+        this._dirty = true;
+    }
+
+    get mergedTexture(): Texture {
+        return this._mergedTexture;
+    }
+
+    get isComplete(): boolean {
+        return this._shader.isComplete ?? false;
+    }
+
+    update(): void {
+        if (this._dirty) {
+            this._renderBuffer.update(() => {
+                // DEBUG: check why it's neccesary to present texture twice
+                this.renderer.presentTexture(null, { clearBuffers: true, shader: this._shader });
+                this.renderer.presentTexture(null, { shader: this._shader });
+            });
+            this._dirty = false;
+        }
+    }
+}

package/src/render/TextureRenderer.ts

@@ -0,0 +1,34 @@
+import Texture, { TextureTarget } from "../base/Texture";
+import Renderer from "./Renderer";
+
+export default class TextureRenderer {
+    protected _renderer: Renderer;
+    protected _texture: Texture;
+
+    constructor(renderer: Renderer, texture: Texture) {
+        if ((texture as any).renderer) {
+            throw new Error("Invalid initialization of texture renderer: The texture object is already controlled by another texture renderer.");
+        }
+
+        this._renderer = renderer;
+        this._texture = texture;
+        (this._texture as any)._renderer = this;
+    }
+
+    get renderer(): Renderer {
+        return this._renderer;
+    }
+
+    get texture(): Texture {
+        return this._texture;
+    }
+
+    getApiObject(texture: Texture): any {
+        // Return the specific texture identifier for renderer type
+        throw new Error("TextureRenderer: getApiObject() invalid usage of generic implementation of TextureRenderer");
+    }
+
+    destroy(): void {
+        throw new Error("TextureRenderer: destroy() invalid usage of generic implementation of TextureRenderer");
+    }
+}

package/src/render/index.ts

@@ -0,0 +1,67 @@
+import Environment from "./Environment";
+import FrameBuffer from "./FrameBuffer";
+import MaterialRenderer from "./MaterialRenderer";
+import Pipeline, {
+    BlendEquation,
+    BlendFunction
+} from "./Pipeline";
+import PolyListRenderer from "./PolyListRenderer";
+import RenderBuffer, {
+    RenderBufferType,
+    RenderBufferTypeName,
+    CubeMapFace
+} from "./RenderBuffer";
+import Renderer, {
+    EngineFeatures
+} from "./Renderer";
+import RenderQueue from "./RenderQueue";
+import RenderState from "./RenderState";
+import SceneAppController from "./SceneAppController";
+import SceneRenderer, {
+    FrameVisitor,
+    BindRendererVisitor,
+    InitVisitor,
+    EventCallbackVisitor
+} from "./SceneRenderer";
+import Shader from "./Shader";
+import ShadowRenderer from "./ShadowRenderer";
+import SkyCube from "./SkyCube";
+import SkySphere from "./SkySphere";
+import TextureMergerRenderer from "./TextureMergerRenderer";
+import TextureRenderer from "./TextureRenderer";
+
+import { webgl } from "./webgl/index.js";
+import WebGLRenderer from "../render/webgl/Renderer";
+
+export default {
+    Environment,
+    FrameBuffer,
+    MaterialRenderer,
+    Pipeline,
+    BlendEquation,
+    BlendFunction,
+    PolyListRenderer,
+    RenderBuffer,
+    RenderBufferType,
+    RenderBufferTypeName,
+    CubeMapFace,
+    Renderer,
+    EngineFeatures,
+    RenderQueue,
+    RenderState,
+    SceneAppController,
+    SceneRenderer,
+    FrameVisitor,
+    BindRendererVisitor,
+    InitVisitor,
+    EventCallbackVisitor,
+    Shader,
+    ShadowRenderer,
+    SkyCube,
+    SkySphere,
+    TextureMergerRenderer,
+    TextureRenderer,
+
+    webgl,
+    WebGLRenderer
+}

package/src/render/webgl/FrameBuffer.ts

@@ -0,0 +1,10 @@
+
+import FrameBuffer from "../FrameBuffer";
+import WebGLRenderer from "./Renderer";
+
+export default class WebGLFrameBuffer extends FrameBuffer {
+    clear({ color = true, depth = true, stencil = false } = {}) {
+        const { state } = this.renderer as WebGLRenderer;
+        state.clear({ color, depth, stencil });
+    }
+}