simulationjsv2 0.7.3 → 0.8.0

package/dist/graphics.js

@@ -1,16 +1,23 @@
-import { vec3, mat4, vec2, vec4 } from 'wgpu-matrix';
-import { Vertex, cloneBuf, color, colorFromVector4, vector2, vector3, vertex, Color, vector2FromVector3, matrix4, vector3FromVector2, distance2d } from './utils.js';
+import { vec3, mat4, vec2 } from 'wgpu-matrix';
+import { cloneBuf, vector2, vector3, Color, vector2FromVector3, matrix4, vector3FromVector2, distance2d, color, interpolateColors } from './utils.js';
 import { BlankGeometry, CircleGeometry, CubeGeometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, Spline2dGeometry, SquareGeometry, TraceLines2dGeometry as TraceLinesGeometry } from './geometry.js';
-import { SimSceneObjInfo, VertexCache, bufferGenerator, globalInfo, internalTransitionValues, logger, posTo2dScreen, vector3ToPixelRatio } from './internalUtils.js';
+import { SimSceneObjInfo, Float32ArrayCache, internalTransitionValues, posTo2dScreen, vector3ToPixelRatio } from './internalUtils.js';
 import { mat4ByteLength, modelProjMatOffset } from './constants.js';
+import { MemoBuffer } from './buffers.js';
+import { globalInfo, logger, pipelineCache } from './globals.js';
+import { defaultShader, uniformBufferSize, vertexColorShader } from './shaders.js';
+import { BasicMaterial, VertexColorMaterial } from './materials.js';
 export class SimulationElement3d {
     children;
     uniformBuffer;
+    prevInfo;
+    pipeline;
+    shader;
+    material;
+    cullMode;
     parent;
     centerOffset;
-    rotationOffset;
     pos;
-    color;
     wireframe;
     vertexCache;
     rotation;
@@ -25,16 +32,18 @@ export class SimulationElement3d {
     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.vertexCache = new Float32ArrayCache();
         this.wireframe = false;
         this.rotation = cloneBuf(rotation);
-        this.uniformBuffer = null;
+        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 = 'back';
     }
     add(el, id) {
         el.setParent(this);
@@ -63,11 +72,20 @@ export class SimulationElement3d {
     getParent() {
         return this.parent;
     }
+    getCullMode() {
+        return this.cullMode;
+    }
+    setCullMode(mode) {
+        this.cullMode = mode;
+    }
     setCenterOffset(offset) {
         this.centerOffset = offset;
     }
-    setRotationOffset(offset) {
-        this.rotationOffset = offset;
+    getShader() {
+        return this.shader;
+    }
+    setShader(shader) {
+        this.shader = shader;
     }
     resetCenterOffset() {
         this.centerOffset[0] = 0;
@@ -78,23 +96,37 @@ export class SimulationElement3d {
         this.updateModelMatrix3d();
         return this.modelMatrix;
     }
-    getUniformBuffer(mat) {
+    isTransparent() {
+        return this.material.isTransparent();
+    }
+    setMaterial(material) {
+        this.material = material;
+    }
+    getObjectInfo() {
+        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);
+        return buffer;
+    }
+    getPipeline() {
         const device = globalInfo.errorGetDevice();
-        if (!this.uniformBuffer) {
-            const uniformBufferSize = 4 * 16 + 4 * 16 + 4 * 2 + 8; // 4x4 matrix + 4x4 matrix + vec2<f32> + 8 bc 144 is cool
-            this.uniformBuffer = device.createBuffer({
-                size: uniformBufferSize,
-                usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-            });
+        const objInfo = this.getObjectInfo();
+        if (!this.pipeline || !this.prevInfo || this.prevInfo !== objInfo) {
+            this.pipeline = pipelineCache.getPipeline(device, objInfo, this.shader);
+            this.prevInfo = objInfo;
         }
-        device.queue.writeBuffer(this.uniformBuffer, modelProjMatOffset, mat);
-        return this.uniformBuffer;
+        return this.pipeline;
     }
     mirrorParentTransforms3d(mat) {
         if (!this.parent)
             return;
         this.parent.mirrorParentTransforms3d(mat);
-        mat4.translate(mat, this.parent.getPos(), mat);
+        mat4.translate(mat, this.parent.getRelativePos(), mat);
         const parentRot = this.parent.getRotation();
         mat4.rotateZ(mat, parentRot[2], mat);
         mat4.rotateY(mat, parentRot[1], mat);
@@ -106,12 +138,9 @@ export class SimulationElement3d {
             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) {
@@ -135,11 +164,13 @@ export class SimulationElement3d {
         else {
             mat4.translate(this.modelMatrix, pos, this.modelMatrix);
         }
+        const negated = vec3.negate(this.centerOffset);
+        mat4.translate(this.modelMatrix, negated, this.modelMatrix);
         mat4.rotateZ(this.modelMatrix, this.rotation[2], this.modelMatrix);
         mat4.translate(this.modelMatrix, this.centerOffset, this.modelMatrix);
     }
-    getGeometryType() {
-        return this.geometry.getType();
+    getGeometryTopology() {
+        return this.geometry.getTopology();
     }
     setWireframe(wireframe) {
         this.wireframe = wireframe;
@@ -147,13 +178,13 @@ export class SimulationElement3d {
     isWireframe() {
         return this.wireframe;
     }
-    getColor() {
-        return this.color;
+    getMaterial() {
+        return this.material;
     }
-    getPos() {
+    getRelativePos() {
         return this.pos;
     }
-    getAbsolutePos() {
+    getPos() {
         const vec = vector3();
         this.updateModelMatrix3d();
         mat4.getTranslation(this.modelMatrix, vec);
@@ -166,16 +197,17 @@ export class SimulationElement3d {
         return this.centerOffset;
     }
     fill(newColor, t = 0, f) {
-        const diff = newColor.diff(this.color);
+        const materialColor = this.material.getColor();
+        const diff = newColor.diff(materialColor);
         const finalColor = newColor.clone();
         return internalTransitionValues((p) => {
-            this.color.r += diff.r * p;
-            this.color.g += diff.g * p;
-            this.color.b += diff.b * p;
-            this.color.a += diff.a * p;
+            materialColor.r += diff.r * p;
+            materialColor.g += diff.g * p;
+            materialColor.b += diff.b * p;
+            materialColor.a += diff.a * p;
             this.vertexCache.updated();
         }, () => {
-            this.color = finalColor;
+            this.material.setColor(finalColor);
             this.vertexCache.updated();
         }, t, f);
     }
@@ -253,38 +285,41 @@ export class SimulationElement3d {
         if (this.vertexCache.shouldUpdate()) {
             this.geometry.recompute();
         }
-        let childrenVertices = 0;
+        let vertexCount = this.geometry.getIndexes(this.isWireframe()).length;
         for (let i = 0; i < this.children.length; i++) {
-            childrenVertices += this.children[i].getObj().getVertexCount();
+            vertexCount += this.children[i].getObj().getVertexCount();
         }
-        let currentVertices = 0;
-        if (this.isWireframe()) {
-            currentVertices = this.geometry.getWireframeVertexCount();
-        }
-        else {
-            currentVertices = this.geometry.getTriangleVertexCount();
+        return vertexCount;
+    }
+    getIndexCount() {
+        let indexCount = this.geometry.getIndexes(this.isWireframe()).length;
+        for (let i = 0; i < this.children.length; i++) {
+            indexCount += this.children[i].getObj().getIndexCount();
         }
-        return currentVertices + childrenVertices;
+        return indexCount;
+    }
+    writeBuffers() {
+        this.shader.writeBuffers(this);
     }
-    getBuffer(vertexParamGenerator) {
+    getVertexBuffer() {
         if (this.vertexCache.shouldUpdate()) {
             this.geometry.recompute();
-            if (this.isInstanced) {
-                bufferGenerator.setInstancing(true);
+            const vertices = this.geometry.getVertices();
+            const stride = this.shader.getBufferLength();
+            const vertexBuffer = new Float32Array(vertices.length * stride);
+            const shader = this.isWireframe() ? defaultShader : this.shader;
+            for (let i = 0; i < vertices.length; i++) {
+                shader.setVertexInfo(this, vertexBuffer, vertices[i], i, i * stride);
             }
-            let resBuffer;
-            if (this.isWireframe()) {
-                resBuffer = this.geometry.getWireframeBuffer(this.color, vertexParamGenerator);
-            }
-            else {
-                resBuffer = this.geometry.getTriangleBuffer(this.color, vertexParamGenerator);
-            }
-            bufferGenerator.setInstancing(false);
-            this.vertexCache.setCache(resBuffer);
-            return resBuffer;
+            this.vertexCache.setCache(vertexBuffer);
+            return vertexBuffer;
         }
         return this.vertexCache.getCache();
     }
+    getIndexBuffer() {
+        const order = this.geometry.getIndexes(this.isWireframe());
+        return new Uint32Array(order);
+    }
 }
 export class EmptyElement extends SimulationElement3d {
     geometry = new BlankGeometry();
@@ -292,7 +327,7 @@ export class EmptyElement extends SimulationElement3d {
     isEmpty = true;
     constructor(label) {
         super(vector3(), vector3());
-        this.label = label || null;
+        this.label = label ?? null;
     }
     getLabel() {
         return this.label;
@@ -323,6 +358,7 @@ export class Plane extends SimulationElement3d {
         this.rotation = rotation;
         this.points = points;
         this.geometry = new PlaneGeometry(points);
+        this.cullMode = 'none';
     }
     setPoints(newPoints) {
         this.points = newPoints;
@@ -333,70 +369,21 @@ export class Square extends SimulationElement2d {
     geometry;
     width;
     height;
-    vertexColors;
     /**
      * @param centerOffset{Vector2} - A vector2 of values from 0 to 1
      * @param vertexColors{Record<number, Color>} - 0 is top left vertex, numbers increase clockwise
      */
-    constructor(pos, width, height, color, rotation, centerOffset, vertexColors) {
+    constructor(pos, width, height, color, rotation) {
         super(pos, vector3(0, 0, rotation), color);
-        this.width = width * devicePixelRatio;
-        this.height = height * devicePixelRatio;
-        this.vertexColors = this.cloneColorMap(vertexColors || {});
-        this.geometry = new SquareGeometry(this.width, this.height, centerOffset);
-        this.geometry.setVertexColorMap(this.vertexColors);
-    }
-    setOffset(offset) {
-        this.geometry.setOffset(offset);
-    }
-    setOffsetInplace(offset) {
-        const diff = vector3FromVector2(offset);
-        vec2.sub(diff, this.geometry.getOffset(), diff);
-        vec2.mul(diff, vector2(this.width / devicePixelRatio, -this.height / devicePixelRatio), diff);
-        this.setOffset(offset);
-        this.move(diff);
-    }
-    cloneColorMap(colorMap) {
-        const newColorMap = {};
-        Object.entries(colorMap).forEach(([key, value]) => {
-            newColorMap[+key] = value.clone();
-        });
-        return newColorMap;
-    }
-    setVertexColors(newColorMap, t = 0, f) {
-        const colorMap = this.cloneColorMap(newColorMap);
-        const diffMap = {};
-        Object.entries(colorMap).forEach(([key, value]) => {
-            if (!this.vertexColors[+key]) {
-                this.vertexColors[+key] = color();
-            }
-            diffMap[+key] = value.diff(this.vertexColors[+key] || color());
-        });
-        Object.entries(this.vertexColors).forEach(([key, value]) => {
-            if (!diffMap[+key]) {
-                const clone = value.clone();
-                clone.r *= -1;
-                clone.g *= -1;
-                clone.b *= -1;
-                diffMap[+key] = clone;
-            }
-        });
-        return internalTransitionValues((p) => {
-            Object.entries(diffMap).forEach(([key, value]) => {
-                const color = this.vertexColors[+key];
-                color.r += value.r * p;
-                color.g += value.g * p;
-                color.b += value.b * p;
-                color.a += value.a * p;
-                this.vertexColors[+key] = color;
-            });
-            this.geometry.setVertexColorMap(this.vertexColors);
-            this.vertexCache.updated();
-        }, () => {
-            this.vertexColors = colorMap;
-            this.geometry.setVertexColorMap(this.vertexColors);
-            this.vertexCache.updated();
-        }, t, f);
+        this.width = width;
+        this.height = height;
+        this.geometry = new SquareGeometry(this.width, this.height);
+    }
+    getWidth() {
+        return this.width;
+    }
+    getHeight() {
+        return this.height;
     }
     scaleWidth(amount, t = 0, f) {
         const finalWidth = this.width * amount;
@@ -509,78 +496,78 @@ export class Circle extends SimulationElement2d {
 }
 export class Polygon extends SimulationElement2d {
     geometry;
-    vertices;
-    constructor(pos, points, color, rotation) {
+    constructor(pos, vertices, color, rotation) {
         super(pos, vector3(0, 0, rotation), color);
-        this.vertices = points;
-        this.geometry = new PolygonGeometry(this.vertices);
+        const vectors = vertices.map((vert) => vert.getPos());
+        this.shader = vertexColorShader;
+        this.geometry = new PolygonGeometry(vectors);
+        this.material = new VertexColorMaterial();
+        if (color)
+            this.material.setColor(color);
+        const colors = vertices.map((vert) => vert.getColor() ?? this.material.getColor());
+        this.material.setVertexColors(colors);
     }
     getVertices() {
-        return this.vertices;
-    }
-    setVertices(newVertices, t = 0, f) {
-        const vertices = newVertices.map((vert) => {
-            const newVertex = vert.clone();
-            newVertex.setZ(0);
-            return newVertex;
+        return this.geometry.getVertices();
+    }
+    setVertices(vertices, t = 0, f) {
+        const newVertices = vertices.map((vert) => vert.getPos());
+        const newColors = vertices.map((vert) => vert.getColor() ?? this.material.getColor());
+        const oldColors = this.material.getVertexColors();
+        const oldVertices = this.getVertices();
+        const lastVert = oldVertices.length > 0 ? oldVertices[oldVertices.length - 1] : vector3();
+        const lastColor = oldColors.length > 0 ? oldColors[oldColors.length - 1] : this.material.getColor();
+        while (newVertices.length > oldVertices.length) {
+            oldVertices.push(cloneBuf(lastVert));
+            oldColors.push(lastColor.clone());
+        }
+        // at this point oldVertices length is assumed to be greater than or equal to newVertices length
+        const initialPositions = oldVertices.map((vert) => cloneBuf(vert));
+        const posChanges = newVertices.map((vert, i) => {
+            const vec = vector3();
+            vec3.sub(vert, oldVertices[i], vec);
+            return vec;
         });
-        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));
-            }
+        for (let i = newVertices.length; i < oldVertices.length; i++) {
+            const vec = cloneBuf(newVertices[newVertices.length - 1]);
+            vec3.sub(vec, oldVertices[i], vec);
+            posChanges.push(vec);
+        }
+        const initialColors = oldColors.map((oldColor) => oldColor.clone());
+        const colorChanges = newColors.map((currentColor, index) => currentColor.diff(oldColors[index]));
+        for (let i = newVertices.length; i < oldVertices.length; i++) {
+            colorChanges.push(newColors[newColors.length - 1].diff(oldColors[i]));
         }
-        const initialPositions = this.vertices.map((p) => cloneBuf(p.getPos()));
-        const posChanges = [
-            ...vertices.map((vert, i) => {
-                const vec = vector3();
-                vec3.sub(vert.getPos(), this.vertices[i].getPos(), vec);
-                return cloneBuf(vec);
-            }),
-            ...(this.vertices.length > vertices.length
-                ? this.vertices.slice(vertices.length, this.vertices.length).map((vert) => {
-                    const vec = cloneBuf(vertices[vertices.length - 1].getPos());
-                    vec3.sub(vec, vert.getPos(), vec);
-                    return vec;
-                })
-                : [])
-        ];
-        const initialColors = this.vertices.map((vert) => (vert.getColor() || this.color).toVec4());
-        const colorChanges = [
-            ...vertices.map((vert, i) => {
-                const diff = (vert.getColor() || this.color).diff(this.vertices[i].getColor() || this.color);
-                return diff.toVec4();
-            }),
-            ...(this.vertices.length > vertices.length
-                ? this.vertices.slice(vertices.length, this.vertices.length).map((vert) => {
-                    const toColor = vertices[vertices.length - 1].getColor();
-                    return (toColor || this.color).diff(vert.getColor() || this.color).toVec4();
-                })
-                : [])
-        ];
         return internalTransitionValues((p) => {
-            this.vertices.forEach((vert, i) => {
+            for (let i = 0; i < oldVertices.length; i++) {
+                const vert = oldVertices[i];
+                const currentColor = oldColors[i];
                 const posChange = cloneBuf(posChanges[i]);
-                const colorChange = cloneBuf(colorChanges[i]);
+                const colorChange = colorChanges[i].clone();
                 vec3.scale(posChange, p, posChange);
-                vec3.add(vert.getPos(), posChange, posChange);
-                vec4.scale(colorChange, p, colorChange);
-                vec4.add((vert.getColor() || this.color).toVec4(), colorChange, colorChange);
-                vert.setPos(posChange);
-                vert.setColor(colorFromVector4(colorChange));
-            });
+                vec3.add(vert, posChange, vert);
+                currentColor.r += colorChange.r * p;
+                currentColor.g += colorChange.g * p;
+                currentColor.b += colorChange.b * p;
+                currentColor.a += colorChange.a * p;
+            }
             this.vertexCache.updated();
         }, () => {
-            this.vertices.forEach((vert, i) => {
+            for (let i = 0; i < oldVertices.length; i++) {
+                const vert = oldVertices[i];
+                const currentColor = oldColors[i];
                 const initPos = initialPositions[i];
                 const initColor = initialColors[i];
                 vec3.add(initPos, posChanges[i], initPos);
-                vec4.add(initColor, colorChanges[i], initColor);
-                vert.setPos(initPos);
-                vert.setColor(colorFromVector4(initColor));
-            });
-            this.vertices.splice(vertices.length, this.vertices.length);
+                initColor.r += colorChanges[i].r;
+                initColor.g += colorChanges[i].g;
+                initColor.b += colorChanges[i].b;
+                initColor.a += colorChanges[i].a;
+                vert.set(initPos);
+                currentColor.setValues(initColor);
+            }
+            oldVertices.splice(newVertices.length, oldVertices.length);
+            oldColors.splice(newColors.length, oldColors.length);
             this.vertexCache.updated();
         }, t, f);
     }
@@ -590,12 +577,12 @@ export class Line3d extends SimulationElement3d {
     to;
     thickness;
     constructor(pos, to, thickness) {
-        super(pos.getPos(), vector3(), to.getColor() || undefined);
+        super(pos.getPos(), vector3(), to.getColor() ?? undefined);
         this.thickness = thickness;
         this.to = to.getPos();
         vec3.scale(this.to, devicePixelRatio, this.to);
         vec3.sub(this.to, this.pos, this.to);
-        this.geometry = new Line3dGeometry(this.pos, this.to, this.thickness, pos.getColor() || this.getColor(), to.getColor());
+        this.geometry = new Line3dGeometry(this.pos, this.to, this.thickness);
     }
     setStart(pos, t = 0, f) {
         return this.moveTo(pos, t, f);
@@ -621,11 +608,11 @@ export class Line2d extends SimulationElement2d {
     to;
     thickness;
     constructor(from, to, thickness = 1) {
-        super(vector2FromVector3(from.getPos()), vector3(), from.getColor() || undefined);
+        super(vector2FromVector3(from.getPos()), vector3(), from.getColor() ?? undefined);
         this.thickness = thickness * devicePixelRatio;
         this.to = to.getPos();
         vec2.sub(this.to, this.pos, this.to);
-        this.geometry = new Line2dGeometry(this.pos, this.to, this.thickness, from.getColor() || this.getColor(), to.getColor());
+        this.geometry = new Line2dGeometry(this.pos, this.to, this.thickness);
     }
     setStart(pos, t = 0, f) {
         return this.moveTo(pos, t, f);
@@ -792,7 +779,7 @@ export class CubicBezierCurve2d extends BezierCurve2d {
     constructor(points, detail, colors) {
         super(points);
         this.detail = detail;
-        this.colors = colors || [];
+        this.colors = colors ?? [];
     }
     getDetail() {
         return this.detail;
@@ -836,7 +823,7 @@ export class SplinePoint2d {
         if (prevColor) {
             colors[0] = prevColor;
         }
-        else if (this.start && this.start.getColor()) {
+        else if (this.start?.getColor()) {
             colors[0] = this.start.getColor();
         }
         if (this.end.getColor()) {
@@ -848,7 +835,7 @@ export class SplinePoint2d {
         return colors;
     }
     getVectorArray(prevEnd, prevControl) {
-        const firstControl = cloneBuf(this.control1 || prevControl || vector2());
+        const firstControl = cloneBuf(this.control1 ?? prevControl ?? vector2());
         if (prevEnd) {
             vec2.add(firstControl, prevEnd, firstControl);
         }
@@ -875,15 +862,55 @@ export class Spline2d extends SimulationElement2d {
     length;
     constructor(pos, points, thickness = devicePixelRatio, detail = 40) {
         const tempPos = vector2FromVector3(pos.getPos());
-        super(tempPos, vector3(), pos.getColor() || undefined);
+        super(tempPos, vector3(), pos.getColor() ?? undefined);
         this.thickness = thickness * devicePixelRatio;
         this.detail = detail;
         this.interpolateStart = 0;
         this.interpolateLimit = 1;
         this.length = 0;
-        this.geometry = new Spline2dGeometry(points, this.getColor(), this.thickness, this.detail);
+        this.geometry = new Spline2dGeometry(points, this.thickness, this.detail);
+        this.material = new VertexColorMaterial();
+        this.material.setColor(pos.getColor() ?? color());
+        this.setVertexColors();
+        this.shader = vertexColorShader;
         this.estimateLength();
     }
+    setVertexColors() {
+        const numVertices = this.geometry.getVertices().length;
+        const curves = this.geometry.getCurves();
+        const curveVertexIndices = this.geometry.getCurveVertexIndices();
+        const vertexInterpolations = this.geometry.getVertexInterpolations();
+        const colorArray = Array(numVertices);
+        let currentCurveIndex = 0;
+        for (let i = 0; i < numVertices / 2; i++) {
+            if (i >= curveVertexIndices[currentCurveIndex])
+                currentCurveIndex++;
+            const curveColors = curves[currentCurveIndex]
+                .getColors()
+                .map((item) => item ?? this.material.getColor());
+            const vertexColor = interpolateColors(curveColors, vertexInterpolations[i]);
+            colorArray[i] = vertexColor;
+            colorArray[numVertices - i - 1] = vertexColor;
+        }
+        this.material.setVertexColors(colorArray);
+    }
+    getVertexBuffer() {
+        if (this.vertexCache.shouldUpdate()) {
+            this.setVertexColors();
+        }
+        return super.getVertexBuffer();
+    }
+    isTransparent() {
+        const curves = this.geometry.getCurves();
+        for (let i = 0; i < curves.length; i++) {
+            const colors = curves[i].getColors();
+            for (let j = 0; j < colors.length; j++) {
+                if (colors[j]?.isTransparent())
+                    return true;
+            }
+        }
+        return false;
+    }
     estimateLength() {
         this.length = 0;
         const curves = this.geometry.getCurves();
@@ -925,9 +952,9 @@ export class Spline2d extends SimulationElement2d {
     }
     updatePointAbsolute(pointIndex, newPoint) {
         const clonePoint = newPoint.clone();
-        const start = clonePoint.getStart()?.getPos() || vector3();
+        const start = clonePoint.getStart()?.getPos() ?? vector3();
         const end = clonePoint.getEnd().getPos();
-        const pos = this.getPos();
+        const pos = this.getRelativePos();
         vec3.sub(start, pos, start);
         vec3.sub(end, pos, end);
         this.geometry.updatePoint(pointIndex, clonePoint);
@@ -985,7 +1012,7 @@ export class Instance extends SimulationElement3d {
         super(vector3(), vector3());
         // 32 matrices
         this.maxInstances = 32;
-        this.matrixBuffer = null;
+        this.matrixBuffer = new MemoBuffer(GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST, this.maxInstances * mat4ByteLength);
         obj.isInstanced = true;
         this.obj = obj;
         this.instanceMatrix = [];
@@ -998,12 +1025,12 @@ export class Instance extends SimulationElement3d {
             this.instanceMatrix.push(clone);
         }
     }
-    setNumInstances(numInstances) {
+    setNumInstances(numInstances, forceResizeBuffer = false) {
         if (numInstances < 0)
             throw logger.error('Num instances is less than 0');
-        if (numInstances > this.maxInstances) {
+        if (numInstances > this.maxInstances || forceResizeBuffer) {
             this.maxInstances = numInstances;
-            this.allocBuffer(numInstances);
+            this.matrixBuffer.setSize(numInstances * mat4ByteLength);
         }
         const oldLen = this.instanceMatrix.length;
         if (numInstances < oldLen) {
@@ -1029,37 +1056,23 @@ export class Instance extends SimulationElement3d {
         const device = globalInfo.getDevice();
         if (!device)
             return;
-        if (!this.matrixBuffer) {
-            const minSize = this.maxInstances * mat4ByteLength;
-            const size = Math.max(minSize, this.instanceMatrix.length);
-            this.allocBuffer(size);
-        }
+        // this.allocBuffer(size);
+        const gpuBuffer = this.matrixBuffer.getBuffer();
         const buf = new Float32Array(transformation);
-        device.queue.writeBuffer(this.matrixBuffer, instance * mat4ByteLength, buf.buffer, buf.byteOffset, buf.byteLength);
-        this.matrixBuffer.unmap();
-    }
-    allocBuffer(size) {
-        const device = globalInfo.getDevice();
-        if (!device)
-            return;
-        const byteSize = size * mat4ByteLength;
-        this.matrixBuffer = device.createBuffer({
-            size: byteSize,
-            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-        });
+        device.queue.writeBuffer(gpuBuffer, instance * mat4ByteLength, buf.buffer, buf.byteOffset, buf.byteLength);
+        gpuBuffer.unmap();
     }
     mapBuffer() {
         const device = globalInfo.getDevice();
         if (!device)
             return;
-        if (!this.matrixBuffer) {
-            const minSize = this.maxInstances * mat4ByteLength;
-            const size = Math.max(minSize, this.instanceMatrix.length);
-            this.allocBuffer(size);
-        }
+        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(this.matrixBuffer, 0, buf.buffer, buf.byteOffset, buf.byteLength);
-        this.matrixBuffer.unmap();
+        device.queue.writeBuffer(gpuBuffer, 0, buf.buffer, buf.byteOffset, buf.byteLength);
+        gpuBuffer.unmap();
         this.hasMapped = true;
     }
     getInstances() {
@@ -1068,20 +1081,26 @@ export class Instance extends SimulationElement3d {
     getNumInstances() {
         return this.instanceMatrix.length;
     }
-    getMatrixBuffer() {
+    getInstanceBuffer() {
         if (!this.hasMapped) {
             this.mapBuffer();
         }
-        return this.matrixBuffer;
+        return this.matrixBuffer.getBuffer();
     }
     getVertexCount() {
         return this.obj.getVertexCount();
     }
-    getGeometryType() {
-        return this.obj.getGeometryType();
+    getIndexCount() {
+        return this.obj.getIndexCount();
+    }
+    getGeometryTopology() {
+        return this.obj.getGeometryTopology();
+    }
+    getVertexBuffer() {
+        return this.obj.getVertexBuffer();
     }
-    getBuffer() {
-        return this.obj.getBuffer();
+    getIndexBuffer() {
+        return this.obj.getIndexBuffer();
     }
     getModelMatrix() {
         return this.obj.getModelMatrix();
@@ -1093,9 +1112,11 @@ export class TraceLines2d extends SimulationElement2d {
         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);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    addPoint(vert, _color) {
+        const newVert = vert.length < 3 ? vector3(vert[0] ?? 0, vert[1] ?? 0, 0) : vert;
+        // const vert = vertex(point[0], point[1], point?.[2] || 0, color);
+        this.geometry.addVertex(newVert);
         this.vertexCache.updated();
     }
     // always being wireframe means that triangleOrder
@@ -1111,9 +1132,11 @@ export class TraceLines3d extends SimulationElement3d {
         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);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    addPoint(vert, _color) {
+        // const vert = vertex(point[0], point[1], point?.[2] || 0, color);
+        const newVert = vert.length < 3 ? vector3(vert[0] ?? 0, vert[1] ?? 0, 0) : vert;
+        this.geometry.addVertex(newVert);
         this.vertexCache.updated();
     }
     // always being wireframe means that triangleOrder