simulationjsv2 0.4.10 → 0.5.1

package/TODO.md

@@ -1,4 +1,5 @@
 # TODO
 
-- [x] Memoize render scene buffer
-  - Should only be reset to resize to a new larger object then reused on all frames
+- [ ] Make input position vec3 not vec4
+- [ ] Change position/rotation to be matrix transform on gpu
+- [ ] Make getBuffer return cached Float32Array

package/dist/geometry.d.ts

@@ -1,4 +1,4 @@
-import { BufferExtenderInfo, CircleGeometryParams, CubeGeometryParams, EmptyParams, Line2dGeometryParams, Line3dGeometryParams, Mat4, PolygonGeometryParams, Spline2dGeometryParams, SquareGeometryParams, Vector2, Vector3, VertexColorMap } from './types.js';
+import { VertexParamGeneratorInfo, 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<T extends EmptyParams> {
@@ -14,9 +14,9 @@ export declare abstract class Geometry<T extends EmptyParams> {
     abstract recompute(): void;
     getTriangleVertexCount(): number;
     getWireframeVertexCount(): number;
-    protected bufferFromOrder(order: number[], color: Color, bufferExtender?: BufferExtenderInfo): number[];
-    getWireframeBuffer(color: Color, bufferExtender?: BufferExtenderInfo): number[];
-    getTriangleBuffer(color: Color, bufferExtender?: BufferExtenderInfo): number[];
+    protected bufferFromOrder(order: number[], color: Color, vertexParamGenerator?: VertexParamGeneratorInfo): number[];
+    getWireframeBuffer(color: Color, vertexParamGenerator?: VertexParamGeneratorInfo): number[];
+    getTriangleBuffer(color: Color, vertexParamGenerator?: VertexParamGeneratorInfo): number[];
 }
 export declare class PlaneGeometry extends Geometry<EmptyParams> {
     protected params: {};
@@ -26,7 +26,7 @@ export declare class PlaneGeometry extends Geometry<EmptyParams> {
     constructor(vertices: Vertex[]);
     recompute(): void;
     updateVertices(vertices: Vertex[]): void;
-    getTriangleBuffer(color: Color, bufferExtender?: BufferExtenderInfo): number[];
+    getTriangleBuffer(color: Color, vertexParamGenerator?: VertexParamGeneratorInfo): number[];
 }
 export declare class CubeGeometry extends Geometry<CubeGeometryParams> {
     protected params: CubeGeometryParams;
@@ -48,7 +48,7 @@ export declare class SquareGeometry extends Geometry<SquareGeometryParams> {
     setWidth(width: number): void;
     setHeight(height: number): void;
     recompute(): void;
-    getTriangleBuffer(color: Color, bufferExtender?: BufferExtenderInfo): number[];
+    getTriangleBuffer(color: Color, vertexParamGenerator?: VertexParamGeneratorInfo): number[];
 }
 export declare class BlankGeometry extends Geometry<EmptyParams> {
     protected wireframeOrder: never[];
@@ -83,8 +83,8 @@ export declare class Spline2dGeometry extends Geometry<Spline2dGeometryParams> {
     private computeCurves;
     private updateWireframeOrder;
     recompute(): void;
-    getWireframeBuffer(color: Color, bufferExtender?: BufferExtenderInfo): number[];
-    getTriangleBuffer(_: Color, bufferExtender?: BufferExtenderInfo): number[];
+    getWireframeBuffer(color: Color, vertexParamGenerator?: VertexParamGeneratorInfo): number[];
+    getTriangleBuffer(_: Color, vertexParamGenerator?: VertexParamGeneratorInfo): number[];
 }
 export declare class Line2dGeometry extends Geometry<Line2dGeometryParams> {
     protected wireframeOrder: number[];

package/dist/geometry.js

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

package/dist/graphics.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="@webgpu/types" />
 import { Camera } from './simulation.js';
-import type { Vector2, Vector3, LerpFunc, VertexColorMap, ElementRotation, Mat4, AnySimulationElement, BufferExtenderInfo } from './types.js';
+import type { Vector2, Vector3, LerpFunc, VertexColorMap, ElementRotation, Mat4, AnySimulationElement, VertexParamGeneratorInfo } 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';
@@ -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, bufferExtender?: BufferExtenderInfo): number[];
+    getBuffer(camera: Camera, vertexParamGenerator?: VertexParamGeneratorInfo): number[];
 }
 export declare abstract class SimulationElement3d extends SimulationElement {
     protected pos: Vector3;
@@ -49,7 +49,7 @@ export declare abstract class SimulationElement2d extends SimulationElement<Vect
     rotate(rotation: number, t?: number, f?: LerpFunc): Promise<void>;
     rotateTo(newRotation: number, t?: number, f?: LerpFunc): Promise<void>;
     move(amount: Vector2, t?: number, f?: LerpFunc): Promise<void>;
-    moveTo(pos: Vector2, t?: number, f?: LerpFunc): Promise<void>;
+    moveTo(newPos: Vector2, t?: number, f?: LerpFunc): Promise<void>;
 }
 export declare class Plane extends SimulationElement3d {
     protected geometry: PlaneGeometry;

package/dist/graphics.js

@@ -73,8 +73,8 @@ export class SimulationElement {
         }
         this.geometry.updateMatrix(matrix);
     }
-    getBuffer(camera, bufferExtender) {
-        const shouldEvalExtender = bufferExtender?.shouldEvaluate?.();
+    getBuffer(camera, vertexParamGenerator) {
+        const shouldEvalExtender = vertexParamGenerator?.shouldEvaluate?.();
         const reEvalExtender = shouldEvalExtender === undefined ? true : shouldEvalExtender;
         if (this.vertexCache.shouldUpdate() || camera.hasUpdated() || reEvalExtender) {
             this.updateMatrix(camera);
@@ -84,10 +84,10 @@ export class SimulationElement {
             }
             let resBuffer;
             if (this.isWireframe()) {
-                resBuffer = this.geometry.getWireframeBuffer(this.color, bufferExtender);
+                resBuffer = this.geometry.getWireframeBuffer(this.color, vertexParamGenerator);
             }
             else {
-                resBuffer = this.geometry.getTriangleBuffer(this.color, bufferExtender);
+                resBuffer = this.geometry.getTriangleBuffer(this.color, vertexParamGenerator);
             }
             bufferGenerator.setInstancing(false);
             this.vertexCache.setCache(resBuffer);
@@ -188,18 +188,22 @@ export class SimulationElement2d extends SimulationElement {
         }, t, f);
     }
     move(amount, t = 0, f) {
+        const tempAmount = cloneBuf(amount);
+        vector2ToPixelRatio(tempAmount);
         const finalPos = vector2();
-        vec3.add(amount, this.pos, finalPos);
+        vec3.add(tempAmount, this.pos, finalPos);
         return transitionValues((p) => {
-            this.pos[0] += amount[0] * p;
-            this.pos[1] += amount[1] * p;
+            this.pos[0] += tempAmount[0] * p;
+            this.pos[1] += tempAmount[1] * p;
             this.vertexCache.updated();
         }, () => {
             this.pos = finalPos;
             this.vertexCache.updated();
         }, t, f);
     }
-    moveTo(pos, t = 0, f) {
+    moveTo(newPos, t = 0, f) {
+        const pos = cloneBuf(newPos);
+        vector2ToPixelRatio(pos);
         const diff = vector2();
         vec2.sub(pos, this.pos, diff);
         return transitionValues((p) => {

package/dist/internalUtils.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="@webgpu/types" />
-import { AnySimulationElement, BufferExtenderInfo, Mat4, Vector2, Vector3, VertexParamInfo } from './types.js';
+import { AnySimulationElement, VertexParamGeneratorInfo, Mat4, Vector2, Vector3, VertexParamInfo } from './types.js';
 import { Color } from './utils.js';
 export declare class VertexCache {
     private vertices;
@@ -52,14 +52,14 @@ declare class BufferGenerator {
     private instancing;
     constructor();
     setInstancing(state: boolean): void;
-    generate(x: number, y: number, z: number, color: Color, uv?: Vector2, bufferExtender?: BufferExtenderInfo): number[];
+    generate(x: number, y: number, z: number, color: Color, uv?: Vector2, vertexParamGenerator?: VertexParamGeneratorInfo): 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, vertexParams?: VertexParamInfo[]): GPURenderPipeline;
+export declare function createPipeline(device: GPUDevice, module: GPUShaderModule, bindGroupLayouts: 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,11 +182,11 @@ class BufferGenerator {
     setInstancing(state) {
         this.instancing = state;
     }
-    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})`);
+    generate(x, y, z, color, uv = vector2(), vertexParamGenerator) {
+        if (vertexParamGenerator) {
+            const buf = vertexParamGenerator.createBuffer(x, y, z, color);
+            if (buf.length !== vertexParamGenerator.bufferSize) {
+                logger.log_error(`Vertex size for shader group does not match buffer extension size (${buf.length} to expected ${vertexParamGenerator.bufferSize})`);
                 return [];
             }
             return buf;
@@ -216,7 +216,7 @@ 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, vertexParams) {
+export function createPipeline(device, module, bindGroupLayouts, presentationFormat, entryPoint, topology, vertexParams) {
     let params = [
         {
             // position
@@ -259,7 +259,7 @@ export function createPipeline(device, module, bindGroupLayout, presentationForm
     }
     return device.createRenderPipeline({
         layout: device.createPipelineLayout({
-            bindGroupLayouts: [bindGroupLayout]
+            bindGroupLayouts: bindGroupLayouts
         }),
         vertex: {
             module,

package/dist/simulation.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="@webgpu/types" />
 import { SimulationElement3d } from './graphics.js';
-import type { Vector2, Vector3, LerpFunc, AnySimulationElement, BufferExtenderInfo, VertexParamInfo } from './types.js';
+import type { Vector2, Vector3, LerpFunc, AnySimulationElement, VertexParamGeneratorInfo, VertexParamInfo, BindGroupInfo } from './types.js';
 import { Color } from './utils.js';
 import { BlankGeometry } from './geometry.js';
 import { SimSceneObjInfo } from './internalUtils.js';
@@ -16,7 +16,12 @@ export declare class Simulation {
     private device;
     private pipelines;
     private renderInfo;
+    private resizeEvents;
     constructor(idOrCanvasRef: string | HTMLCanvasElement, camera?: Camera | null, showFrameRate?: boolean);
+    private handleCanvasResize;
+    onResize(cb: (width: number, height: number) => void): void;
+    getWidth(): number;
+    getHeight(): number;
     add(el: AnySimulationElement, id?: string): void;
     remove(el: AnySimulationElement): void;
     removeId(id: string): void;
@@ -24,6 +29,7 @@ export declare class Simulation {
      * @param lifetime - ms
      */
     setLifetime(el: AnySimulationElement, lifetime: number): void;
+    private applyCanvasSize;
     setCanvasSize(width: number, height: number): void;
     start(): void;
     private propagateDevice;
@@ -87,12 +93,19 @@ export declare class ShaderGroup extends SceneCollection {
     private code;
     private module;
     private pipeline;
+    private bindGroupLayout;
     private topology;
-    private bufferExtender;
+    private paramGenerator;
     private vertexParams;
-    constructor(shaderCode: string, topology: GPUPrimitiveTopology | undefined, vertexParams: VertexParamInfo[], bufferExtender: BufferExtenderInfo);
+    private bindGroup;
+    private valueBuffers;
+    constructor(shaderCode: string, topology: GPUPrimitiveTopology | undefined, vertexParams: VertexParamInfo[], paramGenerator: VertexParamGeneratorInfo, bindGroup?: BindGroupInfo);
     protected propagateDevice(device: GPUDevice): void;
+    getBindGroupLayout(): GPUBindGroupLayout | null;
     getPipeline(): GPURenderPipeline | null;
+    getBindGroupBuffers(): GPUBuffer[] | null;
+    private createBuffer;
     protected updateMatrix(camera: Camera): void;
-    getBufferExtender(): BufferExtenderInfo;
+    getVertexParamGenerator(): VertexParamGeneratorInfo;
+    hasBindGroup(): boolean;
 }

package/dist/simulation.js

@@ -12,7 +12,7 @@ struct Uniforms {
  
 @group(0) @binding(0) var<uniform> uniforms : Uniforms;
 
-@group(0) @binding(1) var<storage, read> instanceMatrices : array<mat4x4f>;
+@group(0) @binding(1) var<storage> instanceMatrices : array<mat4x4f>;
 
 struct VertexOutput {
   @builtin(position) Position : vec4<f32>,
@@ -129,6 +129,7 @@ export class Simulation {
     device = null;
     pipelines = null;
     renderInfo = null;
+    resizeEvents;
     constructor(idOrCanvasRef, camera = null, showFrameRate = false) {
         if (typeof idOrCanvasRef === 'string') {
             const ref = document.getElementById(idOrCanvasRef);
@@ -150,16 +151,29 @@ export class Simulation {
             this.camera = camera;
         if (parent === null)
             throw logger.error('Canvas parent is null');
+        this.resizeEvents = [];
         addEventListener('resize', () => {
-            if (this.fittingElement) {
-                const width = parent.clientWidth;
-                const height = parent.clientHeight;
-                this.setCanvasSize(width, height);
-            }
+            this.handleCanvasResize(parent);
         });
         this.frameRateView = new FrameRateView(showFrameRate);
         this.frameRateView.updateFrameRate(1);
     }
+    handleCanvasResize(parent) {
+        if (this.fittingElement) {
+            const width = parent.clientWidth;
+            const height = parent.clientHeight;
+            this.setCanvasSize(width, height);
+        }
+    }
+    onResize(cb) {
+        this.resizeEvents.push(cb);
+    }
+    getWidth() {
+        return (this.canvasRef?.width || 0) / devicePixelRatio;
+    }
+    getHeight() {
+        return (this.canvasRef?.height || 0) / devicePixelRatio;
+    }
     add(el, id) {
         addObject(this.scene, el, this.device, id);
     }
@@ -178,7 +192,7 @@ export class Simulation {
                 this.scene[i].setLifetime(lifetime);
         }
     }
-    setCanvasSize(width, height) {
+    applyCanvasSize(width, height) {
         if (this.canvasRef === null)
             return;
         this.canvasRef.width = width * devicePixelRatio;
@@ -186,6 +200,12 @@ export class Simulation {
         this.canvasRef.style.width = width + 'px';
         this.canvasRef.style.height = height + 'px';
     }
+    setCanvasSize(width, height) {
+        this.applyCanvasSize(width, height);
+        for (let i = 0; i < this.resizeEvents.length; i++) {
+            this.resizeEvents[i](width, height);
+        }
+    }
     start() {
         if (this.initialized) {
             this.running = true;
@@ -282,12 +302,12 @@ export class Simulation {
             vertexBuffer: null
         };
         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')
+            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: bindGroupLayout,
@@ -423,14 +443,23 @@ export class Simulation {
                 if (obj instanceof ShaderGroup) {
                     const pipeline = obj.getPipeline();
                     if (pipeline !== null) {
-                        shaderInfo = { pipeline, bufferExtender: obj.getBufferExtender() };
+                        shaderInfo = {
+                            pipeline,
+                            paramGenerator: obj.getVertexParamGenerator(),
+                            bufferInfo: obj.hasBindGroup()
+                                ? {
+                                    buffers: obj.getBindGroupBuffers(),
+                                    layout: obj.getBindGroupLayout()
+                                }
+                                : null
+                        };
                     }
                 }
                 currentOffset += this.renderScene(device, passEncoder, vertexBuffer, obj.getScene(), currentOffset, diff, shaderInfo || undefined);
                 continue;
             }
-            const buffer = new Float32Array(obj.getBuffer(this.camera, shaderInfo?.bufferExtender));
-            const bufLen = shaderInfo?.bufferExtender?.size || BUF_LEN;
+            const buffer = new Float32Array(obj.getBuffer(this.camera, shaderInfo?.paramGenerator));
+            const bufLen = shaderInfo?.paramGenerator?.bufferSize || BUF_LEN;
             const vertexCount = buffer.length / bufLen;
             device.queue.writeBuffer(vertexBuffer, currentOffset, buffer);
             vertexBuffer.unmap();
@@ -490,6 +519,19 @@ export class Simulation {
                     passEncoder.setBindGroup(0, uniformBindGroup);
                 }
             }
+            if (shaderInfo && shaderInfo.bufferInfo) {
+                const bindGroupEntries = shaderInfo.bufferInfo.buffers.map((buffer, index) => ({
+                    binding: index,
+                    resource: {
+                        buffer
+                    }
+                }));
+                const bindGroup = device.createBindGroup({
+                    layout: shaderInfo.bufferInfo.layout,
+                    entries: bindGroupEntries
+                });
+                passEncoder.setBindGroup(1, bindGroup);
+            }
             passEncoder.setVertexBuffer(0, vertexBuffer, currentOffset, buffer.byteLength);
             passEncoder.draw(vertexCount, instances, 0, 0);
             currentOffset += buffer.byteLength;
@@ -682,17 +724,7 @@ 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 = `
+const defaultShaderCode = `
 struct Uniforms {
   modelViewProjectionMatrix : mat4x4<f32>,
   orthoProjectionMatrix : mat4x4<f32>
@@ -702,17 +734,34 @@ struct Uniforms {
 
 @group(0) @binding(1) var<storage, read> instanceMatrices : array<mat4x4f>;
 `;
+export class ShaderGroup extends SceneCollection {
+    geometry;
+    code;
+    module;
+    pipeline;
+    bindGroupLayout;
+    topology;
+    paramGenerator;
+    vertexParams;
+    bindGroup;
+    valueBuffers;
+    constructor(shaderCode, topology = 'triangle-list', vertexParams, paramGenerator, bindGroup) {
+        super();
         this.geometry = new BlankGeometry();
-        this.code = defaultCode + shaderCode;
+        this.code = defaultShaderCode + shaderCode;
         this.module = null;
         this.pipeline = null;
+        this.bindGroupLayout = null;
+        this.bindGroup = bindGroup || null;
         this.topology = topology;
-        this.bufferExtender = bufferExtender;
+        this.paramGenerator = paramGenerator;
         this.vertexParams = vertexParams;
+        this.valueBuffers = null;
     }
     propagateDevice(device) {
         super.propagateDevice(device);
         this.module = device.createShaderModule({ code: this.code });
+        const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
         const bindGroupLayout = device.createBindGroupLayout({
             entries: [
                 {
@@ -731,16 +780,75 @@ struct Uniforms {
                 }
             ]
         });
-        const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-        this.pipeline = createPipeline(device, this.module, bindGroupLayout, presentationFormat, 'vertex_main_2d', this.topology, this.vertexParams);
+        const bindGroups = [bindGroupLayout];
+        if (this.bindGroup !== null) {
+            const entryValues = this.bindGroup.bindings.map((binding, index) => ({
+                binding: index,
+                visibility: binding.visibility,
+                buffer: binding.buffer
+            }));
+            this.bindGroupLayout = device.createBindGroupLayout({
+                entries: entryValues
+            });
+            bindGroups.push(this.bindGroupLayout);
+        }
+        this.pipeline = createPipeline(device, this.module, bindGroups, presentationFormat, 'vertex_main_2d', this.topology, this.vertexParams);
+    }
+    getBindGroupLayout() {
+        return this.bindGroupLayout;
     }
     getPipeline() {
         return this.pipeline;
     }
+    getBindGroupBuffers() {
+        if (this.bindGroup === null)
+            return null;
+        if (this.device === null)
+            return null;
+        const values = this.bindGroup.values();
+        if (this.valueBuffers === null) {
+            this.valueBuffers = [];
+            for (let i = 0; i < values.length; i++) {
+                const buffer = this.createBuffer(this.device, values[i]);
+                this.valueBuffers.push(buffer);
+            }
+        }
+        else {
+            for (let i = 0; i < values.length; i++) {
+                const arrayConstructor = values[i].array;
+                const array = new arrayConstructor(values[i].value);
+                if (array.byteLength > this.valueBuffers[i].size) {
+                    const newBuffer = this.createBuffer(this.device, values[i]);
+                    this.valueBuffers[i].destroy();
+                    this.valueBuffers[i] = newBuffer;
+                }
+                else {
+                    this.device.queue.writeBuffer(this.valueBuffers[i], 0, array.buffer, array.byteOffset, array.byteLength);
+                }
+            }
+        }
+        return this.valueBuffers;
+    }
+    createBuffer(device, value) {
+        const arrayConstructor = value.array;
+        const array = new arrayConstructor(value.value);
+        const buffer = device.createBuffer({
+            mappedAtCreation: true,
+            size: array.byteLength,
+            usage: value.usage
+        });
+        const bufferArr = new arrayConstructor(buffer.getMappedRange());
+        bufferArr.set(array);
+        buffer.unmap();
+        return buffer;
+    }
     updateMatrix(camera) {
         this.defaultUpdateMatrix(camera);
     }
-    getBufferExtender() {
-        return this.bufferExtender;
+    getVertexParamGenerator() {
+        return this.paramGenerator;
+    }
+    hasBindGroup() {
+        return !!this.bindGroup;
     }
 }

package/dist/types.d.ts

@@ -78,20 +78,35 @@ 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[];
+export type VertexParamGeneratorInfo = {
+    bufferSize: number;
+    createBuffer: (x: number, y: number, z: number, color: Color) => number[];
     shouldEvaluate?: () => boolean;
 };
 export type ShaderInfo = {
     pipeline: GPURenderPipeline;
-    bufferExtender: BufferExtenderInfo;
+    paramGenerator: VertexParamGeneratorInfo;
+    bufferInfo: {
+        buffers: GPUBuffer[];
+        layout: GPUBindGroupLayout;
+    } | null;
 };
 export type VertexParamInfo = {
     format: GPUVertexFormat;
     size: number;
 };
+export type BindGroupEntry = {
+    visibility: GPUBindGroupLayoutEntry['visibility'];
+    buffer: GPUBindGroupLayoutEntry['buffer'];
+};
+export type ArrayConstructors = Float32ArrayConstructor | Float64ArrayConstructor | Int8ArrayConstructor | Int16ArrayConstructor | Int32ArrayConstructor;
+export type ArrayTypes = Float32Array | Float64Array | Int8Array | Int16Array | Int32Array;
+export type BindGroupValue = {
+    value: number[];
+    usage: GPUBufferDescriptor['usage'];
+    array: ArrayConstructors;
+};
+export type BindGroupInfo = {
+    bindings: BindGroupEntry[];
+    values: () => BindGroupValue[];
+};

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.10",
+  "version": "0.5.1",
   "exports": {
     ".": {
       "import": "./dist/index.js",