simulationjsv2 0.3.2 → 0.4.0

package/README.md

@@ -1,9 +1,9 @@
 # SimulationJS v2
 
-SimulationJS is a graphics library with simple easy to use APIs. Version 2 hopes to boost performance by using webgpu under the hood.
+SimulationJS is a graphics library with simple easy to use APIs. Version 2 hopes to improve 3d graphics and boost performance by using webgpu under the hood.
 
-The APIs for v2 will be different however semantically, using them should be nearly identical.
+The APIs for v2 will differ however semantically, using them should be nearly identical.
 
-**Documentation coming soon**
+**Documentation eventually**
 
 By _Jackson Otto_

package/dist/geometry.d.ts

@@ -74,6 +74,7 @@ export declare class Spline2dGeometry extends Geometry {
     constructor(points: SplinePoint2d[], color: Color, thickness: number, detail: number);
     updateInterpolationStart(start: number): void;
     updateInterpolationLimit(limit: number): void;
+    updatePoint(pointIndex: number, newPoint: SplinePoint2d): void;
     updateThickness(thickness: number): void;
     private getVertexCount;
     getWireframeVertexCount(): number;

package/dist/geometry.js

@@ -239,6 +239,20 @@ export class Spline2dGeometry extends Geometry {
     updateInterpolationLimit(limit) {
         this.params.interpolateLimit = Math.min(1, Math.max(0, limit));
     }
+    updatePoint(pointIndex, newPoint) {
+        if (pointIndex < 0 && pointIndex >= this.params.points.length)
+            return;
+        const start = newPoint.getStart();
+        const end = newPoint.getEnd();
+        const [startControl, endControl] = newPoint.getControls();
+        const rawControls = newPoint.getRawControls();
+        vec3.add(end.getPos(), rawControls[1], endControl);
+        if (start && startControl) {
+            vec3.add(start.getPos(), rawControls[0], startControl);
+        }
+        this.params.points[pointIndex] = newPoint;
+        this.computeCurves();
+    }
     updateThickness(thickness) {
         this.params.thickness = thickness;
     }
@@ -255,6 +269,8 @@ export class Spline2dGeometry extends Geometry {
         return this.params.curves;
     }
     computeCurves() {
+        this.params.curves = [];
+        this.params.distance = 0;
         for (let i = 0; i < this.params.points.length; i++) {
             let prevControl = null;
             let prevColor = null;

package/dist/graphics.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="dist" />
+/// <reference types="@webgpu/types" />
 import { Camera } from './simulation.js';
 import type { Vector2, Vector3, LerpFunc, VertexColorMap, ElementRotation, Mat4 } from './types.js';
 import { Vertex, Color } from './utils.js';
@@ -156,6 +156,7 @@ export declare class SplinePoint2d {
     getDetail(): number | undefined;
     getColors(prevColor?: Color | null): (Color | null)[];
     getVectorArray(prevEnd: Vector2 | null, prevControl: Vector2 | null): readonly [Vector2, Vector2, Vector2, Vector2];
+    clone(): SplinePoint2d;
 }
 export declare class Spline2d extends SimulationElement2d {
     protected geometry: Spline2dGeometry;
@@ -169,8 +170,10 @@ export declare class Spline2d extends SimulationElement2d {
     getLength(): number;
     setInterpolateStart(start: number, t?: number, f?: LerpFunc): Promise<void>;
     setInterpolateLimit(limit: number, t?: number, f?: LerpFunc): Promise<void>;
+    updatePoint(pointIndex: number, newPoint: SplinePoint2d): void;
+    updatePointAbsolute(pointIndex: number, newPoint: SplinePoint2d): void;
     setThickness(thickness: number, t?: number, f?: LerpFunc): Promise<void>;
-    interpolateSlope(t: number): readonly [Vector2, Vector2];
+    interpolateSlope(t: number): Vector2[] | readonly [Vector2, Vector2];
     interpolate(t: number): Vector2;
     protected updateMatrix(camera: Camera): void;
 }

package/dist/graphics.js

@@ -773,6 +773,9 @@ export class SplinePoint2d {
             vector2FromVector3(this.end.getPos())
         ];
     }
+    clone() {
+        return new SplinePoint2d(this.start, this.end, this.control1, this.control2, this.rawControls, this.detail);
+    }
 }
 export class Spline2d extends SimulationElement2d {
     geometry;
@@ -794,6 +797,7 @@ export class Spline2d extends SimulationElement2d {
         this.estimateLength();
     }
     estimateLength() {
+        this.length = 0;
         const curves = this.geometry.getCurves();
         for (let i = 0; i < curves.length; i++) {
             this.length += curves[i].getLength();
@@ -826,6 +830,22 @@ export class Spline2d extends SimulationElement2d {
             this.vertexCache.updated();
         }, t, f);
     }
+    updatePoint(pointIndex, newPoint) {
+        this.geometry.updatePoint(pointIndex, newPoint);
+        this.estimateLength();
+        this.vertexCache.updated();
+    }
+    updatePointAbsolute(pointIndex, newPoint) {
+        const clonePoint = newPoint.clone();
+        const start = clonePoint.getStart()?.getPos() || vector3();
+        const end = clonePoint.getEnd().getPos();
+        const pos = vector3FromVector2(this.getPos());
+        vec3.sub(start, pos, start);
+        vec3.sub(end, pos, end);
+        this.geometry.updatePoint(pointIndex, clonePoint);
+        this.estimateLength();
+        this.vertexCache.updated();
+    }
     setThickness(thickness, t = 0, f) {
         thickness *= devicePixelRatio;
         const diff = thickness - this.thickness;
@@ -855,6 +875,8 @@ export class Spline2d extends SimulationElement2d {
             }
             currentLength += curves[i].getLength();
         }
+        if (curves.length === 0)
+            return [vector2(), vector2()];
         return curves[index].interpolateSlope(diff);
     }
     interpolate(t) {
@@ -898,7 +920,6 @@ export class Instance extends SimulationElement3d {
             return;
         const minSize = 640;
         const size = Math.max(minSize, this.instanceMatrix[0].byteLength * this.instanceMatrix.length);
-        console.log(size, this.instanceMatrix);
         this.matrixBuffer = this.device.createBuffer({
             size,
             usage: GPUBufferUsage.STORAGE,

package/dist/internalUtils.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="dist" />
+/// <reference types="@webgpu/types" />
 import { Mat4, Vector2, Vector3 } from './types.js';
 import { Color } from './utils.js';
 import { SimulationElement } from './graphics.js';
@@ -17,7 +17,28 @@ export declare const getTransformationMatrix: (pos: Vector3, rotation: Vector3,
 export declare const getOrthoMatrix: (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 applyElementToScene: (scene: SimulationElement[], el: SimulationElement) => void;
+export declare const addObject: (scene: SimSceneObjInfo[], el: SimulationElement<any>, id?: string) => void;
+export declare const removeObject: (scene: SimSceneObjInfo[], el: SimulationElement<any>) => void;
+export declare const removeObjectId: (scene: SimSceneObjInfo[], id: string) => void;
+export declare class SimSceneObjInfo {
+    private obj;
+    private id;
+    private lifetime;
+    private currentLife;
+    constructor(obj: SimulationElement<any>, id?: string);
+    /**
+     * @param lifetime - ms
+     */
+    setLifetime(lifetime: number): void;
+    getLifetime(): number | null;
+    lifetimeComplete(): boolean;
+    /**
+     * @param amount - ms
+     */
+    traverseLife(amount: number): void;
+    getObj(): SimulationElement<Vector3 | Vector2>;
+    getId(): string | null;
+}
 declare class Logger {
     constructor();
     private fmt;
@@ -42,5 +63,5 @@ export declare function matrixFromRotation(rotation: Vector3): Mat4;
 export declare function rotateMat4(mat: Mat4, rotation: Vector3): void;
 export declare function createPipeline(device: GPUDevice, module: GPUShaderModule, bindGroupLayout: GPUBindGroupLayout, presentationFormat: GPUTextureFormat, entryPoint: string, topology: GPUPrimitiveTopology): GPURenderPipeline;
 export declare function triangulateWireFrameOrder(len: number): number[];
-export declare function getTotalVertices(scene: SimulationElement[]): number;
+export declare function getTotalVertices(scene: SimSceneObjInfo[]): number;
 export {};

package/dist/internalUtils.js

@@ -59,14 +59,71 @@ export const buildMultisampleTexture = (device, ctx, width, height) => {
         sampleCount: 4
     });
 };
-export const applyElementToScene = (scene, el) => {
+export const addObject = (scene, el, id) => {
     if (el instanceof SimulationElement) {
-        scene.unshift(el);
+        const obj = new SimSceneObjInfo(el, id);
+        scene.unshift(obj);
     }
     else {
         throw logger.error('Cannot add invalid SimulationElement');
     }
 };
+export const removeObject = (scene, el) => {
+    if (!(el instanceof SimulationElement))
+        return;
+    for (let i = 0; i < scene.length; i++) {
+        if (scene[i].getObj() === el) {
+            scene.splice(i, 1);
+            break;
+        }
+    }
+};
+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;
+    }
+}
 class Logger {
     constructor() { }
     fmt(msg) {
@@ -250,9 +307,10 @@ export function triangulateWireFrameOrder(len) {
 export function getTotalVertices(scene) {
     let total = 0;
     for (let i = 0; i < scene.length; i++) {
-        if (scene[i].isCollection)
+        const obj = scene[i].getObj();
+        if (obj.isCollection)
             continue;
-        total += scene[i].getVertexCount();
+        total += obj.getVertexCount();
     }
     return total;
 }

package/dist/simulation.d.ts

@@ -1,20 +1,28 @@
-/// <reference types="dist" />
+/// <reference types="@webgpu/types" />
 import { SimulationElement, SimulationElement3d } from './graphics.js';
 import type { Vector2, Vector3, LerpFunc } from './types.js';
 import { Color } from './utils.js';
 import { BlankGeometry } from './geometry.js';
+import { SimSceneObjInfo } from './internalUtils.js';
 export declare class Simulation {
     canvasRef: HTMLCanvasElement | null;
     private bgColor;
     private scene;
     private fittingElement;
     private running;
+    private initialized;
     private frameRateView;
     private camera;
     private pipelines;
     private renderInfo;
     constructor(idOrCanvasRef: string | HTMLCanvasElement, camera?: Camera | null, showFrameRate?: boolean);
-    add(el: SimulationElement<any>): void;
+    add(el: SimulationElement<any>, id?: string): void;
+    remove(el: SimulationElement<any>): void;
+    removeId(id: string): void;
+    /**
+     * @param lifetime - ms
+     */
+    setLifetime(el: SimulationElement<any>, lifetime: number): void;
     setCanvasSize(width: number, height: number): void;
     start(): void;
     stop(): void;
@@ -33,8 +41,15 @@ export declare class SceneCollection extends SimulationElement3d {
     constructor(name: string);
     setWireframe(_: boolean): void;
     getName(): string;
-    getScene(): SimulationElement<Vector3>[];
+    getScene(): SimSceneObjInfo[];
+    setSceneObjects(newScene: SimulationElement<any>[]): void;
+    setScene(newScene: SimSceneObjInfo[]): void;
     add(el: SimulationElement<any>): void;
+    remove(el: SimulationElement<any>): void;
+    /**
+     * @param lifetime - ms
+     */
+    setLifetime(el: SimulationElement<any>, lifetime: number): void;
     empty(): void;
     getSceneBuffer(camera: Camera): number[];
     getWireframe(camera: Camera): number[];

package/dist/simulation.js

@@ -3,7 +3,7 @@ import { SimulationElement3d } from './graphics.js';
 import { BUF_LEN } from './constants.js';
 import { Color, transitionValues, vector2, vector3 } from './utils.js';
 import { BlankGeometry } from './geometry.js';
-import { applyElementToScene, buildDepthTexture, buildMultisampleTexture, buildProjectionMatrix, createPipeline, getOrthoMatrix, getTotalVertices, getTransformationMatrix, logger } from './internalUtils.js';
+import { SimSceneObjInfo, addObject, buildDepthTexture, buildMultisampleTexture, buildProjectionMatrix, createPipeline, getOrthoMatrix, getTotalVertices, getTransformationMatrix, logger, removeObject, removeObjectId } from './internalUtils.js';
 const shader = `
 struct Uniforms {
   modelViewProjectionMatrix : mat4x4<f32>,
@@ -115,6 +115,7 @@ export class Simulation {
     scene = [];
     fittingElement = false;
     running = true;
+    initialized = false;
     frameRateView;
     camera;
     pipelines;
@@ -152,8 +153,23 @@ export class Simulation {
         this.frameRateView = new FrameRateView(showFrameRate);
         this.frameRateView.updateFrameRate(1);
     }
-    add(el) {
-        applyElementToScene(this.scene, el);
+    add(el, id) {
+        addObject(this.scene, el, id);
+    }
+    remove(el) {
+        removeObject(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);
+        }
     }
     setCanvasSize(width, height) {
         this.assertHasCanvas();
@@ -163,8 +179,13 @@ export class Simulation {
         this.canvasRef.style.height = height + 'px';
     }
     start() {
+        if (this.initialized) {
+            this.running = true;
+            return;
+        }
         (async () => {
             this.assertHasCanvas();
+            this.initialized = true;
             this.running = true;
             const adapter = await navigator.gpu.requestAdapter();
             if (!adapter)
@@ -191,8 +212,9 @@ export class Simulation {
     }
     propagateDevice(device) {
         for (let i = 0; i < this.scene.length; i++) {
-            if (this.scene[i].isInstance) {
-                this.scene[i].setDevice(device);
+            const obj = this.scene[i].getObj();
+            if (obj.isInstance) {
+                obj.setDevice(device);
             }
         }
     }
@@ -299,9 +321,11 @@ export class Simulation {
         let prev = Date.now() - 10;
         let prevFps = 0;
         const frame = async () => {
-            if (!this.running || !canvas)
+            if (!canvas)
                 return;
             requestAnimationFrame(frame);
+            if (!this.running)
+                return;
             const now = Date.now();
             const diff = Math.max(now - prev, 1);
             prev = now;
@@ -339,14 +363,14 @@ export class Simulation {
             const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
             passEncoder.setPipeline(this.pipelines.triangleList3d);
             passEncoder.setBindGroup(0, uniformBindGroup);
-            this.renderScene(device, passEncoder, this.scene);
+            this.renderScene(device, passEncoder, this.scene, diff);
             this.camera.updateConsumed();
             passEncoder.end();
             device.queue.submit([commandEncoder.finish()]);
         };
         requestAnimationFrame(frame);
     }
-    async renderScene(device, passEncoder, scene) {
+    async renderScene(device, passEncoder, scene, diff) {
         if (this.pipelines === null)
             return;
         let totalVertices = getTotalVertices(scene);
@@ -355,17 +379,28 @@ export class Simulation {
             usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
         });
         let currentOffset = 0;
+        let toRemove = [];
         for (let i = 0; i < scene.length; i++) {
-            if (scene[i].isCollection) {
-                this.renderScene(device, passEncoder, scene[i].getScene());
+            const lifetime = scene[i].getLifetime();
+            if (lifetime !== null) {
+                const complete = scene[i].lifetimeComplete();
+                if (complete) {
+                    toRemove.push(i);
+                    continue;
+                }
+                scene[i].traverseLife(diff);
+            }
+            const obj = scene[i].getObj();
+            if (obj.isCollection) {
+                this.renderScene(device, passEncoder, obj.getScene(), diff);
                 continue;
             }
-            const buffer = new Float32Array(scene[i].getBuffer(this.camera));
+            const buffer = new Float32Array(obj.getBuffer(this.camera));
             const vertexCount = buffer.length / BUF_LEN;
             device.queue.writeBuffer(vertexBuffer, currentOffset, buffer);
             vertexBuffer.unmap();
-            const is3d = Boolean(scene[i].is3d);
-            if (scene[i].isWireframe()) {
+            const is3d = Boolean(obj.is3d);
+            if (obj.isWireframe()) {
                 if (is3d) {
                     passEncoder.setPipeline(this.pipelines.lineStrip3d);
                 }
@@ -374,7 +409,7 @@ export class Simulation {
                 }
             }
             else {
-                const type = scene[i].getGeometryType();
+                const type = obj.getGeometryType();
                 if (type === 'strip') {
                     if (is3d) {
                         passEncoder.setPipeline(this.pipelines.triangleStrip3d);
@@ -393,9 +428,9 @@ export class Simulation {
                 }
             }
             let instances = 1;
-            if (scene[i].isInstance) {
-                instances = scene[i].getNumInstances();
-                const buf = scene[i].getMatrixBuffer();
+            if (obj.isInstance) {
+                instances = obj.getNumInstances();
+                const buf = obj.getMatrixBuffer();
                 if (buf && this.renderInfo) {
                     const uniformBindGroup = device.createBindGroup({
                         layout: this.renderInfo.bindGroupLayout,
@@ -421,6 +456,9 @@ export class Simulation {
             passEncoder.draw(vertexCount, instances, 0, 0);
             currentOffset += buffer.byteLength;
         }
+        for (let i = toRemove.length - 1; i >= 0; i--) {
+            removeObject(scene, scene[i].getObj());
+        }
     }
     fitElement() {
         this.assertHasCanvas();
@@ -457,14 +495,32 @@ export class SceneCollection extends SimulationElement3d {
     getScene() {
         return this.scene;
     }
+    setSceneObjects(newScene) {
+        this.scene = newScene.map((item) => new SimSceneObjInfo(item));
+    }
+    setScene(newScene) {
+        this.scene = newScene;
+    }
     add(el) {
-        applyElementToScene(this.scene, el);
+        addObject(this.scene, el);
+    }
+    remove(el) {
+        removeObject(this.scene, el);
+    }
+    /**
+     * @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);
+        }
     }
     empty() {
         this.scene = [];
     }
     getSceneBuffer(camera) {
-        return this.scene.map((item) => item.getBuffer(camera)).flat();
+        return this.scene.map((item) => item.getObj().getBuffer(camera)).flat();
     }
     getWireframe(camera) {
         return this.getSceneBuffer(camera);

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="dist" />
+/// <reference types="@webgpu/types" />
 import { CubicBezierCurve2d, SplinePoint2d } from './graphics.js';
 import { Color, Vertex } from './utils.js';
 export type Shift<T extends any[]> = ((...args: T) => any) extends (arg1: any, ...rest: infer R) => any ? R : never;

package/package.json

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