simulationjsv2 0.5.2 → 0.7.1

package/TODO.md

@@ -1,5 +1,17 @@
 # TODO
 
-- [ ] Make input position vec3 not vec4
-- [ ] Change position/rotation to be matrix transform on gpu
-- [ ] Make getBuffer return cached Float32Array
+- [ ] Fix transparency
+- [x] Update `updateModelMatrix2d`
+- [x] Trace line element (wireframe strip for tracing paths)
+- [x] Test new transform things on 3d stuff
+- [x] Fix rotating nested children elements
+- [x] Fix instancing
+- [x] Remove SceneCollection and replace by elements with children
+  - Test this
+- [x] Change position/rotation to be matrix transform on gpu
+- [x] Add update square center offset position in-place + not
+- [x] Make getBuffer return cached Float32Array
+- [x] Make input buffer position vec3 not vec4
+- [x] Use line strip vertices for polygon buffers
+- [x] Scene collection wireframe
+- [ ] Add animation status handle to transition values

package/dist/constants.d.ts

@@ -1,6 +1,12 @@
-export declare const vertexSize = 44;
+export declare const vertexSize = 40;
 export declare const positionOffset = 0;
-export declare const colorOffset = 16;
-export declare const uvOffset = 32;
-export declare const drawingInstancesOffset = 40;
+export declare const colorOffset = 12;
+export declare const uvOffset = 28;
+export declare const drawingInstancesOffset = 36;
 export declare const BUF_LEN: number;
+export declare const worldProjMatOffset = 0;
+export declare const modelProjMatOffset: number;
+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;

package/dist/constants.js

@@ -1,6 +1,13 @@
-export const vertexSize = 44; // 4 * 10
+import { vector3 } from './utils.js';
+export const vertexSize = 40; // 4 * 10
 export const positionOffset = 0;
-export const colorOffset = 16; // 4 * 4
-export const uvOffset = 32; // 4 * 8
-export const drawingInstancesOffset = 40;
+export const colorOffset = 12; // 4 * 3
+export const uvOffset = 28; // 4 * 8
+export const drawingInstancesOffset = 36;
 export const BUF_LEN = vertexSize / 4;
+export const worldProjMatOffset = 0;
+export const modelProjMatOffset = 4 * 16;
+export const xAxis = vector3(1);
+export const yAxis = vector3(0, 1);
+export const zAxis = vector3(0, 0, 1);
+export const origin0 = vector3();

package/dist/geometry.d.ts

@@ -1,4 +1,4 @@
-import { VertexParamGeneratorInfo, CircleGeometryParams, CubeGeometryParams, EmptyParams, Line2dGeometryParams, Line3dGeometryParams, Mat4, PolygonGeometryParams, Spline2dGeometryParams, SquareGeometryParams, Vector2, Vector3, VertexColorMap } from './types.js';
+import { VertexParamGeneratorInfo, CircleGeometryParams, CubeGeometryParams, EmptyParams, PolygonGeometryParams, Spline2dGeometryParams, SquareGeometryParams, Vector2, Vector3, VertexColorMap, LineGeometryParams, TraceLinesParams } from './types.js';
 import { Color, Vertex } from './utils.js';
 import { CubicBezierCurve2d, SplinePoint2d } from './graphics.js';
 export declare abstract class Geometry<T extends EmptyParams> {
@@ -6,10 +6,8 @@ export declare abstract class Geometry<T extends EmptyParams> {
     protected abstract triangleOrder: number[];
     protected abstract params: T;
     protected vertices: Vector3[];
-    protected matrix: Mat4;
     protected geometryType: 'list' | 'strip';
     constructor(vertices?: Vector3[], geometryType?: 'list' | 'strip');
-    updateMatrix(matrix: Mat4): void;
     getType(): "list" | "strip";
     abstract recompute(): void;
     getTriangleVertexCount(): number;
@@ -44,6 +42,8 @@ export declare class SquareGeometry extends Geometry<SquareGeometryParams> {
     protected triangleOrder: number[];
     protected params: SquareGeometryParams;
     constructor(width: number, height: number, centerOffset?: Vector2);
+    setOffset(offset: Vector2): void;
+    getOffset(): Vector2;
     setVertexColorMap(colorMap: VertexColorMap): void;
     setWidth(width: number): void;
     setHeight(height: number): void;
@@ -86,18 +86,24 @@ export declare class Spline2dGeometry extends Geometry<Spline2dGeometryParams> {
     getWireframeBuffer(color: Color, vertexParamGenerator?: VertexParamGeneratorInfo): number[];
     getTriangleBuffer(_: Color, vertexParamGenerator?: VertexParamGeneratorInfo): number[];
 }
-export declare class Line2dGeometry extends Geometry<Line2dGeometryParams> {
+export declare class Line2dGeometry extends Geometry<LineGeometryParams> {
     protected wireframeOrder: number[];
     protected triangleOrder: number[];
-    protected params: Line2dGeometryParams;
-    constructor(pos: Vector2, to: Vector2, thickness: number);
+    protected params: LineGeometryParams;
+    constructor(pos: Vector3, to: Vector3, thickness: number, fromColor?: Color | null, toColor?: Color | null);
+    private generateBuffer;
+    getTriangleBuffer(color: Color, vertexParamGenerator?: VertexParamGeneratorInfo): number[];
+    getWireframeBuffer(color: Color, vertexParamGenerator?: VertexParamGeneratorInfo): number[];
     recompute(): void;
 }
-export declare class Line3dGeometry extends Geometry<Line3dGeometryParams> {
+export declare class Line3dGeometry extends Geometry<LineGeometryParams> {
     protected wireframeOrder: number[];
     protected triangleOrder: number[];
-    protected params: Line3dGeometryParams;
-    constructor(pos: Vector3, to: Vector3, thickness: number);
+    protected params: LineGeometryParams;
+    constructor(pos: Vector3, to: Vector3, thickness: number, fromColor?: Color | null, toColor?: Color | null);
+    private generateBuffer;
+    getTriangleBuffer(color: Color, vertexParamGenerator?: VertexParamGeneratorInfo): number[];
+    getWireframeBuffer(color: Color, vertexParamGenerator?: VertexParamGeneratorInfo): number[];
     recompute(): void;
 }
 export declare class PolygonGeometry extends Geometry<PolygonGeometryParams> {
@@ -108,3 +114,13 @@ export declare class PolygonGeometry extends Geometry<PolygonGeometryParams> {
     recompute(): void;
     getTriangleBuffer(color: Color): number[];
 }
+export declare class TraceLines2dGeometry extends Geometry<EmptyParams> {
+    protected wireframeOrder: never[];
+    protected triangleOrder: never[];
+    protected params: TraceLinesParams;
+    constructor(maxLen?: number);
+    recompute(): void;
+    getWireframeBuffer(color: Color, vertexParamGenerator?: VertexParamGeneratorInfo | undefined): number[];
+    getWireframeVertexCount(): number;
+    addVertex(vert: Vertex): void;
+}

package/dist/geometry.js

@@ -2,19 +2,14 @@ import { mat4, vec2, vec3 } from 'wgpu-matrix';
 import { cloneBuf, interpolateColors, matrix4, vector2, vector2FromVector3, vector3, vector3FromVector2, vertex } from './utils.js';
 import { CubicBezierCurve2d } from './graphics.js';
 import { BUF_LEN } from './constants.js';
-import { bufferGenerator, lossyTriangulate, triangulateWireFrameOrder } from './internalUtils.js';
+import { bufferGenerator, lossyTriangulate, lossyTriangulateStrip, triangulateWireFrameOrder } from './internalUtils.js';
 export class Geometry {
     vertices;
-    matrix;
     geometryType;
     constructor(vertices = [], geometryType = 'list') {
         this.vertices = vertices;
-        this.matrix = matrix4();
         this.geometryType = geometryType;
     }
-    updateMatrix(matrix) {
-        this.matrix = matrix;
-    }
     getType() {
         return this.geometryType;
     }
@@ -27,8 +22,7 @@ export class Geometry {
     bufferFromOrder(order, color, vertexParamGenerator) {
         return order
             .map((vertexIndex) => {
-            const pos = cloneBuf(this.vertices[vertexIndex]);
-            vec3.transformMat4(pos, this.matrix, pos);
+            const pos = this.vertices[vertexIndex];
             return bufferGenerator.generate(pos[0], pos[1], pos[2], color, vector2(), vertexParamGenerator);
         })
             .flat();
@@ -65,8 +59,7 @@ export class PlaneGeometry extends Geometry {
         return this.triangleOrder
             .map((index) => {
             const vertex = this.rawVertices[index];
-            const pos = cloneBuf(vertex.getPos());
-            vec3.transformMat4(pos, this.matrix, pos);
+            const pos = vertex.getPos();
             return bufferGenerator.generate(pos[0], pos[1], pos[2], vertex.getColor() || color, vector2(), vertexParamGenerator);
         })
             .flat();
@@ -137,6 +130,12 @@ export class SquareGeometry extends Geometry {
         };
         this.recompute();
     }
+    setOffset(offset) {
+        this.params.centerOffset = offset;
+    }
+    getOffset() {
+        return this.params.centerOffset;
+    }
     setVertexColorMap(colorMap) {
         this.params.colorMap = colorMap;
     }
@@ -158,8 +157,7 @@ export class SquareGeometry extends Geometry {
     getTriangleBuffer(color, vertexParamGenerator) {
         return this.triangleOrder
             .map((vertexIndex) => {
-            const pos = cloneBuf(this.vertices[vertexIndex]);
-            vec3.transformMat4(pos, this.matrix, pos);
+            const pos = this.vertices[vertexIndex];
             return bufferGenerator.generate(pos[0], pos[1], pos[2], this.params.colorMap[vertexIndex] || color, vector2(), vertexParamGenerator);
         })
             .flat();
@@ -352,8 +350,7 @@ export class Spline2dGeometry extends Geometry {
     getWireframeBuffer(color, vertexParamGenerator) {
         return this.wireframeOrder
             .map((vertexIndex) => {
-            const vertex = cloneBuf(this.vertices[vertexIndex]);
-            vec3.transformMat4(vertex, this.matrix, vertex);
+            const vertex = this.vertices[vertexIndex];
             return bufferGenerator.generate(vertex[0], vertex[1], vertex[2], color, vector2(), vertexParamGenerator);
         })
             .flat();
@@ -361,8 +358,7 @@ export class Spline2dGeometry extends Geometry {
     getTriangleBuffer(_, vertexParamGenerator) {
         return this.triangleOrder
             .map((vertexIndex) => {
-            const vertex = cloneBuf(this.vertices[vertexIndex]);
-            vec3.transformMat4(vertex, this.matrix, vertex);
+            const vertex = this.vertices[vertexIndex];
             return bufferGenerator.generate(vertex[0], vertex[1], vertex[2], this.params.vertexColors[vertexIndex], vector2(), vertexParamGenerator);
         })
             .flat();
@@ -372,14 +368,31 @@ export class Line2dGeometry extends Geometry {
     wireframeOrder = [0, 1, 2, 3, 0, 2];
     triangleOrder = [0, 1, 3, 2];
     params;
-    constructor(pos, to, thickness) {
+    constructor(pos, to, thickness, fromColor, toColor) {
         super([], 'strip');
         this.params = {
             pos,
             to,
-            thickness
+            thickness,
+            fromColor: fromColor || null,
+            toColor: toColor || null
         };
     }
+    generateBuffer(order, color, vertexParamGenerator) {
+        return order
+            .map((vertexIndex) => {
+            const pos = this.vertices[vertexIndex];
+            const vertexColor = (vertexIndex > 1 ? this.params.toColor : this.params.fromColor) || color;
+            return bufferGenerator.generate(pos[0], pos[1], pos[2], vertexColor, vector2(), vertexParamGenerator);
+        })
+            .flat();
+    }
+    getTriangleBuffer(color, vertexParamGenerator) {
+        return this.generateBuffer(this.triangleOrder, color, vertexParamGenerator);
+    }
+    getWireframeBuffer(color, vertexParamGenerator) {
+        return this.generateBuffer(this.wireframeOrder, color, vertexParamGenerator);
+    }
     recompute() {
         const normal = vector2(-this.params.to[1], this.params.to[0]);
         vec2.normalize(normal, normal);
@@ -396,14 +409,31 @@ export class Line3dGeometry extends Geometry {
     wireframeOrder = [0, 1, 2, 3, 0, 2];
     triangleOrder = [0, 1, 2, 3, 0];
     params;
-    constructor(pos, to, thickness) {
+    constructor(pos, to, thickness, fromColor, toColor) {
         super([], 'strip');
         this.params = {
             pos,
             to,
-            thickness
+            thickness,
+            fromColor: fromColor || null,
+            toColor: toColor || null
         };
     }
+    generateBuffer(order, color, vertexParamGenerator) {
+        return order
+            .map((vertexIndex) => {
+            const pos = this.vertices[vertexIndex];
+            const vertexColor = (vertexIndex > 1 ? this.params.toColor : this.params.fromColor) || color;
+            return bufferGenerator.generate(pos[0], pos[1], pos[2], vertexColor, vector2(), vertexParamGenerator);
+        })
+            .flat();
+    }
+    getTriangleBuffer(color, vertexParamGenerator) {
+        return this.generateBuffer(this.triangleOrder, color, vertexParamGenerator);
+    }
+    getWireframeBuffer(color, vertexParamGenerator) {
+        return this.generateBuffer(this.wireframeOrder, color, vertexParamGenerator);
+    }
     recompute() {
         const normal = vector2(-this.params.to[1], this.params.to[0]);
         vec2.normalize(normal, normal);
@@ -421,7 +451,7 @@ export class PolygonGeometry extends Geometry {
     triangleOrder;
     params;
     constructor(points) {
-        super();
+        super([], 'strip');
         this.wireframeOrder = [];
         this.triangleOrder = [];
         this.params = {
@@ -431,18 +461,48 @@ export class PolygonGeometry extends Geometry {
     }
     recompute() {
         this.vertices = this.params.points.map((point) => point.getPos());
-        this.triangleOrder = lossyTriangulate(Array(this.vertices.length)
+        this.triangleOrder = lossyTriangulateStrip(Array(this.vertices.length)
             .fill(0)
-            .map((_, index) => index)).flat();
+            .map((_, index) => index));
         this.wireframeOrder = triangulateWireFrameOrder(this.vertices.length);
     }
     getTriangleBuffer(color) {
         return this.triangleOrder
             .map((vertexIndex) => {
-            const vertex = cloneBuf(this.vertices[vertexIndex]);
-            vec3.transformMat4(vertex, this.matrix, vertex);
+            const vertex = this.vertices[vertexIndex];
             return bufferGenerator.generate(vertex[0], vertex[1], 0, this.params.points[vertexIndex].getColor() || color);
         })
             .flat();
     }
 }
+export class TraceLines2dGeometry extends Geometry {
+    wireframeOrder = [];
+    triangleOrder = [];
+    params;
+    constructor(maxLen) {
+        super([], 'strip');
+        this.params = {
+            vertices: [],
+            maxLength: maxLen || null
+        };
+        this.wireframeOrder = [];
+    }
+    recompute() { }
+    getWireframeBuffer(color, vertexParamGenerator) {
+        return this.params.vertices
+            .map((item) => {
+            const pos = item.getPos();
+            return bufferGenerator.generate(pos[0], pos[1], pos[2], item.getColor() || color, vector2(), vertexParamGenerator);
+        })
+            .flat();
+    }
+    getWireframeVertexCount() {
+        return this.params.vertices.length;
+    }
+    addVertex(vert) {
+        this.params.vertices.push(vert);
+        if (this.params.maxLength && this.params.vertices.length > this.params.maxLength) {
+            this.params.vertices.shift();
+        }
+    }
+}

package/dist/graphics.d.ts

@@ -1,62 +1,87 @@
 /// <reference types="@webgpu/types" />
-import { Camera } from './simulation.js';
-import type { Vector2, Vector3, LerpFunc, VertexColorMap, ElementRotation, Mat4, AnySimulationElement, VertexParamGeneratorInfo } from './types.js';
+import type { Vector2, Vector3, LerpFunc, VertexColorMap, Mat4, AnySimulationElement, VertexParamGeneratorInfo } from './types.js';
 import { Vertex, Color } from './utils.js';
-import { BlankGeometry, CircleGeometry, CubeGeometry, Geometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, Spline2dGeometry, SquareGeometry } from './geometry.js';
-import { VertexCache } from './internalUtils.js';
-export declare abstract class SimulationElement<T extends Vector2 | Vector3 = Vector3> {
-    protected abstract pos: T;
-    protected abstract geometry: Geometry<any>;
+import { BlankGeometry, CircleGeometry, CubeGeometry, Geometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, Spline2dGeometry, SquareGeometry, TraceLines2dGeometry as TraceLinesGeometry } from './geometry.js';
+import { SimSceneObjInfo, VertexCache } from './internalUtils.js';
+export declare abstract class SimulationElement3d {
+    private children;
+    private uniformBuffer;
+    protected parent: SimulationElement3d | null;
+    protected centerOffset: Vector3;
+    protected rotationOffset: Vector3;
+    protected pos: Vector3;
+    protected abstract geometry: Geometry<object>;
     protected color: Color;
     protected wireframe: boolean;
     protected vertexCache: VertexCache;
-    protected rotation: ElementRotation<T>;
+    protected rotation: Vector3;
+    protected modelMatrix: Mat4;
+    isInstance: boolean;
     isInstanced: boolean;
+    is3d: boolean;
+    isEmpty: boolean;
     /**
      * @param pos - Expected to be adjusted to devicePixelRatio before reaching constructor
      */
-    constructor(color: Color | undefined, rotation: ElementRotation<T>);
+    constructor(pos: Vector3, rotation: Vector3, color?: Color);
+    add(el: SimulationElement3d, id?: string): void;
+    remove(el: SimulationElement3d): void;
+    getChildren(): SimulationElement3d[];
+    getChildrenInfos(): SimSceneObjInfo[];
+    hasChildren(): boolean;
+    setParent(parent: SimulationElement3d): void;
+    getParent(): SimulationElement3d | null;
+    setCenterOffset(offset: Vector3): void;
+    setRotationOffset(offset: Vector3): void;
+    resetCenterOffset(): void;
+    propagateDevice(device: GPUDevice): void;
+    getModelMatrix(): Mat4;
+    getUniformBuffer(device: GPUDevice, mat: Mat4): GPUBuffer;
+    protected mirrorParentTransforms3d(mat: Mat4): void;
+    protected updateModelMatrix3d(): void;
+    protected mirrorParentTransforms2d(mat: Mat4): void;
+    protected updateModelMatrix2d(): void;
     getGeometryType(): "list" | "strip";
     setWireframe(wireframe: boolean): void;
     isWireframe(): boolean;
     getColor(): Color;
-    getPos(): T;
-    getRotation(): ElementRotation<T>;
+    getPos(): Vector3;
+    getAbsolutePos(): Vector3;
+    getRotation(): Vector3;
+    getCenterOffset(): Vector3;
     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>;
-    abstract rotate(amount: ElementRotation<T>, t?: number, f?: LerpFunc): Promise<void>;
-    abstract rotateTo(rotation: ElementRotation<T>, t?: number, f?: LerpFunc): Promise<void>;
-    protected abstract updateMatrix(camera: Camera): void;
+    private moveChildren;
+    move(amount: Vector3, t?: number, f?: LerpFunc, fromDevicePixelRatio?: boolean): Promise<void>;
+    moveTo(pos: Vector3, t?: number, f?: LerpFunc, fromDevicePixelRatio?: boolean): Promise<void>;
+    rotateChildrenTo(angle: Vector3): void;
+    rotateChildren(angle: Vector3): void;
+    rotate(amount: Vector3, t?: number, f?: LerpFunc): Promise<void>;
+    rotateTo(rot: Vector3, t?: number, f?: LerpFunc): Promise<void>;
     getVertexCount(): number;
-    protected defaultUpdateMatrix(camera: Camera): void;
-    getBuffer(camera: Camera, vertexParamGenerator?: VertexParamGeneratorInfo): number[];
+    getBuffer(vertexParamGenerator?: VertexParamGeneratorInfo): Float32Array | number[];
+    protected abstract onDeviceChange(device: GPUDevice): void;
 }
-export declare abstract class SimulationElement3d extends SimulationElement {
-    protected pos: Vector3;
-    protected rotation: Vector3;
+export declare class EmptyElement extends SimulationElement3d {
+    protected geometry: BlankGeometry;
+    private label;
+    isEmpty: boolean;
+    constructor(label?: string);
+    getLabel(): string | null;
+    protected onDeviceChange(_device: GPUDevice): void;
+}
+export declare abstract class SimulationElement2d extends SimulationElement3d {
     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>;
-    move(amount: Vector3, t?: number, f?: LerpFunc): Promise<void>;
-    moveTo(pos: Vector3, t?: number, f?: LerpFunc): Promise<void>;
-}
-export declare abstract class SimulationElement2d extends SimulationElement<Vector2> {
-    protected pos: Vector2;
-    rotation: number;
-    constructor(pos: Vector2, rotation?: number, color?: Color);
-    rotate(rotation: number, t?: number, f?: LerpFunc): Promise<void>;
-    rotateTo(newRotation: number, t?: number, f?: LerpFunc): Promise<void>;
-    move(amount: Vector2, t?: number, f?: LerpFunc): Promise<void>;
-    moveTo(newPos: Vector2, t?: number, f?: LerpFunc): Promise<void>;
+    constructor(pos: Vector2, rotation?: Vector3, color?: Color);
+    rotate2d(amount: number, t?: number, f?: LerpFunc): Promise<void>;
+    rotateTo2d(rot: number, t?: number, f?: LerpFunc): Promise<void>;
+    getModelMatrix(): Mat4;
 }
 export declare class Plane extends SimulationElement3d {
     protected geometry: PlaneGeometry;
     points: Vertex[];
     constructor(pos: Vector3, points: Vertex[], color?: Color, rotation?: Vector3);
     setPoints(newPoints: Vertex[]): void;
-    protected updateMatrix(camera: Camera): void;
+    protected onDeviceChange(_device: GPUDevice): void;
 }
 export declare class Square extends SimulationElement2d {
     protected geometry: SquareGeometry;
@@ -68,6 +93,8 @@ export declare class Square extends SimulationElement2d {
      * @param vertexColors{Record<number, Color>} - 0 is top left vertex, numbers increase clockwise
      */
     constructor(pos: Vector2, width: number, height: number, color?: Color, rotation?: number, centerOffset?: Vector2, vertexColors?: VertexColorMap);
+    setOffset(offset: Vector2): void;
+    setOffsetInplace(offset: Vector2): void;
     private cloneColorMap;
     setVertexColors(newColorMap: VertexColorMap, t?: number, f?: LerpFunc): Promise<void>;
     scaleWidth(amount: number, t?: number, f?: LerpFunc): Promise<void>;
@@ -75,7 +102,7 @@ export declare class Square extends SimulationElement2d {
     scale(amount: number, t?: number, f?: LerpFunc): Promise<void>;
     setWidth(num: number, t?: number, f?: LerpFunc): Promise<void>;
     setHeight(num: number, t?: number, f?: LerpFunc): Promise<void>;
-    protected updateMatrix(camera: Camera): void;
+    protected onDeviceChange(_device: GPUDevice): void;
 }
 export declare class Circle extends SimulationElement2d {
     protected geometry: CircleGeometry;
@@ -84,7 +111,7 @@ export declare class Circle extends SimulationElement2d {
     constructor(pos: Vector2, radius: number, color?: Color, detail?: number);
     setRadius(num: number, t?: number, f?: LerpFunc): Promise<void>;
     scale(amount: number, t?: number, f?: LerpFunc): Promise<void>;
-    protected updateMatrix(camera: Camera): void;
+    protected onDeviceChange(_device: GPUDevice): void;
 }
 export declare class Polygon extends SimulationElement2d {
     protected geometry: PolygonGeometry;
@@ -92,7 +119,7 @@ export declare class Polygon extends SimulationElement2d {
     constructor(pos: Vector2, points: Vertex[], color?: Color, rotation?: number);
     getVertices(): Vertex[];
     setVertices(newVertices: Vertex[], t?: number, f?: LerpFunc): Promise<void>;
-    protected updateMatrix(camera: Camera): void;
+    protected onDeviceChange(_device: GPUDevice): void;
 }
 export declare class Line3d extends SimulationElement3d {
     protected geometry: Line3dGeometry;
@@ -101,16 +128,16 @@ export declare class Line3d extends SimulationElement3d {
     constructor(pos: Vertex, to: Vertex, thickness: number);
     setStart(pos: Vector3, t?: number, f?: LerpFunc): Promise<void>;
     setEnd(pos: Vector3, t?: number, f?: LerpFunc): Promise<void>;
-    protected updateMatrix(camera: Camera): void;
+    protected onDeviceChange(_device: GPUDevice): void;
 }
 export declare class Line2d extends SimulationElement2d {
     protected geometry: Line2dGeometry;
     private to;
     private thickness;
     constructor(from: Vertex, to: Vertex, thickness?: number);
-    setStart(pos: Vector2, t?: number, f?: LerpFunc): Promise<void>;
-    setEnd(pos: Vector2, t?: number, f?: LerpFunc): Promise<void>;
-    protected updateMatrix(camera: Camera): void;
+    setStart(pos: Vector3, t?: number, f?: LerpFunc): Promise<void>;
+    setEnd(pos: Vector3, t?: number, f?: LerpFunc): Promise<void>;
+    protected onDeviceChange(_device: GPUDevice): void;
 }
 export declare class Cube extends SimulationElement3d {
     protected geometry: CubeGeometry;
@@ -122,7 +149,7 @@ export declare class Cube extends SimulationElement3d {
     setHeight(height: number, t?: number, f?: LerpFunc): Promise<void>;
     setDepth(depth: number, t?: number, f?: LerpFunc): Promise<void>;
     scale(amount: number, t?: number, f?: LerpFunc): Promise<void>;
-    protected updateMatrix(camera: Camera): void;
+    protected onDeviceChange(_device: GPUDevice): void;
 }
 export declare class BezierCurve2d {
     private points;
@@ -175,27 +202,39 @@ export declare class Spline2d extends SimulationElement2d {
     setThickness(thickness: number, t?: number, f?: LerpFunc): Promise<void>;
     interpolateSlope(t: number): Vector2[] | readonly [Vector2, Vector2];
     interpolate(t: number): Vector2;
-    protected updateMatrix(camera: Camera): void;
+    protected onDeviceChange(_device: GPUDevice): void;
 }
 export declare class Instance<T extends AnySimulationElement> extends SimulationElement3d {
     protected geometry: BlankGeometry;
     private obj;
     private instanceMatrix;
     private matrixBuffer;
-    private device;
     private baseMat;
-    private needsRemap;
+    isInstance: boolean;
     constructor(obj: T, numInstances: number);
     setNumInstances(numInstances: number): void;
     setInstance(instance: number, transformation: Mat4): void;
     private mapBuffer;
-    private setMatrixBuffer;
     getInstances(): Mat4[];
     getNumInstances(): number;
-    setDevice(device: GPUDevice): void;
-    getMatrixBuffer(): GPUBuffer | null;
+    getMatrixBuffer(device: GPUDevice): GPUBuffer;
     getVertexCount(): number;
     getGeometryType(): "list" | "strip";
-    protected updateMatrix(_: Camera): void;
-    getBuffer(camera: Camera): number[];
+    getBuffer(): Float32Array | number[];
+    protected onDeviceChange(device: GPUDevice): void;
+    getModelMatrix(): Mat4;
+}
+export declare class TraceLines2d extends SimulationElement2d {
+    protected geometry: TraceLinesGeometry;
+    constructor(color?: Color, maxLen?: number);
+    addPoint(point: Vector2 | Vector3, color?: Color): void;
+    isWireframe(): boolean;
+    protected onDeviceChange(_: GPUDevice): void;
+}
+export declare class TraceLines3d extends SimulationElement3d {
+    protected geometry: TraceLinesGeometry;
+    constructor(color?: Color, maxLen?: number);
+    addPoint(point: Vector2 | Vector3, color?: Color): void;
+    isWireframe(): boolean;
+    protected onDeviceChange(_: GPUDevice): void;
 }