simulationjsv2 0.4.8 → 0.4.10

package/TODO.md

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

package/dist/geometry.d.ts

@@ -1,10 +1,10 @@
-import { CircleGeometryParams, CubeGeometryParams, Line2dGeometryParams, Line3dGeometryParams, Mat4, PolygonGeometryParams, Spline2dGeometryParams, SquareGeometryParams, Vector2, Vector3, VertexColorMap } from './types.js';
+import { BufferExtenderInfo, CircleGeometryParams, CubeGeometryParams, EmptyParams, Line2dGeometryParams, Line3dGeometryParams, Mat4, PolygonGeometryParams, Spline2dGeometryParams, SquareGeometryParams, Vector2, Vector3, VertexColorMap } from './types.js';
 import { Color, Vertex } from './utils.js';
 import { CubicBezierCurve2d, SplinePoint2d } from './graphics.js';
-export declare abstract class Geometry {
+export declare abstract class Geometry<T extends EmptyParams> {
     protected abstract wireframeOrder: number[];
     protected abstract triangleOrder: number[];
-    protected abstract params: Record<string, any>;
+    protected abstract params: T;
     protected vertices: Vector3[];
     protected matrix: Mat4;
     protected geometryType: 'list' | 'strip';
@@ -14,11 +14,11 @@ export declare abstract class Geometry {
     abstract recompute(): void;
     getTriangleVertexCount(): number;
     getWireframeVertexCount(): number;
-    protected bufferFromOrder(order: number[], color: Color): number[];
-    getWireframeBuffer(color: Color): number[];
-    getTriangleBuffer(color: Color): number[];
+    protected bufferFromOrder(order: number[], color: Color, bufferExtender?: BufferExtenderInfo): number[];
+    getWireframeBuffer(color: Color, bufferExtender?: BufferExtenderInfo): number[];
+    getTriangleBuffer(color: Color, bufferExtender?: BufferExtenderInfo): number[];
 }
-export declare class PlaneGeometry extends Geometry {
+export declare class PlaneGeometry extends Geometry<EmptyParams> {
     protected params: {};
     protected wireframeOrder: number[];
     protected triangleOrder: number[];
@@ -26,9 +26,9 @@ export declare class PlaneGeometry extends Geometry {
     constructor(vertices: Vertex[]);
     recompute(): void;
     updateVertices(vertices: Vertex[]): void;
-    getTriangleBuffer(color: Color): number[];
+    getTriangleBuffer(color: Color, bufferExtender?: BufferExtenderInfo): number[];
 }
-export declare class CubeGeometry extends Geometry {
+export declare class CubeGeometry extends Geometry<CubeGeometryParams> {
     protected params: CubeGeometryParams;
     protected wireframeOrder: number[];
     protected triangleOrder: number[];
@@ -39,7 +39,7 @@ export declare class CubeGeometry extends Geometry {
     recompute(): void;
     updateSize(width: number, height: number, depth: number): void;
 }
-export declare class SquareGeometry extends Geometry {
+export declare class SquareGeometry extends Geometry<SquareGeometryParams> {
     protected wireframeOrder: number[];
     protected triangleOrder: number[];
     protected params: SquareGeometryParams;
@@ -48,16 +48,16 @@ export declare class SquareGeometry extends Geometry {
     setWidth(width: number): void;
     setHeight(height: number): void;
     recompute(): void;
-    getTriangleBuffer(color: Color): number[];
+    getTriangleBuffer(color: Color, bufferExtender?: BufferExtenderInfo): number[];
 }
-export declare class BlankGeometry extends Geometry {
+export declare class BlankGeometry extends Geometry<EmptyParams> {
     protected wireframeOrder: never[];
     protected triangleOrder: never[];
     protected params: {};
     constructor();
     recompute(): void;
 }
-export declare class CircleGeometry extends Geometry {
+export declare class CircleGeometry extends Geometry<CircleGeometryParams> {
     protected wireframeOrder: number[];
     protected triangleOrder: number[];
     protected params: CircleGeometryParams;
@@ -67,7 +67,7 @@ export declare class CircleGeometry extends Geometry {
     private updateTriangleOrder;
     recompute(): void;
 }
-export declare class Spline2dGeometry extends Geometry {
+export declare class Spline2dGeometry extends Geometry<Spline2dGeometryParams> {
     protected wireframeOrder: number[];
     protected triangleOrder: number[];
     protected params: Spline2dGeometryParams;
@@ -83,24 +83,24 @@ export declare class Spline2dGeometry extends Geometry {
     private computeCurves;
     private updateWireframeOrder;
     recompute(): void;
-    getWireframeBuffer(color: Color): number[];
-    getTriangleBuffer(_: Color): number[];
+    getWireframeBuffer(color: Color, bufferExtender?: BufferExtenderInfo): number[];
+    getTriangleBuffer(_: Color, bufferExtender?: BufferExtenderInfo): number[];
 }
-export declare class Line2dGeometry extends Geometry {
+export declare class Line2dGeometry extends Geometry<Line2dGeometryParams> {
     protected wireframeOrder: number[];
     protected triangleOrder: number[];
     protected params: Line2dGeometryParams;
     constructor(pos: Vector2, to: Vector2, thickness: number);
     recompute(): void;
 }
-export declare class Line3dGeometry extends Geometry {
+export declare class Line3dGeometry extends Geometry<Line3dGeometryParams> {
     protected wireframeOrder: number[];
     protected triangleOrder: number[];
     protected params: Line3dGeometryParams;
     constructor(pos: Vector3, to: Vector3, thickness: number);
     recompute(): void;
 }
-export declare class PolygonGeometry extends Geometry {
+export declare class PolygonGeometry extends Geometry<PolygonGeometryParams> {
     protected wireframeOrder: number[];
     protected triangleOrder: number[];
     protected params: PolygonGeometryParams;

package/dist/geometry.js

@@ -24,20 +24,20 @@ export class Geometry {
     getWireframeVertexCount() {
         return this.wireframeOrder.length;
     }
-    bufferFromOrder(order, color) {
+    bufferFromOrder(order, color, bufferExtender) {
         return order
             .map((vertexIndex) => {
             const pos = cloneBuf(this.vertices[vertexIndex]);
             vec3.transformMat4(pos, this.matrix, pos);
-            return bufferGenerator.generate(pos[0], pos[1], pos[2], color);
+            return bufferGenerator.generate(pos[0], pos[1], pos[2], color, vector2(), bufferExtender);
         })
             .flat();
     }
-    getWireframeBuffer(color) {
-        return this.bufferFromOrder(this.wireframeOrder, color);
+    getWireframeBuffer(color, bufferExtender) {
+        return this.bufferFromOrder(this.wireframeOrder, color, bufferExtender);
     }
-    getTriangleBuffer(color) {
-        return this.bufferFromOrder(this.triangleOrder, color);
+    getTriangleBuffer(color, bufferExtender) {
+        return this.bufferFromOrder(this.triangleOrder, color, bufferExtender);
     }
 }
 export class PlaneGeometry extends Geometry {
@@ -61,13 +61,13 @@ export class PlaneGeometry extends Geometry {
             .fill(0)
             .map((_, index) => index)).flat();
     }
-    getTriangleBuffer(color) {
+    getTriangleBuffer(color, bufferExtender) {
         return this.triangleOrder
             .map((index) => {
             const vertex = this.rawVertices[index];
             const pos = cloneBuf(vertex.getPos());
             vec3.transformMat4(pos, this.matrix, pos);
-            return bufferGenerator.generate(pos[0], pos[1], pos[2], vertex.getColor() || color);
+            return bufferGenerator.generate(pos[0], pos[1], pos[2], vertex.getColor() || color, vector2(), bufferExtender);
         })
             .flat();
     }
@@ -155,12 +155,12 @@ export class SquareGeometry extends Geometry {
             vector3(-this.params.width * centerOffset[0], -this.params.height * (1 - centerOffset[1]))
         ];
     }
-    getTriangleBuffer(color) {
+    getTriangleBuffer(color, bufferExtender) {
         return this.triangleOrder
             .map((vertexIndex) => {
             const pos = cloneBuf(this.vertices[vertexIndex]);
             vec3.transformMat4(pos, this.matrix, pos);
-            return bufferGenerator.generate(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, vector2(), bufferExtender);
         })
             .flat();
     }
@@ -349,21 +349,21 @@ export class Spline2dGeometry extends Geometry {
             .map((_, index) => index)).flat();
         this.updateWireframeOrder();
     }
-    getWireframeBuffer(color) {
+    getWireframeBuffer(color, bufferExtender) {
         return this.wireframeOrder
             .map((vertexIndex) => {
             const vertex = cloneBuf(this.vertices[vertexIndex]);
             vec3.transformMat4(vertex, this.matrix, vertex);
-            return bufferGenerator.generate(vertex[0], vertex[1], vertex[2], color);
+            return bufferGenerator.generate(vertex[0], vertex[1], vertex[2], color, vector2(), bufferExtender);
         })
             .flat();
     }
-    getTriangleBuffer(_) {
+    getTriangleBuffer(_, bufferExtender) {
         return this.triangleOrder
             .map((vertexIndex) => {
             const vertex = cloneBuf(this.vertices[vertexIndex]);
             vec3.transformMat4(vertex, this.matrix, vertex);
-            return bufferGenerator.generate(vertex[0], vertex[1], vertex[2], this.params.vertexColors[vertexIndex]);
+            return bufferGenerator.generate(vertex[0], vertex[1], vertex[2], this.params.vertexColors[vertexIndex], vector2(), bufferExtender);
         })
             .flat();
     }

package/dist/graphics.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="@webgpu/types" />
 import { Camera } from './simulation.js';
-import type { Vector2, Vector3, LerpFunc, VertexColorMap, ElementRotation, Mat4 } from './types.js';
+import type { Vector2, Vector3, LerpFunc, VertexColorMap, ElementRotation, Mat4, AnySimulationElement, BufferExtenderInfo } from './types.js';
 import { Vertex, Color } from './utils.js';
 import { BlankGeometry, CircleGeometry, CubeGeometry, Geometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, Spline2dGeometry, SquareGeometry } from './geometry.js';
 import { VertexCache } from './internalUtils.js';
 export declare abstract class SimulationElement<T extends Vector2 | Vector3 = Vector3> {
     protected abstract pos: T;
-    protected abstract geometry: Geometry;
+    protected abstract geometry: Geometry<any>;
     protected color: Color;
     protected wireframe: boolean;
     protected vertexCache: VertexCache;
@@ -30,7 +30,7 @@ export declare abstract class SimulationElement<T extends Vector2 | Vector3 = Ve
     protected abstract updateMatrix(camera: Camera): void;
     getVertexCount(): number;
     protected defaultUpdateMatrix(camera: Camera): void;
-    getBuffer(camera: Camera): number[];
+    getBuffer(camera: Camera, bufferExtender?: BufferExtenderInfo): number[];
 }
 export declare abstract class SimulationElement3d extends SimulationElement {
     protected pos: Vector3;
@@ -177,7 +177,7 @@ export declare class Spline2d extends SimulationElement2d {
     interpolate(t: number): Vector2;
     protected updateMatrix(camera: Camera): void;
 }
-export declare class Instance<T extends SimulationElement2d | SimulationElement3d> extends SimulationElement3d {
+export declare class Instance<T extends AnySimulationElement> extends SimulationElement3d {
     protected geometry: BlankGeometry;
     private obj;
     private instanceMatrix;

package/dist/graphics.js

@@ -73,19 +73,21 @@ export class SimulationElement {
         }
         this.geometry.updateMatrix(matrix);
     }
-    getBuffer(camera) {
-        if (this.vertexCache.shouldUpdate() || camera.hasUpdated()) {
+    getBuffer(camera, bufferExtender) {
+        const shouldEvalExtender = bufferExtender?.shouldEvaluate?.();
+        const reEvalExtender = shouldEvalExtender === undefined ? true : shouldEvalExtender;
+        if (this.vertexCache.shouldUpdate() || camera.hasUpdated() || reEvalExtender) {
             this.updateMatrix(camera);
             this.geometry.recompute();
             if (this.isInstanced) {
                 bufferGenerator.setInstancing(true);
             }
-            let resBuffer = [];
+            let resBuffer;
             if (this.isWireframe()) {
-                resBuffer = this.geometry.getWireframeBuffer(this.color);
+                resBuffer = this.geometry.getWireframeBuffer(this.color, bufferExtender);
             }
             else {
-                resBuffer = this.geometry.getTriangleBuffer(this.color);
+                resBuffer = this.geometry.getTriangleBuffer(this.color, bufferExtender);
             }
             bufferGenerator.setInstancing(false);
             this.vertexCache.setCache(resBuffer);
@@ -650,9 +652,9 @@ export class BezierCurve2d {
     interpolateSlope(t) {
         t = Math.max(0, Math.min(1, t));
         let vectors = this.points;
-        let slopeVector = vector2(1);
+        const slopeVector = vector2(1);
         while (vectors.length > 2) {
-            let newVectors = [];
+            const newVectors = [];
             for (let i = 1; i < vectors.length - 1; i++) {
                 const from = vector2();
                 const to = vector2();
@@ -670,7 +672,7 @@ export class BezierCurve2d {
             vectors = newVectors;
         }
         vec2.sub(vectors[1], vectors[0], slopeVector);
-        let resVector = vector2();
+        const resVector = vector2();
         vec2.scale(slopeVector, t, resVector);
         vec2.add(resVector, vectors[0], resVector);
         return [resVector, slopeVector];
@@ -987,6 +989,7 @@ export class Instance extends SimulationElement3d {
     getGeometryType() {
         return this.obj.getGeometryType();
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     updateMatrix(_) { }
     getBuffer(camera) {
         if (this.needsRemap)

package/dist/internalUtils.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="@webgpu/types" />
-import { Mat4, Vector2, Vector3 } from './types.js';
+import { AnySimulationElement, BufferExtenderInfo, Mat4, Vector2, Vector3, VertexParamInfo } from './types.js';
 import { Color } from './utils.js';
-import { SimulationElement } from './graphics.js';
 export declare class VertexCache {
     private vertices;
     private hasUpdated;
@@ -17,15 +16,15 @@ export declare const getTransformationMatrix: (pos: Vector3, rotation: Vector3,
 export declare const getOrthoMatrix: (screenSize: [number, number]) => Float32Array;
 export declare const buildDepthTexture: (device: GPUDevice, width: number, height: number) => GPUTexture;
 export declare const buildMultisampleTexture: (device: GPUDevice, ctx: GPUCanvasContext, width: number, height: number) => GPUTexture;
-export declare const addObject: (scene: SimSceneObjInfo[], el: SimulationElement<any>, device: GPUDevice | null, id?: string) => void;
-export declare const removeObject: (scene: SimSceneObjInfo[], el: SimulationElement<any>) => void;
+export declare const addObject: (scene: SimSceneObjInfo[], el: AnySimulationElement, device: GPUDevice | null, id?: string) => void;
+export declare const removeObject: (scene: SimSceneObjInfo[], el: AnySimulationElement) => void;
 export declare const removeObjectId: (scene: SimSceneObjInfo[], id: string) => void;
 export declare class SimSceneObjInfo {
     private obj;
     private id;
     private lifetime;
     private currentLife;
-    constructor(obj: SimulationElement<any>, id?: string);
+    constructor(obj: AnySimulationElement, id?: string);
     /**
      * @param lifetime - ms
      */
@@ -36,7 +35,7 @@ export declare class SimSceneObjInfo {
      * @param amount - ms
      */
     traverseLife(amount: number): void;
-    getObj(): SimulationElement<Vector3 | Vector2>;
+    getObj(): AnySimulationElement;
     getId(): string | null;
 }
 declare class Logger {
@@ -53,14 +52,14 @@ declare class BufferGenerator {
     private instancing;
     constructor();
     setInstancing(state: boolean): void;
-    generate(x: number, y: number, z: number, color: Color, uv?: Vector2): number[];
+    generate(x: number, y: number, z: number, color: Color, uv?: Vector2, bufferExtender?: BufferExtenderInfo): number[];
 }
 export declare const bufferGenerator: BufferGenerator;
 export declare function vector3ToPixelRatio(vec: Vector3): void;
 export declare function vector2ToPixelRatio(vec: Vector2): void;
 export declare function matrixFromRotation(rotation: Vector3): Mat4;
 export declare function rotateMat4(mat: Mat4, rotation: Vector3): void;
-export declare function createPipeline(device: GPUDevice, module: GPUShaderModule, bindGroupLayout: GPUBindGroupLayout, presentationFormat: GPUTextureFormat, entryPoint: string, topology: GPUPrimitiveTopology): GPURenderPipeline;
+export declare function createPipeline(device: GPUDevice, module: GPUShaderModule, bindGroupLayout: GPUBindGroupLayout, presentationFormat: GPUTextureFormat, entryPoint: string, topology: GPUPrimitiveTopology, vertexParams?: VertexParamInfo[]): GPURenderPipeline;
 export declare function triangulateWireFrameOrder(len: number): number[];
 export declare function getTotalVertices(scene: SimSceneObjInfo[]): number;
 export {};

package/dist/internalUtils.js

@@ -182,7 +182,15 @@ class BufferGenerator {
     setInstancing(state) {
         this.instancing = state;
     }
-    generate(x, y, z, color, uv = vector2()) {
+    generate(x, y, z, color, uv = vector2(), bufferExtender) {
+        if (bufferExtender) {
+            const buf = bufferExtender.extender(x, y, z, color);
+            if (buf.length !== bufferExtender.size) {
+                logger.log_error(`Vertex size for shader group does not match buffer extension size (${buf.length} to expected ${bufferExtender.size})`);
+                return [];
+            }
+            return buf;
+        }
         return [x, y, z, 1, ...color.toBuffer(), ...uv, this.instancing ? 1 : 0];
     }
 }
@@ -197,7 +205,7 @@ export function vector2ToPixelRatio(vec) {
     vec[1] *= devicePixelRatio;
 }
 export function matrixFromRotation(rotation) {
-    let rotMatrix = mat4.identity();
+    const rotMatrix = mat4.identity();
     mat4.rotateZ(rotMatrix, rotation[2], rotMatrix);
     mat4.rotateY(rotMatrix, rotation[1], rotMatrix);
     mat4.rotateX(rotMatrix, rotation[0], rotMatrix);
@@ -208,7 +216,47 @@ export function rotateMat4(mat, rotation) {
     mat4.rotateY(mat, rotation[1], mat);
     mat4.rotateX(mat, rotation[0], mat);
 }
-export function createPipeline(device, module, bindGroupLayout, presentationFormat, entryPoint, topology) {
+export function createPipeline(device, module, bindGroupLayout, presentationFormat, entryPoint, topology, vertexParams) {
+    let params = [
+        {
+            // position
+            shaderLocation: 0,
+            offset: 0,
+            format: 'float32x4'
+        },
+        {
+            // color
+            shaderLocation: 1,
+            offset: colorOffset,
+            format: 'float32x4'
+        },
+        {
+            // size
+            shaderLocation: 2,
+            offset: uvOffset,
+            format: 'float32x2'
+        },
+        {
+            // drawing instances
+            shaderLocation: 3,
+            offset: drawingInstancesOffset,
+            format: 'float32'
+        }
+    ];
+    let stride = vertexSize;
+    if (vertexParams) {
+        params = [];
+        let offset = 0;
+        for (let i = 0; i < vertexParams.length; i++) {
+            params.push({
+                shaderLocation: i,
+                offset,
+                format: vertexParams[i].format
+            });
+            offset += vertexParams[i].size;
+        }
+        stride = offset;
+    }
     return device.createRenderPipeline({
         layout: device.createPipelineLayout({
             bindGroupLayouts: [bindGroupLayout]
@@ -218,33 +266,8 @@ export function createPipeline(device, module, bindGroupLayout, presentationForm
             entryPoint,
             buffers: [
                 {
-                    arrayStride: vertexSize,
-                    attributes: [
-                        {
-                            // position
-                            shaderLocation: 0,
-                            offset: 0,
-                            format: 'float32x4'
-                        },
-                        {
-                            // color
-                            shaderLocation: 1,
-                            offset: colorOffset,
-                            format: 'float32x4'
-                        },
-                        {
-                            // size
-                            shaderLocation: 2,
-                            offset: uvOffset,
-                            format: 'float32x2'
-                        },
-                        {
-                            // drawing instances
-                            shaderLocation: 3,
-                            offset: drawingInstancesOffset,
-                            format: 'float32'
-                        }
-                    ]
+                    arrayStride: stride,
+                    attributes: params
                 }
             ]
         },

package/dist/simulation.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="@webgpu/types" />
-import { SimulationElement, SimulationElement3d } from './graphics.js';
-import type { Vector2, Vector3, LerpFunc } from './types.js';
+import { SimulationElement3d } from './graphics.js';
+import type { Vector2, Vector3, LerpFunc, AnySimulationElement, BufferExtenderInfo, VertexParamInfo } from './types.js';
 import { Color } from './utils.js';
 import { BlankGeometry } from './geometry.js';
 import { SimSceneObjInfo } from './internalUtils.js';
@@ -17,20 +17,20 @@ export declare class Simulation {
     private pipelines;
     private renderInfo;
     constructor(idOrCanvasRef: string | HTMLCanvasElement, camera?: Camera | null, showFrameRate?: boolean);
-    add(el: SimulationElement<any>, id?: string): void;
-    remove(el: SimulationElement<any>): void;
+    add(el: AnySimulationElement, id?: string): void;
+    remove(el: AnySimulationElement): void;
     removeId(id: string): void;
     /**
      * @param lifetime - ms
      */
-    setLifetime(el: SimulationElement<any>, lifetime: number): void;
+    setLifetime(el: AnySimulationElement, lifetime: number): void;
     setCanvasSize(width: number, height: number): void;
     start(): void;
     private propagateDevice;
     stop(): void;
     setBackground(color: Color): void;
     getScene(): SimSceneObjInfo[];
-    getSceneObjects(): SimulationElement<Vector3 | Vector2>[];
+    getSceneObjects(): AnySimulationElement[];
     private render;
     private renderScene;
     fitElement(): void;
@@ -39,24 +39,24 @@ export declare class SceneCollection extends SimulationElement3d {
     protected geometry: BlankGeometry;
     private name;
     private scene;
-    private device;
-    constructor(name: string);
+    protected device: GPUDevice | null;
+    constructor(name?: string);
     setWireframe(_: boolean): void;
-    getName(): string;
+    getName(): string | null;
     getScene(): SimSceneObjInfo[];
     setDevice(device: GPUDevice): void;
-    private propagateDevice;
+    protected propagateDevice(device: GPUDevice): void;
     getVertexCount(): number;
-    getSceneObjects(): SimulationElement<Vector3 | Vector2>[];
-    setSceneObjects(newScene: SimulationElement<any>[]): void;
+    getSceneObjects(): AnySimulationElement[];
+    setSceneObjects(newScene: AnySimulationElement[]): void;
     setScene(newScene: SimSceneObjInfo[]): void;
-    add(el: SimulationElement<any>, id?: string): void;
-    remove(el: SimulationElement<any>): void;
+    add(el: AnySimulationElement, id?: string): void;
+    remove(el: AnySimulationElement): void;
     removeId(id: string): void;
     /**
      * @param lifetime - ms
      */
-    setLifetime(el: SimulationElement<any>, lifetime: number): void;
+    setLifetime(el: AnySimulationElement, lifetime: number): void;
     empty(): void;
     getSceneBuffer(camera: Camera): number[];
     getWireframe(camera: Camera): number[];
@@ -82,3 +82,17 @@ export declare class Camera {
     getPos(): Vector3;
     getAspectRatio(): number;
 }
+export declare class ShaderGroup extends SceneCollection {
+    protected geometry: BlankGeometry;
+    private code;
+    private module;
+    private pipeline;
+    private topology;
+    private bufferExtender;
+    private vertexParams;
+    constructor(shaderCode: string, topology: GPUPrimitiveTopology | undefined, vertexParams: VertexParamInfo[], bufferExtender: BufferExtenderInfo);
+    protected propagateDevice(device: GPUDevice): void;
+    getPipeline(): GPURenderPipeline | null;
+    protected updateMatrix(camera: Camera): void;
+    getBufferExtender(): BufferExtenderInfo;
+}

package/dist/simulation.js

@@ -31,9 +31,15 @@ fn vertex_main_3d(
 ) -> VertexOutput {
   var output : VertexOutput;
 
-  output.Position = uniforms.modelViewProjectionMatrix * position;
+  if (drawingInstance == 1) {
+    let transformedPos = instanceMatrices[instanceIdx] * position;
+    output.Position = uniforms.modelViewProjectionMatrix * transformedPos;
+  } else {
+    output.Position = uniforms.modelViewProjectionMatrix * position;
+  }
+
   output.fragUV = uv;
-  output.fragPosition = position;
+  output.fragPosition = output.Position;
   output.fragColor = color;
   return output;
 }
@@ -56,7 +62,7 @@ fn vertex_main_2d(
   }
 
   output.fragUV = uv;
-  output.fragPosition = position;
+  output.fragPosition = output.Position;
   output.fragColor = color;
   return output;
 }
@@ -70,9 +76,7 @@ fn fragment_main(
   return fragColor;
 }
 `;
-const simjsFrameRateCss = `@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@100&display=swap');
-
-.simjs-frame-rate {
+const simjsFrameRateCss = `.simjs-frame-rate {
   position: absolute;
   top: 0;
   left: 0;
@@ -80,13 +84,14 @@ const simjsFrameRateCss = `@import url('https://fonts.googleapis.com/css2?family
   color: white;
   padding: 8px 12px;
   z-index: 1000;
-  font-family: Roboto Mono;
+  font-family: monospace;
   font-size: 16px;
 }`;
 class FrameRateView {
     el;
     fpsBuffer = [];
     maxFpsBufferLength = 8;
+    prevAvg = 0;
     constructor(show) {
         this.el = document.createElement('div');
         this.el.classList.add('simjs-frame-rate');
@@ -106,7 +111,10 @@ class FrameRateView {
             this.fpsBuffer.push(num);
         }
         const fps = Math.round(this.fpsBuffer.reduce((acc, curr) => acc + curr, 0) / this.fpsBuffer.length);
-        this.el.innerHTML = `${fps} FPS`;
+        if (fps !== this.prevAvg) {
+            this.el.innerHTML = `${fps} FPS`;
+            this.prevAvg = fps;
+        }
     }
 }
 export class Simulation {
@@ -299,6 +307,7 @@ export class Simulation {
             ]
         });
         const colorAttachment = {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             view: undefined, // Assigned later
             clearValue: this.bgColor.toObject(),
@@ -361,8 +370,10 @@ export class Simulation {
                 depthTexture = buildDepthTexture(device, screenSize[0], screenSize[1]);
                 renderPassDescriptor.depthStencilAttachment.view = depthTexture.createView();
             }
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             renderPassDescriptor.colorAttachments[0].view = multisampleTexture.createView();
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             renderPassDescriptor.colorAttachments[0].resolveTarget = ctx.getCurrentTexture().createView();
             if (this.camera.hasUpdated()) {
@@ -391,11 +402,11 @@ export class Simulation {
         };
         requestAnimationFrame(frame);
     }
-    renderScene(device, passEncoder, vertexBuffer, scene, startOffset, diff) {
+    renderScene(device, passEncoder, vertexBuffer, scene, startOffset, diff, shaderInfo) {
         if (this.pipelines === null)
             return 0;
         let currentOffset = startOffset;
-        let toRemove = [];
+        const toRemove = [];
         for (let i = 0; i < scene.length; i++) {
             const lifetime = scene[i].getLifetime();
             if (lifetime !== null) {
@@ -408,15 +419,26 @@ export class Simulation {
             }
             const obj = scene[i].getObj();
             if (obj instanceof SceneCollection) {
-                currentOffset += this.renderScene(device, passEncoder, vertexBuffer, obj.getScene(), currentOffset, diff);
+                let shaderInfo = undefined;
+                if (obj instanceof ShaderGroup) {
+                    const pipeline = obj.getPipeline();
+                    if (pipeline !== null) {
+                        shaderInfo = { pipeline, bufferExtender: obj.getBufferExtender() };
+                    }
+                }
+                currentOffset += this.renderScene(device, passEncoder, vertexBuffer, obj.getScene(), currentOffset, diff, shaderInfo || undefined);
                 continue;
             }
-            const buffer = new Float32Array(obj.getBuffer(this.camera));
-            const vertexCount = buffer.length / BUF_LEN;
+            const buffer = new Float32Array(obj.getBuffer(this.camera, shaderInfo?.bufferExtender));
+            const bufLen = shaderInfo?.bufferExtender?.size || BUF_LEN;
+            const vertexCount = buffer.length / bufLen;
             device.queue.writeBuffer(vertexBuffer, currentOffset, buffer);
             vertexBuffer.unmap();
             const is3d = Boolean(obj.is3d);
-            if (obj.isWireframe()) {
+            if (shaderInfo) {
+                passEncoder.setPipeline(shaderInfo.pipeline);
+            }
+            else if (obj.isWireframe()) {
                 if (is3d) {
                     passEncoder.setPipeline(this.pipelines.lineStrip3d);
                 }
@@ -497,10 +519,11 @@ export class SceneCollection extends SimulationElement3d {
     constructor(name) {
         super(vector3());
         this.wireframe = false;
-        this.name = name;
+        this.name = name || null;
         this.scene = [];
         this.geometry = new BlankGeometry();
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     setWireframe(_) { }
     getName() {
         return this.name;
@@ -560,9 +583,11 @@ export class SceneCollection extends SimulationElement3d {
     getSceneBuffer(camera) {
         return this.scene.map((item) => item.getObj().getBuffer(camera)).flat();
     }
+    // TODO - improve
     getWireframe(camera) {
         return this.getSceneBuffer(camera);
     }
+    // TODO - improve
     getTriangles(camera) {
         return this.getSceneBuffer(camera);
     }
@@ -657,3 +682,65 @@ export class Camera {
         return this.aspectRatio;
     }
 }
+export class ShaderGroup extends SceneCollection {
+    geometry;
+    code;
+    module;
+    pipeline;
+    topology;
+    bufferExtender;
+    vertexParams;
+    constructor(shaderCode, topology = 'triangle-list', vertexParams, bufferExtender) {
+        super();
+        const defaultCode = `
+struct Uniforms {
+  modelViewProjectionMatrix : mat4x4<f32>,
+  orthoProjectionMatrix : mat4x4<f32>
+}
+ 
+@group(0) @binding(0) var<uniform> uniforms : Uniforms;
+
+@group(0) @binding(1) var<storage, read> instanceMatrices : array<mat4x4f>;
+`;
+        this.geometry = new BlankGeometry();
+        this.code = defaultCode + shaderCode;
+        this.module = null;
+        this.pipeline = null;
+        this.topology = topology;
+        this.bufferExtender = bufferExtender;
+        this.vertexParams = vertexParams;
+    }
+    propagateDevice(device) {
+        super.propagateDevice(device);
+        this.module = device.createShaderModule({ code: this.code });
+        const bindGroupLayout = device.createBindGroupLayout({
+            entries: [
+                {
+                    binding: 0,
+                    visibility: GPUShaderStage.VERTEX,
+                    buffer: {
+                        type: 'uniform'
+                    }
+                },
+                {
+                    binding: 1,
+                    visibility: GPUShaderStage.VERTEX,
+                    buffer: {
+                        type: 'read-only-storage'
+                    }
+                }
+            ]
+        });
+        const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+        this.pipeline = createPipeline(device, this.module, bindGroupLayout, presentationFormat, 'vertex_main_2d', this.topology, this.vertexParams);
+    }
+    getPipeline() {
+        return this.pipeline;
+    }
+    updateMatrix(camera) {
+        this.defaultUpdateMatrix(camera);
+    }
+    getBufferExtender() {
+        return this.bufferExtender;
+    }
+}

package/dist/types.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="@webgpu/types" />
-import { CubicBezierCurve2d, SplinePoint2d } from './graphics.js';
+import { CubicBezierCurve2d, SimulationElement2d, SimulationElement3d, SplinePoint2d } from './graphics.js';
 import { Color, Vertex } from './utils.js';
-export type Shift<T extends any[]> = ((...args: T) => any) extends (arg1: any, ...rest: infer R) => any ? R : never;
 export type FloatArray = Float32Array | Float64Array;
 export type Vector4 = FloatArray & [number, number, number, number];
 export type Vector3 = FloatArray & [number, number, number];
@@ -27,6 +26,8 @@ export type Mat4 = FloatArray & [
 export type LerpFunc = (n: number) => number;
 export type VertexColorMap = Record<number, Color>;
 export type ElementRotation<T extends Vector2 | Vector3> = T extends Vector2 ? number : T;
+export type AnySimulationElement = SimulationElement2d | SimulationElement3d;
+export type EmptyParams = object;
 export type CubeGeometryParams = {
     width: number;
     height: number;
@@ -77,3 +78,20 @@ export type RenderInfo = {
     bindGroupLayout: GPUBindGroupLayout;
     vertexBuffer: GPUBuffer | null;
 };
+export type BindingInfo = {
+    visibility: GPUBindGroupLayoutEntry['visibility'];
+    buffer: GPUBindGroupLayoutEntry['buffer'];
+};
+export type BufferExtenderInfo = {
+    size: number;
+    extender: (x: number, y: number, z: number, color: Color) => number[];
+    shouldEvaluate?: () => boolean;
+};
+export type ShaderInfo = {
+    pipeline: GPURenderPipeline;
+    bufferExtender: BufferExtenderInfo;
+};
+export type VertexParamInfo = {
+    format: GPUVertexFormat;
+    size: number;
+};

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
-import { SimulationElement, SplinePoint2d } from './graphics.js';
-import { FloatArray, Mat4, Shift, Vector2, Vector3, Vector4 } from './types.js';
+import { SplinePoint2d } from './graphics.js';
+import { AnySimulationElement, FloatArray, Mat4, Vector2, Vector3, Vector4 } from './types.js';
 import { SimSceneObjInfo } from './internalUtils.js';
 export declare class Color {
     r: number;
@@ -44,7 +44,7 @@ export declare class Vertex {
  * @returns {Promise<void>}
  */
 export declare function transitionValues(callback1: (deltaT: number, t: number) => void, callback2: () => void, transitionLength: number, func?: (n: number) => number): Promise<void>;
-export declare function frameLoop<T extends (...args: any[]) => any>(cb: T): (...params: Shift<Parameters<T>>) => void;
+export declare function frameLoop<T extends (dt: number, ...args: any[]) => any>(cb: T): (...params: Parameters<T>) => void;
 export declare function lerp(a: number, b: number, t: number): number;
 export declare function smoothStep(t: number): number;
 export declare function linearStep(t: number): number;
@@ -78,6 +78,6 @@ export declare function continuousSplinePoint2d(end: Vertex, control: Vector2, d
 export declare function waitFor(t: number): Promise<unknown>;
 export declare function distance2d(vector1: Vector2, vector2: Vector2): number;
 export declare function distance3d(vector1: Vector3, vector2: Vector3): number;
-export declare function toSceneObjInfo(el: SimulationElement<any>, id?: string): SimSceneObjInfo;
-export declare function toSceneObjInfoMany(el: SimulationElement<any>[], id?: (string | undefined)[]): SimSceneObjInfo[];
+export declare function toSceneObjInfo(el: AnySimulationElement, id?: string): SimSceneObjInfo;
+export declare function toSceneObjInfoMany(el: AnySimulationElement[], id?: (string | undefined)[]): SimSceneObjInfo[];
 export declare function interpolateColors(colors: Color[], t: number): Color;

package/dist/utils.js

@@ -121,6 +121,7 @@ export function transitionValues(callback1, callback2, transitionLength, func) {
         }
     });
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function frameLoop(cb) {
     let prevFrame = 0;
     let prevTime = 0;

package/eslint.config.js

@@ -0,0 +1,6 @@
+// @ts-check
+
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(eslint.configs.recommended, ...tseslint.configs.recommended);

package/package.json

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