simulationjsv2 0.10.6 → 0.11.0

package/dist/buffers/webgpu.js

@@ -0,0 +1,40 @@
+import { MemoBuffer } from './buffer.js';
+export class WebGPUMemoBuffer extends MemoBuffer {
+    device;
+    buffer = null;
+    usage;
+    constructor(device, usage, initCapacity) {
+        super('webgpu', initCapacity);
+        if (device === null)
+            throw new Error('Device is null');
+        this.device = device;
+        this.usage = usage;
+    }
+    allocBuffer() {
+        if (this.buffer)
+            this.buffer.destroy();
+        this.buffer = this.device.createBuffer({
+            size: this.bufferCapacity,
+            usage: this.usage
+        });
+    }
+    getBuffer() {
+        if (!this.buffer)
+            this.allocBuffer();
+        return this.buffer;
+    }
+    write(buf, offset = 0) {
+        const neededSize = offset + buf.byteLength;
+        if (!this.buffer || neededSize > this.bufferCapacity) {
+            this.bufferCapacity = neededSize;
+            this.allocBuffer();
+        }
+        this.device.queue.writeBuffer(this.buffer, offset, buf.buffer, buf.byteOffset, buf.byteLength);
+    }
+    destroy() {
+        if (this.buffer) {
+            this.buffer.destroy();
+            this.buffer = null;
+        }
+    }
+}

package/dist/buffers.d.ts

@@ -1,12 +1,26 @@
 import { ArrayTypes } from './types.js';
-export declare class MemoBuffer {
-    private buffer;
-    private bufferSize;
+export declare abstract class MemoBuffer<T> {
+    protected buffer: T | null;
+    protected bufferCapacity: number;
+    constructor(initCapacity: number);
+    abstract allocBuffer(): void;
+    abstract destroy(): void;
+    write(_buf: ArrayTypes, _offset?: number): void;
+    getBuffer(): NonNullable<T>;
+    private growCapacity;
+    ensureCapacity(capacity: number): void;
+    setCapacityPrecise(capacity: number): void;
+}
+export declare class WebGPUMemoBuffer extends MemoBuffer<GPUBuffer> {
+    protected device: GPUDevice;
     private usage;
-    constructor(usage: GPUBufferDescriptor['usage'], size: number);
-    private allocBuffer;
+    constructor(device: GPUDevice, usage: GPUBufferDescriptor['usage'], initCapacity: number);
+    allocBuffer(): void;
     getBuffer(): GPUBuffer;
-    setSize(size: number): void;
     write(buf: ArrayTypes, offset?: number): void;
     destroy(): void;
 }
+export declare class WebGLMemoBuffer extends MemoBuffer<WebGLBuffer> {
+    allocBuffer(): void;
+    destroy(): void;
+}

package/dist/buffers.js

@@ -1,19 +1,55 @@
 import { globalInfo } from './globals.js';
 export class MemoBuffer {
     buffer;
-    bufferSize;
+    bufferCapacity;
+    constructor(initCapacity) {
+        this.bufferCapacity = initCapacity;
+        this.buffer = null;
+    }
+    // cant be abstract because offset should be default param to 0
+    // which it wont allow (even though it could)
+    write(_buf, _offset = 0) { }
+    getBuffer() {
+        if (!this.buffer)
+            this.allocBuffer();
+        return this.buffer;
+    }
+    growCapacity(current, target) {
+        let res = Math.max(1, current);
+        while (res < target) {
+            res += Math.ceil(res / 2);
+        }
+        return res;
+    }
+    ensureCapacity(capacity) {
+        this.setCapacityPrecise(this.growCapacity(this.bufferCapacity, capacity));
+    }
+    setCapacityPrecise(capacity) {
+        if (!this.buffer) {
+            this.bufferCapacity = capacity;
+            this.allocBuffer();
+        }
+        if (capacity <= this.bufferCapacity)
+            return;
+        this.bufferCapacity = capacity;
+        this.allocBuffer();
+    }
+}
+export class WebGPUMemoBuffer extends MemoBuffer {
+    device;
     usage;
-    constructor(usage, size) {
+    constructor(device, usage, initCapacity) {
+        super(initCapacity);
+        if (device === null)
+            throw new Error('Device is null');
+        this.device = device;
         this.usage = usage;
-        this.bufferSize = size;
-        this.buffer = null;
     }
     allocBuffer() {
-        const device = globalInfo.getDevice();
-        if (!device)
-            return;
-        this.buffer = device.createBuffer({
-            size: this.bufferSize,
+        if (this.buffer)
+            this.buffer.destroy();
+        this.buffer = this.device.createBuffer({
+            size: this.bufferCapacity,
             usage: this.usage
         });
     }
@@ -22,18 +58,12 @@ export class MemoBuffer {
             this.allocBuffer();
         return this.buffer;
     }
-    setSize(size) {
-        if (!this.buffer)
-            this.allocBuffer();
-        if (size > this.bufferSize) {
-            this.bufferSize = size;
-            this.allocBuffer();
-        }
-    }
     write(buf, offset = 0) {
-        const device = globalInfo.errorGetDevice();
-        if (!this.buffer || buf.byteLength > this.bufferSize) {
-            this.bufferSize = buf.byteLength;
+        // TODO - probably change
+        const backend = globalInfo.errorGetCanvas().getBackend();
+        const device = backend.getDeviceOrError();
+        if (!this.buffer || buf.byteLength > this.bufferCapacity) {
+            this.bufferCapacity = buf.byteLength;
             this.allocBuffer();
         }
         device.queue.writeBuffer(this.buffer, offset, buf.buffer, buf.byteOffset, buf.byteLength);
@@ -42,3 +72,7 @@ export class MemoBuffer {
         this.buffer?.destroy();
     }
 }
+export class WebGLMemoBuffer extends MemoBuffer {
+    allocBuffer() { }
+    destroy() { }
+}

package/dist/constants.d.ts

@@ -5,3 +5,4 @@ export declare const xAxis: import("./types.js").Vector3;
 export declare const yAxis: import("./types.js").Vector3;
 export declare const zAxis: import("./types.js").Vector3;
 export declare const origin0: import("./types.js").Vector3;
+export declare const FLOAT_SIZE = 4;

package/dist/constants.js

@@ -7,3 +7,4 @@ export const xAxis = vector3(1);
 export const yAxis = vector3(0, 1);
 export const zAxis = vector3(0, 0, 1);
 export const origin0 = vector3();
+export const FLOAT_SIZE = 4;

package/dist/geometry.d.ts

@@ -1,5 +1,6 @@
-import { CircleGeometryParams, CubeGeometryParams, EmptyParams, Spline2dGeometryParams, SquareGeometryParams, Vector3, LineGeometryParams, TraceLinesParams, LerpFunc } from './types.js';
+import { CircleGeometryParams, CubeGeometryParams, Spline2dGeometryParams, SquareGeometryParams, Vector3, LineGeometryParams, TraceLinesParams, LerpFunc } from './types.js';
 import { CubicBezierCurve2d, SplinePoint2d } from './graphics.js';
+export type EmptyParams = object;
 export declare abstract class Geometry<T extends EmptyParams> {
     private subdivision;
     private subdivisionVertexLimit;
@@ -12,7 +13,7 @@ export declare abstract class Geometry<T extends EmptyParams> {
     protected vertices: Vector3[];
     protected topology: 'list' | 'strip';
     constructor(geometryType?: 'list' | 'strip');
-    getTopology(): "list" | "strip";
+    getTopology(): "strip" | "list";
     computeVertices(): void;
     compute(): void;
     triangulate(): void;

package/dist/geometry.js

@@ -32,7 +32,8 @@ export class Geometry {
         outer: for (let i = 0; i < this.subdivision; i++) {
             const initialLength = initialVertices.length;
             for (let j = 0; j < initialLength - 1; j++) {
-                if (this.subdivisionVertexLimit && this.vertices.length >= this.subdivisionVertexLimit)
+                if (this.subdivisionVertexLimit &&
+                    this.vertices.length >= this.subdivisionVertexLimit)
                     break outer;
                 const vert = initialVertices[j];
                 const nextVert = initialVertices[j + 1];
@@ -368,14 +369,17 @@ export class Spline2dGeometry extends Geometry {
                 let atLimit = false;
                 if (step * j * sectionRatio + distanceRatio > this.params.interpolateLimit) {
                     atLimit = true;
-                    currentInterpolation = (this.params.interpolateLimit - distanceRatio) / sectionRatio;
+                    currentInterpolation =
+                        (this.params.interpolateLimit - distanceRatio) / sectionRatio;
                 }
-                if (currentInterpolation * sectionRatio + distanceRatio < this.params.interpolateStart) {
+                if (currentInterpolation * sectionRatio + distanceRatio <
+                    this.params.interpolateStart) {
                     continue;
                 }
                 if (!interpolationStarted) {
                     interpolationStarted = true;
-                    currentInterpolation = (this.params.interpolateStart - distanceRatio) / sectionRatio;
+                    currentInterpolation =
+                        (this.params.interpolateStart - distanceRatio) / sectionRatio;
                     j--;
                 }
                 if (!curveVertexIndexSet) {

package/dist/globals.d.ts

@@ -1,4 +1,5 @@
-import { Shader } from './shaders.js';
+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 {
@@ -12,23 +13,22 @@ declare class Logger {
 export declare const logger: Logger;
 export declare class GlobalInfo {
     private canvas;
-    private device;
     private defaultColor;
+    private toInitShaders;
     constructor();
     setDefaultColor(color: Color): void;
     getDefaultColor(): Color;
     setCanvas(canvas: Simulation): void;
     errorGetCanvas(): Simulation;
     getCanvas(): Simulation | null;
-    setDevice(device: GPUDevice): void;
-    errorGetDevice(): GPUDevice;
-    getDevice(): GPUDevice | 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: Shader): GPURenderPipeline;
+    getPipeline(device: GPUDevice, info: string, shader: SimJSWebGPUShader): GPURenderPipeline;
 }
 export declare const pipelineCache: PipelineCache;
 export {};

package/dist/globals.js

@@ -3,7 +3,7 @@ import { color } from './utils.js';
 class Logger {
     constructor() { }
     fmt(msg) {
-        return `SimJS: ${msg}`;
+        return `(SimJS) ${msg}`;
     }
     log(msg) {
         console.log(this.fmt(msg));
@@ -21,12 +21,12 @@ class Logger {
 export const logger = new Logger();
 export class GlobalInfo {
     canvas;
-    device;
     defaultColor;
+    toInitShaders;
     constructor() {
         this.canvas = null;
-        this.device = null;
         this.defaultColor = null;
+        this.toInitShaders = [];
     }
     setDefaultColor(color) {
         this.defaultColor = color;
@@ -45,16 +45,11 @@ export class GlobalInfo {
     getCanvas() {
         return this.canvas;
     }
-    setDevice(device) {
-        this.device = device;
+    addToInitShader(shader) {
+        this.toInitShaders.push(shader);
     }
-    errorGetDevice() {
-        if (!this.device)
-            throw logger.error('GPUDevice is null');
-        return this.device;
-    }
-    getDevice() {
-        return this.device;
+    getToInitShaders() {
+        return this.toInitShaders;
     }
 }
 export const globalInfo = new GlobalInfo();

package/dist/graphics.d.ts

@@ -2,15 +2,15 @@ import type { Vector2, Vector3, LerpFunc, Mat4 } 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 { Shader } from './shaders.js';
+import { SimJSShader } from './shaders/shader.js';
 import { Material } from './materials.js';
+import { MemoBuffer } from './buffers/buffer.js';
 export declare abstract class SimulationElement3d {
     private children;
-    private uniformBuffer;
     private prevInfo;
     private pipeline;
     protected id: string | null;
-    protected shader: Shader;
+    protected shader: SimJSShader;
     protected material: Material;
     protected cullMode: GPUCullMode;
     protected parent: SimulationElement3d | null;
@@ -21,11 +21,15 @@ export declare abstract class SimulationElement3d {
     protected vertexCache: Float32ArrayCache;
     protected rotation: Vector3;
     protected modelMatrix: Mat4;
+    protected uniformBuffer: MemoBuffer | null;
     isInstance: boolean;
     isInstanced: boolean;
     is3d: boolean;
     isEmpty: boolean;
     constructor(pos: Vector3, rotation: Vector3, color?: Color);
+    delete(): void;
+    setUniformBuffer(buffer: MemoBuffer): void;
+    getUniformBuffer(): MemoBuffer | null;
     emptyShallow(): void;
     empty(): void;
     getId(): string | null;
@@ -48,19 +52,18 @@ export declare abstract class SimulationElement3d {
     setSubdivisionVertexLimit(limit: number): void;
     clearSubdivisionVertexLimit(): void;
     setCenterOffset(offset: Vector3): void;
-    getShader(): Shader;
-    setShader(shader: Shader): void;
+    getShader(): SimJSShader;
+    setShader(shader: SimJSShader): void;
     resetCenterOffset(): void;
     getModelMatrix(): Mat4;
     isTransparent(): boolean;
     getObjectInfo(): string;
-    getUniformBuffer(): GPUBuffer;
     getPipeline(): GPURenderPipeline;
     protected mirrorParentTransforms3d(mat: Mat4): void;
     protected updateModelMatrix3d(): void;
     protected mirrorParentTransforms2d(mat: Mat4): void;
     protected updateModelMatrix2d(): void;
-    getGeometryTopology(): "list" | "strip";
+    getGeometryTopology(): "strip" | "list";
     setWireframe(wireframe: boolean): void;
     isWireframe(): boolean;
     getMaterial(): Material;
@@ -80,8 +83,7 @@ export declare abstract class SimulationElement3d {
     getVertexCount(): number;
     getTreeVertexCount(): number;
     getIndexCount(): number;
-    writeBuffers(): void;
-    getVertexBuffer(): Float32Array<ArrayBufferLike>;
+    getVertexCallBuffer(): Float32Array<ArrayBufferLike>;
     getIndexBuffer(): Uint32Array<ArrayBuffer>;
 }
 export declare class EmptyElement extends SimulationElement3d {
@@ -207,7 +209,7 @@ export declare class Spline2d extends SimulationElement2d {
     private length;
     constructor(pos: Vertex, points: SplinePoint2d[], thickness?: number, detail?: number);
     private setVertexColors;
-    getVertexBuffer(): Float32Array<ArrayBufferLike>;
+    getVertexCallBuffer(): Float32Array<ArrayBufferLike>;
     isTransparent(): boolean;
     private estimateLength;
     getLength(): number;
@@ -226,19 +228,17 @@ export declare class Instance<T extends SimulationElement3d> extends SimulationE
     private matrixBuffer;
     private baseMat;
     private maxInstances;
-    private hasMapped;
     isInstance: boolean;
     constructor(obj: T, numInstances: number);
-    setNumInstances(numInstances: number, forceResizeBuffer?: boolean): void;
+    setInstanceCount(numInstances: number, forceResizeBuffer?: boolean): void;
     setInstance(instance: number, transformation: Mat4): void;
-    private mapBuffer;
-    getInstances(): Mat4[];
-    getNumInstances(): number;
-    getInstanceBuffer(): GPUBuffer;
+    getInstanceMatrices(): Mat4[];
+    getInstanceCount(): number;
+    getInstanceBuffer(): Float32Array<ArrayBufferLike>;
     getTreeVertexCount(): number;
     getIndexCount(): number;
-    getGeometryTopology(): "list" | "strip";
-    getVertexBuffer(): Float32Array<ArrayBufferLike>;
+    getGeometryTopology(): "strip" | "list";
+    getVertexCallBuffer(): Float32Array<ArrayBufferLike>;
     getIndexBuffer(): Uint32Array<ArrayBuffer>;
     getModelMatrix(): Mat4;
 }

package/dist/graphics.js

@@ -2,14 +2,12 @@ import { vec3, mat4, vec2 } from 'wgpu-matrix';
 import { cloneBuf, vector2, vector3, vector2FromVector3, matrix4, vector3FromVector2, distance2d, interpolateColors } from './utils.js';
 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, modelProjMatOffset } from './constants.js';
-import { MemoBuffer } from './buffers.js';
+import { mat4ByteLength } from './constants.js';
 import { globalInfo, logger, pipelineCache } from './globals.js';
-import { defaultShader, uniformBufferSize, vertexColorShader } from './shaders.js';
 import { BasicMaterial, VertexColorMaterial } from './materials.js';
+import { getDefaultShaderForBackend, getDefaultVertexColorShaderForBackend } from './shaders/utils.js';
 export class SimulationElement3d {
     children;
-    uniformBuffer;
     prevInfo;
     pipeline;
     id;
@@ -23,6 +21,7 @@ export class SimulationElement3d {
     vertexCache;
     rotation;
     modelMatrix;
+    uniformBuffer = null;
     isInstance = false;
     isInstanced = false;
     is3d = true;
@@ -33,16 +32,28 @@ export class SimulationElement3d {
         this.vertexCache = new Float32ArrayCache();
         this.wireframe = false;
         this.rotation = cloneBuf(rotation);
-        this.uniformBuffer = new MemoBuffer(GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST, uniformBufferSize);
         this.children = [];
         this.modelMatrix = matrix4();
         this.parent = null;
         this.pipeline = null;
         this.prevInfo = null;
-        this.shader = defaultShader;
         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);
+    }
+    delete() {
+        this.uniformBuffer?.destroy();
+    }
+    setUniformBuffer(buffer) {
+        this.uniformBuffer = buffer;
+    }
+    getUniformBuffer() {
+        return this.uniformBuffer;
     }
     emptyShallow() {
         this.children = [];
@@ -113,7 +124,7 @@ export class SimulationElement3d {
         this.vertexCache.updated();
         this.geometry.compute();
     }
-    /// may have unexpeced behavior for 3d shapes
+    /// may have unexpected behavior for 3d shapes
     setSubdivisions(divisions, vertexLimit) {
         this.geometry.setSubdivisions(divisions, vertexLimit);
         this.vertexCache.updated();
@@ -158,20 +169,18 @@ export class SimulationElement3d {
         return this.material.isTransparent();
     }
     getObjectInfo() {
-        const topologyString = this.isWireframe() ? 'line-strip' : 'triangle-' + this.getGeometryTopology();
+        const topologyString = this.isWireframe()
+            ? 'line-strip'
+            : 'triangle-' + this.getGeometryTopology();
         return `{ "topology": "${topologyString}", "transparent": ${this.isTransparent()}, "cullMode": "${this.cullMode}" }`;
     }
-    getUniformBuffer() {
-        const mat = this.getModelMatrix();
-        const device = globalInfo.errorGetDevice();
-        const buffer = this.uniformBuffer.getBuffer();
-        device.queue.writeBuffer(buffer, modelProjMatOffset, mat.buffer);
-        return buffer;
-    }
     getPipeline() {
-        const device = globalInfo.errorGetDevice();
+        // 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;
         }
@@ -402,10 +411,7 @@ export class SimulationElement3d {
         }
         return indexCount;
     }
-    writeBuffers() {
-        this.shader.writeBuffers(this);
-    }
-    getVertexBuffer() {
+    getVertexCallBuffer() {
         if (this.vertexCache.shouldUpdate() || this.geometry.hasUpdated()) {
             this.geometry.compute();
             const vertices = this.geometry.getVertices();
@@ -605,7 +611,6 @@ export class Polygon extends SimulationElement2d {
         super(pos, vector3(0, 0, rotation), color);
         const vectors = vertices.map((vert) => vert.getPos());
         const prevColor = this.getColor();
-        this.shader = vertexColorShader;
         this.geometry = new PolygonGeometry(vectors);
         this.material = new VertexColorMaterial([]);
         this.material.setColor(prevColor);
@@ -970,8 +975,9 @@ 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.shader = vertexColorShader;
         this.estimateLength();
     }
     setVertexColors() {
@@ -993,11 +999,11 @@ export class Spline2d extends SimulationElement2d {
         }
         this.material.setVertexColors(colorArray);
     }
-    getVertexBuffer() {
+    getVertexCallBuffer() {
         if (this.vertexCache.shouldUpdate()) {
             this.setVertexColors();
         }
-        return super.getVertexBuffer();
+        return super.getVertexCallBuffer();
     }
     isTransparent() {
         const curves = this.geometry.getCurves();
@@ -1104,31 +1110,29 @@ export class Instance extends SimulationElement3d {
     matrixBuffer;
     baseMat;
     maxInstances;
-    hasMapped;
     isInstance = true;
     constructor(obj, numInstances) {
         super(vector3(), vector3());
         // 32 matrices
         this.maxInstances = 32;
-        this.matrixBuffer = new MemoBuffer(GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST, this.maxInstances * mat4ByteLength);
+        this.matrixBuffer = new Float32Array(this.maxInstances * mat4ByteLength);
         obj.isInstanced = true;
         this.obj = obj;
         this.instanceMatrix = [];
         this.is3d = obj.is3d;
         this.geometry = new BlankGeometry();
-        this.hasMapped = false;
         this.baseMat = matrix4();
         for (let i = 0; i < numInstances; i++) {
             const clone = cloneBuf(this.baseMat);
             this.instanceMatrix.push(clone);
         }
     }
-    setNumInstances(numInstances, forceResizeBuffer = false) {
+    setInstanceCount(numInstances, forceResizeBuffer = false) {
         if (numInstances < 0)
             throw logger.error('Num instances is less than 0');
         if (numInstances > this.maxInstances || forceResizeBuffer) {
             this.maxInstances = numInstances;
-            this.matrixBuffer.setSize(numInstances * mat4ByteLength);
+            this.matrixBuffer = new Float32Array(numInstances * mat4ByteLength);
         }
         const oldLen = this.instanceMatrix.length;
         if (numInstances < oldLen) {
@@ -1151,38 +1155,31 @@ export class Instance extends SimulationElement3d {
         if (instance >= this.instanceMatrix.length || instance < 0)
             return;
         this.instanceMatrix[instance] = transformation;
-        const device = globalInfo.getDevice();
-        if (!device)
-            return;
-        const gpuBuffer = this.matrixBuffer.getBuffer();
-        const buf = new Float32Array(transformation);
-        device.queue.writeBuffer(gpuBuffer, instance * mat4ByteLength, buf.buffer, buf.byteOffset, buf.byteLength);
-        gpuBuffer.unmap();
-    }
-    mapBuffer() {
-        const device = globalInfo.getDevice();
-        if (!device)
-            return;
-        const minSize = this.maxInstances * mat4ByteLength;
-        const size = Math.max(minSize, this.instanceMatrix.length);
-        this.matrixBuffer.setSize(size);
-        const gpuBuffer = this.matrixBuffer.getBuffer();
-        const buf = new Float32Array(this.instanceMatrix.map((mat) => [...mat]).flat());
-        device.queue.writeBuffer(gpuBuffer, 0, buf.buffer, buf.byteOffset, buf.byteLength);
-        gpuBuffer.unmap();
-        this.hasMapped = true;
-    }
-    getInstances() {
+        for (let i = 0; i < transformation.length; i++) {
+            this.matrixBuffer[i + instance * transformation.length] = transformation[i];
+        }
+        console.log(this.matrixBuffer);
+    }
+    // private mapBuffer() {
+    //     const device = globalInfo.getDevice();
+    //     if (!device) return;
+    //     const minSize = this.maxInstances * mat4ByteLength;
+    //     const size = Math.max(minSize, this.instanceMatrix.length);
+    //     this.matrixBuffer.setSize(size);
+    //     const gpuBuffer = this.matrixBuffer.getBuffer();
+    //     const buf = new Float32Array(this.instanceMatrix.map((mat) => [...mat]).flat());
+    //     device.queue.writeBuffer(gpuBuffer, 0, buf.buffer, buf.byteOffset, buf.byteLength);
+    //     gpuBuffer.unmap();
+    //     this.hasMapped = true;
+    // }
+    getInstanceMatrices() {
         return this.instanceMatrix;
     }
-    getNumInstances() {
+    getInstanceCount() {
         return this.instanceMatrix.length;
     }
     getInstanceBuffer() {
-        if (!this.hasMapped) {
-            this.mapBuffer();
-        }
-        return this.matrixBuffer.getBuffer();
+        return this.matrixBuffer;
     }
     getTreeVertexCount() {
         return this.obj.getTreeVertexCount();
@@ -1193,8 +1190,8 @@ export class Instance extends SimulationElement3d {
     getGeometryTopology() {
         return this.obj.getGeometryTopology();
     }
-    getVertexBuffer() {
-        return this.obj.getVertexBuffer();
+    getVertexCallBuffer() {
+        return this.obj.getVertexCallBuffer();
     }
     getIndexBuffer() {
         return this.obj.getIndexBuffer();
@@ -1211,7 +1208,8 @@ export class TraceLines2d extends SimulationElement2d {
         this.material = new VertexColorMaterial([]);
         if (color)
             this.material.setColor(color);
-        this.shader = vertexColorShader;
+        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;