simulationjsv2 0.11.1 → 0.11.2

package/README.md

@@ -1,6 +1,6 @@
 # SimulationJS v2
 
-SimulationJS is a graphics library with simple easy to use APIs. Version 2 hopes to improve 3d graphics and boost performance by using webgpu under the hood.
+SimulationJS is a graphics library with simple easy to use APIs. Version 2 hopes to improve 2d/3d graphics and boost performance by using webgpu or webgl2 under the hood.
 
 Watch a quick demo
 

package/dist/backends/backend.d.ts

@@ -1,12 +1,14 @@
 import { SimulationElement3d } from '../graphics.js';
 import { SimJSShader } from '../shaders/shader.js';
+import { Simulation } from '../simulation.js';
 import { BackendType, GPUBuffers, SpecificBackendType, Vector2 } from '../types.js';
 import { Color } from '../utils.js';
 export declare abstract class SimJsBackend {
-    private type;
+    protected sim: Simulation;
+    protected type: BackendType;
     protected abstract buffers: GPUBuffers<unknown> | null;
     protected clearColor: Color;
-    constructor(type: BackendType);
+    constructor(sim: Simulation, type: BackendType);
     getBackendType(): BackendType;
     abstract init(canvas: HTMLCanvasElement): Promise<void>;
     abstract renderStart(canvas: HTMLCanvasElement): void;
@@ -14,7 +16,7 @@ export declare abstract class SimJsBackend {
     abstract preRender(scene: SimulationElement3d[]): void;
     abstract finishRender(): void;
     abstract draw(obj: SimulationElement3d, vertexCallOffset: number, vertexCallBuffer: Float32Array, indexOffset: number, indices: Uint32Array): void;
-    abstract initShaders(shaders: SimJSShader[]): void;
+    abstract initShader(shaders: SimJSShader): void;
     abstract destroy(): void;
     abstract onClearColorChange(): void;
     setClearColor(color: Color): void;

package/dist/backends/backend.js

@@ -1,9 +1,11 @@
 import { logger } from '../globals.js';
 import { color } from '../utils.js';
 export class SimJsBackend {
+    sim;
     type;
     clearColor = color();
-    constructor(type) {
+    constructor(sim, type) {
+        this.sim = sim;
         this.type = type;
     }
     getBackendType() {

package/dist/backends/webgl.d.ts

@@ -2,17 +2,18 @@ import { SimulationElement3d } from '../graphics.js';
 import { SimJsBackend } from './backend.js';
 import { SimJSShader } from '../shaders/shader.js';
 import { GPUBuffers, Vector2 } from '../types.js';
+import { Simulation } from '../simulation.js';
 export declare class WebGLBackend extends SimJsBackend {
     private gl;
     protected buffers: GPUBuffers<'webgl'> | null;
-    constructor();
+    constructor(sim: Simulation);
     init(canvas: HTMLCanvasElement): Promise<void>;
     getContextOrError(): WebGL2RenderingContext;
     renderStart(_canvas: HTMLCanvasElement): void;
     updateTextures(screenSize: Vector2): void;
     preRender(): void;
     finishRender(): void;
-    initShaders(shaders: SimJSShader[]): void;
+    initShader(shader: SimJSShader): void;
     draw(obj: SimulationElement3d, vertexCallOffset: number, vertexCallBuffer: Float32Array, indexOffset: number, indices: Uint32Array): void;
     destroy(): void;
     onClearColorChange(): void;

package/dist/backends/webgl.js

@@ -1,12 +1,12 @@
 import { logger } from '../globals.js';
 import { SimJsBackend } from './backend.js';
 import { WebGLMemoBuffer } from '../buffers/webgl.js';
+import { defaultWebGLShader, defaultWebGLVertexColorShader } from '../shaders/webgl.js';
 export class WebGLBackend extends SimJsBackend {
     gl = null;
     buffers = null;
-    constructor() {
-        super('webgl');
-        console.log('new webgl backend');
+    constructor(sim) {
+        super(sim, 'webgl');
     }
     async init(canvas) {
         this.gl = canvas.getContext('webgl2');
@@ -21,6 +21,8 @@ export class WebGLBackend extends SimJsBackend {
         const clearColor = this.clearColor.toObject();
         this.gl.clearColor(clearColor.r, clearColor.g, clearColor.b, clearColor.a);
         this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+        this.initShader(defaultWebGLShader);
+        this.initShader(defaultWebGLVertexColorShader);
     }
     getContextOrError() {
         if (!this.gl)
@@ -58,21 +60,17 @@ export class WebGLBackend extends SimJsBackend {
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
     }
     finishRender() { }
-    initShaders(shaders) {
+    initShader(shader) {
         if (!this.gl)
             throw logger.error('WebGL context is null');
-        for (let i = 0; i < shaders.length; i++) {
-            const shader = shaders[i];
-            if (shader.compatableWith('webgl')) {
-                shader.as('webgl').init(this.gl);
-            }
-        }
+        const webglShader = shader.as('webgl');
+        webglShader.init(this.gl);
     }
     draw(obj, vertexCallOffset, vertexCallBuffer, indexOffset, indices) {
         if (!this.gl || !this.buffers)
             throw logger.error('Invalid draw state');
         const gl = this.gl;
-        const shader = obj.getShader().as('webgl');
+        const shader = obj.getShaderOrError().as('webgl');
         const shaderProgram = shader.getShaderProgram();
         if (!shaderProgram)
             throw logger.error('Null shader program');

package/dist/backends/webgpu.d.ts

@@ -1,5 +1,7 @@
 import { SimulationElement3d } from '../graphics.js';
 import { SimJSShader } from '../shaders/shader.js';
+import { SimJSWebGPUShader } from '../shaders/webgpu.js';
+import { Simulation } from '../simulation.js';
 import { GPUBuffers, Vector2 } from '../types.js';
 import { SimJsBackend } from './backend.js';
 export declare class WebGPUBackend extends SimJsBackend {
@@ -11,7 +13,7 @@ export declare class WebGPUBackend extends SimJsBackend {
     private passEncoder;
     private commandEncoder;
     protected buffers: GPUBuffers<'webgpu'> | null;
-    constructor();
+    constructor(sim: Simulation);
     getDeviceOrError(): GPUDevice;
     init(canvas: HTMLCanvasElement): Promise<void>;
     renderStart(canvas: HTMLCanvasElement): void;
@@ -20,6 +22,13 @@ export declare class WebGPUBackend extends SimJsBackend {
     preRender(scene: SimulationElement3d[]): void;
     finishRender(): void;
     draw(obj: SimulationElement3d, vertexCallOffset: number, vertexCallBuffer: Float32Array, indexOffset: number, indices: Uint32Array): void;
-    initShaders(shaders: SimJSShader[]): void;
+    initShader(shader: SimJSShader): void;
     onClearColorChange(): void;
+    private getPipeline;
+}
+export declare class PipelineCache {
+    private pipelines;
+    constructor();
+    getPipeline(sim: Simulation, device: GPUDevice, info: string, shader: SimJSWebGPUShader): GPURenderPipeline;
 }
+export declare const pipelineCache: PipelineCache;

package/dist/backends/webgpu.js

@@ -1,6 +1,7 @@
 import { WebGPUMemoBuffer } from '../buffers/webgpu.js';
 import { logger } from '../globals.js';
 import { buildDepthTexture, buildMultisampleTexture, getVertexAndIndexSize } from '../internalUtils.js';
+import { defaultWebGPUShader, defaultWebGPUVertexColorShader } from '../shaders/webgpu.js';
 import { SimJsBackend } from './backend.js';
 export class WebGPUBackend extends SimJsBackend {
     device = null;
@@ -11,8 +12,8 @@ export class WebGPUBackend extends SimJsBackend {
     passEncoder = null;
     commandEncoder = null;
     buffers = null;
-    constructor() {
-        super('webgpu');
+    constructor(sim) {
+        super(sim, 'webgpu');
     }
     getDeviceOrError() {
         if (!this.device)
@@ -37,6 +38,8 @@ export class WebGPUBackend extends SimJsBackend {
             gpuVertexCallBuffer: new WebGPUMemoBuffer(this.device, GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, 0),
             gpuIndexBuffer: new WebGPUMemoBuffer(this.device, GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST, 0)
         };
+        this.initShader(defaultWebGPUShader);
+        this.initShader(defaultWebGPUVertexColorShader);
     }
     renderStart(canvas) {
         if (!this.device || !this.ctx)
@@ -102,10 +105,10 @@ export class WebGPUBackend extends SimJsBackend {
         this.device.queue.writeBuffer(this.buffers.gpuIndexBuffer.getBuffer(), indexOffset, indices.buffer, indices.byteOffset, indices.byteLength);
         this.passEncoder.setVertexBuffer(0, this.buffers.gpuVertexCallBuffer.getBuffer(), vertexCallOffset, vertexCallBuffer.byteLength);
         this.passEncoder.setIndexBuffer(this.buffers.gpuIndexBuffer.getBuffer(), 'uint32', indexOffset, indices.byteLength);
-        this.passEncoder.setPipeline(obj.getPipeline());
-        const shader = obj.getShader().as('webgpu');
+        this.passEncoder.setPipeline(this.getPipeline(obj));
+        const shader = obj.getShaderOrError().as('webgpu');
         shader.writeUniformBuffers(obj);
-        const bindGroups = shader.getBindGroups(this.device, obj);
+        const bindGroups = shader.getBindGroups(this.sim, this.device, obj);
         for (let i = 0; i < bindGroups.length; i++) {
             this.passEncoder.setBindGroup(i, bindGroups[i]);
         }
@@ -114,15 +117,11 @@ export class WebGPUBackend extends SimJsBackend {
             : 1;
         this.passEncoder.drawIndexed(indices.length, instances);
     }
-    initShaders(shaders) {
+    initShader(shader) {
         if (!this.device)
             throw logger.error('WebGPU device is null');
-        for (let i = 0; i < shaders.length; i++) {
-            const shader = shaders[i];
-            if (shader.compatableWith('webgpu')) {
-                shader.as('webgpu').init(this.device);
-            }
-        }
+        const webGPUShader = shader.as('webgpu');
+        webGPUShader.init(this.device);
     }
     onClearColorChange() {
         if (!this.renderPassDescriptor)
@@ -131,4 +130,72 @@ export class WebGPUBackend extends SimJsBackend {
             .colorAttachments;
         colorAttachments[0].clearValue = this.clearColor.toObject();
     }
+    getPipeline(obj) {
+        if (!this.device)
+            throw logger.error('Backend not initialized');
+        const objInfo = obj.getObjectInfo();
+        return pipelineCache.getPipeline(this.sim, this.device, objInfo, obj.getShaderOrError().as('webgpu'));
+    }
+}
+export class PipelineCache {
+    pipelines;
+    constructor() {
+        this.pipelines = new Map();
+    }
+    getPipeline(sim, device, info, shader) {
+        const res = this.pipelines.get(info);
+        if (res)
+            return res;
+        const pipeline = createPipeline(sim, device, info, shader);
+        this.pipelines.set(info, pipeline);
+        return pipeline;
+    }
+}
+export const pipelineCache = new PipelineCache();
+function createPipeline(sim, device, info, shader) {
+    const shaderModule = shader.getModule();
+    const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+    const infoObj = JSON.parse(info);
+    return device.createRenderPipeline({
+        layout: device.createPipelineLayout({
+            bindGroupLayouts: shader.getBindGroupLayouts(sim)
+        }),
+        vertex: {
+            module: shaderModule,
+            entryPoint: shader.getVertexMain(),
+            buffers: [shader.getVertexBuffers()]
+        },
+        fragment: {
+            module: shaderModule,
+            entryPoint: 'fragment_main',
+            targets: [
+                {
+                    format: presentationFormat,
+                    blend: {
+                        color: {
+                            srcFactor: 'src-alpha',
+                            dstFactor: 'one-minus-src-alpha'
+                        },
+                        alpha: {
+                            srcFactor: 'src-alpha',
+                            dstFactor: 'one-minus-src-alpha'
+                        }
+                    }
+                }
+            ]
+        },
+        primitive: {
+            topology: infoObj.topology,
+            stripIndexFormat: infoObj.topology.endsWith('strip') ? 'uint32' : undefined,
+            cullMode: infoObj.cullMode
+        },
+        multisample: {
+            count: 4
+        },
+        depthStencil: {
+            depthWriteEnabled: !infoObj.transparent,
+            depthCompare: 'less',
+            format: 'depth24plus'
+        }
+    });
 }

package/dist/geometry.d.ts

@@ -13,7 +13,7 @@ export declare abstract class Geometry<T extends EmptyParams> {
     protected vertices: Vector3[];
     protected topology: 'list' | 'strip';
     constructor(geometryType?: 'list' | 'strip');
-    getTopology(): "strip" | "list";
+    getTopology(): "list" | "strip";
     computeVertices(): void;
     compute(): void;
     triangulate(): void;

package/dist/globals.d.ts

@@ -1,6 +1,3 @@
-import { SimJSShader } from './shaders/shader.js';
-import { SimJSWebGPUShader } from './shaders/webgpu.js';
-import { Simulation } from './simulation.js';
 import { Color } from './utils.js';
 declare class Logger {
     constructor();
@@ -12,23 +9,10 @@ declare class Logger {
 }
 export declare const logger: Logger;
 export declare class GlobalInfo {
-    private canvas;
     private defaultColor;
-    private toInitShaders;
     constructor();
     setDefaultColor(color: Color): void;
     getDefaultColor(): Color;
-    setCanvas(canvas: Simulation): void;
-    errorGetCanvas(): Simulation;
-    getCanvas(): Simulation | null;
-    addToInitShader(shader: SimJSShader): void;
-    getToInitShaders(): SimJSShader[];
 }
 export declare const globalInfo: GlobalInfo;
-export declare class PipelineCache {
-    private pipelines;
-    constructor();
-    getPipeline(device: GPUDevice, info: string, shader: SimJSWebGPUShader): GPURenderPipeline;
-}
-export declare const pipelineCache: PipelineCache;
 export {};

package/dist/globals.js

@@ -1,4 +1,3 @@
-import { createPipeline } from './internalUtils.js';
 import { color } from './utils.js';
 class Logger {
     constructor() { }
@@ -20,13 +19,9 @@ class Logger {
 }
 export const logger = new Logger();
 export class GlobalInfo {
-    canvas;
     defaultColor;
-    toInitShaders;
     constructor() {
-        this.canvas = null;
         this.defaultColor = null;
-        this.toInitShaders = [];
     }
     setDefaultColor(color) {
         this.defaultColor = color;
@@ -34,35 +29,5 @@ export class GlobalInfo {
     getDefaultColor() {
         return this.defaultColor?.clone() ?? color();
     }
-    setCanvas(canvas) {
-        this.canvas = canvas;
-    }
-    errorGetCanvas() {
-        if (!this.canvas)
-            throw logger.error('Canvas is null');
-        return this.canvas;
-    }
-    getCanvas() {
-        return this.canvas;
-    }
-    addToInitShader(shader) {
-        this.toInitShaders.push(shader);
-    }
-    getToInitShaders() {
-        return this.toInitShaders;
-    }
 }
 export const globalInfo = new GlobalInfo();
-export class PipelineCache {
-    pipelines;
-    constructor() {
-        this.pipelines = new Map();
-    }
-    getPipeline(device, info, shader) {
-        const res = this.pipelines.get(info);
-        if (!res)
-            return createPipeline(device, info, shader);
-        return res;
-    }
-}
-export const pipelineCache = new PipelineCache();

package/dist/graphics.d.ts

@@ -1,16 +1,16 @@
-import type { Vector2, Vector3, LerpFunc, Mat4 } from './types.js';
+import type { Vector2, Vector3, LerpFunc, Mat4, BackendType } from './types.js';
 import { Vertex, Color } from './utils.js';
 import { BlankGeometry, CircleGeometry, CubeGeometry, Geometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, Spline2dGeometry, SquareGeometry, TraceLinesGeometry as TraceLinesGeometry } from './geometry.js';
 import { Float32ArrayCache } from './internalUtils.js';
 import { SimJSShader } from './shaders/shader.js';
 import { Material } from './materials.js';
 import { MemoBuffer } from './buffers/buffer.js';
+import { Simulation } from './simulation.js';
 export declare abstract class SimulationElement3d {
+    protected sim: Simulation | null;
     private children;
-    private prevInfo;
-    private pipeline;
     protected id: string | null;
-    protected shader: SimJSShader;
+    protected shader: SimJSShader | null;
     protected material: Material;
     protected cullMode: GPUCullMode;
     protected parent: SimulationElement3d | null;
@@ -27,6 +27,10 @@ export declare abstract class SimulationElement3d {
     is3d: boolean;
     isEmpty: boolean;
     constructor(pos: Vector3, rotation: Vector3, color?: Color);
+    onAddToScene(sim: Simulation, backendSpecificShaderFetchFn?: (type: BackendType) => SimJSShader): void;
+    getParentSim(): Simulation | null;
+    getParentSimOrError(): Simulation;
+    isOnCanvas(): boolean;
     delete(): void;
     setUniformBuffer(buffer: MemoBuffer): void;
     getUniformBuffer(): MemoBuffer | null;
@@ -52,18 +56,18 @@ export declare abstract class SimulationElement3d {
     setSubdivisionVertexLimit(limit: number): void;
     clearSubdivisionVertexLimit(): void;
     setCenterOffset(offset: Vector3): void;
-    getShader(): SimJSShader;
+    getShader(): SimJSShader | null;
+    getShaderOrError(): SimJSShader;
     setShader(shader: SimJSShader): void;
     resetCenterOffset(): void;
     getModelMatrix(): Mat4;
     isTransparent(): boolean;
     getObjectInfo(): string;
-    getPipeline(): GPURenderPipeline;
     protected mirrorParentTransforms3d(mat: Mat4): void;
     protected updateModelMatrix3d(): void;
     protected mirrorParentTransforms2d(mat: Mat4): void;
     protected updateModelMatrix2d(): void;
-    getGeometryTopology(): "strip" | "list";
+    getGeometryTopology(): "list" | "strip";
     setWireframe(wireframe: boolean): void;
     isWireframe(): boolean;
     getMaterial(): Material;
@@ -136,6 +140,7 @@ export declare class OutlineCircle extends Circle {
 export declare class Polygon extends SimulationElement2d {
     protected geometry: PolygonGeometry;
     constructor(pos: Vector2, vertices: Vertex[], color?: Color, rotation?: number);
+    onAddToScene(sim: Simulation): void;
     getVertices(): Vector3[];
     setVertices(vertices: Vertex[], t?: number, f?: LerpFunc): Promise<void>;
 }
@@ -208,6 +213,7 @@ export declare class Spline2d extends SimulationElement2d {
     private interpolateLimit;
     private length;
     constructor(pos: Vertex, points: SplinePoint2d[], thickness?: number, detail?: number);
+    onAddToScene(sim: Simulation): void;
     protected setVertexColors(): void;
     getVertexCallBuffer(): Float32Array<ArrayBufferLike>;
     isTransparent(): boolean;
@@ -237,7 +243,7 @@ export declare class Instance<T extends SimulationElement3d> extends SimulationE
     getInstanceBuffer(): Float32Array<ArrayBufferLike>;
     getTreeVertexCount(): number;
     getIndexCount(): number;
-    getGeometryTopology(): "strip" | "list";
+    getGeometryTopology(): "list" | "strip";
     getVertexCallBuffer(): Float32Array<ArrayBufferLike>;
     getIndexBuffer(): Uint32Array<ArrayBuffer>;
     getModelMatrix(): Mat4;

package/dist/graphics.js

@@ -3,15 +3,15 @@ import { cloneBuf, vector2, vector3, vector2FromVector3, matrix4, vector3FromVec
 import { BlankGeometry, CircleGeometry, CubeGeometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, Spline2dGeometry, SquareGeometry, TraceLinesGeometry as TraceLinesGeometry } from './geometry.js';
 import { Float32ArrayCache, internalTransitionValues, posTo2dScreen } from './internalUtils.js';
 import { mat4ByteLength } from './constants.js';
-import { globalInfo, logger, pipelineCache } from './globals.js';
+import { globalInfo, logger } from './globals.js';
 import { BasicMaterial, VertexColorMaterial } from './materials.js';
 import { getDefaultShaderForBackend, getDefaultVertexColorShaderForBackend } from './shaders/utils.js';
+const SIM_ELEMENT_3D_NOT_INIT_ERROR = 'SimulationElement3d is not initialized';
 export class SimulationElement3d {
+    sim = null;
     children;
-    prevInfo;
-    pipeline;
     id;
-    shader;
+    shader = null;
     material;
     cullMode;
     parent;
@@ -35,19 +35,37 @@ export class SimulationElement3d {
         this.children = [];
         this.modelMatrix = matrix4();
         this.parent = null;
-        this.pipeline = null;
-        this.prevInfo = null;
         this.material = new BasicMaterial(color);
         this.cullMode = 'none';
         this.id = null;
-        const canvas = globalInfo.getCanvas();
-        if (!canvas)
-            throw logger.error('Canvas is null');
-        const backendType = canvas.getBackend().getBackendType();
-        this.shader = getDefaultShaderForBackend(backendType);
+    }
+    onAddToScene(sim, backendSpecificShaderFetchFn = getDefaultShaderForBackend) {
+        this.sim = sim;
+        const backend = sim.getBackend().getBackendType();
+        this.shader = backendSpecificShaderFetchFn(backend);
+        for (let i = 0; i < this.children.length; i++) {
+            if (this.children[i].getParentSim() !== sim) {
+                this.children[i].onAddToScene(sim, backendSpecificShaderFetchFn);
+            }
+        }
+    }
+    getParentSim() {
+        return this.sim;
+    }
+    getParentSimOrError() {
+        if (!this.sim)
+            throw logger.error(SIM_ELEMENT_3D_NOT_INIT_ERROR);
+        return this.sim;
+    }
+    isOnCanvas() {
+        return this.sim !== null;
     }
     delete() {
         this.uniformBuffer?.destroy();
+        this.sim = null;
+        for (let i = 0; i < this.children.length; i++) {
+            this.children[i].delete();
+        }
     }
     setUniformBuffer(buffer) {
         this.uniformBuffer = buffer;
@@ -78,6 +96,9 @@ export class SimulationElement3d {
         if (id)
             el.setId(id);
         this.children.push(el);
+        if (this.sim && el.getParentSim() !== this.sim) {
+            el.onAddToScene(this.sim);
+        }
     }
     remove(el) {
         for (let i = 0; i < this.children.length; i++) {
@@ -153,6 +174,11 @@ export class SimulationElement3d {
     getShader() {
         return this.shader;
     }
+    getShaderOrError() {
+        if (!this.shader)
+            throw logger.error(SIM_ELEMENT_3D_NOT_INIT_ERROR);
+        return this.shader;
+    }
     setShader(shader) {
         this.shader = shader;
     }
@@ -174,18 +200,6 @@ export class SimulationElement3d {
             : 'triangle-' + this.getGeometryTopology();
         return `{ "topology": "${topologyString}", "transparent": ${this.isTransparent()}, "cullMode": "${this.cullMode}" }`;
     }
-    getPipeline() {
-        // TODO - probably change
-        const backend = globalInfo.errorGetCanvas().getBackend();
-        const device = backend.as('webgpu').getDeviceOrError();
-        const objInfo = this.getObjectInfo();
-        if (!this.pipeline || !this.prevInfo || this.prevInfo !== objInfo) {
-            // @ts-ignore
-            this.pipeline = pipelineCache.getPipeline(device, objInfo, this.shader);
-            this.prevInfo = objInfo;
-        }
-        return this.pipeline;
-    }
     mirrorParentTransforms3d(mat) {
         if (!this.parent)
             return;
@@ -210,8 +224,10 @@ export class SimulationElement3d {
         mat4.translate(this.modelMatrix, this.centerOffset, this.modelMatrix);
     }
     mirrorParentTransforms2d(mat) {
+        if (!this.sim)
+            throw logger.error(SIM_ELEMENT_3D_NOT_INIT_ERROR);
         if (!this.parent) {
-            const parentPos = posTo2dScreen(this.pos);
+            const parentPos = posTo2dScreen(this.sim.getCamera(), this.pos);
             mat4.translate(mat, parentPos, mat);
             return;
         }
@@ -222,8 +238,10 @@ export class SimulationElement3d {
         mat4.translate(mat, pos, mat);
     }
     updateModelMatrix2d() {
+        if (!this.sim)
+            throw logger.error(SIM_ELEMENT_3D_NOT_INIT_ERROR);
         mat4.identity(this.modelMatrix);
-        const pos = posTo2dScreen(this.pos);
+        const pos = posTo2dScreen(this.sim.getCamera(), this.pos);
         vec3.add(pos, this.centerOffset, pos);
         if (this.parent) {
             this.mirrorParentTransforms2d(this.modelMatrix);
@@ -412,6 +430,8 @@ export class SimulationElement3d {
         return indexCount;
     }
     getVertexCallBuffer() {
+        if (!this.shader)
+            throw logger.error(SIM_ELEMENT_3D_NOT_INIT_ERROR);
         if (this.vertexCache.shouldUpdate() || this.geometry.hasUpdated()) {
             this.geometry.compute();
             const vertices = this.geometry.getVertices();
@@ -617,6 +637,9 @@ export class Polygon extends SimulationElement2d {
         const colors = vertices.map((vert) => vert.getColor() ?? this.material.getColor());
         this.material.setVertexColors(colors);
     }
+    onAddToScene(sim) {
+        super.onAddToScene(sim, getDefaultVertexColorShaderForBackend);
+    }
     getVertices() {
         return this.geometry.getVertices();
     }
@@ -975,11 +998,12 @@ export class Spline2d extends SimulationElement2d {
         this.geometry = new Spline2dGeometry(points, this.thickness, this.detail);
         this.material = new VertexColorMaterial([]);
         this.material.setColor(pos.getColor() ?? globalInfo.getDefaultColor());
-        const backend = globalInfo.getCanvas()?.getBackend().getBackendType();
-        this.shader = getDefaultVertexColorShaderForBackend(backend);
         this.setVertexColors();
         this.estimateLength();
     }
+    onAddToScene(sim) {
+        super.onAddToScene(sim, getDefaultVertexColorShaderForBackend);
+    }
     setVertexColors() {
         const numVertices = this.geometry.getVertices().length;
         const curves = this.geometry.getCurves();
@@ -1208,8 +1232,6 @@ export class TraceLines2d extends SimulationElement2d {
         this.material = new VertexColorMaterial([]);
         if (color)
             this.material.setColor(color);
-        const backend = globalInfo.getCanvas()?.getBackend().getBackendType();
-        this.shader = getDefaultShaderForBackend(backend);
     }
     addPoint(vert, color) {
         const newVert = vert.length < 3 ? vector3(vert[0] ?? 0, vert[1] ?? 0, 0) : vert;

package/dist/index.d.ts

@@ -2,7 +2,6 @@ export * from './simulation.js';
 export * from './graphics.js';
 export * from './utils.js';
 export * from './types.js';
-export * as webGPUShaderUtils from './shaders/webgpu.js';
 export * from './materials.js';
 export * from './constants.js';
 export * from './backends/backend.js';

package/dist/index.js

@@ -2,7 +2,6 @@ export * from './simulation.js';
 export * from './graphics.js';
 export * from './utils.js';
 export * from './types.js';
-export * as webGPUShaderUtils from './shaders/webgpu.js';
 export * from './materials.js';
 export * from './constants.js';
 export * from './backends/backend.js';

package/dist/internalUtils.d.ts

@@ -1,5 +1,5 @@
 import { Mat4, Vector3 } from './types.js';
-import { SimJSWebGPUShader } from './shaders/webgpu.js';
+import { Camera, Simulation } from './simulation.js';
 import { SimulationElement3d } from './graphics.js';
 export declare class Float32ArrayCache {
     private vertices;
@@ -21,7 +21,7 @@ export declare class CachedArray<T> {
     getArray(): T[];
 }
 export declare const updateProjectionMatrix: (mat: Mat4, aspectRatio: number, zNear?: number, zFar?: number) => any;
-export declare const updateWorldProjectionMatrix: (worldProjMat: Mat4, projMat: Mat4) => void;
+export declare const updateWorldProjectionMatrix: (camera: Camera, worldProjMat: Mat4, projMat: Mat4) => void;
 export declare const updateOrthoProjectionMatrix: (mat: Mat4, 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;
@@ -31,8 +31,7 @@ export declare function createIndexArray(length: number): number[];
 export declare function triangulateWireFrameOrder(len: number): number[];
 export declare function getVertexAndIndexSize(scene: SimulationElement3d[]): readonly [number, number];
 export declare function internalTransitionValues(onFrame: (deltaT: number, t: number, total: number) => void, adjustment: () => void, transitionLength: number, func?: (n: number) => number): Promise<void>;
-export declare function posTo2dScreen(pos: Vector3): Vector3;
-export declare function createPipeline(device: GPUDevice, info: string, shader: SimJSWebGPUShader): GPURenderPipeline;
-export declare function addToScene(scene: SimulationElement3d[], el: SimulationElement3d, id?: string): void;
+export declare function posTo2dScreen(camera: Camera, pos: Vector3): Vector3;
+export declare function addToScene(sim: Simulation, el: SimulationElement3d, id?: string): void;
 export declare function removeSceneObj(scene: SimulationElement3d[], el: SimulationElement3d): void;
 export declare function removeSceneId(scene: SimulationElement3d[], id: string): void;

package/dist/internalUtils.js

@@ -1,6 +1,5 @@
 import { mat4, vec3 } from 'wgpu-matrix';
 import { cloneBuf, transitionValues } from './utils.js';
-import { camera } from './simulation.js';
 import { settings } from './settings.js';
 import { SimulationElement3d } from './graphics.js';
 import { logger } from './globals.js';
@@ -58,7 +57,7 @@ export const updateProjectionMatrix = (mat, aspectRatio, zNear = 1, zFar = 500)
     const fov = Math.PI / 4;
     return mat4.perspective(fov, aspectRatio, zNear, zFar, mat);
 };
-export const updateWorldProjectionMatrix = (worldProjMat, projMat) => {
+export const updateWorldProjectionMatrix = (camera, worldProjMat, projMat) => {
     mat4.identity(worldProjMat);
     const camPos = cloneBuf(camera.getPos());
     const rotation = camera.getRotation();
@@ -159,7 +158,7 @@ export function getVertexAndIndexSize(scene) {
     let indexSize = 0;
     for (let i = 0; i < scene.length; i++) {
         const obj = scene[i];
-        vertexSize += obj.getTreeVertexCount() * obj.getShader().getBufferLength();
+        vertexSize += obj.getTreeVertexCount() * obj.getShaderOrError().getBufferLength();
         indexSize += obj.getIndexCount();
     }
     return [vertexSize, indexSize];
@@ -171,63 +170,18 @@ export function internalTransitionValues(onFrame, adjustment, transitionLength,
     };
     return transitionValues(onFrame, newAdjustment, transitionLength, func);
 }
-export function posTo2dScreen(pos) {
+export function posTo2dScreen(camera, pos) {
     const newPos = cloneBuf(pos);
     newPos[1] = camera.getScreenSize()[1] + newPos[1];
     return newPos;
 }
-export function createPipeline(device, info, shader) {
-    const shaderModule = shader.getModule();
-    const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-    const infoObj = JSON.parse(info);
-    return device.createRenderPipeline({
-        layout: device.createPipelineLayout({
-            bindGroupLayouts: shader.getBindGroupLayouts()
-        }),
-        vertex: {
-            module: shaderModule,
-            entryPoint: shader.getVertexMain(),
-            buffers: [shader.getVertexBuffers()]
-        },
-        fragment: {
-            module: shaderModule,
-            entryPoint: 'fragment_main',
-            targets: [
-                {
-                    format: presentationFormat,
-                    blend: {
-                        color: {
-                            srcFactor: 'src-alpha',
-                            dstFactor: 'one-minus-src-alpha'
-                        },
-                        alpha: {
-                            srcFactor: 'src-alpha',
-                            dstFactor: 'one-minus-src-alpha'
-                        }
-                    }
-                }
-            ]
-        },
-        primitive: {
-            topology: infoObj.topology,
-            stripIndexFormat: infoObj.topology.endsWith('strip') ? 'uint32' : undefined,
-            cullMode: infoObj.cullMode
-        },
-        multisample: {
-            count: 4
-        },
-        depthStencil: {
-            depthWriteEnabled: !infoObj.transparent,
-            depthCompare: 'less',
-            format: 'depth24plus'
-        }
-    });
-}
-export function addToScene(scene, el, id) {
+export function addToScene(sim, el, id) {
+    const scene = sim.getScene();
     if (el instanceof SimulationElement3d) {
         if (id)
             el.setId(id);
         scene.unshift(el);
+        el.onAddToScene(sim);
     }
     else {
         throw logger.error('Cannot add invalid SimulationElement');

package/dist/shaders/shader.d.ts

@@ -6,8 +6,10 @@ export declare abstract class SimJSShader {
     protected vertexBufferWriter: VertexBufferWriter;
     protected compatableBackend: BackendType;
     protected bufferLength: number;
+    protected initialized: boolean;
     constructor(conpatableBackend: BackendType, vertexBufferWriter: VertexBufferWriter);
     abstract writeUniformBuffers(obj: SimulationElement3d): void;
+    getIsInitialized(): boolean;
     setVertexInfo(element: SimulationElement3d, buffer: Float32Array, vertex: Vector3, vertexIndex: number, offset: number): void;
     getCompatableBackend(): BackendType;
     compatableWith(backendType: BackendType): boolean;

package/dist/shaders/shader.js

@@ -3,11 +3,15 @@ export class SimJSShader {
     vertexBufferWriter;
     compatableBackend;
     bufferLength;
+    initialized = false;
     constructor(conpatableBackend, vertexBufferWriter) {
         this.bufferLength = 0;
         this.vertexBufferWriter = vertexBufferWriter;
         this.compatableBackend = conpatableBackend;
     }
+    getIsInitialized() {
+        return this.initialized;
+    }
     setVertexInfo(element, buffer, vertex, vertexIndex, offset) {
         this.vertexBufferWriter(element, buffer, vertex, vertexIndex, offset);
     }

package/dist/shaders/webgl.js

@@ -1,6 +1,6 @@
 import { WebGLMemoBuffer } from '../buffers/webgl.js';
 import { FLOAT_SIZE, mat4ByteLength } from '../constants.js';
-import { globalInfo, logger } from '../globals.js';
+import { logger } from '../globals.js';
 import { orthogonalMatrix, worldProjectionMatrix } from '../simulation.js';
 import { defaultVertexBufferWriter, defaultVertexColorBufferWriter, SimJSShader } from './shader.js';
 export class SimJSWebGLShader extends SimJSShader {
@@ -22,13 +22,6 @@ export class SimJSWebGLShader extends SimJSShader {
         this.uniformBufferWriter = uniformBufferWriter;
         this.getShaderProgramInfoFn = getShaderProgramInfoFn;
         this.bufferDeclerations = bufferDeclerations;
-        const canvas = globalInfo.getCanvas();
-        if (!canvas) {
-            globalInfo.addToInitShader(this);
-            return;
-        }
-        const backend = canvas.getBackend().as('webgl');
-        this.init(backend.getContextOrError());
     }
     init(gl) {
         this.gl = gl;

package/dist/shaders/webgpu.d.ts

@@ -1,10 +1,11 @@
 import { WebGPUMemoBuffer } from '../buffers/webgpu.js';
 import { SimulationElement3d } from '../graphics.js';
 import { WebGPUBufferDecleration, Vector3, VertexBufferWriter, VertexParamInfo } from '../types.js';
+import { Simulation } from '../simulation.js';
 import { SimJSShader } from './shader.js';
 export declare const WEBGPU_DEFAULT_SHADER_UNIFORM_BUFFER_SIZE: number;
 type WebGPUUniformBufferWriter = (device: GPUDevice, element: SimulationElement3d, buffers: WebGPUMemoBuffer[]) => void;
-type WebGPUBindGroupGenerator = (device: GPUDevice, element: SimulationElement3d, buffers: WebGPUMemoBuffer[]) => GPUBindGroup[];
+type WebGPUBindGroupGenerator = (sim: Simulation, device: GPUDevice, element: SimulationElement3d, buffers: WebGPUMemoBuffer[]) => GPUBindGroup[];
 export declare class SimJSWebGPUShader extends SimJSShader {
     protected buffers: WebGPUMemoBuffer[];
     private bindGroupLayoutDescriptors;
@@ -22,7 +23,7 @@ export declare class SimJSWebGPUShader extends SimJSShader {
     init(device: GPUDevice): void;
     getCode(): string;
     getVertexBuffers(): GPUVertexBufferLayout;
-    getBindGroupLayouts(): GPUBindGroupLayout[];
+    getBindGroupLayouts(sim: Simulation): GPUBindGroupLayout[];
     getBindGroupLayoutDescriptors(): GPUBindGroupLayoutDescriptor[];
     getBufferInfo(): WebGPUBufferDecleration[];
     getUniformBufferWriter(): WebGPUUniformBufferWriter;
@@ -33,7 +34,7 @@ export declare class SimJSWebGPUShader extends SimJSShader {
     getFragmentMain(): string;
     setVertexInfo(element: SimulationElement3d, buffer: Float32Array, vertex: Vector3, vertexIndex: number, offset: number): void;
     writeUniformBuffers(el: SimulationElement3d): void;
-    getBindGroups(device: GPUDevice, el: SimulationElement3d): GPUBindGroup[];
+    getBindGroups(sim: Simulation, device: GPUDevice, el: SimulationElement3d): GPUBindGroup[];
 }
 export declare const defaultWebGPUShader: SimJSWebGPUShader;
 export declare const defaultWebGPUVertexColorShader: SimJSWebGPUShader;

package/dist/shaders/webgpu.js

@@ -1,11 +1,11 @@
 import { WebGPUMemoBuffer } from '../buffers/webgpu.js';
 import { mat4ByteLength, modelProjMatOffset } from '../constants.js';
-import { globalInfo, logger } from '../globals.js';
-import { createBindGroup } from '../utils.js';
+import { logger } from '../globals.js';
 import { orthogonalMatrix, worldProjectionMatrix } from '../simulation.js';
 import { worldProjMatOffset } from '../constants.js';
 import { defaultVertexColorBufferWriter, SimJSShader } from './shader.js';
 export const WEBGPU_DEFAULT_SHADER_UNIFORM_BUFFER_SIZE = mat4ByteLength * 2 + 4 * 2 + 8; // 4x4 matrix * 2 + vec2<f32> + 8 bc 144 is cool
+const SHADER_NOT_INIT_ERROR = 'Shader not initialized';
 const defaultInfos = [
     {
         usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
@@ -26,16 +26,13 @@ const defaultWebGPUUniformBufferWriter = (device, el, buffers) => {
         buffers[0].write(el.getInstanceBuffer());
     }
 };
-const defaultBindGroupGenerator = (_device, el, buffers) => {
-    // TODO - why is this here?
-    const shader = el.getShader();
-    if (!shader.compatableWith('webgpu'))
-        throw logger.error('Wrong shader type for backend or something idk');
+const defaultBindGroupGenerator = (sim, device, el, buffers) => {
+    const shader = el.getShaderOrError().as('webgpu');
     const gpuBuffers = [
         el.getUniformBuffer().getBuffer(),
         buffers[0].getBuffer()
     ];
-    return [createBindGroup(shader, 0, gpuBuffers)];
+    return [createBindGroup(sim, device, shader, 0, gpuBuffers)];
 };
 export class SimJSWebGPUShader extends SimJSShader {
     buffers;
@@ -78,13 +75,6 @@ export class SimJSWebGPUShader extends SimJSShader {
             arrayStride: stride,
             attributes
         };
-        const canvas = globalInfo.getCanvas();
-        if (!canvas) {
-            globalInfo.addToInitShader(this);
-            return;
-        }
-        const backend = canvas.getBackend().as('webgpu');
-        this.init(backend.getDeviceOrError());
     }
     init(device) {
         this.device = device;
@@ -98,9 +88,8 @@ export class SimJSWebGPUShader extends SimJSShader {
     getVertexBuffers() {
         return this.vertexBuffers;
     }
-    getBindGroupLayouts() {
-        // TODO - probably change
-        const backend = globalInfo.errorGetCanvas().getBackend();
+    getBindGroupLayouts(sim) {
+        const backend = sim.getBackend().as('webgpu');
         const device = backend.getDeviceOrError();
         if (!this.bindGroupLayouts) {
             this.bindGroupLayouts = this.bindGroupLayoutDescriptors.map((descriptor) => device.createBindGroupLayout(descriptor));
@@ -123,11 +112,10 @@ export class SimJSWebGPUShader extends SimJSShader {
         return this.bindGroupGenerator;
     }
     getModule() {
-        // TODO - probably change
-        const backend = globalInfo.errorGetCanvas().getBackend();
-        const device = backend.getDeviceOrError();
+        if (!this.device)
+            throw logger.error(SHADER_NOT_INIT_ERROR);
         if (!this.module) {
-            this.module = device.createShaderModule({ code: this.code });
+            this.module = this.device.createShaderModule({ code: this.code });
         }
         return this.module;
     }
@@ -142,11 +130,11 @@ export class SimJSWebGPUShader extends SimJSShader {
     }
     writeUniformBuffers(el) {
         if (!this.device)
-            throw logger.error('Shader not initialized');
+            throw logger.error(SHADER_NOT_INIT_ERROR);
         this.uniformBufferWriter(this.device, el, this.buffers);
     }
-    getBindGroups(device, el) {
-        return this.bindGroupGenerator(device, el, this.buffers);
+    getBindGroups(sim, device, el) {
+        return this.bindGroupGenerator(sim, device, el, this.buffers);
     }
 }
 const positionSize = 4 * 3;
@@ -288,3 +276,15 @@ export const defaultWebGPUVertexColorShader = new SimJSWebGPUShader(defaultWebGP
         format: 'float32'
     }
 ], defaultInfos, defaultWebGPUUniformBufferWriter, defaultBindGroupGenerator, defaultVertexColorBufferWriter);
+function createBindGroup(sim, device, shader, bindGroupIndex, buffers) {
+    const layout = shader.getBindGroupLayouts(sim)[bindGroupIndex];
+    return device.createBindGroup({
+        layout: layout,
+        entries: buffers.map((buffer, index) => ({
+            binding: index,
+            resource: {
+                buffer
+            }
+        }))
+    });
+}

package/dist/simulation.d.ts

@@ -3,6 +3,7 @@ import type { Vector2, Vector3, LerpFunc, BackendType } from './types.js';
 import { Color } from './utils.js';
 import { Settings } from './settings.js';
 import { SimJsBackend } from './backends/backend.js';
+import { SimJSShader } from './shaders/shader.js';
 export declare const worldProjectionMatrix: import("./types.js").Mat4;
 export declare const orthogonalMatrix: import("./types.js").Mat4;
 export declare class Camera {
@@ -24,11 +25,10 @@ export declare class Camera {
     getPos(): Vector3;
     getAspectRatio(): number;
 }
-export declare let camera: Camera;
 type SimulationOptions = {
-    sceneCamera?: Camera | null;
+    camera?: Camera | null;
     showFrameRate?: boolean;
-    backendMode?: BackendType;
+    backend?: BackendType;
 };
 export declare class Simulation extends Settings {
     canvasRef: HTMLCanvasElement | null;
@@ -40,6 +40,7 @@ export declare class Simulation extends Settings {
     private frameRateView;
     private transparentElements;
     private backend;
+    private camera;
     constructor(idOrCanvasRef: string | HTMLCanvasElement, options?: SimulationOptions);
     private handleCanvasResize;
     on<K extends keyof HTMLElementEventMap>(event: K, cb: (this: HTMLCanvasElement, ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
@@ -53,6 +54,8 @@ export declare class Simulation extends Settings {
     empty(): void;
     private applyCanvasSize;
     setCanvasSize(width: number, height: number): void;
+    preInitShader(shader: SimJSShader): void;
+    getCamera(): Camera;
     start(): void;
     stop(): void;
     setBackground(color: Color): void;

package/dist/simulation.js

@@ -142,11 +142,10 @@ export class Camera {
         return this.aspectRatio;
     }
 }
-export let camera = new Camera(vector3());
 const defaultSimulationOptions = {
-    sceneCamera: null,
+    camera: null,
     showFrameRate: false,
-    backendMode: 'webgpu'
+    backend: 'webgpu'
 };
 export class Simulation extends Settings {
     canvasRef = null;
@@ -158,8 +157,9 @@ export class Simulation extends Settings {
     frameRateView;
     transparentElements;
     backend;
+    camera;
     constructor(idOrCanvasRef, options = {}) {
-        const { sceneCamera = defaultSimulationOptions.sceneCamera, showFrameRate = defaultSimulationOptions.showFrameRate, backendMode = defaultSimulationOptions.backendMode } = options;
+        const { camera = defaultSimulationOptions.camera, showFrameRate = defaultSimulationOptions.showFrameRate, backend = defaultSimulationOptions.backend } = options;
         super();
         if (typeof idOrCanvasRef === 'string') {
             const ref = document.getElementById(idOrCanvasRef);
@@ -172,9 +172,11 @@ export class Simulation extends Settings {
         }
         else
             throw logger.error(`Canvas ref/id provided is invalid`);
-        globalInfo.setCanvas(this);
-        if (sceneCamera) {
-            camera = sceneCamera;
+        if (camera) {
+            this.camera = camera;
+        }
+        else {
+            this.camera = new Camera(vector3());
         }
         const parent = this.canvasRef.parentElement;
         if (parent === null)
@@ -186,11 +188,11 @@ export class Simulation extends Settings {
         this.frameRateView = new FrameRateView(showFrameRate);
         this.frameRateView.updateFrameRate(1);
         this.transparentElements = new CachedArray();
-        if (backendMode === 'webgpu' && 'gpu' in navigator) {
-            this.backend = new WebGPUBackend();
+        if (backend === 'webgpu' && 'gpu' in navigator) {
+            this.backend = new WebGPUBackend(this);
         }
         else if (webGLAvailable(this.canvasRef)) {
-            this.backend = new WebGLBackend();
+            this.backend = new WebGLBackend(this);
         }
         else {
             throw logger.error('WebGL and WebGPU not available');
@@ -221,7 +223,7 @@ export class Simulation extends Settings {
         return this.canvasRef?.height || 0;
     }
     add(el, id) {
-        addToScene(this.scene, el, id);
+        addToScene(this, el, id);
     }
     remove(el) {
         removeSceneObj(this.scene, el);
@@ -249,6 +251,17 @@ export class Simulation extends Settings {
             this.resizeEvents[i](width, height);
         }
     }
+    preInitShader(shader) {
+        const backendType = this.backend.getBackendType();
+        if (!shader.compatableWith(backendType)) {
+            logger.warn('Not initializing shader, not compatible with backend');
+            return;
+        }
+        this.backend.initShader(shader);
+    }
+    getCamera() {
+        return this.camera;
+    }
     start() {
         if (this.initialized) {
             this.running = true;
@@ -258,14 +271,13 @@ export class Simulation extends Settings {
             if (this.canvasRef === null)
                 return;
             const screenSize = vector2(this.canvasRef.width, this.canvasRef.height);
-            camera.setScreenSize(screenSize);
+            this.camera.setScreenSize(screenSize);
             const canvas = this.canvasRef;
             canvas.width = canvas.clientWidth * devicePixelRatio;
             canvas.height = canvas.clientHeight * devicePixelRatio;
             this.initialized = true;
             this.running = true;
             await this.backend.init(this.canvasRef);
-            this.backend.initShaders(globalInfo.getToInitShaders());
             this.render(canvas, this.backend);
         })();
     }
@@ -290,8 +302,8 @@ export class Simulation extends Settings {
             updateProjectionMatrix(projMat, newAspectRatio);
             aspectRatio = newAspectRatio;
         }
-        updateWorldProjectionMatrix(worldProjectionMatrix, projMat);
-        updateOrthoProjectionMatrix(orthogonalMatrix, camera.getScreenSize());
+        updateWorldProjectionMatrix(this.camera, worldProjectionMatrix, projMat);
+        updateOrthoProjectionMatrix(orthogonalMatrix, this.camera.getScreenSize());
         backend.renderStart(canvas);
         // sub 10 to start with a reasonable gap between starting time and next frame time
         let prev = Date.now() - 10;
@@ -308,25 +320,25 @@ export class Simulation extends Settings {
                 this.frameRateView.updateFrameRate(fps);
             }
             prevFps = fps;
-            const screenSize = camera.getScreenSize();
+            const screenSize = this.camera.getScreenSize();
             if (screenSize[0] !== canvas.width || screenSize[1] !== canvas.height) {
-                camera.setScreenSize(vector2(canvas.width, canvas.height));
+                this.camera.setScreenSize(vector2(canvas.width, canvas.height));
                 screenSize[0] = canvas.width;
                 screenSize[1] = canvas.height;
-                aspectRatio = camera.getAspectRatio();
+                aspectRatio = this.camera.getAspectRatio();
                 updateProjectionMatrix(projMat, aspectRatio);
-                updateWorldProjectionMatrix(worldProjectionMatrix, projMat);
+                updateWorldProjectionMatrix(this.camera, worldProjectionMatrix, projMat);
                 backend.updateTextures(screenSize);
             }
-            if (camera.hasUpdated()) {
-                updateOrthoProjectionMatrix(orthogonalMatrix, camera.getScreenSize());
-                updateWorldProjectionMatrix(worldProjectionMatrix, projMat);
+            if (this.camera.hasUpdated()) {
+                updateOrthoProjectionMatrix(orthogonalMatrix, this.camera.getScreenSize());
+                updateWorldProjectionMatrix(this.camera, worldProjectionMatrix, projMat);
             }
             backend.preRender(this.scene);
             this.transparentElements.reset();
             const [opaqueVertexOffset, opaqueIndexOffset] = this.renderScene(backend, 0, 0, this.scene, this.scene.length, diff, false);
             this.renderScene(backend, opaqueVertexOffset, opaqueIndexOffset, this.transparentElements.getArray(), this.transparentElements.length, diff, true);
-            camera.updateConsumed();
+            this.camera.updateConsumed();
             backend.finishRender();
         };
         requestAnimationFrame(frame);

package/dist/utils.d.ts

@@ -1,6 +1,5 @@
 import { SimulationElement3d, SplinePoint2d } from './graphics.js';
 import { FloatArray, LerpFunc, Mat4, Vector2, Vector2m, Vector3, Vector3m, Vector4 } from './types.js';
-import { SimJSWebGPUShader } from './shaders/webgpu.js';
 export declare class Color {
     r: number;
     g: number;
@@ -82,7 +81,6 @@ export declare function distance3d(vector1: Vector3m, vector2: Vector3m): number
 export declare function interpolateColors(colors: Color[], t: number): Color;
 export declare function vectorsToVertex(vectors: Vector3[]): Vertex[];
 export declare function cloneVectors(vectors: Vector3[]): Vector3[];
-export declare function createBindGroup(shader: SimJSWebGPUShader, bindGroupIndex: number, buffers: GPUBuffer[]): GPUBindGroup;
 export declare function transform(from: SimulationElement3d, to: SimulationElement3d, t: number, f?: LerpFunc): Promise<void>;
 export declare function defaultColor(): Color;
 export declare function webGLAvailable(canvas: HTMLCanvasElement): boolean;

package/dist/utils.js

@@ -1,6 +1,6 @@
 import { mat4, vec2, vec3, vec4 } from 'wgpu-matrix';
 import { SplinePoint2d } from './graphics.js';
-import { globalInfo } from './globals.js';
+import { globalInfo, logger } from './globals.js';
 export class Color {
     r; // 0 - 255
     g; // 0 - 255
@@ -285,24 +285,11 @@ export function vectorsToVertex(vectors) {
 export function cloneVectors(vectors) {
     return vectors.map((vec) => cloneBuf(vec));
 }
-export function createBindGroup(shader, bindGroupIndex, buffers) {
-    // TODO - probably change
-    const backend = globalInfo.errorGetCanvas().getBackend();
-    const device = backend.getDeviceOrError();
-    const layout = shader.getBindGroupLayouts()[bindGroupIndex];
-    return device.createBindGroup({
-        layout: layout,
-        entries: buffers.map((buffer, index) => ({
-            binding: index,
-            resource: {
-                buffer
-            }
-        }))
-    });
-}
 /// may have unexpected position behavior for nested elements, or elements with a geometry with a set triangle order
 export function transform(from, to, t, f) {
-    const canvas = globalInfo.errorGetCanvas();
+    const canvas = from.getParentSimOrError();
+    if (to.isOnCanvas())
+        throw logger.error('Cannot transform to an element on a canvas');
     const fromVertCount = from.getVertexCount();
     const toVertCount = to.getVertexCount();
     if (fromVertCount < toVertCount) {

package/package.json

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