simulationjsv2 0.2.8 → 0.3.0

package/TODO.md

@@ -0,0 +1,4 @@
+# TODO
+
+- [ ] Memoize render scene buffer
+  - Should only be reset to resize to a new larger object then reused on all frames

package/dist/constants.d.ts

@@ -1,4 +1,6 @@
-export declare const BUF_LEN = 10;
-export declare const vertexSize = 40;
+export declare const vertexSize = 44;
+export declare const positionOffset = 0;
 export declare const colorOffset = 16;
 export declare const uvOffset = 32;
+export declare const drawingInstancesOffset = 40;
+export declare const BUF_LEN: number;

package/dist/constants.js

@@ -1,4 +1,6 @@
-export const BUF_LEN = 10;
-export const vertexSize = 40; // 4 * 10
+export const vertexSize = 44; // 4 * 10
+export const positionOffset = 0;
 export const colorOffset = 16; // 4 * 4
 export const uvOffset = 32; // 4 * 8
+export const drawingInstancesOffset = 40;
+export const BUF_LEN = vertexSize / 4;

package/dist/geometry.d.ts

@@ -1,6 +1,6 @@
-import { CircleGeometryParams, CubeGeometryParams, Line2dGeometryParams, Line3dGeometryParams, Mat4, PolygonGeometryParams, SplineGeometryParams, SquareGeometryParams, Vector2, Vector3, VertexColorMap } from './types.js';
+import { CircleGeometryParams, CubeGeometryParams, Line2dGeometryParams, Line3dGeometryParams, Mat4, PolygonGeometryParams, Spline2dGeometryParams, SquareGeometryParams, Vector2, Vector3, VertexColorMap } from './types.js';
 import { Color, Vertex } from './utils.js';
-import { SplinePoint2d } from './graphics.js';
+import { CubicBezierCurve2d, SplinePoint2d } from './graphics.js';
 export declare abstract class Geometry {
     protected abstract wireframeOrder: number[];
     protected abstract triangleOrder: number[];
@@ -24,7 +24,6 @@ export declare class PlaneGeometry extends Geometry {
     protected triangleOrder: number[];
     private rawVertices;
     constructor(vertices: Vertex[]);
-    private updateWireframeOrder;
     recompute(): void;
     updateVertices(vertices: Vertex[]): void;
     getTriangleBuffer(color: Color): number[];
@@ -44,7 +43,7 @@ export declare class SquareGeometry extends Geometry {
     protected wireframeOrder: number[];
     protected triangleOrder: number[];
     protected params: SquareGeometryParams;
-    constructor(width: number, height: number);
+    constructor(width: number, height: number, centerOffset?: Vector2);
     setVertexColorMap(colorMap: VertexColorMap): void;
     setWidth(width: number): void;
     setHeight(height: number): void;
@@ -68,13 +67,18 @@ export declare class CircleGeometry extends Geometry {
     private updateTriangleOrder;
     recompute(): void;
 }
-export declare class SplineGeometry extends Geometry {
+export declare class Spline2dGeometry extends Geometry {
     protected wireframeOrder: number[];
     protected triangleOrder: number[];
-    protected params: SplineGeometryParams;
+    protected params: Spline2dGeometryParams;
     constructor(points: SplinePoint2d[], color: Color, thickness: number, detail: number);
     updateInterpolationStart(start: number): void;
     updateInterpolationLimit(limit: number): void;
+    updateThickness(thickness: number): void;
+    private getVertexCount;
+    getWireframeVertexCount(): number;
+    getTriangleVertexCount(): number;
+    getCurves(): CubicBezierCurve2d[];
     private computeCurves;
     private updateWireframeOrder;
     recompute(): void;

package/dist/geometry.js

@@ -1,6 +1,7 @@
 import { mat4, vec2, vec3 } from 'wgpu-matrix';
-import { cloneBuf, interpolateColors, lossyTriangulate, matrix4, triangulateWireFrameOrder, vector2, vector2FromVector3, vector3, vector3FromVector2, vertex, vertexBuffer } from './utils.js';
+import { cloneBuf, interpolateColors, lossyTriangulate, matrix4, triangulateWireFrameOrder, vector2, vector2FromVector3, vector3, vector3FromVector2, vertex, bufferGenerator } from './utils.js';
 import { CubicBezierCurve2d } from './graphics.js';
+import { BUF_LEN } from './constants.js';
 export class Geometry {
     vertices;
     matrix;
@@ -27,7 +28,7 @@ export class Geometry {
             .map((vertexIndex) => {
             const pos = cloneBuf(this.vertices[vertexIndex]);
             vec3.transformMat4(pos, this.matrix, pos);
-            return vertexBuffer(pos[0], pos[1], pos[2], color);
+            return bufferGenerator.generate(pos[0], pos[1], pos[2], color);
         })
             .flat();
     }
@@ -50,22 +51,22 @@ export class PlaneGeometry extends Geometry {
         this.rawVertices = vertices;
         this.updateVertices(vertices);
     }
-    updateWireframeOrder() {
-        this.wireframeOrder = triangulateWireFrameOrder(this.vertices.length);
-    }
     recompute() { }
     updateVertices(vertices) {
         this.rawVertices = vertices;
         this.vertices = vertices.map((vertex) => vertex.getPos());
-        this.updateWireframeOrder();
+        this.wireframeOrder = triangulateWireFrameOrder(this.vertices.length);
+        this.triangleOrder = lossyTriangulate(Array(this.rawVertices.length)
+            .fill(0)
+            .map((_, index) => index)).flat();
     }
     getTriangleBuffer(color) {
-        return lossyTriangulate(this.rawVertices)
-            .flat()
-            .map((vertex) => {
+        return this.triangleOrder
+            .map((index) => {
+            const vertex = this.rawVertices[index];
             const pos = cloneBuf(vertex.getPos());
             vec3.transformMat4(pos, this.matrix, pos);
-            return vertexBuffer(pos[0], pos[1], pos[2], vertex.getColor() || color);
+            return bufferGenerator.generate(pos[0], pos[1], pos[2], vertex.getColor() || color);
         })
             .flat();
     }
@@ -125,12 +126,13 @@ export class SquareGeometry extends Geometry {
     wireframeOrder = [0, 1, 2, 3, 0, 2];
     triangleOrder = [0, 1, 3, 2];
     params;
-    constructor(width, height) {
+    constructor(width, height, centerOffset) {
         super([], 'strip');
         this.params = {
             width,
             height,
-            colorMap: {}
+            colorMap: {},
+            centerOffset: centerOffset || vector2(0, 0)
         };
         this.recompute();
     }
@@ -144,11 +146,12 @@ export class SquareGeometry extends Geometry {
         this.params.height = height;
     }
     recompute() {
+        const centerOffset = this.params.centerOffset;
         this.vertices = [
-            vector3(-this.params.width / 2, this.params.height / 2, 0),
-            vector3(this.params.width / 2, this.params.height / 2, 0),
-            vector3(this.params.width / 2, -this.params.height / 2, 0),
-            vector3(-this.params.width / 2, -this.params.height / 2, 0)
+            vector3(-this.params.width * centerOffset[0], this.params.height * centerOffset[1]),
+            vector3(this.params.width * (1 - centerOffset[0]), this.params.height * centerOffset[1]),
+            vector3(this.params.width * (1 - centerOffset[0]), -this.params.height * (1 - centerOffset[1])),
+            vector3(-this.params.width * centerOffset[0], -this.params.height * (1 - centerOffset[1]))
         ];
     }
     getTriangleBuffer(color) {
@@ -156,7 +159,7 @@ export class SquareGeometry extends Geometry {
             .map((vertexIndex) => {
             const pos = cloneBuf(this.vertices[vertexIndex]);
             vec3.transformMat4(pos, this.matrix, pos);
-            return vertexBuffer(pos[0], pos[1], pos[2], this.params.colorMap[vertexIndex] || color);
+            return bufferGenerator.generate(pos[0], pos[1], pos[2], this.params.colorMap[vertexIndex] || color);
         })
             .flat();
     }
@@ -207,12 +210,12 @@ export class CircleGeometry extends Geometry {
         this.updateWireframeOrder();
     }
 }
-export class SplineGeometry extends Geometry {
+export class Spline2dGeometry extends Geometry {
     wireframeOrder;
     triangleOrder;
     params;
     constructor(points, color, thickness, detail) {
-        super([], 'list');
+        super();
         this.wireframeOrder = [];
         this.triangleOrder = [];
         this.params = {
@@ -235,6 +238,21 @@ export class SplineGeometry extends Geometry {
     updateInterpolationLimit(limit) {
         this.params.interpolateLimit = Math.min(1, Math.max(0, limit));
     }
+    updateThickness(thickness) {
+        this.params.thickness = thickness;
+    }
+    getVertexCount() {
+        return this.triangleOrder.length * BUF_LEN;
+    }
+    getWireframeVertexCount() {
+        return this.getVertexCount();
+    }
+    getTriangleVertexCount() {
+        return this.getVertexCount();
+    }
+    getCurves() {
+        return this.params.curves;
+    }
     computeCurves() {
         for (let i = 0; i < this.params.points.length; i++) {
             let prevControl = null;
@@ -319,7 +337,7 @@ export class SplineGeometry extends Geometry {
             .map((vertexIndex) => {
             const vertex = cloneBuf(this.vertices[vertexIndex]);
             vec3.transformMat4(vertex, this.matrix, vertex);
-            return vertexBuffer(vertex[0], vertex[1], vertex[2], color);
+            return bufferGenerator.generate(vertex[0], vertex[1], vertex[2], color);
         })
             .flat();
     }
@@ -328,7 +346,7 @@ export class SplineGeometry extends Geometry {
             .map((vertexIndex) => {
             const vertex = cloneBuf(this.vertices[vertexIndex]);
             vec3.transformMat4(vertex, this.matrix, vertex);
-            return vertexBuffer(vertex[0], vertex[1], vertex[2], this.params.vertexColors[vertexIndex]);
+            return bufferGenerator.generate(vertex[0], vertex[1], vertex[2], this.params.vertexColors[vertexIndex]);
         })
             .flat();
     }
@@ -406,7 +424,7 @@ export class PolygonGeometry extends Geometry {
             .map((vertexIndex) => {
             const vertex = cloneBuf(this.vertices[vertexIndex]);
             vec3.transformMat4(vertex, this.matrix, vertex);
-            return vertexBuffer(vertex[0], vertex[1], 0, this.params.points[vertexIndex].getColor() || color);
+            return bufferGenerator.generate(vertex[0], vertex[1], 0, this.params.points[vertexIndex].getColor() || color);
         })
             .flat();
     }

package/dist/graphics.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="dist" />
 import { Camera } from './simulation.js';
-import type { Vector2, Vector3, LerpFunc, VertexColorMap, ElementRotation } from './types.js';
+import type { Vector2, Vector3, LerpFunc, VertexColorMap, ElementRotation, Mat4 } from './types.js';
 import { Vertex, VertexCache, Color } from './utils.js';
-import { CircleGeometry, CubeGeometry, Geometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, SplineGeometry, SquareGeometry } from './geometry.js';
+import { BlankGeometry, CircleGeometry, CubeGeometry, Geometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, Spline2dGeometry, SquareGeometry } from './geometry.js';
 export declare abstract class SimulationElement<T extends Vector2 | Vector3 = Vector3> {
     protected abstract pos: T;
     protected abstract geometry: Geometry;
@@ -9,16 +10,17 @@ export declare abstract class SimulationElement<T extends Vector2 | Vector3 = Ve
     protected wireframe: boolean;
     protected vertexCache: VertexCache;
     protected rotation: ElementRotation<T>;
-    readonly is3d: boolean;
+    isInstanced: boolean;
     /**
      * @param pos - Expected to be adjusted to devicePixelRatio before reaching constructor
      */
-    constructor(color: Color | undefined, rotation: ElementRotation<T>, is3d?: boolean);
+    constructor(color: Color | undefined, rotation: ElementRotation<T>);
     getGeometryType(): "list" | "strip";
     setWireframe(wireframe: boolean): void;
     isWireframe(): boolean;
     getColor(): Color;
     getPos(): T;
+    getRotation(): ElementRotation<T>;
     fill(newColor: Color, t?: number, f?: LerpFunc): Promise<void>;
     abstract move(amount: T, t?: number, f?: LerpFunc): Promise<void>;
     abstract moveTo(pos: T, t?: number, f?: LerpFunc): Promise<void>;
@@ -31,7 +33,8 @@ export declare abstract class SimulationElement<T extends Vector2 | Vector3 = Ve
 }
 export declare abstract class SimulationElement3d extends SimulationElement {
     protected pos: Vector3;
-    rotation: Vector3;
+    protected rotation: Vector3;
+    is3d: boolean;
     constructor(pos: Vector3, rotation?: Vector3, color?: Color);
     rotate(amount: Vector3, t?: number, f?: LerpFunc): Promise<void>;
     rotateTo(rot: Vector3, t?: number, f?: LerpFunc): Promise<void>;
@@ -60,9 +63,10 @@ export declare class Square extends SimulationElement2d {
     private height;
     private vertexColors;
     /**
+     * @param centerOffset{Vector2} - A vector2 of values from 0 to 1
      * @param vertexColors{Record<number, Color>} - 0 is top left vertex, numbers increase clockwise
      */
-    constructor(pos: Vector2, width: number, height: number, color?: Color, rotation?: number, vertexColors?: VertexColorMap);
+    constructor(pos: Vector2, width: number, height: number, color?: Color, rotation?: number, centerOffset?: Vector2, vertexColors?: VertexColorMap);
     private cloneColorMap;
     setVertexColors(newColorMap: VertexColorMap, t?: number, f?: LerpFunc): Promise<void>;
     scaleWidth(amount: number, t?: number, f?: LerpFunc): Promise<void>;
@@ -151,8 +155,7 @@ export declare class SplinePoint2d {
     getVectorArray(prevEnd: Vector2 | null, prevControl: Vector2 | null): readonly [Vector2, Vector2, Vector2, Vector2];
 }
 export declare class Spline2d extends SimulationElement2d {
-    protected geometry: SplineGeometry;
-    private curves;
+    protected geometry: Spline2dGeometry;
     private thickness;
     private detail;
     private interpolateStart;
@@ -160,7 +163,26 @@ export declare class Spline2d extends SimulationElement2d {
     constructor(pos: Vertex, points: SplinePoint2d[], thickness?: number, detail?: number);
     setInterpolateStart(start: number, t?: number, f?: LerpFunc): Promise<void>;
     setInterpolateLimit(limit: number, t?: number, f?: LerpFunc): Promise<void>;
+    setThickness(thickness: number, t?: number, f?: LerpFunc): Promise<void>;
     interpolateSlope(t: number): readonly [Vector2, Vector2];
     interpolate(t: number): Vector2;
     protected updateMatrix(camera: Camera): void;
 }
+export declare class Instance<T extends SimulationElement2d | SimulationElement3d> extends SimulationElement3d {
+    protected geometry: BlankGeometry;
+    private obj;
+    private instanceMatrix;
+    private matrixBuffer;
+    private device;
+    readonly isInstance = true;
+    constructor(obj: T, numInstances: number);
+    private setMatrixBuffer;
+    getInstances(): Mat4[];
+    getNumInstances(): number;
+    setDevice(device: GPUDevice): void;
+    getMatrixBuffer(): GPUBuffer | null;
+    getVertexCount(): number;
+    getGeometryType(): "list" | "strip";
+    protected updateMatrix(_: Camera): void;
+    getBuffer(camera: Camera): number[];
+}

package/dist/graphics.js

@@ -1,21 +1,21 @@
 import { vec3, mat4, vec2, vec4 } from 'wgpu-matrix';
-import { Vertex, VertexCache, cloneBuf, color, colorFromVector4, vector3ToPixelRatio, vector2, vector3, vertex, Color, transitionValues, logger, vector2FromVector3, matrix4, rotateMat4, vector3FromVector2, vector2ToPixelRatio } from './utils.js';
-import { CircleGeometry, CubeGeometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, SplineGeometry, SquareGeometry } from './geometry.js';
+import { Vertex, VertexCache, cloneBuf, color, colorFromVector4, vector3ToPixelRatio, vector2, vector3, vertex, Color, transitionValues, logger, vector2FromVector3, matrix4, rotateMat4, vector3FromVector2, vector2ToPixelRatio, bufferGenerator } from './utils.js';
+import { BlankGeometry, CircleGeometry, CubeGeometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, Spline2dGeometry, SquareGeometry } from './geometry.js';
 export class SimulationElement {
     color;
     wireframe;
     vertexCache;
     rotation;
-    is3d;
+    isInstanced;
     /**
      * @param pos - Expected to be adjusted to devicePixelRatio before reaching constructor
      */
-    constructor(color = new Color(), rotation, is3d = true) {
+    constructor(color = new Color(), rotation) {
         this.color = color;
         this.vertexCache = new VertexCache();
-        this.is3d = is3d;
         this.wireframe = false;
         this.rotation = rotation;
+        this.isInstanced = false;
     }
     getGeometryType() {
         return this.geometry.getType();
@@ -32,6 +32,9 @@ export class SimulationElement {
     getPos() {
         return this.pos;
     }
+    getRotation() {
+        return this.rotation;
+    }
     fill(newColor, t = 0, f) {
         const diff = newColor.diff(this.color);
         const finalColor = newColor.clone();
@@ -47,6 +50,9 @@ export class SimulationElement {
         }, t, f);
     }
     getVertexCount() {
+        if (this.vertexCache.shouldUpdate()) {
+            this.geometry.recompute();
+        }
         if (this.isWireframe()) {
             return this.geometry.getWireframeVertexCount();
         }
@@ -70,6 +76,9 @@ export class SimulationElement {
         if (this.vertexCache.shouldUpdate() || camera.hasUpdated()) {
             this.updateMatrix(camera);
             this.geometry.recompute();
+            if (this.isInstanced) {
+                bufferGenerator.setInstancing(true);
+            }
             let resBuffer = [];
             if (this.isWireframe()) {
                 resBuffer = this.geometry.getWireframeBuffer(this.color);
@@ -77,6 +86,7 @@ export class SimulationElement {
             else {
                 resBuffer = this.geometry.getTriangleBuffer(this.color);
             }
+            bufferGenerator.setInstancing(false);
             this.vertexCache.setCache(resBuffer);
             return resBuffer;
         }
@@ -86,6 +96,7 @@ export class SimulationElement {
 export class SimulationElement3d extends SimulationElement {
     pos;
     rotation;
+    is3d = true;
     constructor(pos, rotation = vector3(), color) {
         super(color, rotation);
         this.pos = pos;
@@ -149,7 +160,7 @@ export class SimulationElement2d extends SimulationElement {
     pos;
     rotation;
     constructor(pos, rotation = 0, color) {
-        super(color, rotation, false);
+        super(color, rotation);
         this.pos = pos;
         this.rotation = rotation;
     }
@@ -221,15 +232,16 @@ export class Square extends SimulationElement2d {
     height;
     vertexColors;
     /**
+     * @param centerOffset{Vector2} - A vector2 of values from 0 to 1
      * @param vertexColors{Record<number, Color>} - 0 is top left vertex, numbers increase clockwise
      */
-    constructor(pos, width, height, color, rotation, vertexColors) {
+    constructor(pos, width, height, color, rotation, centerOffset, vertexColors) {
         super(pos, rotation, color);
         vector2ToPixelRatio(this.pos);
         this.width = width * devicePixelRatio;
         this.height = height * devicePixelRatio;
         this.vertexColors = this.cloneColorMap(vertexColors || {});
-        this.geometry = new SquareGeometry(this.width, this.height);
+        this.geometry = new SquareGeometry(this.width, this.height, centerOffset);
         this.geometry.setVertexColorMap(this.vertexColors);
     }
     cloneColorMap(colorMap) {
@@ -348,8 +360,6 @@ export class Square extends SimulationElement2d {
     updateMatrix(camera) {
         const pos = cloneBuf(this.pos);
         pos[1] = camera.getScreenSize()[1] - pos[1];
-        pos[0] += this.width / 2;
-        pos[1] -= this.height / 2;
         const matrix = matrix4();
         mat4.translate(matrix, vector3FromVector2(pos), matrix);
         mat4.rotateZ(matrix, this.rotation, matrix);
@@ -396,7 +406,6 @@ export class Circle extends SimulationElement2d {
         this.defaultUpdateMatrix(camera);
     }
 }
-// TODO: litterally this whole thing
 export class Polygon extends SimulationElement2d {
     geometry;
     vertices;
@@ -753,19 +762,19 @@ export class SplinePoint2d {
 }
 export class Spline2d extends SimulationElement2d {
     geometry;
-    curves;
     thickness;
     detail;
     interpolateStart;
     interpolateLimit;
     constructor(pos, points, thickness = devicePixelRatio, detail = 40) {
-        super(vector2FromVector3(pos.getPos()), 0, pos.getColor() || undefined);
-        this.curves = [];
+        const tempPos = vector2FromVector3(pos.getPos());
+        vector2ToPixelRatio(tempPos);
+        super(tempPos, 0, pos.getColor() || undefined);
         this.thickness = thickness * devicePixelRatio;
         this.detail = detail;
         this.interpolateStart = 0;
         this.interpolateLimit = 1;
-        this.geometry = new SplineGeometry(points, this.getColor(), this.thickness, this.detail);
+        this.geometry = new Spline2dGeometry(points, this.getColor(), this.thickness, this.detail);
     }
     setInterpolateStart(start, t = 0, f) {
         const diff = start - this.interpolateStart;
@@ -791,13 +800,27 @@ export class Spline2d extends SimulationElement2d {
             this.vertexCache.updated();
         }, t, f);
     }
+    setThickness(thickness, t = 0, f) {
+        thickness *= devicePixelRatio;
+        const diff = thickness - this.thickness;
+        return transitionValues((p) => {
+            this.thickness += diff * p;
+            this.geometry.updateThickness(this.thickness);
+            this.vertexCache.updated();
+        }, () => {
+            this.thickness = thickness;
+            this.geometry.updateThickness(this.thickness);
+            this.vertexCache.updated();
+        }, t, f);
+    }
     interpolateSlope(t) {
-        const curveInterval = 1 / this.curves.length;
+        const curves = this.geometry.getCurves();
+        const curveInterval = 1 / curves.length;
         let index = Math.floor(t / curveInterval);
-        if (index === this.curves.length)
+        if (index === curves.length)
             index--;
         const diff = (t - curveInterval * index) * 2;
-        return this.curves[index].interpolateSlope(diff);
+        return curves[index].interpolateSlope(diff);
     }
     interpolate(t) {
         const [vec] = this.interpolateSlope(t);
@@ -807,3 +830,69 @@ export class Spline2d extends SimulationElement2d {
         this.defaultUpdateMatrix(camera);
     }
 }
+export class Instance extends SimulationElement3d {
+    geometry;
+    obj;
+    instanceMatrix;
+    matrixBuffer;
+    device;
+    isInstance = true;
+    constructor(obj, numInstances) {
+        super(vector3());
+        this.device = null;
+        this.matrixBuffer = null;
+        obj.isInstanced = true;
+        this.obj = obj;
+        this.instanceMatrix = [];
+        this.is3d = Boolean(obj.is3d);
+        this.geometry = new BlankGeometry();
+        const mat = matrix4();
+        if (typeof obj.getRotation() === 'number') {
+            mat4.rotateZ(mat, obj.getRotation(), mat);
+        }
+        else {
+            rotateMat4(mat, obj.getRotation());
+        }
+        for (let i = 0; i < numInstances; i++) {
+            const clone = cloneBuf(mat);
+            this.instanceMatrix.push(clone);
+        }
+    }
+    setMatrixBuffer() {
+        if (!this.device || this.instanceMatrix.length === 0)
+            return;
+        this.matrixBuffer = this.device.createBuffer({
+            size: this.instanceMatrix[0].length * 4 * this.instanceMatrix.length,
+            usage: GPUBufferUsage.STORAGE,
+            mappedAtCreation: true
+        });
+        const buf = this.instanceMatrix.map((mat) => [...mat]).flat();
+        new Float32Array(this.matrixBuffer.getMappedRange()).set(buf);
+        this.matrixBuffer.unmap();
+    }
+    getInstances() {
+        return this.instanceMatrix;
+    }
+    getNumInstances() {
+        return this.instanceMatrix.length;
+    }
+    setDevice(device) {
+        this.device = device;
+        if (this.matrixBuffer === null) {
+            this.setMatrixBuffer();
+        }
+    }
+    getMatrixBuffer() {
+        return this.matrixBuffer;
+    }
+    getVertexCount() {
+        return this.obj.getVertexCount();
+    }
+    getGeometryType() {
+        return this.obj.getGeometryType();
+    }
+    updateMatrix(_) { }
+    getBuffer(camera) {
+        return this.obj.getBuffer(camera);
+    }
+}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './simulation.js';
 export * from './graphics.js';
 export * from './types.js';
-export { Vertex, Color, cloneBuf, vector4, vector3, vector2, vector3FromVector2, colorFromVector4, randomInt, randomColor, vertex, color, colorf, transitionValues, lerp, smoothStep, linearStep, splinePoint2d, continuousSplinePoint2d, easeInOutQuad, easeInOutExpo, easeInOutQuart, waitFor } from './utils.js';
+export { vec2, vec3, vec4, mat3, mat4 } from 'wgpu-matrix';
+export { Vertex, Color, cloneBuf, vector4, vector3, vector2, vector3FromVector2, colorFromVector4, randomInt, randomColor, vertex, color, colorf, transitionValues, lerp, smoothStep, linearStep, splinePoint2d, continuousSplinePoint2d, easeInOutQuad, easeInOutExpo, easeInOutQuart, waitFor, matrix4 } from './utils.js';

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from './simulation.js';
 export * from './graphics.js';
 export * from './types.js';
-export { Vertex, Color, cloneBuf, vector4, vector3, vector2, vector3FromVector2, colorFromVector4, randomInt, randomColor, vertex, color, colorf, transitionValues, lerp, smoothStep, linearStep, splinePoint2d, continuousSplinePoint2d, easeInOutQuad, easeInOutExpo, easeInOutQuart, waitFor } from './utils.js';
+export { vec2, vec3, vec4, mat3, mat4 } from 'wgpu-matrix';
+export { Vertex, Color, cloneBuf, vector4, vector3, vector2, vector3FromVector2, colorFromVector4, randomInt, randomColor, vertex, color, colorf, transitionValues, lerp, smoothStep, linearStep, splinePoint2d, continuousSplinePoint2d, easeInOutQuad, easeInOutExpo, easeInOutQuart, waitFor, matrix4 } from './utils.js';

package/dist/simulation.d.ts

@@ -12,14 +12,15 @@ export declare class Simulation {
     private frameRateView;
     private camera;
     private pipelines;
+    private renderInfo;
     constructor(idOrCanvasRef: string | HTMLCanvasElement, camera?: Camera | null, showFrameRate?: boolean);
     add(el: SimulationElement<any>): void;
     setCanvasSize(width: number, height: number): void;
     start(): void;
     stop(): void;
     setBackground(color: Color): void;
+    private propagateDevice;
     render(device: GPUDevice, ctx: GPUCanvasContext): void;
-    private getVertexCount;
     private renderScene;
     fitElement(): void;
     private assertHasCanvas;
@@ -28,6 +29,7 @@ export declare class SceneCollection extends SimulationElement3d {
     protected geometry: BlankGeometry;
     private name;
     private scene;
+    readonly isCollection = true;
     constructor(name: string);
     setWireframe(_: boolean): void;
     getName(): string;

package/dist/simulation.js

@@ -1,16 +1,17 @@
 import { vec3 } from 'wgpu-matrix';
 import { SimulationElement3d } from './graphics.js';
 import { BUF_LEN } from './constants.js';
-import { Color, applyElementToScene, buildDepthTexture, buildMultisampleTexture, buildProjectionMatrix, createPipeline, getOrthoMatrix, getTransformationMatrix, logger, transitionValues, vector2, vector3 } from './utils.js';
+import { Color, applyElementToScene, buildDepthTexture, buildMultisampleTexture, buildProjectionMatrix, createPipeline, getOrthoMatrix, getTotalVertices, getTransformationMatrix, logger, transitionValues, vector2, vector3 } from './utils.js';
 import { BlankGeometry } from './geometry.js';
 const shader = `
 struct Uniforms {
   modelViewProjectionMatrix : mat4x4<f32>,
-  orthoProjectionMatrix : mat4x4<f32>,
-  screenSize : vec2<f32>,
+  orthoProjectionMatrix : mat4x4<f32>
 }
  
-@binding(0) @group(0) var<uniform> uniforms : Uniforms;
+@group(0) @binding(0) var<uniform> uniforms : Uniforms;
+
+@group(0) @binding(1) var<storage, read> instanceMatrices : array<mat4x4f, 10>;
 
 struct VertexOutput {
   @builtin(position) Position : vec4<f32>,
@@ -21,9 +22,11 @@ struct VertexOutput {
 
 @vertex
 fn vertex_main_3d(
+  @builtin(instance_index) instanceIdx : u32,
   @location(0) position : vec4<f32>,
   @location(1) color : vec4<f32>,
   @location(2) uv : vec2<f32>,
+  @location(3) drawingInstance: f32
 ) -> VertexOutput {
   var output : VertexOutput;
 
@@ -36,13 +39,21 @@ fn vertex_main_3d(
 
 @vertex
 fn vertex_main_2d(
+  @builtin(instance_index) instanceIdx : u32,
   @location(0) position : vec4<f32>,
   @location(1) color : vec4<f32>,
   @location(2) uv : vec2<f32>,
+  @location(3) drawingInstance: f32
 ) -> VertexOutput {
-  var output : VertexOutput;
+  var output: VertexOutput;
+
+  if (drawingInstance == 1) {
+    let transformedPos = instanceMatrices[instanceIdx] * position;
+    output.Position = uniforms.orthoProjectionMatrix * transformedPos;
+  } else {
+    output.Position = uniforms.orthoProjectionMatrix * position;
+  }
 
-  output.Position = uniforms.orthoProjectionMatrix * position;
   output.fragUV = uv;
   output.fragPosition = position;
   output.fragColor = color;
@@ -56,7 +67,6 @@ fn fragment_main(
   @location(2) fragPosition: vec4<f32>
 ) -> @location(0) vec4<f32> {
   return fragColor;
-  // return fragPosition;
 }
 `;
 const simjsFrameRateCss = `@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@100&display=swap');
@@ -107,6 +117,7 @@ export class Simulation {
     frameRateView;
     camera;
     pipelines;
+    renderInfo;
     constructor(idOrCanvasRef, camera = null, showFrameRate = false) {
         if (typeof idOrCanvasRef === 'string') {
             const ref = document.getElementById(idOrCanvasRef);
@@ -135,6 +146,7 @@ export class Simulation {
                 this.setCanvasSize(width, height);
             }
         });
+        this.renderInfo = null;
         this.pipelines = null;
         this.frameRateView = new FrameRateView(showFrameRate);
         this.frameRateView.updateFrameRate(1);
@@ -160,6 +172,7 @@ export class Simulation {
             if (!ctx)
                 throw logger.error('Context is null');
             const device = await adapter.requestDevice();
+            this.propagateDevice(device);
             ctx.configure({
                 device,
                 format: 'bgra8unorm'
@@ -175,6 +188,13 @@ export class Simulation {
     setBackground(color) {
         this.bgColor = color;
     }
+    propagateDevice(device) {
+        for (let i = 0; i < this.scene.length; i++) {
+            if (this.scene[i].isInstance) {
+                this.scene[i].setDevice(device);
+            }
+        }
+    }
     render(device, ctx) {
         this.assertHasCanvas();
         const canvas = this.canvasRef;
@@ -187,27 +207,60 @@ export class Simulation {
             format: presentationFormat,
             alphaMode: 'premultiplied'
         });
-        this.pipelines = {
-            triangleList2d: createPipeline(device, shaderModule, presentationFormat, 'vertex_main_2d', 'triangle-list'),
-            triangleStrip2d: createPipeline(device, shaderModule, presentationFormat, 'vertex_main_2d', 'triangle-strip'),
-            lineStrip2d: createPipeline(device, shaderModule, presentationFormat, 'vertex_main_2d', 'line-strip'),
-            triangleList3d: createPipeline(device, shaderModule, presentationFormat, 'vertex_main_3d', 'triangle-list'),
-            triangleStrip3d: createPipeline(device, shaderModule, presentationFormat, 'vertex_main_3d', 'triangle-strip'),
-            lineStrip3d: createPipeline(device, shaderModule, presentationFormat, 'vertex_main_3d', 'line-strip')
-        };
         const uniformBufferSize = 4 * 16 + 4 * 16 + 4 * 2 + 8; // 4x4 matrix + 4x4 matrix + vec2<f32> + 8 bc 144 is cool
         const uniformBuffer = device.createBuffer({
             size: uniformBufferSize,
             usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
         });
+        const instanceBuffer = device.createBuffer({
+            size: 16 * 10 * 4,
+            usage: GPUBufferUsage.STORAGE
+        });
+        const bindGroupLayout = device.createBindGroupLayout({
+            entries: [
+                {
+                    binding: 0,
+                    visibility: GPUShaderStage.VERTEX,
+                    buffer: {
+                        type: 'uniform'
+                    }
+                },
+                {
+                    binding: 1,
+                    visibility: GPUShaderStage.VERTEX,
+                    buffer: {
+                        type: 'read-only-storage'
+                    }
+                }
+            ]
+        });
+        this.renderInfo = {
+            uniformBuffer,
+            bindGroupLayout,
+            instanceBuffer
+        };
+        this.pipelines = {
+            triangleList2d: createPipeline(device, shaderModule, bindGroupLayout, presentationFormat, 'vertex_main_2d', 'triangle-list'),
+            triangleStrip2d: createPipeline(device, shaderModule, bindGroupLayout, presentationFormat, 'vertex_main_2d', 'triangle-strip'),
+            lineStrip2d: createPipeline(device, shaderModule, bindGroupLayout, presentationFormat, 'vertex_main_2d', 'line-strip'),
+            triangleList3d: createPipeline(device, shaderModule, bindGroupLayout, presentationFormat, 'vertex_main_3d', 'triangle-list'),
+            triangleStrip3d: createPipeline(device, shaderModule, bindGroupLayout, presentationFormat, 'vertex_main_3d', 'triangle-strip'),
+            lineStrip3d: createPipeline(device, shaderModule, bindGroupLayout, presentationFormat, 'vertex_main_3d', 'line-strip')
+        };
         const uniformBindGroup = device.createBindGroup({
-            layout: this.pipelines.triangleList3d.getBindGroupLayout(0),
+            layout: bindGroupLayout,
             entries: [
                 {
                     binding: 0,
                     resource: {
                         buffer: uniformBuffer
                     }
+                },
+                {
+                    binding: 1,
+                    resource: {
+                        buffer: instanceBuffer
+                    }
                 }
             ]
         });
@@ -281,8 +334,6 @@ export class Simulation {
             device.queue.writeBuffer(uniformBuffer, 0, modelViewProjectionMatrix.buffer, modelViewProjectionMatrix.byteOffset, modelViewProjectionMatrix.byteLength);
             device.queue.writeBuffer(uniformBuffer, 4 * 16, // 4x4 matrix
             orthoMatrix.buffer, orthoMatrix.byteOffset, orthoMatrix.byteLength);
-            device.queue.writeBuffer(uniformBuffer, 4 * 16 + 4 * 16, // 4x4 matrix + 4x4 matrix
-            screenSize.buffer, screenSize.byteOffset, screenSize.byteLength);
             const commandEncoder = device.createCommandEncoder();
             const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
             passEncoder.setPipeline(this.pipelines.triangleList3d);
@@ -294,26 +345,17 @@ export class Simulation {
         };
         requestAnimationFrame(frame);
     }
-    getVertexCount(scene) {
-        let total = 0;
-        for (let i = 0; i < scene.length; i++) {
-            if (scene[i] instanceof SceneCollection)
-                continue;
-            total += scene[i].getVertexCount();
-        }
-        return total;
-    }
     async renderScene(device, passEncoder, scene) {
         if (this.pipelines === null)
             return;
-        let totalVertices = this.getVertexCount(scene);
+        let totalVertices = getTotalVertices(scene);
         const vertexBuffer = device.createBuffer({
-            size: totalVertices * 40,
+            size: totalVertices * 4 * BUF_LEN,
             usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
         });
         let currentOffset = 0;
         for (let i = 0; i < scene.length; i++) {
-            if (scene[i] instanceof SceneCollection) {
+            if (scene[i].isCollection) {
                 this.renderScene(device, passEncoder, scene[i].getScene());
                 continue;
             }
@@ -321,8 +363,9 @@ export class Simulation {
             const vertexCount = buffer.length / BUF_LEN;
             device.queue.writeBuffer(vertexBuffer, currentOffset, buffer);
             vertexBuffer.unmap();
+            const is3d = Boolean(scene[i].is3d);
             if (scene[i].isWireframe()) {
-                if (scene[i].is3d) {
+                if (is3d) {
                     passEncoder.setPipeline(this.pipelines.lineStrip3d);
                 }
                 else {
@@ -332,7 +375,7 @@ export class Simulation {
             else {
                 const type = scene[i].getGeometryType();
                 if (type === 'strip') {
-                    if (scene[i].is3d) {
+                    if (is3d) {
                         passEncoder.setPipeline(this.pipelines.triangleStrip3d);
                     }
                     else {
@@ -340,7 +383,7 @@ export class Simulation {
                     }
                 }
                 else if (type === 'list') {
-                    if (scene[i].is3d) {
+                    if (is3d) {
                         passEncoder.setPipeline(this.pipelines.triangleList3d);
                     }
                     else {
@@ -348,8 +391,33 @@ export class Simulation {
                     }
                 }
             }
+            let instances = 1;
+            if (scene[i].isInstance) {
+                instances = scene[i].getNumInstances();
+                const buf = scene[i].getMatrixBuffer();
+                if (buf && this.renderInfo) {
+                    const uniformBindGroup = device.createBindGroup({
+                        layout: this.renderInfo.bindGroupLayout,
+                        entries: [
+                            {
+                                binding: 0,
+                                resource: {
+                                    buffer: this.renderInfo.uniformBuffer
+                                }
+                            },
+                            {
+                                binding: 1,
+                                resource: {
+                                    buffer: buf
+                                }
+                            }
+                        ]
+                    });
+                    passEncoder.setBindGroup(0, uniformBindGroup);
+                }
+            }
             passEncoder.setVertexBuffer(0, vertexBuffer, currentOffset, buffer.byteLength);
-            passEncoder.draw(vertexCount);
+            passEncoder.draw(vertexCount, instances, 0, 0);
             currentOffset += buffer.byteLength;
         }
     }
@@ -373,6 +441,7 @@ export class SceneCollection extends SimulationElement3d {
     geometry;
     name;
     scene;
+    isCollection = true;
     constructor(name) {
         super(vector3());
         this.wireframe = false;
@@ -400,7 +469,6 @@ export class SceneCollection extends SimulationElement3d {
         return this.getSceneBuffer(camera);
     }
     getTriangles(camera) {
-        console.log('here');
         return this.getSceneBuffer(camera);
     }
     updateMatrix(camera) {

package/dist/types.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="dist" />
 import { CubicBezierCurve2d, SplinePoint2d } from './graphics.js';
 import { Color, Vertex } from './utils.js';
-export type Vector4 = Float32Array & [number, number, number, number];
-export type Vector3 = Float32Array & [number, number, number];
-export type Vector2 = Float32Array & [number, number];
-export type Mat4 = Float32Array & [
+export type FloatArray = Float32Array | Float64Array;
+export type Vector4 = FloatArray & [number, number, number, number];
+export type Vector3 = FloatArray & [number, number, number];
+export type Vector2 = FloatArray & [number, number];
+export type Mat4 = FloatArray & [
     number,
     number,
     number,
@@ -34,12 +35,13 @@ export type SquareGeometryParams = {
     width: number;
     height: number;
     colorMap: VertexColorMap;
+    centerOffset: Vector2;
 };
 export type CircleGeometryParams = {
     radius: number;
     detail: number;
 };
-export type SplineGeometryParams = {
+export type Spline2dGeometryParams = {
     points: SplinePoint2d[];
     curves: CubicBezierCurve2d[];
     distance: number;
@@ -68,3 +70,8 @@ export type PipelineGroup = {
     triangleStrip3d: GPURenderPipeline;
     lineStrip3d: GPURenderPipeline;
 };
+export type RenderInfo = {
+    uniformBuffer: GPUBuffer;
+    instanceBuffer: GPUBuffer;
+    bindGroupLayout: GPUBindGroupLayout;
+};

package/dist/utils.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="dist" />
 import { SimulationElement, SplinePoint2d } from './graphics.js';
-import { Mat4, Vector2, Vector3, Vector4 } from './types.js';
+import { FloatArray, Mat4, Vector2, Vector3, Vector4 } from './types.js';
 export declare class Color {
     r: number;
     g: number;
@@ -76,10 +76,16 @@ export declare function linearStep(t: number): number;
 export declare function easeInOutExpo(t: number): number;
 export declare function easeInOutQuart(t: number): number;
 export declare function easeInOutQuad(t: number): number;
-export declare function vertexBuffer(x: number, y: number, z: number, color: Color, uv?: Vector2): number[];
+declare class BufferGenerator {
+    private instancing;
+    constructor();
+    setInstancing(state: boolean): void;
+    generate(x: number, y: number, z: number, color: Color, uv?: Vector2): number[];
+}
+export declare const bufferGenerator: BufferGenerator;
 export declare function vector3ToPixelRatio(vec: Vector3): void;
 export declare function vector2ToPixelRatio(vec: Vector2): void;
-export declare function cloneBuf<T extends Float32Array>(buf: T): T;
+export declare function cloneBuf<T extends FloatArray>(buf: T): T;
 export declare function vector4(x?: number, y?: number, z?: number, w?: number): Vector4;
 export declare function vector3(x?: number, y?: number, z?: number): Vector3;
 export declare function vector2(x?: number, y?: number): Vector2;
@@ -101,6 +107,7 @@ export declare function interpolateColors(colors: Color[], t: number): Color;
 export declare function waitFor(t: number): Promise<unknown>;
 export declare function matrixFromRotation(rotation: Vector3): Mat4;
 export declare function rotateMat4(mat: Mat4, rotation: Vector3): void;
-export declare function createPipeline(device: GPUDevice, module: GPUShaderModule, presentationFormat: GPUTextureFormat, entryPoint: string, topology: GPUPrimitiveTopology): GPURenderPipeline;
+export declare function createPipeline(device: GPUDevice, module: GPUShaderModule, bindGroupLayout: GPUBindGroupLayout, presentationFormat: GPUTextureFormat, entryPoint: string, topology: GPUPrimitiveTopology): GPURenderPipeline;
 export declare function triangulateWireFrameOrder(len: number): number[];
+export declare function getTotalVertices(scene: SimulationElement[]): number;
 export {};

package/dist/utils.js

@@ -1,6 +1,6 @@
 import { mat4, vec2, vec3, vec4 } from 'wgpu-matrix';
 import { SimulationElement, SplinePoint2d } from './graphics.js';
-import { BUF_LEN, colorOffset, uvOffset, vertexSize } from './constants.js';
+import { BUF_LEN, colorOffset, drawingInstancesOffset, uvOffset, vertexSize } from './constants.js';
 export class Color {
     r; // 0 - 255
     g; // 0 - 255
@@ -100,9 +100,9 @@ export class Vertex {
     }
     toBuffer(defaultColor) {
         if (this.is3d)
-            return vertexBuffer(this.pos[0], this.pos[1], this.pos[2], this.color || defaultColor, this.uv);
+            return bufferGenerator.generate(this.pos[0], this.pos[1], this.pos[2], this.color || defaultColor, this.uv);
         else
-            return vertexBuffer(this.pos[0], this.pos[1], 0, this.color || defaultColor, this.uv);
+            return bufferGenerator.generate(this.pos[0], this.pos[1], 0, this.color || defaultColor, this.uv);
     }
 }
 export const buildProjectionMatrix = (aspectRatio, zNear = 1, zFar = 500) => {
@@ -143,7 +143,7 @@ export const buildMultisampleTexture = (device, ctx, width, height) => {
 };
 export const applyElementToScene = (scene, el) => {
     if (el instanceof SimulationElement) {
-        scene.push(el);
+        scene.unshift(el);
     }
     else {
         throw logger.error('Cannot add invalid SimulationElement');
@@ -260,9 +260,17 @@ export function easeInOutQuart(t) {
 export function easeInOutQuad(t) {
     return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
 }
-export function vertexBuffer(x, y, z, color, uv = vector2()) {
-    return [x, y, z, 1, ...color.toBuffer(), ...uv];
+class BufferGenerator {
+    instancing = false;
+    constructor() { }
+    setInstancing(state) {
+        this.instancing = state;
+    }
+    generate(x, y, z, color, uv = vector2()) {
+        return [x, y, z, 1, ...color.toBuffer(), ...uv, this.instancing ? 1 : 0];
+    }
 }
+export const bufferGenerator = new BufferGenerator();
 export function vector3ToPixelRatio(vec) {
     vec[0] *= devicePixelRatio;
     vec[1] *= devicePixelRatio;
@@ -371,9 +379,11 @@ export function rotateMat4(mat, rotation) {
     mat4.rotateY(mat, rotation[1], mat);
     mat4.rotateX(mat, rotation[0], mat);
 }
-export function createPipeline(device, module, presentationFormat, entryPoint, topology) {
+export function createPipeline(device, module, bindGroupLayout, presentationFormat, entryPoint, topology) {
     return device.createRenderPipeline({
-        layout: 'auto',
+        layout: device.createPipelineLayout({
+            bindGroupLayouts: [bindGroupLayout]
+        }),
         vertex: {
             module,
             entryPoint,
@@ -398,6 +408,12 @@ export function createPipeline(device, module, presentationFormat, entryPoint, t
                             shaderLocation: 2,
                             offset: uvOffset,
                             format: 'float32x2'
+                        },
+                        {
+                            // drawing instances
+                            shaderLocation: 3,
+                            offset: drawingInstancesOffset,
+                            format: 'float32'
                         }
                     ]
                 }
@@ -438,3 +454,12 @@ export function triangulateWireFrameOrder(len) {
     }
     return order;
 }
+export function getTotalVertices(scene) {
+    let total = 0;
+    for (let i = 0; i < scene.length; i++) {
+        if (scene[i].isCollection)
+            continue;
+        total += scene[i].getVertexCount();
+    }
+    return total;
+}

package/package.json

@@ -5,7 +5,7 @@
   "types": "./dist/index.d.ts",
   "author": "Jackson Otto",
   "description": "A simple graphics library using WebGPU",
-  "version": "0.2.8",
+  "version": "0.3.0",
   "exports": {
     ".": {
       "import": "./dist/index.js",