ris-framework 0.1.0-dev.4

package/src/core/sprite-batch/SpriteBatchDrawable.ts

@@ -0,0 +1,146 @@
+import type {
+    IFramework,
+    ISpriteRenderPipeline,
+    ITexture2D,
+    IUniformBuffer,
+    Color,
+    IDisposable, ISampler
+} from "ris-framework-api";
+import {SpriteBatchMesh} from "./SpriteBatchMesh.ts";
+import type {vec2, vec3} from "gl-matrix";
+
+/**
+ * The drawable class for sprite batch.
+ */
+export class SpriteBatchDrawable implements IDisposable {
+
+    private readonly _framework: IFramework;
+    private readonly _texture: ITexture2D;
+    private readonly _sampler: ISampler;
+    private _maxBatchSize: number;
+    private _drawingMesh: SpriteBatchMesh = null!;
+    private _renderPipeline: ISpriteRenderPipeline = null!;
+
+    private _needsResize = false;
+
+    private _fromInstance = 0;
+    private _toInstance = 0;
+
+    /**
+     * The constructor.
+     * @param framework The framework.
+     * @param texture The texture.
+     * @param sampler The sampler.
+     * @param projectionViewBuffer The projection view buffer.
+     * @param maxBatchSize The maximum size of batch.
+     */
+    public constructor(
+        framework: IFramework,
+        texture: ITexture2D,
+        sampler: ISampler,
+        projectionViewBuffer: IUniformBuffer,
+        maxBatchSize: number) {
+        this._framework = framework;
+        this._texture = texture;
+        this._sampler = sampler;
+        this._maxBatchSize = maxBatchSize;
+        this.projectionViewBuffer = projectionViewBuffer;
+    }
+
+    /**
+     * The projection view buffer.
+     */
+    public readonly projectionViewBuffer: IUniformBuffer;
+
+    /** Initialize the drawable */
+    public initialize(): void {
+        this._renderPipeline = this._framework
+            .renderPipelineFactory
+            .createSpriteRenderPipeline(this.projectionViewBuffer);
+        this._renderPipeline.spriteTexture = this._texture;
+        this._renderPipeline.textureSampler = this._sampler;
+
+        this._drawingMesh = new SpriteBatchMesh(this._framework, this._maxBatchSize);
+        this._drawingMesh.initialize();
+    }
+
+    /**
+     * Resets the batch for new draw operation.
+     */
+    public reset(): void {
+        // Nothing is drawn yet.
+        this._fromInstance = 0;
+        this._toInstance = 0;
+    }
+
+    /**
+     * Writes a sprite to the batch sprite mesh.
+     *
+     * @param position - The position of the sprite.
+     * @param size - The size of the sprite.
+     * @param color - The color of the sprite.
+     * @param u0 - The minimum U texture coordinate. Defaults to `0`.
+     * @param v0 - The minimum V texture coordinate. Defaults to `0`.
+     * @param u1 - The maximum U texture coordinate. Defaults to `1`.
+     * @param v1 - The maximum V texture coordinate. Defaults to `1`.
+     * @param flipY - Whether to vertically flip the texture coordinates. Defaults to `false`.
+     */
+    public writeSprite(
+        position: vec3, size: vec2, color: Color,
+        u0 = 0, v0 = 0, u1 = 1, v1 = 1,
+        flipY = false
+    ): void {
+        // We must wait for frame end to resize.
+        if (this._toInstance >= this._maxBatchSize) {
+            this._needsResize = true;
+            return;
+        }
+
+        this._drawingMesh.writeSprite(this._toInstance, position, size, color, u0, v0, u1, v1, flipY);
+
+        // Write at correct position.
+        this._toInstance++;
+    }
+
+    /** Draws the mesh */
+    public draw(): void {
+        // Nothing to draw.
+        if (this._toInstance <= 0 || this._fromInstance > this._toInstance) {
+            return;
+        }
+
+        // Clamp instance to max batch size.
+        if (this._toInstance >= this._maxBatchSize) {
+            this._toInstance = this._maxBatchSize - 1;
+        }
+
+        // Draw mesh.
+        const indicesOffset = this._fromInstance * 6;
+        const indicesCount = this._toInstance * 6 - indicesOffset;
+        this._drawingMesh.applyChanges();
+        this._renderPipeline.render(
+            this._drawingMesh.vertexBuffer!,
+            this._drawingMesh.indexBuffer!,
+            indicesCount,
+            indicesOffset);
+        this._fromInstance = this._toInstance;
+    }
+
+    /**
+     * Call on frame end to handle any potential resize request.
+     */
+    public frameEnd(): void {
+        if (this._needsResize) {
+            this._maxBatchSize *= 2;
+            this._drawingMesh.resize(this._maxBatchSize);
+        }
+
+        this._needsResize = false;
+    }
+
+    /** @inheritDoc */
+    public dispose(): void {
+        this._renderPipeline.dispose();
+        this._drawingMesh.dispose();
+    }
+}

package/src/core/sprite-batch/SpriteBatchMesh.ts

@@ -0,0 +1,243 @@
+import type {vec2, vec3} from "gl-matrix";
+import {BufferUsage, type Color, type IFramework, Mesh} from "ris-framework-api";
+
+/**
+ * The sprite batch mesh.
+ */
+export class SpriteBatchMesh extends Mesh {
+
+    /**
+     * The number of floats components per vertex.
+     * 9 since it's build as (xyz rgba uv).
+     */
+    static readonly TOTAL_FLOATS_PER_VERTEX = 9;
+
+    /** 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 _maxInstances = 0;
+    private _lastIndex = -1;
+
+    /**
+     * The constructor for the batch sprite mesh.
+     */
+    public constructor(framework: IFramework, numberOfInstances: number) {
+        super(framework);
+        this._maxInstances = numberOfInstances;
+
+        this._vertexData = new Array(this.maxInstances * SpriteBatchMesh.TOTAL_FLOATS_IN_SPRITE);
+
+        this._setupIndices();
+    }
+
+    private _setupIndices(): void {
+        const indices = [];
+
+        for (let i = 0; i < this.maxInstances; i++) {
+            // Indices
+            const indicesStartIndex = i * 4;
+
+            indices.push(indicesStartIndex + 2); // Bottom left.
+            indices.push(indicesStartIndex + 3); // Bottom right.
+            indices.push(indicesStartIndex + 1); // Top right.
+            indices.push(indicesStartIndex + 1); // Top right.
+            indices.push(indicesStartIndex + 0); // Top left.
+            indices.push(indicesStartIndex + 2); // Bottom left.
+        }
+
+        this._indices = indices;
+    }
+
+    /** The maximum number of instances that can be batched. */
+    public get maxInstances() {
+        return this._maxInstances;
+    }
+
+    /** @inheritDoc */
+    public override initialize(): void {
+        this._vertexBuffer = this._framework.bufferFactory.createVertexBuffer(
+            this._vertexData!,
+            this.maxInstances * 4,
+            BufferUsage.VERTEX | BufferUsage.COPY_DST,
+            "SpriteBatchMesh.VertexBuffer");
+
+        this._indexBuffer = this._framework.bufferFactory.createIndexBuffer(
+            this._indices!,
+            "SpriteBatchMesh.IndexBuffer");
+
+    }
+
+    /** Resize the batch sprite mesh so that more instances can be drawn. */
+    public resize(newSize: number): void {
+        if (newSize == this.maxInstances) {
+            return;
+        }
+
+        this._maxInstances = newSize;
+
+        // Create new data.
+        const newData = new Array(this._maxInstances * SpriteBatchMesh.TOTAL_FLOATS_IN_SPRITE); // 36 due to 9(xyz rgba uv) * 4 vertices.
+
+        // Copy to new data.
+        newData.push(this._vertexData)
+
+        // Replace old data.
+        this._vertexData = newData;
+
+        this._setupIndices();
+
+        // Dispose of buffers.
+        this._vertexBuffer?.dispose();
+        this._indexBuffer?.dispose();
+
+        // Assign new buffers.
+        this.initialize();
+    }
+
+    /** @inheritDoc */
+    public writeSprite(
+        instance: number,
+        position: vec3, size: vec2, color: Color,
+        u0 = 0, v0 = 0, u1 = 1, v1 = 1, flipY = false) {
+        if (flipY) {
+            v0 = 1;
+            v1 = 0;
+        }
+
+        let index = instance * SpriteBatchMesh.TOTAL_FLOATS_IN_SPRITE; // 36 due to 9 * 4 vertices.
+
+        // Top left.
+        this._vertexData![index++] = position[0]
+        this._vertexData![index++] = position[1];
+        this._vertexData![index++] = position[2];
+        this._vertexData![index++] = color.r;
+        this._vertexData![index++] = color.g;
+        this._vertexData![index++] = color.b;
+        this._vertexData![index++] = color.a;
+        this._vertexData![index++] = u0;
+        this._vertexData![index++] = v0;
+
+        // Top right.
+        this._vertexData![index++] = position[0] + size[0];
+        this._vertexData![index++] = position[1];
+        this._vertexData![index++] = position[2];
+        this._vertexData![index++] = color.r;
+        this._vertexData![index++] = color.g;
+        this._vertexData![index++] = color.b;
+        this._vertexData![index++] = color.a;
+        this._vertexData![index++] = u1;
+        this._vertexData![index++] = v0;
+
+        // Bottom left.
+        this._vertexData![index++] = position[0];
+        this._vertexData![index++] = position[1] + size[1];
+        this._vertexData![index++] = position[2];
+        this._vertexData![index++] = color.r;
+        this._vertexData![index++] = color.g;
+        this._vertexData![index++] = color.b;
+        this._vertexData![index++] = color.a;
+        this._vertexData![index++] = u0;
+        this._vertexData![index++] = v1;
+
+        // Bottom right.
+        this._vertexData![index++] = position[0] + size[0];
+        this._vertexData![index++] = position[1] + size[1];
+        this._vertexData![index++] = position[2];
+        this._vertexData![index++] = color.r;
+        this._vertexData![index++] = color.g;
+        this._vertexData![index++] = color.b;
+        this._vertexData![index++] = color.a;
+        this._vertexData![index++] = u1;
+        this._vertexData![index] = v1;
+
+        this._lastIndex = index;
+    }
+
+    /*
+    public void WriteSprite(int instance,
+    Vector3D<float> position,
+    Vector2D<float> size,
+        Color color,
+        float rotation, Vector2D<float> rotationOrigin,
+        float u0 = 0, float v0 = 0, float u1 = 1, float v1 = 1)
+    {
+        int index = instance * TOTAL_FLOATS_IN_SPRITE; // 36 due to 9 * 4 vertices.
+
+        Vector2D<float> topLeft = new(position.X, position.Y);
+        Vector2D<float> topRight = new(position.X + size.X, position.Y);
+        Vector2D<float> bottomLeft = new(position.X, position.Y + size.Y);
+        Vector2D<float> bottomRight = new(position.X + size.X, position.Y + size.Y);
+
+        if (rotation != 0)
+        {
+            Vector2D<float> rotationOriginOffset = new (
+                topLeft.X + rotationOrigin.X * size.X,
+                topLeft.Y + rotationOrigin.Y * size.Y);
+
+            topLeft.RotateSelfAroundPointCCW(rotationOriginOffset, rotation);
+            topRight.RotateSelfAroundPointCCW(rotationOriginOffset, rotation);
+            bottomLeft.RotateSelfAroundPointCCW(rotationOriginOffset, rotation);
+            bottomRight.RotateSelfAroundPointCCW(rotationOriginOffset, rotation);
+        }
+
+        // Top left.
+        _vertexData[index++] = topLeft.X;
+        _vertexData[index++] = topLeft.Y;
+        _vertexData[index++] = position.Z;
+        _vertexData[index++] = color.R;
+        _vertexData[index++] = color.G;
+        _vertexData[index++] = color.B;
+        _vertexData[index++] = color.A;
+        _vertexData[index++] = u0;
+        _vertexData[index++] = v0;
+
+        // Top right.
+        _vertexData[index++] = topRight.X;
+        _vertexData[index++] = topRight.Y;
+        _vertexData[index++] = position.Z;
+        _vertexData[index++] = color.R;
+        _vertexData[index++] = color.G;
+        _vertexData[index++] = color.B;
+        _vertexData[index++] = color.A;
+        _vertexData[index++] = u1;
+        _vertexData[index++] = v0;
+
+        // Bottom left.
+        _vertexData[index++] = bottomLeft.X;
+        _vertexData[index++] = bottomLeft.Y;
+        _vertexData[index++] = position.Z;
+        _vertexData[index++] = color.R;
+        _vertexData[index++] = color.G;
+        _vertexData[index++] = color.B;
+        _vertexData[index++] = color.A;
+        _vertexData[index++] = u0;
+        _vertexData[index++] = v1;
+
+        // Bottom right.
+        _vertexData[index++] = bottomRight.X;
+        _vertexData[index++] = bottomRight.Y;
+        _vertexData[index++] = position.Z;
+        _vertexData[index++] = color.R;
+        _vertexData[index++] = color.G;
+        _vertexData[index++] = color.B;
+        _vertexData[index++] = color.A;
+        _vertexData[index++] = u1;
+        _vertexData[index] = v1;
+    }
+     */
+
+    /** @inheritDoc */
+    public override applyChanges(): void {
+
+        if(this._lastIndex <= 0)
+        {
+            return;
+        }
+
+        // TODO: update is way to large. U
+
+        // Update only to last index.
+        // Increment index by 1, since it's index, not a count.
+        this._vertexBuffer!.update(this._vertexData!, 0, this._lastIndex + 1);
+    }
+}

package/src/core/window/window-manager.ts

@@ -0,0 +1,76 @@
+import type { vec2 } from "gl-matrix";
+import {WindowBounds, type IWindowManager} from "ris-framework-api";
+
+/**
+ * The implementation of the IWindowManager interface.
+ */
+export class WindowManager implements IWindowManager {
+  private readonly _canvas: HTMLCanvasElement;
+  private readonly _updateCallbacks: Array<() => void> = [];
+  private readonly _renderCallbacks: Array<() => void> = [];
+
+  /**
+   * The constructor for the WindowManager class.
+   * @param canvas An optional HTMLCanvasElement to associate with the window manager. If <c>null</c>, window manager will create its own canvas.
+   */
+  public constructor(canvas: HTMLCanvasElement | null = null) {
+    this._canvas = canvas ?? document.createElement("canvas");
+    if (!canvas) {
+      document.body.appendChild(this._canvas);
+    }
+  }
+
+  handleSwapChain = true;
+    windowBounds = new WindowBounds();
+    title = "";
+    addUpdateListener(event: () => void): void {
+        this._updateCallbacks.push(event);
+    }
+    removeUpdateListener(event: () => void): void {
+        const index = this._updateCallbacks.indexOf(event);
+        if (index >= 0) {
+            this._updateCallbacks.splice(index, 1);
+        }
+    }
+    addRenderListener(event: () => void): void {
+        this._renderCallbacks.push(event);
+    }
+    removeRenderListener(event: () => void): void {
+        const index = this._renderCallbacks.indexOf(event);
+        if (index >= 0) {
+            this._renderCallbacks.splice(index, 1);
+        }
+    }
+    addOnResizeListener(_event: (arg1: IWindowManager, arg2: vec2) => void): void {
+        throw new Error("Method not implemented.");
+    }
+    removeOnResizeListener(_event: (arg1: IWindowManager, arg2: vec2) => void): void {
+        throw new Error("Method not implemented.");
+    }
+    initializeForWebGPU(): void {
+        throw new Error("Method not implemented.");
+    }
+    initializeForWebGl(): void {
+        throw new Error("Method not implemented.");
+    }
+    dispose(): void {
+        throw new Error("Method not implemented.");
+    }
+
+  /** @inheritdoc */
+  runEventLoop(): void {
+    for (const callback of this._updateCallbacks) {
+      callback();
+    }
+    for (const callback of this._renderCallbacks) {
+      callback();
+    }
+
+    requestAnimationFrame(() => this.runEventLoop());
+  }
+
+  /** @inheritdoc */
+  public get canvas(): HTMLCanvasElement {
+    return this._canvas;
+  }
+}

package/src/counter.ts

@@ -0,0 +1,9 @@
+export function setupCounter(element: HTMLButtonElement) {
+  let counter = 0
+  const setCounter = (count: number) => {
+    counter = count
+    element.innerHTML = `count is ${counter}`
+  }
+  element.addEventListener('click', () => setCounter(counter + 1))
+  setCounter(0)
+}

package/src/geometry/BaseGeometry.ts

@@ -0,0 +1,148 @@
+import { GeometryFormat } from "./GeometryFormat.ts";
+import {VertexFormat} from "../VertexFormat.ts";
+import type {IGeometry} from "ris-framework-api";
+
+export class BaseGeometry implements IGeometry {
+
+    /** @inheritdoc */
+    public vertexCount: number = 0;
+
+    /** @inheritdoc */
+    public positions?: number[];
+
+    /** @inheritdoc */
+    public positionsFormat: VertexFormat = VertexFormat.FLOAT_32X3;
+
+    /** @inheritdoc */
+    public colors?: number[];
+
+    /** @inheritdoc */
+    public colorFormat: VertexFormat = VertexFormat.FLOAT_32X4;
+
+    /** @inheritdoc */
+    public textureCoords?: number[];
+
+    /** @inheritdoc */
+    public textureFormat: VertexFormat = VertexFormat.FLOAT_32X2;
+
+    /** @inheritdoc */
+    public normals?: number[];
+
+    /** @inheritdoc */
+    public normalsFormat: VertexFormat = VertexFormat.FLOAT_32X3;
+
+    /** The indices of geometry. */
+    public indices?: number[];
+
+    /**
+     * Pushes vertex data from source format to destination format.
+     * @param index The index of the vertex to push.
+     * @param source The source vertex data.
+     * @param sourceFormat The vertex format of the source vertex data.
+     * @param destination The destination array to push the vertex data to.
+     * @param destinationFormat The vertex format of the destination vertex data.
+     */
+    private pushFormat(index: number,
+        source: number[],
+        sourceFormat: VertexFormat,
+        destination: number[],
+        destinationFormat: VertexFormat) {
+        // This simply takes the source format and pushes new vertices to the destination format.
+        // If the source format is less than destination, 0 is being pushed in its place.
+        let _0 = 0;
+        let _1 = 0;
+        let _2 = 0;
+        let _3 = 0;
+
+        if (sourceFormat == VertexFormat.FLOAT_32) {
+            _0 = source[index];
+        }
+        else if (sourceFormat == VertexFormat.FLOAT_32X2) {
+            _0 = source[index * 2];
+            _1 = source[index * 2 + 1];
+        }
+        else if (sourceFormat == VertexFormat.FLOAT_32X3) {
+            _0 = source[index * 3];
+            _1 = source[index * 3 + 1];
+            _2 = source[index * 3 + 2];
+        }
+        else if (sourceFormat == VertexFormat.FLOAT_32X4) {
+            _0 = source[index * 4];
+            _1 = source[index * 4 + 1];
+            _2 = source[index * 4 + 2];
+            _3 = source[index * 4 + 3];
+        }
+
+        destination.push(_0);
+        if (destinationFormat >= VertexFormat.FLOAT_32X2) {
+            destination.push(_1);
+        }
+
+        if (destinationFormat >= VertexFormat.FLOAT_32X3) {
+            destination.push(_2);
+        }
+
+        if (destinationFormat >= VertexFormat.FLOAT_32X4) {
+            destination.push(_3);
+        }
+    }
+
+    /**
+     * Converts the geometry data to interleaved vertex data based on the specified geometry format.
+     * @param format The geometry format to convert the geometry data to.
+     * @returns The interleaved vertex data as an array of numbers.
+     */
+    public toInterleaved(format: GeometryFormat): number[] {
+        let interleavedData: number[] = [];
+
+        switch (format) {
+            case GeometryFormat.POS3_TEXTURECOORDS2:
+                {
+                    let count = this.positions!.length / 3;
+
+                    for (let i = 0; i < count; i++) {
+                        this.pushFormat(i, this.positions!, VertexFormat.FLOAT_32X3, interleavedData, VertexFormat.FLOAT_32X3);
+                        this.pushFormat(i, this.textureCoords!, VertexFormat.FLOAT_32X2, interleavedData, VertexFormat.FLOAT_32X2);
+                    }
+                    break;
+                }
+            case GeometryFormat.POS3_COLOR4_TEXTURECOORDS2:
+                {
+                    let count = this.positions!.length / 3;
+
+                    for (let i = 0; i < count; i++) {
+                        this.pushFormat(i, this.positions!, VertexFormat.FLOAT_32X3, interleavedData, VertexFormat.FLOAT_32X3);
+                        this.pushFormat(i, this.colors!, VertexFormat.FLOAT_32X4, interleavedData, VertexFormat.FLOAT_32X4);
+                        this.pushFormat(i, this.textureCoords!, VertexFormat.FLOAT_32X2, interleavedData, VertexFormat.FLOAT_32X2);
+                    }
+                    break;
+                }
+            case GeometryFormat.POS3_COLOR4_TEXTURECOORDS2_NORMAL3:
+                {
+                    let count = this.positions!.length / 3;
+
+                    for (let i = 0; i < count; i++) {
+                        this.pushFormat(i, this.positions!, VertexFormat.FLOAT_32X3, interleavedData, VertexFormat.FLOAT_32X3);
+                        this.pushFormat(i, this.colors!, VertexFormat.FLOAT_32X4, interleavedData, VertexFormat.FLOAT_32X4);
+                        this.pushFormat(i, this.textureCoords!, VertexFormat.FLOAT_32X2, interleavedData, VertexFormat.FLOAT_32X2);
+                        this.pushFormat(i, this.normals!, VertexFormat.FLOAT_32X3, interleavedData, VertexFormat.FLOAT_32X3);
+                    }
+                    break;
+                }
+            case GeometryFormat.POS3_COLOR4_TEXTURECOORDS2_ALIGNED:
+                {
+                    let count = this.positions!.length / 3;
+
+                    for (let i = 0; i < count; i++) {
+                        this.pushFormat(i, this.positions!, VertexFormat.FLOAT_32X3, interleavedData, VertexFormat.FLOAT_32X4);
+                        this.pushFormat(i, this.colors!, VertexFormat.FLOAT_32X4, interleavedData, VertexFormat.FLOAT_32X4);
+                        this.pushFormat(i, this.textureCoords!, VertexFormat.FLOAT_32X2, interleavedData, VertexFormat.FLOAT_32X4);
+                    }
+                    break;
+                }
+        }
+
+
+        return interleavedData;
+    }
+}

package/src/geometry/GeometryBuilder.ts

@@ -0,0 +1,58 @@
+import { vec2 } from "gl-matrix"
+import { BaseGeometry } from "./BaseGeometry.ts";
+import type {IGeometry, IGeometryBuilder} from "ris-framework-api";
+
+/**
+ * The GeometryBuilder class provides methods for creating various types of geometries, such as quads, with specified parameters like scale and winding order.
+ */
+export class GeometryBuilder implements IGeometryBuilder {
+
+    static DEFAULT_SCALE = vec2.fromValues(1,1);
+
+    /** @inheritdoc */
+    public quadGeometry(scale?: vec2 | null, counterClockwise: boolean = true): IGeometry {
+
+        scale = scale ?? GeometryBuilder.DEFAULT_SCALE;
+
+        const geometry = new BaseGeometry();
+        geometry.vertexCount = 4;
+        geometry.positions = [
+            -0.5 * scale[0], -0.5 * scale[1], 0.0, // bottom left
+            -0.5 * scale[0], 0.5 * scale[1], 0.0, // top left
+            0.5 * scale[0], -0.5 * scale[1], 0.0, // bottom right
+            0.5 * scale[0], 0.5 * scale[1], 0.0, // top right
+        ];
+        if (counterClockwise) {
+            geometry.indices = [
+                    2, 3, 1, // t1
+                    1, 0, 2 // t2 
+                ];
+        }
+        else {
+            geometry.indices = [
+                    1, 3, 2, // t1
+                    2, 0, 1 // t2 
+                ];
+        }
+        geometry.colors = [
+                1, 1, 1, 1,
+                1, 1, 1, 1,
+                1, 1, 1, 1,
+                1, 1, 1, 1
+            ];
+        geometry.textureCoords = [
+                0, 1, // bottom left
+                0, 0, // top left
+                1, 1, // bottom right
+                1, 0 // top right
+            ];
+        geometry.normals =  [
+                0, 0, 1,
+                0, 0, 1,
+                0, 0, 1,
+                0, 0, 1,
+            ];
+
+        return geometry;
+    }
+}