simulationjsv2 0.8.3 → 0.9.0

package/dist/geometry.d.ts

@@ -105,4 +105,5 @@ export declare class TraceLines2dGeometry extends Geometry<TraceLinesParams> {
     getVertexCount(): number;
     getOrder(_: boolean): readonly [Vector3[], number[]];
     addVertex(vert: Vector3): void;
+    clear(): void;
 }

package/dist/geometry.js

@@ -110,10 +110,10 @@ export class SquareGeometry extends Geometry {
     }
     recompute() {
         this.vertices = [
-            vector3(-this.params.width, this.params.height),
-            vector3(this.params.width, this.params.height),
-            vector3(this.params.width, -this.params.height),
-            vector3(-this.params.width, -this.params.height)
+            vector3(-this.params.width / 2, this.params.height / 2),
+            vector3(this.params.width / 2, this.params.height / 2),
+            vector3(this.params.width / 2, -this.params.height / 2),
+            vector3(-this.params.width / 2, -this.params.height / 2)
         ];
     }
 }
@@ -310,7 +310,7 @@ export class Line2dGeometry extends Geometry {
     recompute() {
         const normal = vector2(-this.params.to[1], this.params.to[0]);
         vec2.normalize(normal, normal);
-        vec2.scale(normal, this.params.thickness / 2, normal);
+        vec2.scale(normal, this.params.thickness, normal);
         this.vertices = [
             vector3(-normal[0], -normal[1]),
             vector3(normal[0], normal[1]),
@@ -386,4 +386,8 @@ export class TraceLines2dGeometry extends Geometry {
             this.wireframeOrder.push(this.wireframeOrder.length);
         }
     }
+    clear() {
+        this.vertices = [];
+        this.wireframeOrder = [];
+    }
 }

package/dist/graphics.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="@webgpu/types" />
-import type { Vector2, Vector3, LerpFunc, Mat4, AnySimulationElement } from './types.js';
+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 { SimSceneObjInfo, Float32ArrayCache } from './internalUtils.js';
+import { Float32ArrayCache } from './internalUtils.js';
 import { Shader } from './shaders.js';
 import { Material } from './materials.js';
 export declare abstract class SimulationElement3d {
@@ -10,6 +10,7 @@ export declare abstract class SimulationElement3d {
     private uniformBuffer;
     private prevInfo;
     private pipeline;
+    protected id: string | null;
     protected shader: Shader;
     protected material: Material;
     protected cullMode: GPUCullMode;
@@ -25,14 +26,16 @@ export declare abstract class SimulationElement3d {
     isInstanced: boolean;
     is3d: boolean;
     isEmpty: boolean;
-    /**
-     * @param pos - Expected to be adjusted to devicePixelRatio before reaching constructor
-     */
     constructor(pos: Vector3, rotation: Vector3, color?: Color);
+    getId(): string | null;
+    setId(id: string): void;
+    getColor(): Color;
     add(el: SimulationElement3d, id?: string): void;
     remove(el: SimulationElement3d): void;
+    removeId(id: string): void;
     getChildren(): SimulationElement3d[];
-    getChildrenInfos(): SimSceneObjInfo[];
+    setChildren(elements: SimulationElement3d[]): void;
+    getChildrenInfos(): SimulationElement3d[];
     hasChildren(): boolean;
     setParent(parent: SimulationElement3d): void;
     getParent(): SimulationElement3d | null;
@@ -61,8 +64,8 @@ export declare abstract class SimulationElement3d {
     getRotation(): Vector3;
     getCenterOffset(): Vector3;
     fill(newColor: Color, t?: number, f?: LerpFunc): Promise<void>;
-    move(amount: Vector3, t?: number, f?: LerpFunc, fromDevicePixelRatio?: boolean): Promise<void>;
-    moveTo(pos: Vector3, t?: number, f?: LerpFunc, fromDevicePixelRatio?: boolean): Promise<void>;
+    move(amount: Vector3, t?: number, f?: LerpFunc): Promise<void>;
+    moveTo(pos: Vector3, t?: number, f?: LerpFunc): Promise<void>;
     rotateChildren(angle: Vector3): void;
     rotate(amount: Vector3, t?: number, f?: LerpFunc): Promise<void>;
     rotateTo(rot: Vector3, t?: number, f?: LerpFunc): Promise<void>;
@@ -205,7 +208,7 @@ export declare class Spline2d extends SimulationElement2d {
     interpolateSlope(t: number): Vector2[] | readonly [Vector2, Vector2];
     interpolate(t: number): Vector2;
 }
-export declare class Instance<T extends AnySimulationElement> extends SimulationElement3d {
+export declare class Instance<T extends SimulationElement3d> extends SimulationElement3d {
     protected geometry: BlankGeometry;
     private obj;
     private instanceMatrix;
@@ -231,12 +234,13 @@ export declare class Instance<T extends AnySimulationElement> extends Simulation
 export declare class TraceLines2d extends SimulationElement2d {
     protected geometry: TraceLinesGeometry;
     constructor(color?: Color, maxLen?: number);
-    addPoint(vert: Vector2 | Vector3, _color?: Color): void;
+    addPoint(vert: Vector2 | Vector3, color?: Color): void;
+    clear(): void;
     isWireframe(): boolean;
 }
 export declare class TraceLines3d extends SimulationElement3d {
     protected geometry: TraceLinesGeometry;
     constructor(color?: Color, maxLen?: number);
-    addPoint(vert: Vector2 | Vector3, _color?: Color): void;
+    addPoint(vert: Vector2 | Vector3, color?: Color): void;
     isWireframe(): boolean;
 }

package/dist/graphics.js

@@ -1,7 +1,7 @@
 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, Float32ArrayCache, internalTransitionValues, posTo2dScreen, vector3ToPixelRatio } from './internalUtils.js';
+import { Float32ArrayCache, internalTransitionValues, posTo2dScreen } from './internalUtils.js';
 import { mat4ByteLength, modelProjMatOffset } from './constants.js';
 import { MemoBuffer } from './buffers.js';
 import { globalInfo, logger, pipelineCache } from './globals.js';
@@ -12,6 +12,7 @@ export class SimulationElement3d {
     uniformBuffer;
     prevInfo;
     pipeline;
+    id;
     shader;
     material;
     cullMode;
@@ -26,9 +27,6 @@ export class SimulationElement3d {
     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();
@@ -44,21 +42,44 @@ export class SimulationElement3d {
         this.shader = defaultShader;
         this.material = new BasicMaterial(color);
         this.cullMode = 'back';
+        this.id = null;
+    }
+    getId() {
+        return this.id;
+    }
+    setId(id) {
+        this.id = id;
+    }
+    getColor() {
+        return this.material.getColor();
     }
     add(el, id) {
         el.setParent(this);
-        const info = new SimSceneObjInfo(el, id);
-        this.children.push(info);
+        if (id)
+            el.setId(id);
+        this.children.push(el);
     }
     remove(el) {
         for (let i = 0; i < this.children.length; i++) {
-            if (this.children[i].getObj() === el) {
+            if (this.children[i] === el) {
+                this.children.splice(i, 1);
+                break;
+            }
+        }
+    }
+    removeId(id) {
+        for (let i = 0; i < this.children.length; i++) {
+            if (this.children[i].getId() === id) {
                 this.children.splice(i, 1);
+                break;
             }
         }
     }
     getChildren() {
-        return this.children.map((child) => child.getObj());
+        return this.children;
+    }
+    setChildren(elements) {
+        this.children = elements;
     }
     getChildrenInfos() {
         return this.children;
@@ -126,7 +147,8 @@ export class SimulationElement3d {
         if (!this.parent)
             return;
         this.parent.mirrorParentTransforms3d(mat);
-        mat4.translate(mat, this.parent.getRelativePos(), mat);
+        const pos = cloneBuf(this.parent.getRelativePos());
+        mat4.translate(mat, pos, mat);
         const parentRot = this.parent.getRotation();
         mat4.rotateZ(mat, parentRot[2], mat);
         mat4.rotateY(mat, parentRot[1], mat);
@@ -137,7 +159,8 @@ export class SimulationElement3d {
         if (this.parent) {
             this.mirrorParentTransforms3d(this.modelMatrix);
         }
-        mat4.translate(this.modelMatrix, this.pos, this.modelMatrix);
+        const pos = cloneBuf(this.pos);
+        mat4.translate(this.modelMatrix, pos, 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);
@@ -152,7 +175,8 @@ export class SimulationElement3d {
         this.parent.mirrorParentTransforms2d(mat);
         const parentRot = this.parent.getRotation();
         mat4.rotateZ(mat, parentRot[2], mat);
-        mat4.translate(mat, this.pos, mat);
+        const pos = cloneBuf(this.pos);
+        mat4.translate(mat, pos, mat);
     }
     updateModelMatrix2d() {
         mat4.identity(this.modelMatrix);
@@ -211,10 +235,8 @@ export class SimulationElement3d {
             this.vertexCache.updated();
         }, t, f);
     }
-    move(amount, t = 0, f, fromDevicePixelRatio = false) {
+    move(amount, t = 0, f) {
         const tempAmount = cloneBuf(amount);
-        if (!fromDevicePixelRatio)
-            vector3ToPixelRatio(tempAmount);
         const finalPos = cloneBuf(this.pos);
         vec3.add(finalPos, tempAmount, finalPos);
         return internalTransitionValues((p) => {
@@ -225,10 +247,8 @@ export class SimulationElement3d {
             this.pos = finalPos;
         }, t, f);
     }
-    moveTo(pos, t = 0, f, fromDevicePixelRatio = false) {
+    moveTo(pos, t = 0, f) {
         const tempPos = cloneBuf(pos);
-        if (!fromDevicePixelRatio)
-            vector3ToPixelRatio(tempPos);
         const diff = vector3();
         vec3.sub(tempPos, this.pos, diff);
         return internalTransitionValues((p) => {
@@ -241,7 +261,7 @@ export class SimulationElement3d {
     }
     rotateChildren(angle) {
         for (let i = 0; i < this.children.length; i++) {
-            this.children[i].getObj().rotate(angle);
+            this.children[i].rotate(angle);
         }
     }
     rotate(amount, t = 0, f) {
@@ -275,14 +295,14 @@ export class SimulationElement3d {
         }
         let vertexCount = this.geometry.getIndexes(this.isWireframe()).length;
         for (let i = 0; i < this.children.length; i++) {
-            vertexCount += this.children[i].getObj().getVertexCount();
+            vertexCount += this.children[i].getVertexCount();
         }
         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();
+            indexCount += this.children[i].getIndexCount();
         }
         return indexCount;
     }
@@ -295,9 +315,8 @@ export class SimulationElement3d {
             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);
+                this.shader.setVertexInfo(this, vertexBuffer, vertices[i], i, i * stride);
             }
             this.vertexCache.setCache(vertexBuffer);
             return vertexBuffer;
@@ -325,7 +344,6 @@ export class SimulationElement2d extends SimulationElement3d {
     is3d = false;
     constructor(pos, rotation = vector3(), color) {
         super(vector3FromVector2(pos), rotation, color);
-        vector3ToPixelRatio(this.pos);
     }
     rotate2d(amount, t = 0, f) {
         return super.rotate(vector3(0, 0, amount), t, f);
@@ -363,8 +381,8 @@ export class Square extends SimulationElement2d {
      */
     constructor(pos, width, height, color, rotation) {
         super(pos, vector3(0, 0, rotation), color);
-        this.width = width / devicePixelRatio;
-        this.height = height / devicePixelRatio;
+        this.width = width;
+        this.height = height;
         this.geometry = new SquareGeometry(this.width, this.height);
     }
     getWidth() {
@@ -419,7 +437,6 @@ export class Square extends SimulationElement2d {
         }, t, f);
     }
     setWidth(num, t = 0, f) {
-        num *= devicePixelRatio;
         const diffWidth = num - this.width;
         return internalTransitionValues((p) => {
             this.width += diffWidth * p;
@@ -432,7 +449,6 @@ export class Square extends SimulationElement2d {
         }, t, f);
     }
     setHeight(num, t = 0, f) {
-        num *= devicePixelRatio;
         const diffHeight = num - this.height;
         return internalTransitionValues((p) => {
             this.height += diffHeight * p;
@@ -451,12 +467,11 @@ export class Circle extends SimulationElement2d {
     detail;
     constructor(pos, radius, color, detail = 50) {
         super(pos, vector3(), color);
-        this.radius = radius * devicePixelRatio;
+        this.radius = radius;
         this.detail = detail;
         this.geometry = new CircleGeometry(this.radius, this.detail);
     }
     setRadius(num, t = 0, f) {
-        num *= devicePixelRatio;
         const diff = num - this.radius;
         return internalTransitionValues((p) => {
             this.radius += diff * p;
@@ -568,7 +583,6 @@ export class Line3d extends SimulationElement3d {
         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);
     }
@@ -597,7 +611,7 @@ export class Line2d extends SimulationElement2d {
     thickness;
     constructor(from, to, thickness = 1) {
         super(vector2FromVector3(from.getPos()), vector3(), from.getColor() ?? undefined);
-        this.thickness = thickness * devicePixelRatio;
+        this.thickness = thickness;
         this.to = to.getPos();
         vec2.sub(this.to, this.pos, this.to);
         this.geometry = new Line2dGeometry(this.pos, this.to, this.thickness);
@@ -607,8 +621,6 @@ export class Line2d extends SimulationElement2d {
     }
     setEnd(pos, t = 0, f) {
         const tempPos = cloneBuf(pos);
-        vector3ToPixelRatio(tempPos);
-        // vec2.sub(tempPos, this.getPos(), tempPos);
         const diff = vector3();
         vec2.sub(tempPos, this.to, diff);
         return internalTransitionValues((p) => {
@@ -636,7 +648,6 @@ export class Cube extends SimulationElement3d {
         this.geometry = new CubeGeometry(this.width, this.height, this.depth);
     }
     setWidth(width, t = 0, f) {
-        width *= devicePixelRatio;
         const diff = width - this.width;
         return internalTransitionValues((p) => {
             this.width += diff * p;
@@ -649,7 +660,6 @@ export class Cube extends SimulationElement3d {
         }, t, f);
     }
     setHeight(height, t = 0, f) {
-        height *= devicePixelRatio;
         const diff = height - this.width;
         return internalTransitionValues((p) => {
             this.height += diff * p;
@@ -662,7 +672,6 @@ export class Cube extends SimulationElement3d {
         }, t, f);
     }
     setDepth(depth, t = 0, f) {
-        depth *= devicePixelRatio;
         const diff = depth - this.width;
         return internalTransitionValues((p) => {
             this.depth += diff * p;
@@ -848,10 +857,10 @@ export class Spline2d extends SimulationElement2d {
     interpolateStart;
     interpolateLimit;
     length;
-    constructor(pos, points, thickness = devicePixelRatio, detail = 40) {
+    constructor(pos, points, thickness = 1, detail = 40) {
         const tempPos = vector2FromVector3(pos.getPos());
         super(tempPos, vector3(), pos.getColor() ?? undefined);
-        this.thickness = thickness * devicePixelRatio;
+        this.thickness = thickness;
         this.detail = detail;
         this.interpolateStart = 0;
         this.interpolateLimit = 1;
@@ -950,7 +959,6 @@ export class Spline2d extends SimulationElement2d {
         this.vertexCache.updated();
     }
     setThickness(thickness, t = 0, f) {
-        thickness *= devicePixelRatio;
         const diff = thickness - this.thickness;
         return internalTransitionValues((p) => {
             this.thickness += diff * p;
@@ -1044,7 +1052,6 @@ export class Instance extends SimulationElement3d {
         const device = globalInfo.getDevice();
         if (!device)
             return;
-        // this.allocBuffer(size);
         const gpuBuffer = this.matrixBuffer.getBuffer();
         const buf = new Float32Array(transformation);
         device.queue.writeBuffer(gpuBuffer, instance * mat4ByteLength, buf.buffer, buf.byteOffset, buf.byteLength);
@@ -1099,14 +1106,20 @@ export class TraceLines2d extends SimulationElement2d {
     constructor(color, maxLen) {
         super(vector2(), vector3(), color);
         this.geometry = new TraceLinesGeometry(maxLen);
+        this.material = new VertexColorMaterial();
+        if (color)
+            this.material.setColor(color);
+        this.shader = vertexColorShader;
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    addPoint(vert, _color) {
+    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.material.addVertexColor(color ?? this.material.getColor());
         this.vertexCache.updated();
     }
+    clear() {
+        this.geometry.clear();
+    }
     // always being wireframe means that triangleOrder
     // in in the geometry does not need to be a duplicate
     // of wireframeOrder
@@ -1120,11 +1133,10 @@ export class TraceLines3d extends SimulationElement3d {
         super(vector3(), vector3(), color);
         this.geometry = new TraceLinesGeometry(maxLen);
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    addPoint(vert, _color) {
-        // const vert = vertex(point[0], point[1], point?.[2] || 0, color);
+    addPoint(vert, color) {
         const newVert = vert.length < 3 ? vector3(vert[0] ?? 0, vert[1] ?? 0, 0) : vert;
         this.geometry.addVertex(newVert);
+        this.material.addVertexColor(color ?? this.material.getColor());
         this.vertexCache.updated();
     }
     // always being wireframe means that triangleOrder

package/dist/internalUtils.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="@webgpu/types" />
-import { Mat4, Vector2, Vector3 } from './types.js';
-import { SimulationElement3d } from './graphics.js';
+import { Mat4, Vector3 } from './types.js';
 import { Shader } from './shaders.js';
+import { SimulationElement3d } from './graphics.js';
 export declare class Float32ArrayCache {
     private vertices;
     private hasUpdated;
@@ -26,33 +26,14 @@ export declare const updateWorldProjectionMatrix: (worldProjMat: Mat4, projMat:
 export declare const updateOrthoProjectionMatrix: (mat: Mat4, screenSize: [number, number]) => Float32Array;
 export declare const buildDepthTexture: (device: GPUDevice, width: number, height: number) => GPUTexture;
 export declare const buildMultisampleTexture: (device: GPUDevice, ctx: GPUCanvasContext, width: number, height: number) => GPUTexture;
-export declare const removeObjectId: (scene: SimSceneObjInfo[], id: string) => void;
-export declare class SimSceneObjInfo {
-    private obj;
-    private id;
-    private lifetime;
-    private currentLife;
-    constructor(obj: SimulationElement3d, id?: string);
-    /**
-     * @param lifetime - ms
-     */
-    setLifetime(lifetime: number): void;
-    getLifetime(): number | null;
-    lifetimeComplete(): boolean;
-    /**
-     * @param amount - ms
-     */
-    traverseLife(amount: number): void;
-    getObj(): SimulationElement3d;
-    getId(): string | null;
-}
 export declare function lossyTriangulate<T>(vertices: T[]): (readonly [T, T, T])[];
 export declare function lossyTriangulateStrip<T>(vertices: T[]): T[];
 export declare function createIndexArray(length: number): number[];
-export declare function vector3ToPixelRatio(vec: Vector3): void;
-export declare function vector2ToPixelRatio(vec: Vector2): void;
 export declare function triangulateWireFrameOrder(len: number): number[];
-export declare function getVertexAndIndexSize(scene: SimSceneObjInfo[]): readonly [number, number];
+export declare function getVertexAndIndexSize(scene: SimulationElement3d[]): readonly [number, number];
 export declare function internalTransitionValues(onFrame: (deltaT: number, t: number, total: number) => void, adjustment: () => void, transitionLength: number, func?: (n: number) => number): Promise<void>;
 export declare function posTo2dScreen(pos: Vector3): Vector3;
 export declare function createPipeline(device: GPUDevice, info: string, shader: Shader): GPURenderPipeline;
+export declare function addToScene(scene: SimulationElement3d[], el: SimulationElement3d, id?: string): void;
+export declare function removeSceneObj(scene: SimulationElement3d[], el: SimulationElement3d): void;
+export declare function removeSceneId(scene: SimulationElement3d[], id: string): void;

package/dist/internalUtils.js

@@ -2,6 +2,8 @@ import { mat4, vec3 } from 'wgpu-matrix';
 import { cloneBuf, transitionValues } from './utils.js';
 import { camera } from './simulation.js';
 import { settings } from './settings.js';
+import { SimulationElement3d } from './graphics.js';
+import { logger } from './globals.js';
 export class Float32ArrayCache {
     vertices;
     hasUpdated = true;
@@ -86,52 +88,6 @@ export const buildMultisampleTexture = (device, ctx, width, height) => {
         sampleCount: 4
     });
 };
-export const removeObjectId = (scene, id) => {
-    for (let i = 0; i < scene.length; i++) {
-        if (scene[i].getId() === id) {
-            scene.splice(i, 1);
-            break;
-        }
-    }
-};
-export class SimSceneObjInfo {
-    obj;
-    id;
-    lifetime; // ms
-    currentLife;
-    constructor(obj, id) {
-        this.obj = obj;
-        this.id = id || null;
-        this.lifetime = null;
-        this.currentLife = 0;
-    }
-    /**
-     * @param lifetime - ms
-     */
-    setLifetime(lifetime) {
-        this.lifetime = lifetime;
-    }
-    getLifetime() {
-        return this.lifetime;
-    }
-    lifetimeComplete() {
-        if (this.lifetime === null)
-            return false;
-        return this.currentLife >= this.lifetime;
-    }
-    /**
-     * @param amount - ms
-     */
-    traverseLife(amount) {
-        this.currentLife += amount;
-    }
-    getObj() {
-        return this.obj;
-    }
-    getId() {
-        return this.id;
-    }
-}
 // optomized for speed, depending on orientation of vertices as input, shape may not be preserved
 export function lossyTriangulate(vertices) {
     const res = [];
@@ -185,15 +141,6 @@ export function createIndexArray(length) {
         .fill(0)
         .map((_, index) => index);
 }
-export function vector3ToPixelRatio(vec) {
-    vec[0] *= devicePixelRatio;
-    vec[1] *= devicePixelRatio;
-    vec[2] *= devicePixelRatio;
-}
-export function vector2ToPixelRatio(vec) {
-    vec[0] *= devicePixelRatio;
-    vec[1] *= devicePixelRatio;
-}
 export function triangulateWireFrameOrder(len) {
     const order = Array(len)
         .fill(0)
@@ -211,7 +158,7 @@ export function getVertexAndIndexSize(scene) {
     let vertexSize = 0;
     let indexSize = 0;
     for (let i = 0; i < scene.length; i++) {
-        const obj = scene[i].getObj();
+        const obj = scene[i];
         vertexSize += obj.getVertexCount() * obj.getShader().getBufferLength();
         indexSize += obj.getIndexCount();
     }
@@ -276,3 +223,29 @@ export function createPipeline(device, info, shader) {
         }
     });
 }
+export function addToScene(scene, el, id) {
+    if (el instanceof SimulationElement3d) {
+        if (id)
+            el.setId(id);
+        scene.unshift(el);
+    }
+    else {
+        throw logger.error('Cannot add invalid SimulationElement');
+    }
+}
+export function removeSceneObj(scene, el) {
+    for (let i = 0; i < scene.length; i++) {
+        if (scene[i] === el) {
+            scene.splice(i, 1);
+            break;
+        }
+    }
+}
+export function removeSceneId(scene, id) {
+    for (let i = 0; i < scene.length; i++) {
+        if (scene[i].getId() === id) {
+            scene.splice(i, 1);
+            break;
+        }
+    }
+}

package/dist/shaders.js

@@ -1,7 +1,7 @@
 import { MemoBuffer } from './buffers.js';
 import { mat4ByteLength } from './constants.js';
 import { globalInfo } from './globals.js';
-import { color, createBindGroup, writeUniformWorldMatrix } from './utils.js';
+import { createBindGroup, writeUniformWorldMatrix } from './utils.js';
 export const uniformBufferSize = mat4ByteLength * 2 + 4 * 2 + 8; // 4x4 matrix * 2 + vec2<f32> + 8 bc 144 is cool
 const defaultInfos = [
     {
@@ -216,14 +216,14 @@ fn fragment_main(
     }
 ], defaultInfos, defaultBufferWriter, defaultBindGroupGenerator, (el, buffer, vertex, _, offset) => {
     const material = el.getMaterial();
-    const color = material.getColor();
+    const vertexColor = material.getColor();
     buffer[offset] = vertex[0];
     buffer[offset + 1] = vertex[1];
     buffer[offset + 2] = vertex[2];
-    buffer[offset + 3] = color.r / 255;
-    buffer[offset + 4] = color.g / 255;
-    buffer[offset + 5] = color.b / 255;
-    buffer[offset + 6] = color.a;
+    buffer[offset + 3] = vertexColor.r / 255;
+    buffer[offset + 4] = vertexColor.g / 255;
+    buffer[offset + 5] = vertexColor.b / 255;
+    buffer[offset + 6] = vertexColor.a;
     // TODO possibly change uv for textures
     buffer[offset + 7] = 0;
     buffer[offset + 8] = 0;
@@ -315,7 +315,8 @@ fn fragment_main(
 ], defaultInfos, defaultBufferWriter, defaultBindGroupGenerator, (el, buffer, vertex, vertexIndex, offset) => {
     const material = el.getMaterial();
     const colors = material.getVertexColors();
-    const vertexColor = colors[vertexIndex] ?? color();
+    const vertexColor = colors[vertexIndex] ?? el.getColor();
+    // const vertexColor = color(0, 255, 255);
     buffer[offset] = vertex[0];
     buffer[offset + 1] = vertex[1];
     buffer[offset + 2] = vertex[2];

package/dist/simulation.d.ts

@@ -1,7 +1,6 @@
 import { SimulationElement3d } from './graphics.js';
-import type { Vector2, Vector3, LerpFunc, AnySimulationElement } from './types.js';
+import type { Vector2, Vector3, LerpFunc } from './types.js';
 import { Color } from './utils.js';
-import { SimSceneObjInfo } from './internalUtils.js';
 import { Settings } from './settings.js';
 export declare const worldProjectionMatrix: import("./types.js").Mat4;
 export declare const orthogonalMatrix: import("./types.js").Mat4;
@@ -43,20 +42,15 @@ export declare class Simulation extends Settings {
     onResize(cb: (width: number, height: number) => void): void;
     getWidth(): number;
     getHeight(): number;
-    add(el: AnySimulationElement, id?: string): void;
+    add(el: SimulationElement3d, id?: string): void;
     remove(el: SimulationElement3d): void;
     removeId(id: string): void;
-    /**
-     * @param lifetime - ms
-     */
-    setLifetime(el: AnySimulationElement, lifetime: number): void;
     private applyCanvasSize;
     setCanvasSize(width: number, height: number): void;
     start(): void;
     stop(): void;
     setBackground(color: Color): void;
-    getScene(): SimSceneObjInfo[];
-    getSceneObjects(): SimulationElement3d[];
+    getScene(): SimulationElement3d[];
     private render;
     private renderScene;
     fitElement(): void;

package/dist/simulation.js

@@ -1,7 +1,6 @@
 import { vec3 } from 'wgpu-matrix';
-import { SimulationElement3d } from './graphics.js';
 import { Color, matrix4, transitionValues, vector2, vector3 } from './utils.js';
-import { SimSceneObjInfo, buildDepthTexture, buildMultisampleTexture, updateProjectionMatrix, getVertexAndIndexSize, removeObjectId, updateOrthoProjectionMatrix, updateWorldProjectionMatrix, CachedArray } from './internalUtils.js';
+import { buildDepthTexture, buildMultisampleTexture, updateProjectionMatrix, getVertexAndIndexSize, updateOrthoProjectionMatrix, updateWorldProjectionMatrix, CachedArray, addToScene, removeSceneObj, removeSceneId } from './internalUtils.js';
 import { Settings } from './settings.js';
 import { MemoBuffer } from './buffers.js';
 import { globalInfo, logger } from './globals.js';
@@ -181,10 +180,8 @@ export class Simulation extends Settings {
         this.frameRateView = new FrameRateView(showFrameRate);
         this.frameRateView.updateFrameRate(1);
         this.transparentElements = new CachedArray();
-        // this.vertexBuffer = new MemoBuffer(GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, 0);
-        // this.indexBuffer = new MemoBuffer(GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST, 0);
-        this.vertexBuffer = new MemoBuffer(GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, 1000);
-        this.indexBuffer = new MemoBuffer(GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST, 1000);
+        this.vertexBuffer = new MemoBuffer(GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, 0);
+        this.indexBuffer = new MemoBuffer(GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST, 0);
     }
     handleCanvasResize(parent) {
         if (this.fittingElement) {
@@ -202,39 +199,19 @@ export class Simulation extends Settings {
         this.resizeEvents.push(cb);
     }
     getWidth() {
-        return (this.canvasRef?.width || 0) / devicePixelRatio;
+        return this.canvasRef?.width || 0;
     }
     getHeight() {
-        return (this.canvasRef?.height || 0) / devicePixelRatio;
+        return this.canvasRef?.height || 0;
     }
     add(el, id) {
-        if (el instanceof SimulationElement3d) {
-            const obj = new SimSceneObjInfo(el, id);
-            this.scene.unshift(obj);
-        }
-        else {
-            throw logger.error('Cannot add invalid SimulationElement');
-        }
+        addToScene(this.scene, el, id);
     }
     remove(el) {
-        for (let i = 0; i < this.scene.length; i++) {
-            if (this.scene[i].getObj() === el) {
-                this.scene.splice(i, 1);
-                break;
-            }
-        }
+        removeSceneObj(this.scene, el);
     }
     removeId(id) {
-        removeObjectId(this.scene, id);
-    }
-    /**
-     * @param lifetime - ms
-     */
-    setLifetime(el, lifetime) {
-        for (let i = 0; i < this.scene.length; i++) {
-            if (this.scene[i].getObj() === el)
-                this.scene[i].setLifetime(lifetime);
-        }
+        removeSceneId(this.scene, id);
     }
     applyCanvasSize(width, height) {
         if (this.canvasRef === null)
@@ -291,9 +268,6 @@ export class Simulation extends Settings {
     getScene() {
         return this.scene;
     }
-    getSceneObjects() {
-        return this.scene.map((item) => item.getObj());
-    }
     render(device, ctx, canvas) {
         const colorAttachment = {
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -377,21 +351,10 @@ export class Simulation extends Settings {
     renderScene(device, passEncoder, vertexBuffer, indexBuffer, startVertexOffset, startIndexOffset, scene, numElements, diff, transparent) {
         let vertexOffset = startVertexOffset;
         let indexOffset = startIndexOffset;
-        const toRemove = [];
         for (let i = 0; i < numElements; i++) {
-            const sceneObj = scene[i];
-            const lifetime = sceneObj.getLifetime();
-            if (lifetime !== null) {
-                const complete = sceneObj.lifetimeComplete();
-                if (complete) {
-                    toRemove.push(i);
-                    continue;
-                }
-                sceneObj.traverseLife(diff);
-            }
-            const obj = sceneObj.getObj();
+            const obj = scene[i];
             if (!transparent && obj.isTransparent()) {
-                this.transparentElements.add(sceneObj);
+                this.transparentElements.add(obj);
                 continue;
             }
             if (obj.hasChildren()) {
@@ -419,9 +382,6 @@ export class Simulation extends Settings {
             vertexOffset += vertices.byteLength;
             indexOffset += indices.byteLength;
         }
-        for (let i = toRemove.length - 1; i >= 0; i--) {
-            this.remove(scene.at(i).getObj());
-        }
         return [vertexOffset - startVertexOffset, indexOffset - startIndexOffset];
     }
     fitElement() {

package/dist/types.d.ts

@@ -1,14 +1,16 @@
 /// <reference types="@webgpu/types" />
 import { MemoBuffer } from './buffers.js';
-import { CubicBezierCurve2d, SimulationElement2d, SimulationElement3d, SplinePoint2d } from './graphics.js';
+import { CubicBezierCurve2d, SimulationElement3d, SplinePoint2d } from './graphics.js';
 import { Color } from './utils.js';
 export type FloatArray = Float32Array | Float64Array;
 export type UintArray = Uint8Array | Uint16Array | Uint32Array;
 export type IntArray = Int8Array | Int16Array | Int32Array;
 export type ArrayTypes = FloatArray | UintArray | IntArray;
-export type Vector4 = FloatArray & [number, number, number, number];
-export type Vector3 = FloatArray & [number, number, number];
 export type Vector2 = FloatArray & [number, number];
+export type Vector3 = FloatArray & [number, number, number];
+export type Vector4 = FloatArray & [number, number, number, number];
+export type Vector2m = Vector2 | Vector3 | Vector4;
+export type Vector3m = Vector3 | Vector4;
 export type Mat4 = FloatArray & [
     number,
     number,
@@ -31,7 +33,6 @@ export type Quat = Float32Array & [number, number, number, number];
 export type LerpFunc = (n: number) => number;
 export type VertexColorMap = Record<number, Color>;
 export type ElementRotation<T extends Vector2 | Vector3> = T extends Vector2 ? number : T;
-export type AnySimulationElement = SimulationElement2d | SimulationElement3d;
 export type EmptyParams = object;
 export interface CubeGeometryParams {
     width: number;

package/dist/utils.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="@webgpu/types" />
 import { SimulationElement3d, SplinePoint2d } from './graphics.js';
-import { AnySimulationElement, FloatArray, Mat4, Vector2, Vector3, Vector4 } from './types.js';
-import { SimSceneObjInfo } from './internalUtils.js';
+import { FloatArray, Mat4, Vector2, Vector2m, Vector3, Vector3m, Vector4 } from './types.js';
 import { Shader } from './shaders.js';
 export declare class Color {
     r: number;
@@ -79,10 +78,8 @@ export declare function continuousSplinePoint2d(end: Vertex, control: Vector2, d
  * @param t - seconds
  */
 export declare function waitFor(t: number): Promise<unknown>;
-export declare function distance2d(vector1: Vector2, vector2: Vector2): number;
-export declare function distance3d(vector1: Vector3, vector2: Vector3): number;
-export declare function toSceneObjInfo(el: AnySimulationElement, id?: string): SimSceneObjInfo;
-export declare function toSceneObjInfoMany(el: AnySimulationElement[], id?: (string | undefined)[]): SimSceneObjInfo[];
+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 createBindGroup(shader: Shader, bindGroupIndex: number, buffers: GPUBuffer[]): GPUBindGroup;
 export declare function writeUniformWorldMatrix(el: SimulationElement3d): void;

package/dist/utils.js

@@ -1,6 +1,5 @@
 import { mat4, vec2, vec3, vec4 } from 'wgpu-matrix';
 import { SplinePoint2d } from './graphics.js';
-import { SimSceneObjInfo } from './internalUtils.js';
 import { globalInfo } from './globals.js';
 import { orthogonalMatrix, worldProjectionMatrix } from './simulation.js';
 import { worldProjMatOffset } from './constants.js';
@@ -234,16 +233,11 @@ export function colorf(val, a) {
     return color(val, val, val, a);
 }
 export function splinePoint2d(end, control1, control2, detail) {
-    vec2.scale(control1, devicePixelRatio, control1);
-    vec2.scale(control2, devicePixelRatio, control2);
-    vec2.scale(end.getPos(), devicePixelRatio, end.getPos());
     const rawControls = [cloneBuf(control1), cloneBuf(control2)];
     vec2.add(end.getPos(), control2, control2);
     return new SplinePoint2d(null, end, control1, control2, rawControls, detail);
 }
 export function continuousSplinePoint2d(end, control, detail) {
-    vec2.scale(control, devicePixelRatio, control);
-    vec2.scale(end.getPos(), devicePixelRatio, end.getPos());
     const rawControls = [vector2(), cloneBuf(control)];
     vec2.add(end.getPos(), control, control);
     return new SplinePoint2d(null, end, null, control, rawControls, detail);
@@ -262,12 +256,6 @@ export function distance2d(vector1, vector2) {
 export function distance3d(vector1, vector2) {
     return vec3.distance(vector1, vector2);
 }
-export function toSceneObjInfo(el, id) {
-    return new SimSceneObjInfo(el, id);
-}
-export function toSceneObjInfoMany(el, id) {
-    return el.map((item, index) => toSceneObjInfo(item, id ? id[index] : undefined));
-}
 export function interpolateColors(colors, t) {
     t = Math.min(1, Math.max(0, t));
     if (colors.length === 0)

package/package.json

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