simulationjsv2 0.9.0 → 0.10.2

package/TODO.md

@@ -1,5 +1,9 @@
 # TODO
 
+- [ ] Materials for planes
+- [ ] Transform vertex colors on material
+- [x] Morph objects into other objects
+  - [x] `transform` function taking another object and transitioning from current geometry's vertices (positions only)
 - [x] Change render vertices to use index buffer
 - [x] Add cull modes
 - [x] Fix shaders

package/dist/geometry.d.ts

@@ -1,26 +1,34 @@
-import { CircleGeometryParams, CubeGeometryParams, EmptyParams, Spline2dGeometryParams, SquareGeometryParams, Vector3, LineGeometryParams, TraceLinesParams } from './types.js';
-import { Vertex } from './utils.js';
+import { CircleGeometryParams, CubeGeometryParams, EmptyParams, Spline2dGeometryParams, SquareGeometryParams, Vector3, LineGeometryParams, TraceLinesParams, LerpFunc } from './types.js';
 import { CubicBezierCurve2d, SplinePoint2d } from './graphics.js';
 export declare abstract class Geometry<T extends EmptyParams> {
-    protected abstract wireframeOrder: number[];
-    protected abstract triangleOrder: number[];
+    private subdivision;
+    private subdivisionVertexLimit;
+    private fromVertices;
+    private currentInterpolate;
+    private updated;
+    protected wireframeOrder: number[];
+    protected triangleOrder: number[];
     protected abstract params: T;
     protected vertices: Vector3[];
     protected topology: 'list' | 'strip';
-    constructor(vertices?: Vector3[], geometryType?: 'list' | 'strip');
+    constructor(geometryType?: 'list' | 'strip');
     getTopology(): "list" | "strip";
-    abstract recompute(): void;
+    computeVertices(): void;
+    compute(): void;
+    triangulate(): void;
+    setSubdivisions(num: number, vertexLimit?: number): void;
+    clearSubdivisions(): void;
+    setSubdivisionVertexLimit(limit: number): void;
+    clearSubdivisionVertexLimit(): void;
+    animateFrom(fromVertices: Vector3[], t: number, f?: LerpFunc): Promise<void>;
     getIndexes(wireframe: boolean): number[];
     getVertices(): Vector3[];
+    hasUpdated(): boolean;
 }
 export declare class PlaneGeometry extends Geometry<EmptyParams> {
     protected params: {};
-    protected wireframeOrder: number[];
-    protected triangleOrder: number[];
-    private rawVertices;
-    constructor(vertices: Vertex[]);
-    recompute(): void;
-    updateVertices(vertices: Vertex[]): void;
+    constructor(vertices: Vector3[]);
+    updateVertices(vertices: Vector3[]): void;
 }
 export declare class CubeGeometry extends Geometry<CubeGeometryParams> {
     protected params: CubeGeometryParams;
@@ -30,7 +38,7 @@ export declare class CubeGeometry extends Geometry<CubeGeometryParams> {
     setWidth(width: number): void;
     setHeight(height: number): void;
     setDepth(depth: number): void;
-    recompute(): void;
+    computeVertices(): void;
     updateSize(width: number, height: number, depth: number): void;
 }
 export declare class SquareGeometry extends Geometry<SquareGeometryParams> {
@@ -40,26 +48,24 @@ export declare class SquareGeometry extends Geometry<SquareGeometryParams> {
     constructor(width: number, height: number);
     setWidth(width: number): void;
     setHeight(height: number): void;
-    recompute(): void;
+    computeVertices(): void;
 }
 export declare class BlankGeometry extends Geometry<EmptyParams> {
-    protected wireframeOrder: never[];
-    protected triangleOrder: never[];
     protected params: {};
     constructor();
-    recompute(): void;
 }
 export declare class CircleGeometry extends Geometry<CircleGeometryParams> {
-    protected wireframeOrder: number[];
-    protected triangleOrder: number[];
     protected params: CircleGeometryParams;
     constructor(radius: number, detail: number);
+    setDetail(detail: number): void;
+    getDetail(): number;
     setRadius(radius: number): void;
-    recompute(): void;
+    getRadius(): number;
+    computeVertices(): void;
+}
+export declare class OutlineCircleGeometry {
 }
 export declare class Spline2dGeometry extends Geometry<Spline2dGeometryParams> {
-    protected wireframeOrder: number[];
-    protected triangleOrder: number[];
     protected params: Spline2dGeometryParams;
     constructor(points: SplinePoint2d[], thickness: number, detail: number);
     updateInterpolationStart(start: number): void;
@@ -73,35 +79,31 @@ export declare class Spline2dGeometry extends Geometry<Spline2dGeometryParams> {
     getVertexInterpolations(): number[];
     getCurveVertexIndices(): number[];
     private computeCurves;
-    recompute(): void;
+    computeVertices(): void;
 }
 export declare class Line2dGeometry extends Geometry<LineGeometryParams> {
     protected wireframeOrder: number[];
     protected triangleOrder: number[];
     protected params: LineGeometryParams;
     constructor(pos: Vector3, to: Vector3, thickness: number);
-    recompute(): void;
+    computeVertices(): void;
 }
 export declare class Line3dGeometry extends Geometry<LineGeometryParams> {
     protected wireframeOrder: number[];
     protected triangleOrder: number[];
     protected params: LineGeometryParams;
     constructor(pos: Vector3, to: Vector3, thickness: number);
-    recompute(): void;
+    computeVertices(): void;
 }
 export declare class PolygonGeometry extends Geometry<EmptyParams> {
-    protected wireframeOrder: number[];
-    protected triangleOrder: number[];
     protected params: {};
     constructor(vertices: Vector3[]);
-    recompute(): void;
+    computeVertices(): void;
 }
-export declare class TraceLines2dGeometry extends Geometry<TraceLinesParams> {
-    protected wireframeOrder: number[];
-    protected triangleOrder: never[];
+export declare class TraceLinesGeometry extends Geometry<TraceLinesParams> {
     protected params: TraceLinesParams;
     constructor(maxLen?: number);
-    recompute(): void;
+    triangulate(): void;
     getVertexCount(): number;
     getOrder(_: boolean): readonly [Vector3[], number[]];
     addVertex(vert: Vector3): void;

package/dist/geometry.js

@@ -1,42 +1,150 @@
 import { mat4, vec2, vec3 } from 'wgpu-matrix';
-import { cloneBuf, matrix4, vector2, vector2FromVector3, vector3, vector3FromVector2 } from './utils.js';
+import { cloneBuf, cloneVectors, matrix4, transitionValues, vector2, vector2FromVector3, vector3, vector3FromVector2 } from './utils.js';
 import { CubicBezierCurve2d } from './graphics.js';
 import { createIndexArray, lossyTriangulate, lossyTriangulateStrip, triangulateWireFrameOrder } from './internalUtils.js';
 export class Geometry {
+    subdivision = 0;
+    subdivisionVertexLimit = null;
+    // null if not animating, assumed to be at least the length of vertices
+    fromVertices = null;
+    currentInterpolate = 0; // stops animating after 1
+    updated;
+    wireframeOrder;
+    triangleOrder;
     vertices;
     topology;
-    constructor(vertices = [], geometryType = 'list') {
-        this.vertices = vertices;
+    constructor(geometryType = 'list') {
+        this.vertices = [];
         this.topology = geometryType;
+        this.updated = true;
+        this.wireframeOrder = [];
+        this.triangleOrder = [];
     }
     getTopology() {
         return this.topology;
     }
+    computeVertices() { }
+    compute() {
+        this.computeVertices();
+        this.updated = false;
+        // handle subdivisions
+        let initialVertices = [...this.vertices];
+        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)
+                    break outer;
+                const vert = initialVertices[j];
+                const nextVert = initialVertices[j + 1];
+                const newVert = cloneBuf(nextVert);
+                vec3.add(newVert, vert, newVert);
+                vec3.divScalar(newVert, 2, newVert);
+                this.vertices.splice(j * 2 + 1, 0, newVert);
+            }
+            if (initialLength >= 2) {
+                const first = initialVertices[0];
+                const last = initialVertices[initialVertices.length - 1];
+                const newVert = cloneBuf(first);
+                vec3.add(newVert, last, newVert);
+                vec3.divScalar(newVert, 2, newVert);
+                this.vertices.push(newVert);
+            }
+            initialVertices = [...this.vertices];
+        }
+        // handle animation
+        if (this.fromVertices) {
+            const initialFrom = cloneVectors(this.fromVertices);
+            const changes = [];
+            for (let i = 0; i < this.vertices.length; i++) {
+                const from = initialFrom[i];
+                const to = this.vertices[i];
+                const diff = cloneBuf(to);
+                vec3.sub(diff, from, diff);
+                changes.push(diff);
+            }
+            for (let i = this.vertices.length; i < initialFrom.length; i++) {
+                const from = initialFrom[i];
+                const to = this.vertices[this.vertices.length - 1];
+                const diff = cloneBuf(to);
+                vec3.sub(diff, from, diff);
+                changes.push(diff);
+            }
+            for (let i = 0; i < initialFrom.length; i++) {
+                const diff = changes[i];
+                vec3.mulScalar(diff, this.currentInterpolate, diff);
+                vec3.add(initialFrom[i], diff, initialFrom[i]);
+            }
+            this.vertices = initialFrom;
+        }
+        if (this.fromVertices || this.subdivision > 0)
+            this.triangulate();
+    }
+    triangulate() {
+        this.wireframeOrder = triangulateWireFrameOrder(this.vertices.length);
+        const indexArray = createIndexArray(this.vertices.length);
+        if (this.topology === 'list') {
+            this.triangleOrder = lossyTriangulate(indexArray).flat();
+        }
+        else {
+            this.triangleOrder = lossyTriangulateStrip(indexArray);
+        }
+    }
+    setSubdivisions(num, vertexLimit) {
+        if (num >= 0) {
+            this.subdivision = num;
+            if (vertexLimit)
+                this.subdivisionVertexLimit = vertexLimit;
+        }
+    }
+    clearSubdivisions() {
+        this.subdivision = 0;
+        this.clearSubdivisionVertexLimit();
+    }
+    setSubdivisionVertexLimit(limit) {
+        this.subdivisionVertexLimit = limit;
+    }
+    clearSubdivisionVertexLimit() {
+        this.subdivisionVertexLimit = null;
+    }
+    animateFrom(fromVertices, t, f) {
+        this.fromVertices = fromVertices;
+        // ensure at least the length of vertices
+        if (fromVertices.length < this.vertices.length) {
+            const initialLen = fromVertices.length;
+            for (let i = 0; i < this.vertices.length - initialLen; i++) {
+                const last = cloneBuf(fromVertices[fromVertices.length - 1]);
+                this.fromVertices.push(last);
+            }
+        }
+        return transitionValues((p) => {
+            this.currentInterpolate += p;
+            this.updated = true;
+        }, () => {
+            this.currentInterpolate = 0;
+            this.fromVertices = null;
+            this.updated = true;
+        }, t, f);
+    }
     getIndexes(wireframe) {
         return wireframe ? this.wireframeOrder : this.triangleOrder;
     }
     getVertices() {
         return this.vertices;
     }
+    hasUpdated() {
+        return this.updated;
+    }
 }
 export class PlaneGeometry extends Geometry {
     params = {};
-    wireframeOrder;
-    triangleOrder;
-    rawVertices;
     constructor(vertices) {
-        super([], 'strip');
-        this.wireframeOrder = [];
-        this.triangleOrder = [];
-        this.rawVertices = vertices;
-        this.updateVertices(vertices);
+        super('strip');
+        this.vertices = vertices;
+        this.triangulate();
     }
-    recompute() { }
     updateVertices(vertices) {
-        this.rawVertices = vertices;
-        this.vertices = vertices.map((vertex) => vertex.getPos());
-        this.wireframeOrder = triangulateWireFrameOrder(this.vertices.length);
-        this.triangleOrder = lossyTriangulateStrip(createIndexArray(this.rawVertices.length));
+        this.vertices = vertices;
+        this.triangulate();
     }
 }
 export class CubeGeometry extends Geometry {
@@ -58,7 +166,7 @@ export class CubeGeometry extends Geometry {
             height,
             depth
         };
-        this.recompute();
+        this.computeVertices();
     }
     setWidth(width) {
         this.params.width = width;
@@ -69,7 +177,7 @@ export class CubeGeometry extends Geometry {
     setDepth(depth) {
         this.params.depth = depth;
     }
-    recompute() {
+    computeVertices() {
         const { width, height, depth } = this.params;
         this.vertices = [
             // front face
@@ -95,12 +203,12 @@ export class SquareGeometry extends Geometry {
     triangleOrder = [0, 3, 1, 2];
     params;
     constructor(width, height) {
-        super([], 'strip');
+        super('strip');
         this.params = {
             width,
             height
         };
-        this.recompute();
+        this.computeVertices();
     }
     setWidth(width) {
         this.params.width = width;
@@ -108,7 +216,7 @@ export class SquareGeometry extends Geometry {
     setHeight(height) {
         this.params.height = height;
     }
-    recompute() {
+    computeVertices() {
         this.vertices = [
             vector3(-this.params.width / 2, this.params.height / 2),
             vector3(this.params.width / 2, this.params.height / 2),
@@ -118,51 +226,50 @@ export class SquareGeometry extends Geometry {
     }
 }
 export class BlankGeometry extends Geometry {
-    wireframeOrder = [];
-    triangleOrder = [];
     params = {};
     constructor() {
         super();
     }
-    recompute() { }
 }
 export class CircleGeometry extends Geometry {
-    wireframeOrder;
-    triangleOrder;
     params;
     constructor(radius, detail) {
-        super([], 'strip');
-        this.wireframeOrder = [];
-        this.triangleOrder = [];
+        super('strip');
         this.params = { radius, detail };
-        this.recompute();
+        this.computeVertices();
+    }
+    setDetail(detail) {
+        this.params.detail = detail;
+    }
+    getDetail() {
+        return this.params.detail;
     }
     setRadius(radius) {
         this.params.radius = radius;
     }
-    recompute() {
+    getRadius() {
+        return this.params.radius;
+    }
+    computeVertices() {
         const vertices = [];
         const rotationInc = (Math.PI * 2) / this.params.detail;
         for (let i = 0; i < this.params.detail; i++) {
             const mat = matrix4();
-            mat4.rotateZ(mat, rotationInc * i, mat);
+            mat4.rotateZ(mat, -rotationInc * i + Math.PI / 2, mat);
             const vec = vector3(this.params.radius);
             vec3.transformMat4(vec, mat, vec);
             vertices.push(vector3(vec[0], vec[1], vec[2]));
         }
         this.vertices = vertices;
-        this.triangleOrder = lossyTriangulate(createIndexArray(this.vertices.length)).flat();
-        this.wireframeOrder = triangulateWireFrameOrder(this.vertices.length);
+        this.triangulate();
     }
 }
+export class OutlineCircleGeometry {
+}
 export class Spline2dGeometry extends Geometry {
-    wireframeOrder;
-    triangleOrder;
     params;
     constructor(points, thickness, detail) {
-        super([], 'strip');
-        this.wireframeOrder = [];
-        this.triangleOrder = [];
+        super('strip');
         this.params = {
             points: points,
             curves: [],
@@ -175,7 +282,7 @@ export class Spline2dGeometry extends Geometry {
             curveVertexIndices: []
         };
         this.computeCurves();
-        this.recompute();
+        this.computeVertices();
     }
     updateInterpolationStart(start) {
         this.params.interpolateStart = Math.min(1, Math.max(0, start));
@@ -238,7 +345,7 @@ export class Spline2dGeometry extends Geometry {
             this.params.curves.push(curve);
         }
     }
-    recompute() {
+    computeVertices() {
         this.vertices = [];
         this.params.vertexInterpolations = [];
         this.params.curveVertexIndices = [];
@@ -291,8 +398,7 @@ export class Spline2dGeometry extends Geometry {
             }
         }
         this.vertices = verticesTop.concat(verticesBottom);
-        this.triangleOrder = lossyTriangulateStrip(createIndexArray(this.vertices.length));
-        this.wireframeOrder = triangulateWireFrameOrder(this.vertices.length);
+        this.triangulate();
     }
 }
 export class Line2dGeometry extends Geometry {
@@ -300,14 +406,14 @@ export class Line2dGeometry extends Geometry {
     triangleOrder = [0, 3, 1, 2];
     params;
     constructor(pos, to, thickness) {
-        super([], 'strip');
+        super('strip');
         this.params = {
             pos,
             to,
             thickness
         };
     }
-    recompute() {
+    computeVertices() {
         const normal = vector2(-this.params.to[1], this.params.to[0]);
         vec2.normalize(normal, normal);
         vec2.scale(normal, this.params.thickness, normal);
@@ -324,14 +430,14 @@ export class Line3dGeometry extends Geometry {
     triangleOrder = [0, 3, 1, 2];
     params;
     constructor(pos, to, thickness) {
-        super([], 'strip');
+        super('strip');
         this.params = {
             pos,
             to,
             thickness
         };
     }
-    recompute() {
+    computeVertices() {
         const normal = vector2(-this.params.to[1], this.params.to[0]);
         vec2.normalize(normal, normal);
         vec2.scale(normal, this.params.thickness / 2, normal);
@@ -344,32 +450,25 @@ export class Line3dGeometry extends Geometry {
     }
 }
 export class PolygonGeometry extends Geometry {
-    wireframeOrder;
-    triangleOrder;
     params = {};
     constructor(vertices) {
-        super([], 'strip');
-        this.wireframeOrder = [];
-        this.triangleOrder = [];
+        super('strip');
         this.vertices = vertices;
-        this.recompute();
+        this.computeVertices();
     }
-    recompute() {
-        this.triangleOrder = lossyTriangulateStrip(createIndexArray(this.vertices.length));
-        this.wireframeOrder = triangulateWireFrameOrder(this.vertices.length);
+    computeVertices() {
+        this.triangulate();
     }
 }
-export class TraceLines2dGeometry extends Geometry {
-    wireframeOrder = [];
-    triangleOrder = [];
+export class TraceLinesGeometry extends Geometry {
     params;
     constructor(maxLen) {
-        super([], 'strip');
+        super('strip');
         this.params = {
             maxLength: maxLen ?? null
         };
     }
-    recompute() { }
+    triangulate() { }
     getVertexCount() {
         return this.vertices.length;
     }

package/dist/globals.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="@webgpu/types" />
 import { Shader } from './shaders.js';
+import { Simulation } from './simulation.js';
+import { Color } from './utils.js';
 declare class Logger {
     constructor();
     private fmt;
@@ -10,8 +12,15 @@ declare class Logger {
 }
 export declare const logger: Logger;
 export declare class GlobalInfo {
+    private canvas;
     private device;
+    private defaultColor;
     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;

package/dist/globals.js

@@ -1,4 +1,5 @@
 import { createPipeline } from './internalUtils.js';
+import { color } from './utils.js';
 class Logger {
     constructor() { }
     fmt(msg) {
@@ -19,9 +20,30 @@ class Logger {
 }
 export const logger = new Logger();
 export class GlobalInfo {
+    canvas;
     device;
+    defaultColor;
     constructor() {
+        this.canvas = null;
         this.device = null;
+        this.defaultColor = null;
+    }
+    setDefaultColor(color) {
+        this.defaultColor = color;
+    }
+    getDefaultColor() {
+        return this.defaultColor?.clone() ?? color();
+    }
+    setCanvas(canvas) {
+        this.canvas = canvas;
+    }
+    errorGetCanvas() {
+        if (!this.canvas)
+            throw logger.error('Canvas is null');
+        return this.canvas;
+    }
+    getCanvas() {
+        return this.canvas;
     }
     setDevice(device) {
         this.device = device;

package/dist/graphics.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="@webgpu/types" />
 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, TraceLines2dGeometry as TraceLinesGeometry } from './geometry.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 { Material } from './materials.js';
@@ -41,6 +41,11 @@ export declare abstract class SimulationElement3d {
     getParent(): SimulationElement3d | null;
     getCullMode(): GPUCullMode;
     setCullMode(mode: GPUCullMode): void;
+    subDivideTo(limit: number): void;
+    setSubdivisions(divisions: number, vertexLimit?: number): void;
+    clearSubdivisions(): void;
+    setSubdivisionVertexLimit(limit: number): void;
+    clearSubdivisionVertexLimit(): void;
     setCenterOffset(offset: Vector3): void;
     getShader(): Shader;
     setShader(shader: Shader): void;
@@ -59,6 +64,8 @@ export declare abstract class SimulationElement3d {
     setWireframe(wireframe: boolean): void;
     isWireframe(): boolean;
     getMaterial(): Material;
+    getGeometry(): Geometry<object>;
+    getVertices(): Vector3[];
     getRelativePos(): Vector3;
     getPos(): Vector3;
     getRotation(): Vector3;
@@ -69,7 +76,9 @@ export declare abstract class SimulationElement3d {
     rotateChildren(angle: Vector3): void;
     rotate(amount: Vector3, t?: number, f?: LerpFunc): Promise<void>;
     rotateTo(rot: Vector3, t?: number, f?: LerpFunc): Promise<void>;
+    animateVerticesFrom(vertices: Vector3[], t: number, f?: LerpFunc): Promise<void>;
     getVertexCount(): number;
+    getTreeVertexCount(): number;
     getIndexCount(): number;
     writeBuffers(): void;
     getVertexBuffer(): Float32Array;
@@ -114,12 +123,14 @@ export declare class Square extends SimulationElement2d {
 }
 export declare class Circle extends SimulationElement2d {
     protected geometry: CircleGeometry;
-    private radius;
-    private detail;
     constructor(pos: Vector2, radius: number, color?: Color, detail?: number);
+    setDetail(detail: number): void;
     setRadius(num: number, t?: number, f?: LerpFunc): Promise<void>;
     scale(amount: number, t?: number, f?: LerpFunc): Promise<void>;
 }
+export declare class OutlineCircle extends Circle {
+    constructor(pos: Vector2, radius: number, color?: Color, detail?: number);
+}
 export declare class Polygon extends SimulationElement2d {
     protected geometry: PolygonGeometry;
     constructor(pos: Vector2, vertices: Vertex[], color?: Color, rotation?: number);
@@ -224,7 +235,7 @@ export declare class Instance<T extends SimulationElement3d> extends SimulationE
     getInstances(): Mat4[];
     getNumInstances(): number;
     getInstanceBuffer(): GPUBuffer;
-    getVertexCount(): number;
+    getTreeVertexCount(): number;
     getIndexCount(): number;
     getGeometryTopology(): "list" | "strip";
     getVertexBuffer(): Float32Array;

package/dist/graphics.js

@@ -1,6 +1,6 @@
 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 { 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';
@@ -27,7 +27,7 @@ export class SimulationElement3d {
     isInstanced = false;
     is3d = true;
     isEmpty = false;
-    constructor(pos, rotation, color = new Color()) {
+    constructor(pos, rotation, color = globalInfo.getDefaultColor()) {
         this.pos = pos;
         this.centerOffset = vector3();
         this.vertexCache = new Float32ArrayCache();
@@ -41,7 +41,7 @@ export class SimulationElement3d {
         this.prevInfo = null;
         this.shader = defaultShader;
         this.material = new BasicMaterial(color);
-        this.cullMode = 'back';
+        this.cullMode = 'none';
         this.id = null;
     }
     getId() {
@@ -99,6 +99,32 @@ export class SimulationElement3d {
     setCullMode(mode) {
         this.cullMode = mode;
     }
+    subDivideTo(limit) {
+        this.geometry.setSubdivisions(Infinity, limit);
+        this.vertexCache.updated();
+        this.geometry.compute();
+    }
+    /// may have unexpeced behavior for 3d shapes
+    setSubdivisions(divisions, vertexLimit) {
+        this.geometry.setSubdivisions(divisions, vertexLimit);
+        this.vertexCache.updated();
+        this.geometry.compute();
+    }
+    clearSubdivisions() {
+        this.geometry.clearSubdivisions();
+        this.vertexCache.updated();
+        this.geometry.compute();
+    }
+    setSubdivisionVertexLimit(limit) {
+        this.geometry.setSubdivisionVertexLimit(limit);
+        this.vertexCache.updated();
+        this.geometry.compute();
+    }
+    clearSubdivisionVertexLimit() {
+        this.geometry.clearSubdivisionVertexLimit();
+        this.vertexCache.updated();
+        this.geometry.compute();
+    }
     setCenterOffset(offset) {
         this.centerOffset = offset;
     }
@@ -205,6 +231,12 @@ export class SimulationElement3d {
     getMaterial() {
         return this.material;
     }
+    getGeometry() {
+        return this.geometry;
+    }
+    getVertices() {
+        return this.geometry.getVertices();
+    }
     getRelativePos() {
         return this.pos;
     }
@@ -289,13 +321,22 @@ export class SimulationElement3d {
             this.rotation = cloneBuf(rot);
         }, t, f);
     }
+    animateVerticesFrom(vertices, t, f) {
+        if (this.getVertexCount() !== vertices.length) {
+            throw logger.error(`Expected vertex array of same length, found ${this.getVertexCount()}::${vertices.length}`);
+        }
+        return this.geometry.animateFrom(vertices, t, f);
+    }
     getVertexCount() {
+        return this.getVertices().length;
+    }
+    getTreeVertexCount() {
         if (this.vertexCache.shouldUpdate()) {
-            this.geometry.recompute();
+            this.geometry.compute();
         }
         let vertexCount = this.geometry.getIndexes(this.isWireframe()).length;
         for (let i = 0; i < this.children.length; i++) {
-            vertexCount += this.children[i].getVertexCount();
+            vertexCount += this.children[i].getTreeVertexCount();
         }
         return vertexCount;
     }
@@ -310,8 +351,8 @@ export class SimulationElement3d {
         this.shader.writeBuffers(this);
     }
     getVertexBuffer() {
-        if (this.vertexCache.shouldUpdate()) {
-            this.geometry.recompute();
+        if (this.vertexCache.shouldUpdate() || this.geometry.hasUpdated()) {
+            this.geometry.compute();
             const vertices = this.geometry.getVertices();
             const stride = this.shader.getBufferLength();
             const vertexBuffer = new Float32Array(vertices.length * stride);
@@ -363,8 +404,7 @@ export class Plane extends SimulationElement3d {
         super(pos, rotation, color);
         this.rotation = rotation;
         this.points = points;
-        this.geometry = new PlaneGeometry(points);
-        this.cullMode = 'none';
+        this.geometry = new PlaneGeometry(points.map((vert) => vert.getPos()));
     }
     setPoints(newPoints) {
         this.points = newPoints;
@@ -463,50 +503,57 @@ export class Square extends SimulationElement2d {
 }
 export class Circle extends SimulationElement2d {
     geometry;
-    radius;
-    detail;
     constructor(pos, radius, color, detail = 50) {
         super(pos, vector3(), color);
-        this.radius = radius;
-        this.detail = detail;
-        this.geometry = new CircleGeometry(this.radius, this.detail);
+        this.geometry = new CircleGeometry(radius, detail);
+    }
+    setDetail(detail) {
+        this.geometry.setDetail(detail);
     }
     setRadius(num, t = 0, f) {
-        const diff = num - this.radius;
+        let radius = this.geometry.getRadius();
+        const diff = num - radius;
         return internalTransitionValues((p) => {
-            this.radius += diff * p;
-            this.geometry.setRadius(this.radius);
+            radius += diff * p;
+            this.geometry.setRadius(radius);
             this.vertexCache.updated();
         }, () => {
-            this.radius = num;
-            this.geometry.setRadius(this.radius);
+            radius = num;
+            this.geometry.setRadius(radius);
             this.vertexCache.updated();
         }, t, f);
     }
     scale(amount, t = 0, f) {
-        const finalRadius = this.radius * amount;
-        const diff = finalRadius - this.radius;
+        let radius = this.geometry.getRadius();
+        const finalRadius = radius * amount;
+        const diff = finalRadius - radius;
         return internalTransitionValues((p) => {
-            this.radius += diff * p;
-            this.geometry.setRadius(this.radius);
+            radius += diff * p;
+            this.geometry.setRadius(radius);
             this.vertexCache.updated();
         }, () => {
-            this.radius = finalRadius;
-            this.geometry.setRadius(this.radius);
+            radius = finalRadius;
+            this.geometry.setRadius(radius);
             this.vertexCache.updated();
         }, t, f);
     }
 }
+export class OutlineCircle extends Circle {
+    constructor(pos, radius, color, detail) {
+        super(pos, radius, color, detail);
+        // this.geometry = new OutlineCircleGeometry();
+    }
+}
 export class Polygon extends SimulationElement2d {
     geometry;
     constructor(pos, vertices, color, rotation) {
         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();
-        if (color)
-            this.material.setColor(color);
+        this.material.setColor(prevColor);
         const colors = vertices.map((vert) => vert.getColor() ?? this.material.getColor());
         this.material.setVertexColors(colors);
     }
@@ -867,7 +914,7 @@ export class Spline2d extends SimulationElement2d {
         this.length = 0;
         this.geometry = new Spline2dGeometry(points, this.thickness, this.detail);
         this.material = new VertexColorMaterial();
-        this.material.setColor(pos.getColor() ?? color());
+        this.material.setColor(pos.getColor() ?? globalInfo.getDefaultColor());
         this.setVertexColors();
         this.shader = vertexColorShader;
         this.estimateLength();
@@ -1082,8 +1129,8 @@ export class Instance extends SimulationElement3d {
         }
         return this.matrixBuffer.getBuffer();
     }
-    getVertexCount() {
-        return this.obj.getVertexCount();
+    getTreeVertexCount() {
+        return this.obj.getTreeVertexCount();
     }
     getIndexCount() {
         return this.obj.getIndexCount();

package/dist/internalUtils.js

@@ -159,7 +159,7 @@ export function getVertexAndIndexSize(scene) {
     let indexSize = 0;
     for (let i = 0; i < scene.length; i++) {
         const obj = scene[i];
-        vertexSize += obj.getVertexCount() * obj.getShader().getBufferLength();
+        vertexSize += obj.getTreeVertexCount() * obj.getShader().getBufferLength();
         indexSize += obj.getIndexCount();
     }
     return [vertexSize, indexSize];

package/dist/pipelineUtil.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="@webgpu/types" />
+import { SimulationElement3d } from './graphics.js';
+import { Shader } from './shaders.js';
+export declare function createBindGroup(shader: Shader, bindGroupIndex: number, buffers: GPUBuffer[]): GPUBindGroup;
+export declare function writeUniformWorldMatrix(el: SimulationElement3d): void;

package/dist/pipelineUtil.js

@@ -0,0 +1,22 @@
+import { worldProjMatOffset } from './constants.js';
+import { globalInfo } from './globals.js';
+import { orthogonalMatrix, worldProjectionMatrix } from './simulation.js';
+export function createBindGroup(shader, bindGroupIndex, buffers) {
+    const device = globalInfo.errorGetDevice();
+    const layout = shader.getBindGroupLayouts()[bindGroupIndex];
+    return device.createBindGroup({
+        layout: layout,
+        entries: buffers.map((buffer, index) => ({
+            binding: index,
+            resource: {
+                buffer
+            }
+        }))
+    });
+}
+export function writeUniformWorldMatrix(el) {
+    const device = globalInfo.errorGetDevice();
+    const uniformBuffer = el.getUniformBuffer();
+    const projBuf = el.is3d ? worldProjectionMatrix : orthogonalMatrix;
+    device.queue.writeBuffer(uniformBuffer, worldProjMatOffset, projBuf.buffer, projBuf.byteOffset, projBuf.byteLength);
+}

package/dist/simulation.d.ts

@@ -50,6 +50,8 @@ export declare class Simulation extends Settings {
     start(): void;
     stop(): void;
     setBackground(color: Color): void;
+    setDefaultColor(color: Color): void;
+    getDefaultColor(): Color;
     getScene(): SimulationElement3d[];
     private render;
     private renderScene;

package/dist/simulation.js

@@ -167,10 +167,11 @@ export class Simulation extends Settings {
         }
         else
             throw logger.error(`Canvas ref/id provided is invalid`);
-        const parent = this.canvasRef.parentElement;
+        globalInfo.setCanvas(this);
         if (sceneCamera) {
             camera = sceneCamera;
         }
+        const parent = this.canvasRef.parentElement;
         if (parent === null)
             throw logger.error('Canvas parent is null');
         this.resizeEvents = [];
@@ -265,6 +266,12 @@ export class Simulation extends Settings {
     setBackground(color) {
         this.bgColor = color;
     }
+    setDefaultColor(color) {
+        globalInfo.setDefaultColor(color);
+    }
+    getDefaultColor() {
+        return globalInfo.getDefaultColor();
+    }
     getScene() {
         return this.scene;
     }

package/dist/utils.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="@webgpu/types" />
 import { SimulationElement3d, SplinePoint2d } from './graphics.js';
-import { FloatArray, Mat4, Vector2, Vector2m, Vector3, Vector3m, Vector4 } from './types.js';
+import { FloatArray, LerpFunc, Mat4, Vector2, Vector2m, Vector3, Vector3m, Vector4 } from './types.js';
 import { Shader } from './shaders.js';
 export declare class Color {
     r: number;
@@ -81,6 +81,10 @@ export declare function waitFor(t: number): Promise<unknown>;
 export declare function distance2d(vector1: Vector2m, vector2: Vector2m): number;
 export declare function distance3d(vector1: Vector3m, vector2: Vector3m): number;
 export declare function interpolateColors(colors: Color[], t: number): Color;
+export declare function vectorsToVertex(vectors: Vector3[]): Vertex[];
+export declare function cloneVectors(vectors: Vector3[]): Vector3[];
 export declare function createBindGroup(shader: Shader, bindGroupIndex: number, buffers: GPUBuffer[]): GPUBindGroup;
 export declare function writeUniformWorldMatrix(el: SimulationElement3d): void;
+export declare function transform(from: SimulationElement3d, to: SimulationElement3d, t: number, f?: LerpFunc): Promise<void>;
+export declare function defaultColor(): Color;
 export {};

package/dist/utils.js

@@ -281,6 +281,12 @@ export function interpolateColors(colors, t) {
     res.a += diff.a;
     return res;
 }
+export function vectorsToVertex(vectors) {
+    return vectors.map((vec) => vertex(...vec));
+}
+export function cloneVectors(vectors) {
+    return vectors.map((vec) => cloneBuf(vec));
+}
 export function createBindGroup(shader, bindGroupIndex, buffers) {
     const device = globalInfo.errorGetDevice();
     const layout = shader.getBindGroupLayouts()[bindGroupIndex];
@@ -300,3 +306,29 @@ export function writeUniformWorldMatrix(el) {
     const projBuf = el.is3d ? worldProjectionMatrix : orthogonalMatrix;
     device.queue.writeBuffer(uniformBuffer, worldProjMatOffset, projBuf.buffer, projBuf.byteOffset, projBuf.byteLength);
 }
+/// may have unexpected position behavior for nested elements, or elements with a geometry with a set triangle order
+export function transform(from, to, t, f) {
+    const canvas = globalInfo.errorGetCanvas();
+    const fromVertCount = from.getVertexCount();
+    const toVertCount = to.getVertexCount();
+    if (fromVertCount < toVertCount) {
+        from.subDivideTo(toVertCount);
+    }
+    else if (fromVertCount > toVertCount) {
+        to.subDivideTo(fromVertCount);
+    }
+    canvas.remove(from);
+    canvas.add(to);
+    const fromVerts = from.getVertices();
+    return (async () => {
+        const prevPos = to.getPos();
+        to.moveTo(from.getPos());
+        to.moveTo(prevPos, t, f);
+        await to.animateVerticesFrom(fromVerts, t, f);
+        from.clearSubdivisions();
+        to.clearSubdivisions();
+    })();
+}
+export function defaultColor() {
+    return globalInfo.getDefaultColor();
+}

package/package.json

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