simulationjsv2 0.6.0 → 0.7.1

package/dist/graphics.js

@@ -1,32 +1,87 @@
 import { vec3, mat4, vec2, vec4 } from 'wgpu-matrix';
-import { Vertex, cloneBuf, color, colorFromVector4, vector2, vector3, vertex, Color, transitionValues, vector2FromVector3, matrix4, vector3FromVector2, distance2d } from './utils.js';
-import { BlankGeometry, CircleGeometry, CubeGeometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, Spline2dGeometry, SquareGeometry } from './geometry.js';
-import { VertexCache, bufferGenerator, logger, rotateMat4, vector3ToPixelRatio } from './internalUtils.js';
+import { Vertex, cloneBuf, color, colorFromVector4, vector2, vector3, vertex, Color, vector2FromVector3, matrix4, vector3FromVector2, distance2d } from './utils.js';
+import { BlankGeometry, CircleGeometry, CubeGeometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, Spline2dGeometry, SquareGeometry, TraceLines2dGeometry as TraceLinesGeometry } from './geometry.js';
+import { SimSceneObjInfo, VertexCache, bufferGenerator, internalTransitionValues, logger, posTo2dScreen, rotateMat4, vector3ToPixelRatio } from './internalUtils.js';
 import { modelProjMatOffset } from './constants.js';
-export class SimulationElement {
+export class SimulationElement3d {
+    children;
+    uniformBuffer;
+    parent;
+    centerOffset;
+    rotationOffset;
     pos;
     color;
     wireframe;
     vertexCache;
     rotation;
     modelMatrix;
-    uniformBuffer;
-    isInstanced;
+    isInstance = false;
+    isInstanced = false;
+    is3d = true;
+    isEmpty = false;
     /**
      * @param pos - Expected to be adjusted to devicePixelRatio before reaching constructor
      */
     constructor(pos, rotation, color = new Color()) {
         this.pos = pos;
+        this.centerOffset = vector3();
+        // TODO test this
+        this.rotationOffset = vector3();
         this.color = color;
         this.vertexCache = new VertexCache();
         this.wireframe = false;
-        this.isInstanced = false;
-        this.rotation = rotation;
+        this.rotation = cloneBuf(rotation);
         this.uniformBuffer = null;
+        this.children = [];
         this.modelMatrix = matrix4();
+        this.parent = null;
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    getModelMatrix(_) {
+    add(el, id) {
+        el.setParent(this);
+        const info = new SimSceneObjInfo(el, id);
+        this.children.push(info);
+    }
+    remove(el) {
+        for (let i = 0; i < this.children.length; i++) {
+            if (this.children[i].getObj() === el) {
+                this.children.splice(i, 1);
+            }
+        }
+    }
+    getChildren() {
+        return this.children.map((child) => child.getObj());
+    }
+    getChildrenInfos() {
+        return this.children;
+    }
+    hasChildren() {
+        return this.children.length > 0;
+    }
+    setParent(parent) {
+        this.parent = parent;
+    }
+    getParent() {
+        return this.parent;
+    }
+    setCenterOffset(offset) {
+        this.centerOffset = offset;
+    }
+    setRotationOffset(offset) {
+        this.rotationOffset = offset;
+    }
+    resetCenterOffset() {
+        this.centerOffset[0] = 0;
+        this.centerOffset[1] = 0;
+        this.centerOffset[2] = 0;
+    }
+    propagateDevice(device) {
+        this.onDeviceChange(device);
+        for (let i = 0; i < this.children.length; i++) {
+            this.children[i].getObj().propagateDevice(device);
+        }
+    }
+    getModelMatrix() {
+        this.updateModelMatrix3d();
         return this.modelMatrix;
     }
     getUniformBuffer(device, mat) {
@@ -40,12 +95,53 @@ export class SimulationElement {
         device.queue.writeBuffer(this.uniformBuffer, modelProjMatOffset, mat);
         return this.uniformBuffer;
     }
+    mirrorParentTransforms3d(mat) {
+        if (!this.parent)
+            return;
+        this.parent.mirrorParentTransforms3d(mat);
+        mat4.translate(mat, this.parent.getPos(), mat);
+        const parentRot = this.parent.getRotation();
+        mat4.rotateZ(mat, parentRot[2], mat);
+        mat4.rotateY(mat, parentRot[1], mat);
+        mat4.rotateX(mat, parentRot[0], mat);
+    }
     updateModelMatrix3d() {
         mat4.identity(this.modelMatrix);
+        if (this.parent) {
+            this.mirrorParentTransforms3d(this.modelMatrix);
+        }
         mat4.translate(this.modelMatrix, this.pos, this.modelMatrix);
+        // vec3.negate(this.rotationOffset, cachedVec1);
+        // mat4.translate(this.modelMatrix, cachedVec1, this.modelMatrix);
         mat4.rotateZ(this.modelMatrix, this.rotation[2], this.modelMatrix);
         mat4.rotateY(this.modelMatrix, this.rotation[1], this.modelMatrix);
         mat4.rotateX(this.modelMatrix, this.rotation[0], this.modelMatrix);
+        // mat4.translate(this.modelMatrix, this.rotationOffset, this.modelMatrix);
+        mat4.translate(this.modelMatrix, this.centerOffset, this.modelMatrix);
+    }
+    mirrorParentTransforms2d(mat) {
+        if (!this.parent) {
+            const parentPos = posTo2dScreen(this.pos);
+            mat4.translate(mat, parentPos, mat);
+            return;
+        }
+        this.parent.mirrorParentTransforms2d(mat);
+        const parentRot = this.parent.getRotation();
+        mat4.rotateZ(mat, parentRot[2], mat);
+        mat4.translate(mat, this.pos, mat);
+    }
+    updateModelMatrix2d() {
+        mat4.identity(this.modelMatrix);
+        const pos = posTo2dScreen(this.pos);
+        vec3.add(pos, this.centerOffset, pos);
+        if (this.parent) {
+            this.mirrorParentTransforms2d(this.modelMatrix);
+        }
+        else {
+            mat4.translate(this.modelMatrix, pos, this.modelMatrix);
+        }
+        mat4.rotateZ(this.modelMatrix, this.rotation[2], this.modelMatrix);
+        mat4.translate(this.modelMatrix, this.centerOffset, this.modelMatrix);
     }
     getGeometryType() {
         return this.geometry.getType();
@@ -62,13 +158,22 @@ export class SimulationElement {
     getPos() {
         return this.pos;
     }
+    getAbsolutePos() {
+        const vec = vector3();
+        this.updateModelMatrix3d();
+        mat4.getTranslation(this.modelMatrix, vec);
+        return vec;
+    }
     getRotation() {
         return this.rotation;
     }
+    getCenterOffset() {
+        return this.centerOffset;
+    }
     fill(newColor, t = 0, f) {
         const diff = newColor.diff(this.color);
         const finalColor = newColor.clone();
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.color.r += diff.r * p;
             this.color.g += diff.g * p;
             this.color.b += diff.b * p;
@@ -79,76 +184,92 @@ export class SimulationElement {
             this.vertexCache.updated();
         }, t, f);
     }
-    move(amount, t = 0, f) {
+    moveChildren(amount, t = 0, f) {
+        for (let i = 0; i < this.children.length; i++) {
+            this.children[i].getObj().move(amount, t, f, true);
+        }
+    }
+    move(amount, t = 0, f, fromDevicePixelRatio = false) {
         const tempAmount = cloneBuf(amount);
-        vector3ToPixelRatio(tempAmount);
+        if (!fromDevicePixelRatio)
+            vector3ToPixelRatio(tempAmount);
         const finalPos = cloneBuf(this.pos);
         vec3.add(finalPos, tempAmount, finalPos);
-        return transitionValues((p) => {
+        this.moveChildren(amount, t, f);
+        return internalTransitionValues((p) => {
             this.pos[0] += tempAmount[0] * p;
             this.pos[1] += tempAmount[1] * p;
             this.pos[2] += tempAmount[2] * p;
-            this.updateModelMatrix3d();
         }, () => {
             this.pos = finalPos;
-            this.updateModelMatrix3d();
         }, t, f);
     }
-    moveTo(pos, t = 0, f) {
+    moveTo(pos, t = 0, f, fromDevicePixelRatio = false) {
         const tempPos = cloneBuf(pos);
-        vector3ToPixelRatio(tempPos);
+        if (!fromDevicePixelRatio)
+            vector3ToPixelRatio(tempPos);
         const diff = vector3();
         vec3.sub(tempPos, this.pos, diff);
-        return transitionValues((p) => {
+        this.moveChildren(diff, t, f);
+        return internalTransitionValues((p) => {
             this.pos[0] += diff[0] * p;
             this.pos[1] += diff[1] * p;
             this.pos[2] += diff[2] * p;
-            this.updateModelMatrix3d();
         }, () => {
             this.pos = tempPos;
-            this.updateModelMatrix3d();
         }, t, f);
     }
+    rotateChildrenTo(angle) {
+        for (let i = 0; i < this.children.length; i++) {
+            this.children[i].getObj().rotateTo(angle);
+        }
+    }
+    rotateChildren(angle) {
+        for (let i = 0; i < this.children.length; i++) {
+            this.children[i].getObj().rotate(angle);
+        }
+    }
     rotate(amount, t = 0, f) {
-        const tempAmount = cloneBuf(amount);
         const finalRotation = cloneBuf(amount);
         vec3.add(finalRotation, this.rotation, finalRotation);
-        return transitionValues((p) => {
-            this.rotation[0] += tempAmount[0] * p;
-            this.rotation[1] += tempAmount[1] * p;
-            this.rotation[2] += tempAmount[2] * p;
-            this.updateModelMatrix3d();
+        const tempDiff = vector3();
+        return internalTransitionValues((p) => {
+            vec3.scale(amount, p, tempDiff);
+            this.rotation[0] += tempDiff[0];
+            this.rotation[1] += tempDiff[1];
+            this.rotation[2] += tempDiff[2];
         }, () => {
             this.rotation = finalRotation;
-            this.updateModelMatrix3d();
         }, t, f);
     }
     rotateTo(rot, t = 0, f) {
         const diff = vec3.sub(rot, this.rotation);
-        return transitionValues((p) => {
-            this.rotation[0] += diff[0] * p;
-            this.rotation[1] += diff[1] * p;
-            this.rotation[2] += diff[2] * p;
-            this.updateModelMatrix3d();
+        const tempDiff = vector3();
+        return internalTransitionValues((p) => {
+            vec3.scale(diff, p, tempDiff);
+            this.rotation[0] += tempDiff[0];
+            this.rotation[1] += tempDiff[1];
+            this.rotation[2] += tempDiff[2];
         }, () => {
             this.rotation = cloneBuf(rot);
-            this.updateModelMatrix3d();
         }, t, f);
     }
     getVertexCount() {
         if (this.vertexCache.shouldUpdate()) {
             this.geometry.recompute();
         }
+        let childrenVertices = 0;
+        for (let i = 0; i < this.children.length; i++) {
+            childrenVertices += this.children[i].getObj().getVertexCount();
+        }
+        let currentVertices = 0;
         if (this.isWireframe()) {
-            return this.geometry.getWireframeVertexCount();
+            currentVertices = this.geometry.getWireframeVertexCount();
         }
-        return this.geometry.getTriangleVertexCount();
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    defaultUpdateMatrix(_) {
-        const matrix = matrix4();
-        mat4.translate(matrix, this.pos, matrix);
-        rotateMat4(matrix, this.rotation);
+        else {
+            currentVertices = this.geometry.getTriangleVertexCount();
+        }
+        return currentVertices + childrenVertices;
     }
     getBuffer(vertexParamGenerator) {
         if (this.vertexCache.shouldUpdate()) {
@@ -170,18 +291,22 @@ export class SimulationElement {
         return this.vertexCache.getCache();
     }
 }
-export class SimulationElement3d extends SimulationElement {
-    pos;
-    rotation;
-    is3d = true;
-    constructor(pos, rotation = vector3(), color) {
-        super(pos, rotation, color);
-        this.pos = pos;
-        vector3ToPixelRatio(this.pos);
-        this.rotation = rotation;
+export class EmptyElement extends SimulationElement3d {
+    geometry = new BlankGeometry();
+    label;
+    isEmpty = true;
+    constructor(label) {
+        super(vector3(), vector3());
+        this.label = label || null;
     }
+    getLabel() {
+        return this.label;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDeviceChange(_device) { }
 }
-export class SimulationElement2d extends SimulationElement {
+export class SimulationElement2d extends SimulationElement3d {
+    is3d = false;
     constructor(pos, rotation = vector3(), color) {
         super(vector3FromVector2(pos), rotation, color);
         vector3ToPixelRatio(this.pos);
@@ -192,15 +317,8 @@ export class SimulationElement2d extends SimulationElement {
     rotateTo2d(rot, t = 0, f) {
         return super.rotateTo(vector3(0, 0, rot), t, f);
     }
-    updateModelMatrix2d(camera) {
-        mat4.identity(this.modelMatrix);
-        const pos = cloneBuf(this.pos);
-        pos[1] = camera.getScreenSize()[1] + pos[1];
-        mat4.translate(this.modelMatrix, pos, this.modelMatrix);
-        mat4.rotateZ(this.modelMatrix, this.rotation[2], this.modelMatrix);
-    }
-    getModelMatrix(camera) {
-        this.updateModelMatrix2d(camera);
+    getModelMatrix() {
+        super.updateModelMatrix2d();
         return this.modelMatrix;
     }
 }
@@ -217,6 +335,8 @@ export class Plane extends SimulationElement3d {
         this.points = newPoints;
         this.vertexCache.updated();
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDeviceChange(_device) { }
 }
 export class Square extends SimulationElement2d {
     geometry;
@@ -270,7 +390,7 @@ export class Square extends SimulationElement2d {
                 diffMap[+key] = clone;
             }
         });
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             Object.entries(diffMap).forEach(([key, value]) => {
                 const color = this.vertexColors[+key];
                 color.r += value.r * p;
@@ -290,7 +410,7 @@ export class Square extends SimulationElement2d {
     scaleWidth(amount, t = 0, f) {
         const finalWidth = this.width * amount;
         const diffWidth = finalWidth - this.width;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.width += diffWidth * p;
             this.geometry.setWidth(this.width);
             this.vertexCache.updated();
@@ -303,7 +423,7 @@ export class Square extends SimulationElement2d {
     scaleHeight(amount, t = 0, f) {
         const finalHeight = this.height * amount;
         const diffHeight = finalHeight - this.height;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.height += diffHeight * p;
             this.geometry.setHeight(this.height);
             this.vertexCache.updated();
@@ -318,7 +438,7 @@ export class Square extends SimulationElement2d {
         const finalHeight = this.height * amount;
         const diffWidth = finalWidth - this.width;
         const diffHeight = finalHeight - this.height;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.width += diffWidth * p;
             this.height += diffHeight * p;
             this.geometry.setWidth(this.width);
@@ -335,7 +455,7 @@ export class Square extends SimulationElement2d {
     setWidth(num, t = 0, f) {
         num *= devicePixelRatio;
         const diffWidth = num - this.width;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.width += diffWidth * p;
             this.geometry.setWidth(this.width);
             this.vertexCache.updated();
@@ -348,7 +468,7 @@ export class Square extends SimulationElement2d {
     setHeight(num, t = 0, f) {
         num *= devicePixelRatio;
         const diffHeight = num - this.height;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.height += diffHeight * p;
             this.geometry.setHeight(this.height);
             this.vertexCache.updated();
@@ -358,6 +478,8 @@ export class Square extends SimulationElement2d {
             this.vertexCache.updated();
         }, t, f);
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDeviceChange(_device) { }
 }
 export class Circle extends SimulationElement2d {
     geometry;
@@ -372,7 +494,7 @@ export class Circle extends SimulationElement2d {
     setRadius(num, t = 0, f) {
         num *= devicePixelRatio;
         const diff = num - this.radius;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.radius += diff * p;
             this.geometry.setRadius(this.radius);
             this.vertexCache.updated();
@@ -385,7 +507,7 @@ export class Circle extends SimulationElement2d {
     scale(amount, t = 0, f) {
         const finalRadius = this.radius * amount;
         const diff = finalRadius - this.radius;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.radius += diff * p;
             this.geometry.setRadius(this.radius);
             this.vertexCache.updated();
@@ -395,6 +517,8 @@ export class Circle extends SimulationElement2d {
             this.vertexCache.updated();
         }, t, f);
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDeviceChange(_device) { }
 }
 export class Polygon extends SimulationElement2d {
     geometry;
@@ -411,14 +535,13 @@ export class Polygon extends SimulationElement2d {
         const vertices = newVertices.map((vert) => {
             const newVertex = vert.clone();
             newVertex.setZ(0);
-            newVertex.setIs3d(false);
             return newVertex;
         });
-        const lastVert = this.vertices.length > 0 ? this.vertices[this.vertices.length - 1] : vertex(0, 0, 0, color(), false);
+        const lastVert = this.vertices.length > 0 ? this.vertices[this.vertices.length - 1] : vertex(0, 0, 0, color());
         if (vertices.length > this.vertices.length) {
             while (vertices.length > this.vertices.length) {
                 const lastPos = lastVert.getPos();
-                this.vertices.push(new Vertex(lastPos[0], lastPos[1], 0, lastVert.getColor() || this.color, false));
+                this.vertices.push(new Vertex(lastPos[0], lastPos[1], 0, lastVert.getColor() || this.color));
             }
         }
         const initialPositions = this.vertices.map((p) => cloneBuf(p.getPos()));
@@ -449,7 +572,7 @@ export class Polygon extends SimulationElement2d {
                 })
                 : [])
         ];
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.vertices.forEach((vert, i) => {
                 const posChange = cloneBuf(posChanges[i]);
                 const colorChange = cloneBuf(colorChanges[i]);
@@ -474,6 +597,8 @@ export class Polygon extends SimulationElement2d {
             this.vertexCache.updated();
         }, t, f);
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDeviceChange(_device) { }
 }
 export class Line3d extends SimulationElement3d {
     geometry;
@@ -493,7 +618,7 @@ export class Line3d extends SimulationElement3d {
     setEnd(pos, t = 0, f) {
         const diff = vector3();
         vec3.sub(pos, this.to, diff);
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.to[0] += diff[0] * p;
             this.to[1] += diff[1] * p;
             this.to[2] += diff[2] * p;
@@ -505,6 +630,8 @@ export class Line3d extends SimulationElement3d {
             this.vertexCache.updated();
         }, t, f);
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDeviceChange(_device) { }
 }
 export class Line2d extends SimulationElement2d {
     geometry;
@@ -526,7 +653,7 @@ export class Line2d extends SimulationElement2d {
         // vec2.sub(tempPos, this.getPos(), tempPos);
         const diff = vector3();
         vec2.sub(tempPos, this.to, diff);
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.to[0] += diff[0] * p;
             this.to[1] += diff[1] * p;
             this.vertexCache.updated();
@@ -536,24 +663,26 @@ export class Line2d extends SimulationElement2d {
             this.vertexCache.updated();
         }, t, f);
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDeviceChange(_device) { }
 }
 export class Cube extends SimulationElement3d {
     geometry;
     width;
     height;
     depth;
-    constructor(pos, width, height, depth, color, rotation) {
+    constructor(pos, width, height, depth, color, rotation = vector3()) {
         super(pos, rotation, color);
-        this.width = width * devicePixelRatio;
-        this.height = height * devicePixelRatio;
-        this.depth = depth * devicePixelRatio;
+        this.width = width;
+        this.height = height;
+        this.depth = depth;
         this.rotation = rotation || vector3();
         this.geometry = new CubeGeometry(this.width, this.height, this.depth);
     }
     setWidth(width, t = 0, f) {
         width *= devicePixelRatio;
         const diff = width - this.width;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.width += diff * p;
             this.geometry.setWidth(this.width);
             this.vertexCache.updated();
@@ -566,7 +695,7 @@ export class Cube extends SimulationElement3d {
     setHeight(height, t = 0, f) {
         height *= devicePixelRatio;
         const diff = height - this.width;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.height += diff * p;
             this.geometry.setHeight(this.height);
             this.vertexCache.updated();
@@ -579,7 +708,7 @@ export class Cube extends SimulationElement3d {
     setDepth(depth, t = 0, f) {
         depth *= devicePixelRatio;
         const diff = depth - this.width;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.depth += diff * p;
             this.geometry.setDepth(this.depth);
             this.vertexCache.updated();
@@ -596,7 +725,7 @@ export class Cube extends SimulationElement3d {
         const widthDiff = finalWidth - this.width;
         const heightDiff = finalHeight - this.height;
         const depthDiff = finalDepth - this.depth;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.width += widthDiff * p;
             this.height += heightDiff * p;
             this.depth += depthDiff * p;
@@ -614,6 +743,8 @@ export class Cube extends SimulationElement3d {
             this.vertexCache.updated();
         }, t, f);
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDeviceChange(_device) { }
 }
 export class BezierCurve2d {
     points;
@@ -786,7 +917,7 @@ export class Spline2d extends SimulationElement2d {
     }
     setInterpolateStart(start, t = 0, f) {
         const diff = start - this.interpolateStart;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.interpolateStart += diff * p;
             this.geometry.updateInterpolationStart(this.interpolateStart);
             this.vertexCache.updated();
@@ -798,7 +929,7 @@ export class Spline2d extends SimulationElement2d {
     }
     setInterpolateLimit(limit, t = 0, f) {
         const diff = limit - this.interpolateLimit;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.interpolateLimit += diff * p;
             this.geometry.updateInterpolationLimit(this.interpolateLimit);
             this.vertexCache.updated();
@@ -827,7 +958,7 @@ export class Spline2d extends SimulationElement2d {
     setThickness(thickness, t = 0, f) {
         thickness *= devicePixelRatio;
         const diff = thickness - this.thickness;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.thickness += diff * p;
             this.geometry.updateThickness(this.thickness);
             this.vertexCache.updated();
@@ -861,30 +992,26 @@ export class Spline2d extends SimulationElement2d {
         const [vec] = this.interpolateSlope(t);
         return vec;
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDeviceChange(_device) { }
 }
 export class Instance extends SimulationElement3d {
     geometry;
     obj;
     instanceMatrix;
     matrixBuffer;
-    device;
     baseMat;
+    isInstance = true;
     constructor(obj, numInstances) {
-        super(vector3());
-        this.device = null;
+        super(vector3(), vector3());
         this.matrixBuffer = null;
         obj.isInstanced = true;
         this.obj = obj;
         this.instanceMatrix = [];
-        this.is3d = Boolean(obj.is3d);
+        this.is3d = obj.is3d;
         this.geometry = new BlankGeometry();
         this.baseMat = matrix4();
-        if (typeof obj.getRotation() === 'number') {
-            mat4.rotateZ(this.baseMat, obj.getRotation(), this.baseMat);
-        }
-        else {
-            rotateMat4(this.baseMat, obj.getRotation());
-        }
+        rotateMat4(this.baseMat, obj.getRotation());
         for (let i = 0; i < numInstances; i++) {
             const clone = cloneBuf(this.baseMat);
             this.instanceMatrix.push(clone);
@@ -915,11 +1042,11 @@ export class Instance extends SimulationElement3d {
             return;
         this.instanceMatrix[instance] = transformation;
     }
-    mapBuffer() {
-        if (!this.device || this.matrixBuffer === null)
+    mapBuffer(device) {
+        if (this.matrixBuffer === null)
             return;
         const buf = new Float32Array(this.instanceMatrix.map((mat) => [...mat]).flat());
-        this.device.queue.writeBuffer(this.matrixBuffer, 0, buf.buffer, buf.byteOffset, buf.byteLength);
+        device.queue.writeBuffer(this.matrixBuffer, 0, buf.buffer, buf.byteOffset, buf.byteLength);
         this.matrixBuffer.unmap();
     }
     getInstances() {
@@ -930,14 +1057,14 @@ export class Instance extends SimulationElement3d {
     }
     getMatrixBuffer(device) {
         if (!this.matrixBuffer) {
-            const minSize = 640;
+            const minSize = 512;
             const size = Math.max(minSize, this.instanceMatrix[0].byteLength * this.instanceMatrix.length);
             this.matrixBuffer = device.createBuffer({
                 size,
                 usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
             });
         }
-        this.mapBuffer();
+        this.mapBuffer(device);
         return this.matrixBuffer;
     }
     getVertexCount() {
@@ -949,4 +1076,50 @@ export class Instance extends SimulationElement3d {
     getBuffer() {
         return this.obj.getBuffer();
     }
+    onDeviceChange(device) {
+        this.obj.propagateDevice(device);
+    }
+    getModelMatrix() {
+        return this.obj.getModelMatrix();
+    }
+}
+export class TraceLines2d extends SimulationElement2d {
+    geometry;
+    constructor(color, maxLen) {
+        super(vector2(), vector3(), color);
+        this.geometry = new TraceLinesGeometry(maxLen);
+    }
+    addPoint(point, color) {
+        const vert = vertex(point[0], point[1], point?.[2] || 0, color);
+        this.geometry.addVertex(vert);
+        this.vertexCache.updated();
+    }
+    // always being wireframe means that triangleOrder
+    // in in the geometry does not need to be a duplicate
+    // of wireframeOrder
+    isWireframe() {
+        return true;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDeviceChange(_) { }
+}
+export class TraceLines3d extends SimulationElement3d {
+    geometry;
+    constructor(color, maxLen) {
+        super(vector3(), vector3(), color);
+        this.geometry = new TraceLinesGeometry(maxLen);
+    }
+    addPoint(point, color) {
+        const vert = vertex(point[0], point[1], point?.[2] || 0, color);
+        this.geometry.addVertex(vert);
+        this.vertexCache.updated();
+    }
+    // always being wireframe means that triangleOrder
+    // in in the geometry does not need to be a duplicate
+    // of wireframeOrder
+    isWireframe() {
+        return true;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDeviceChange(_) { }
 }