ris-framework 0.1.0-dev.9 → 0.2.0-dev.11

package/src/api/sprites/SpriteBatchMesh.ts

@@ -1,5 +1,6 @@
 import type {vec2, vec3} from "gl-matrix";
 import {BufferUsage, type Color, type IFramework, Mesh} from "../index.ts";
+import type {SpriteMaterial} from "../material/SpriteMaterial.ts";
 
 /**
  * The sprite batch mesh.
@@ -15,14 +16,26 @@ export class SpriteBatchMesh extends Mesh {
     /** The total number of floats in a sprite. 4 for each vertex * 9 floats per vertex (xyz rgba uv). */
     static readonly TOTAL_FLOATS_IN_SPRITE = 4 * this.TOTAL_FLOATS_PER_VERTEX;
 
+    private readonly _spriteMaterial: SpriteMaterial;
     private _maxInstances = 0;
     private _lastIndex = -1;
 
+    /** The offset of the first index to draw. Defaults to 0. */
+    public indicesOffset = 0;
+
+    /** The number of indices to draw. If -1 draws all indices. */
+    public indicesCount = -1;
+
     /**
      * The constructor for the batch sprite mesh.
+     * @param framework - The framework.
+     * @param material - The material.
+     * @param numberOfInstances - The number of instances.
      */
-    public constructor(framework: IFramework, numberOfInstances: number) {
-        super(framework);
+    public constructor(framework: IFramework, material: SpriteMaterial, numberOfInstances: number) {
+        // Drawn by the sprite batch, not by a scene.
+        super(framework, null, material);
+        this._spriteMaterial = material;
         this._maxInstances = numberOfInstances;
 
         this._vertexData = new Array(this.maxInstances * SpriteBatchMesh.TOTAL_FLOATS_IN_SPRITE);
@@ -48,6 +61,13 @@ export class SpriteBatchMesh extends Mesh {
         this._indices = indices;
     }
 
+    /**
+     * Draws the mesh with its sprite material, using {@link indicesCount} and {@link indicesOffset}.
+     */
+    public draw(): void {
+        this._spriteMaterial.render(this._vertexBuffer!, this._indexBuffer!, this.indicesCount, this.indicesOffset);
+    }
+
     /** The maximum number of instances that can be batched. */
     public get maxInstances() {
         return this._maxInstances;
@@ -233,8 +253,7 @@ export class SpriteBatchMesh extends Mesh {
     /** @inheritDoc */
     public override applyChanges(): void {
 
-        if(this._lastIndex <= 0)
-        {
+        if (this._lastIndex <= 0) {
             return;
         }
 

package/src/api/utilities/GeometryUtilities.ts

@@ -13,6 +13,8 @@ export class GeometryUtilities {
         switch (geometryFormat) {
             case GeometryFormat.POS3_COLOR4_TEXTURECOORDS2:
                 return (3 + 4 + 2) * Float32Array.BYTES_PER_ELEMENT;
+            case GeometryFormat.POS3_COLOR4_TEXTURECOORDS2_NORMAL3:
+                return (3 + 4 + 2 + 3) * Float32Array.BYTES_PER_ELEMENT;
             default:
                 throw new Error("Unknown geometryFormat");
         }

package/src/api/window/WindowManager.ts

@@ -8,6 +8,9 @@ export class WindowManager implements IWindowManager {
   private readonly _canvas: HTMLCanvasElement;
   private readonly _updateCallbacks: Array<() => void> = [];
   private readonly _renderCallbacks: Array<() => void> = [];
+  private readonly _ownsCanvas: boolean;
+  private _animationFrame: number | null = null;
+  private _disposed = false;
 
   /**
    * The constructor for the WindowManager class.
@@ -15,6 +18,7 @@ export class WindowManager implements IWindowManager {
    */
   public constructor(canvas: HTMLCanvasElement | null = null) {
     this._canvas = canvas ?? document.createElement("canvas");
+    this._ownsCanvas = !canvas;
     if (!canvas) {
       document.body.appendChild(this._canvas);
     }
@@ -53,12 +57,28 @@ export class WindowManager implements IWindowManager {
     initializeForWebGl(): void {
         throw new Error("Method not implemented.");
     }
+    /** Stops the event loop, drops all callbacks and removes the canvas when this manager created it. */
     dispose(): void {
-        throw new Error("Method not implemented.");
+        if (this._disposed) {
+            return;
+        }
+        this._disposed = true;
+        if (this._animationFrame !== null) {
+            cancelAnimationFrame(this._animationFrame);
+            this._animationFrame = null;
+        }
+        this._updateCallbacks.length = 0;
+        this._renderCallbacks.length = 0;
+        if (this._ownsCanvas) {
+            this._canvas.remove();
+        }
     }
 
   /** @inheritdoc */
   runEventLoop(): void {
+    if (this._disposed) {
+      return;
+    }
     for (const callback of this._updateCallbacks) {
       callback();
     }
@@ -66,7 +86,7 @@ export class WindowManager implements IWindowManager {
       callback();
     }
 
-    requestAnimationFrame(() => this.runEventLoop());
+    this._animationFrame = requestAnimationFrame(() => this.runEventLoop());
   }
 
   /** @inheritdoc */

package/src/core/rendering/vertex-buffer-layout.ts

@@ -80,4 +80,35 @@ export class VertexBufferLayout implements IVertexBufferLayout {
             ]
         );
     }
-}
+
+    static createFloat3Float4Float2Float3Layout(): VertexBufferLayout {
+        const floatSize = 4;
+
+        return new VertexBufferLayout(
+            (3 + 4 + 2 + 3) * floatSize,
+            VertexStepMode.VERTEX,
+            [
+                {
+                    format: VertexFormat.FLOAT_32X3,
+                    offset: 0,
+                    shaderLocation: 0,
+                },
+                {
+                    format: VertexFormat.FLOAT_32X4,
+                    offset: 3 * floatSize,
+                    shaderLocation: 1,
+                },
+                {
+                    format: VertexFormat.FLOAT_32X2,
+                    offset: (3 + 4) * floatSize,
+                    shaderLocation: 2,
+                },
+                {
+                    format: VertexFormat.FLOAT_32X3,
+                    offset: (3 + 4 + 2) * floatSize,
+                    shaderLocation: 3,
+                },
+            ]
+        );
+    }
+}

package/src/main.ts

@@ -1,5 +1,4 @@
 import './style.css'
-import "reflect-metadata";
 
 import typescriptLogo from './typescript.svg'
 import viteLogo from '/vite.svg'

package/src/webgl/WebGlGraphicsDevice.ts

@@ -82,7 +82,6 @@ export class WebGlGraphicsDevice extends AGraphicsDevice {
 
         this._canvas = this._windowManager.canvas;
 
-        debugger;
         const contextOptions: WebGLContextAttributes = {
             antialias: false,
             alpha: this._descriptor.alpha,

package/src/webgl/lights/WebGlAmbientLightFactory.ts

@@ -0,0 +1,35 @@
+import {
+    AmbientLight,
+    Color,
+    type AmbientLightDescriptor,
+    type AmbientLightFactory,
+    type IFramework,
+    type LightsBuffer,
+    type LightsBufferDescriptor,
+    type Scene,
+} from "../../api/index.ts";
+import {WebGlLightsBuffer} from "./WebGlLightsBuffer.ts";
+
+/** The WebGL implementation of the light factory. */
+export class WebGlAmbientLightFactory implements AmbientLightFactory {
+
+    /** The colour used when no descriptor is given. */
+    public static readonly DEFAULT_COLOR = new Color(0.1, 0.1, 0.1);
+
+    /**
+     * The constructor.
+     * @param _framework The framework.
+     */
+    public constructor(private readonly _framework: IFramework) {
+    }
+
+    /** @inheritDoc */
+    public createAmbientLight(desc?: AmbientLightDescriptor, scene?: Scene): AmbientLight {
+        return new AmbientLight({...desc, color: desc?.color ?? WebGlAmbientLightFactory.DEFAULT_COLOR}, scene);
+    }
+
+    /** @inheritDoc */
+    public __createLightsBuffer(desc?: LightsBufferDescriptor): LightsBuffer {
+        return new WebGlLightsBuffer(this._framework, desc);
+    }
+}

package/src/webgl/lights/WebGlLightsBuffer.ts

@@ -0,0 +1,215 @@
+import {
+    AmbientLight,
+    BufferUsage,
+    DirectionalLight,
+    PointLight,
+    type Color,
+    DEFAULT_POINT_LIGHTS_COUNT,
+    type IFramework,
+    type IUniformBuffer,
+    type LightsBuffer,
+    type LightsBufferDescriptor,
+    DEFAULT_DIRECTIONAL_LIGHTS_COUNT,
+} from "../../api/index.ts";
+
+/**
+ * The WebGL lights buffer. Owns a std140 uniform buffer for the `LightsBuffer` block.
+ * See {@link LightsBuffer} for the layout.
+ */
+export class WebGlLightsBuffer implements LightsBuffer {
+
+    /** Floats for the ambient light: vec3 padded to 16 bytes. */
+    public static readonly AMBIENT_FLOAT_COUNT = 4;
+
+    /** Floats per directional light: two vec3, each padded to 16 bytes. */
+    public static readonly DIRECTIONAL_LIGHT_FLOAT_COUNT = 8;
+
+    /** Floats per point light: vec3 light + float constant, vec3 position + float linear, float quadratic, padded to 48 bytes. */
+    public static readonly POINT_LIGHT_FLOAT_COUNT = 12;
+
+    private _ambientLight!: AmbientLight;
+    private readonly _buffer: IUniformBuffer;
+    private readonly _data: number[];
+    private readonly _uploaded: number[];
+    private readonly _directionalLights: DirectionalLight[] = [];
+    private readonly _pointLights: PointLight[] = [];
+    private _disposed = false;
+
+    /**
+     * The constructor.
+     * @param framework The framework, used to create the uniform buffer.
+     * @param descriptor The optional initial lights and directional light count.
+     */
+    public constructor(framework: IFramework, descriptor?: LightsBufferDescriptor) {
+        this.ambientLight = descriptor?.ambientLight ?? new AmbientLight();
+        this.maxDirectionalLights = descriptor?.maxDirectionalLights ?? DEFAULT_DIRECTIONAL_LIGHTS_COUNT;
+        this.maxPointLights = descriptor?.maxPointLights ?? DEFAULT_POINT_LIGHTS_COUNT;
+        for (const light of descriptor?.directionalLights ?? []) {
+            this.add(light);
+        }
+        for (const light of descriptor?.pointLights ?? []) {
+            this.add(light);
+        }
+
+        const floatCount = WebGlLightsBuffer.AMBIENT_FLOAT_COUNT
+            + this.maxDirectionalLights * WebGlLightsBuffer.DIRECTIONAL_LIGHT_FLOAT_COUNT
+            + this.maxPointLights * WebGlLightsBuffer.POINT_LIGHT_FLOAT_COUNT;
+        this._data = new Array<number>(floatCount).fill(0);
+        this._writeData();
+        this._uploaded = [...this._data];
+        this._buffer = framework.bufferFactory.createUniformBuffer(this._data, BufferUsage.UNIFORM | BufferUsage.COPY_DST);
+    }
+
+    /** @inheritDoc */
+    public get ambientLight(): AmbientLight {
+        return this._ambientLight;
+    }
+
+    /** @inheritDoc */
+    public set ambientLight(ambientLight: AmbientLight) {
+        this._ambientLight = ambientLight;
+    }
+
+    /** @inheritDoc */
+    public get directionalLights(): readonly DirectionalLight[] {
+        return this._directionalLights;
+    }
+
+    /** @inheritDoc */
+    public readonly maxDirectionalLights: number;
+
+    /** @inheritDoc */
+    public get pointLights(): readonly PointLight[] {
+        return this._pointLights;
+    }
+
+    /** @inheritDoc */
+    public add(light: DirectionalLight | PointLight): void {
+        const [list, max, kind] = this._listFor(light);
+        if (list.includes(light)) {
+            return;
+        }
+        if (list.length >= max) {
+            throw new Error(`LightsBuffer: cannot add ${kind} light ${light.id}; all ${max} ${kind} light slots are in use (max${kind === "directional" ? "Directional" : "Point"}Lights = ${max}).`);
+        }
+        list.push(light);
+    }
+
+    /** @inheritDoc */
+    public remove(light: DirectionalLight | PointLight): boolean {
+        const [list] = this._listFor(light);
+        const index = list.indexOf(light);
+        if (index < 0) {
+            return false;
+        }
+        list.splice(index, 1);
+        return true;
+    }
+
+    /** @inheritDoc */
+    public readonly maxPointLights: number;
+
+    /** @inheritDoc */
+    public get buffer(): IUniformBuffer {
+        return this._buffer;
+    }
+
+    /** @inheritDoc */
+    public update(): void {
+
+        // The ambient light (also a newly assigned one) is written with the rest; only changed data is uploaded.
+        this._writeData();
+        if (!this._hasChanged()) {
+            return;
+        }
+
+        this._buffer.update(this._data);
+        for (let i = 0; i < this._data.length; i++) {
+            this._uploaded[i] = this._data[i];
+        }
+    }
+
+    /** @inheritDoc */
+    public dispose(): void {
+        if (this._disposed) {
+            return;
+        }
+        this._disposed = true;
+        this._buffer.dispose();
+    }
+
+    private _writeAmbientLight() {
+        this._writeColor(0, this.ambientLight.color, this.ambientLight.intensity);
+        this._data[3] = 0; // std140 padding for vec3.
+    }
+
+    private _listFor(light: DirectionalLight | PointLight): [(DirectionalLight | PointLight)[], number, string] {
+        if (light instanceof DirectionalLight) {
+            return [this._directionalLights, this.maxDirectionalLights, "directional"];
+        }
+        if (light instanceof PointLight) {
+            return [this._pointLights, this.maxPointLights, "point"];
+        }
+        throw new Error("LightsBuffer: expected a DirectionalLight or PointLight instance.");
+    }
+
+    /** Writes color * intensity as vec3 at offset (the fourth float is left to the caller). */
+    private _writeColor(offset: number, color: Color | undefined, intensity: number): void {
+        this._data[offset] = color ? color.r * intensity : 0;
+        this._data[offset + 1] = color ? color.g * intensity : 0;
+        this._data[offset + 2] = color ? color.b * intensity : 0;
+    }
+
+    private _hasChanged(): boolean {
+        for (let i = 0; i < this._data.length; i++) {
+            if (this._data[i] !== this._uploaded[i]) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    private _writeData(): void {
+        // Written every time, so in-place colour and intensity edits are detected by _hasChanged().
+        this._writeAmbientLight();
+
+        for (let i = 0; i < this.maxDirectionalLights; i++) {
+            const offset = WebGlLightsBuffer.AMBIENT_FLOAT_COUNT + i * WebGlLightsBuffer.DIRECTIONAL_LIGHT_FLOAT_COUNT;
+            const light = this._directionalLights[i];
+
+            // vec3 light (colour * intensity)
+            this._writeColor(offset, light?.color, light?.intensity ?? 0);
+            this._data[offset + 3] = 0;
+
+            // vec3 direction
+            this._data[offset + 4] = light ? light.direction[0] : 0;
+            this._data[offset + 5] = light ? light.direction[1] : 0;
+            this._data[offset + 6] = light ? light.direction[2] : 0;
+            this._data[offset + 7] = 0;
+        }
+
+        const pointLightsStart = WebGlLightsBuffer.AMBIENT_FLOAT_COUNT
+            + this.maxDirectionalLights * WebGlLightsBuffer.DIRECTIONAL_LIGHT_FLOAT_COUNT;
+        for (let i = 0; i < this.maxPointLights; i++) {
+            const offset = pointLightsStart + i * WebGlLightsBuffer.POINT_LIGHT_FLOAT_COUNT;
+            const light = this._pointLights[i];
+
+            // vec3 light (colour * intensity), float constant
+            this._writeColor(offset, light?.color, light?.intensity ?? 0);
+            // An empty slot keeps constant at 1 so the shader never divides by zero.
+            this._data[offset + 3] = light ? light.constant : 1;
+
+            // vec3 position, float linear
+            this._data[offset + 4] = light ? light.position[0] : 0;
+            this._data[offset + 5] = light ? light.position[1] : 0;
+            this._data[offset + 6] = light ? light.position[2] : 0;
+            this._data[offset + 7] = light ? light.linear : 0;
+
+            // float quadratic, then padding to the 16-byte struct size
+            this._data[offset + 8] = light ? light.quadratic : 0;
+            this._data[offset + 9] = 0;
+            this._data[offset + 10] = 0;
+            this._data[offset + 11] = 0;
+        }
+    }
+}

package/src/webgl/render-pipelines/AWebGlRenderPipeline.ts

@@ -1,4 +1,7 @@
-import type {IBlendState, IFramework, IIndexBuffer, IPrimitiveState, IRenderPipeline, IVertexBuffer} from "../../api/index.ts";
+import {
+    GeometryFormat,
+    type IBlendState, type IFramework, type IIndexBuffer, type IPrimitiveState, type IRenderPipeline, type IVertexBuffer
+} from "../../api/index.ts";
 import type {VertexBufferLayout} from '../../core/rendering/vertex-buffer-layout';
 import type {WebGlBlendState} from '../blending/webgl-blend-state';
 import type {WebGlPrimitiveState} from '../primitive/WebGlPrimitiveState.ts';
@@ -35,6 +38,9 @@ export abstract class AWebGlRenderPipeline implements IRenderPipeline {
         this.primitiveState = (primitiveState ?? graphicsDevice.defaultPrimitiveState) as WebGlPrimitiveState;
     }
 
+    /** @inheritDoc */
+    public abstract readonly geometryFormat: GeometryFormat;
+
     /** @inheritDoc */
     public get blendState(): IBlendState {
         return this._blendState;

package/src/webgl/render-pipelines/WebGlMainRenderTargetRenderPipeline.ts

@@ -27,6 +27,9 @@ export class WebGlMainRenderTargetRenderPipeline extends AWebGlRenderPipeline im
         this._mainRenderTarget = mainRenderTarget as WebGlTexture2D;
     }
 
+    /** @inheritDoc */
+    public readonly geometryFormat = GeometryFormat.POS3_COLOR4_TEXTURECOORDS2;
+
     /** @inheritdoc */
     protected _provideBuffers(): WebGLBuffer[] {
         return [this._vertexBuffer.buffer!];

package/src/webgl/render-pipelines/WebGlRenderPipelineFactory.ts

@@ -6,10 +6,13 @@ import type {
     IMainRenderTargetRenderPipeline, IPrimitiveState, IRenderPipelineFactory,
     ISpriteRenderPipeline, ITexture2D,
     IUniformBuffer,
-    IUnlitRenderPipeline
-} from "../../api/index.ts";
+    IUnlitRenderPipeline,
+    IForwardBlinnPhongRenderPipeline,
+    ForwardBlinnPhongRenderPipelineDescriptor,
+} from "../../api";
 import {WebGlInspectTextureMipsRenderPipeline} from "./inspect/WebGlInspectTextureMipsRenderPipeline.ts";
 import {WebGlUnlitRenderPipeline} from "./material/WebGlUnlitRenderPipeline.ts";
+import {WebGlForwardBlinnPhongRenderPipeline} from "./material/WebGlBlinnPhongRenderPipeline.ts";
 
 /**
  * The WebGL implementation of the IRenderPipelineFactory interface.
@@ -37,6 +40,25 @@ export class WebGlRenderPipelineFactory implements IRenderPipelineFactory {
         return pipeline;
     }
 
+    /** @inheritDoc */
+    public createForwardBlinnPhongRenderPipeline(descriptor: ForwardBlinnPhongRenderPipelineDescriptor): IForwardBlinnPhongRenderPipeline {
+        const pipeline = new WebGlForwardBlinnPhongRenderPipeline(this._framework,
+            descriptor.projectionViewBuffer,
+            descriptor.modelBuffer,
+            descriptor.materialBuffer,
+            descriptor.lightsBuffer,
+            descriptor.cameraPositionBuffer,
+            descriptor.primitiveState
+            );
+        if (descriptor.maxDirectionalLights !== undefined || descriptor.maxPointLights !== undefined) {
+            pipeline.setLightCounts(
+                descriptor.maxDirectionalLights ?? pipeline.maxDirectionalLights,
+                descriptor.maxPointLights ?? pipeline.maxPointLights);
+        }
+        pipeline.initialize();
+        return pipeline;
+    }
+
     /** @inheritDoc */
     public createMainFrameBufferPipeline(mainFrameBuffer: ITexture2D): IMainRenderTargetRenderPipeline {
         const renderPipeline = new WebGlMainRenderTargetRenderPipeline(this._framework, mainFrameBuffer);

package/src/webgl/render-pipelines/inspect/WebGlInspectTextureMipsRenderPipeline.ts

@@ -1,9 +1,10 @@
-import type {
-    IFramework, IPrimitiveState,
-    ISampler,
-    ITexture2D,
-    IUniformBuffer,
-    IVertexBuffer
+import {
+    GeometryFormat,
+    type IFramework, type IPrimitiveState,
+    type ISampler,
+    type ITexture2D,
+    type IUniformBuffer,
+    type IVertexBuffer
 } from "../../../api/index.ts";
 import {VertexBufferLayout} from "../../../core/rendering/vertex-buffer-layout";
 import type {WebGlUniformBuffer} from "../../buffers/WebGlUniformBuffer.ts";
@@ -52,12 +53,18 @@ export class WebGlInspectTextureMipsRenderPipeline extends AWebGlRenderPipeline
                 textureConstantsBuffer: IUniformBuffer,
                 primitiveState? : IPrimitiveState
                 ) {
+        // Validated before super(), which touches WebGL.
+        if (!modelBuffer) {
+            throw new Error("WebGlInspectTextureMipsRenderPipeline: modelBuffer is required (the mesh's model buffer, std140 mat4).");
+        }
         super(framework, primitiveState);
         this._projectionViewBuffer = projectionViewBuffer as WebGlUniformBuffer;
         this._modelBuffer = modelBuffer as WebGlUniformBuffer;
         this._textureConstantsBuffer = textureConstantsBuffer as WebGlUniformBuffer;
     }
 
+    /** @inheritDoc */
+    public readonly geometryFormat = GeometryFormat.POS3_COLOR4_TEXTURECOORDS2;
 
     /** @inheritdoc */
     public get projectionViewBuffer(): IUniformBuffer {
@@ -76,6 +83,9 @@ export class WebGlInspectTextureMipsRenderPipeline extends AWebGlRenderPipeline
 
     /** @inheritdoc */
     public set modelBuffer(value: IUniformBuffer) {
+        if (!value) {
+            throw new Error("WebGlInspectTextureMipsRenderPipeline: modelBuffer is required (the mesh's model buffer, std140 mat4).");
+        }
         this._modelBuffer = asWebGLUniformBuffer(value);
     }