simulationjsv2 0.2.8 → 0.2.9

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

@@ -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[];
@@ -75,6 +74,9 @@ export declare class SplineGeometry extends Geometry {
     constructor(points: SplinePoint2d[], color: Color, thickness: number, detail: number);
     updateInterpolationStart(start: number): void;
     updateInterpolationLimit(limit: number): void;
+    private getVertexCount;
+    getWireframeVertexCount(): number;
+    getTriangleVertexCount(): number;
     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();
     }
@@ -156,7 +157,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();
     }
@@ -212,7 +213,7 @@ export class SplineGeometry extends Geometry {
     triangleOrder;
     params;
     constructor(points, color, thickness, detail) {
-        super([], 'list');
+        super();
         this.wireframeOrder = [];
         this.triangleOrder = [];
         this.params = {
@@ -235,6 +236,15 @@ export class SplineGeometry extends Geometry {
     updateInterpolationLimit(limit) {
         this.params.interpolateLimit = Math.min(1, Math.max(0, limit));
     }
+    getVertexCount() {
+        return this.triangleOrder.length * BUF_LEN;
+    }
+    getWireframeVertexCount() {
+        return this.getVertexCount();
+    }
+    getTriangleVertexCount() {
+        return this.getVertexCount();
+    }
     computeCurves() {
         for (let i = 0; i < this.params.points.length; i++) {
             let prevControl = null;
@@ -319,7 +329,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 +338,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 +416,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, SplineGeometry, 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>;
@@ -164,3 +167,21 @@ 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 {
+    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, SplineGeometry, 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;
     }
@@ -396,7 +407,6 @@ export class Circle extends SimulationElement2d {
         this.defaultUpdateMatrix(camera);
     }
 }
-// TODO: litterally this whole thing
 export class Polygon extends SimulationElement2d {
     geometry;
     vertices;
@@ -807,3 +817,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,4 @@
 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 { 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,4 @@
 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 { 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,
@@ -68,3 +69,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) => {
@@ -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.2.9",
   "exports": {
     ".": {
       "import": "./dist/index.js",