simulationjsv2 0.4.2 → 0.4.4

package/dist/geometry.js

@@ -1,8 +1,8 @@
 import { mat4, vec2, vec3 } from 'wgpu-matrix';
-import { cloneBuf, matrix4, vector2, vector2FromVector3, vector3, vector3FromVector2, vertex } from './utils.js';
+import { cloneBuf, interpolateColors, matrix4, vector2, vector2FromVector3, vector3, vector3FromVector2, vertex } from './utils.js';
 import { CubicBezierCurve2d } from './graphics.js';
 import { BUF_LEN } from './constants.js';
-import { bufferGenerator, interpolateColors, lossyTriangulate, triangulateWireFrameOrder } from './internalUtils.js';
+import { bufferGenerator, lossyTriangulate, triangulateWireFrameOrder } from './internalUtils.js';
 export class Geometry {
     vertices;
     matrix;

package/dist/graphics.js

@@ -373,6 +373,7 @@ export class Circle extends SimulationElement2d {
     detail;
     constructor(pos, radius, color, detail = 50) {
         super(pos, 0, color);
+        vector2ToPixelRatio(this.pos);
         this.radius = radius;
         this.detail = detail;
         this.geometry = new CircleGeometry(this.radius, this.detail);

package/dist/internalUtils.d.ts

@@ -58,7 +58,6 @@ declare class BufferGenerator {
 export declare const bufferGenerator: BufferGenerator;
 export declare function vector3ToPixelRatio(vec: Vector3): void;
 export declare function vector2ToPixelRatio(vec: Vector2): void;
-export declare function interpolateColors(colors: Color[], t: number): Color;
 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;

package/dist/internalUtils.js

@@ -1,6 +1,6 @@
 import { mat4, vec3 } from 'wgpu-matrix';
 import { BUF_LEN, colorOffset, drawingInstancesOffset, uvOffset, vertexSize } from './constants.js';
-import { color, vector2, vector3 } from './utils.js';
+import { vector2, vector3 } from './utils.js';
 import { SimulationElement } from './graphics.js';
 export class VertexCache {
     vertices = [];
@@ -192,31 +192,6 @@ export function vector2ToPixelRatio(vec) {
     vec[0] *= devicePixelRatio;
     vec[1] *= devicePixelRatio;
 }
-export function interpolateColors(colors, t) {
-    t = Math.min(1, Math.max(0, t));
-    if (colors.length === 0)
-        return color();
-    if (colors.length === 1)
-        return colors[0];
-    const colorInterval = 1 / colors.length;
-    let index = Math.floor(t / colorInterval);
-    if (index >= colors.length)
-        index = colors.length - 1;
-    const from = index === colors.length - 1 ? colors[index - 1] : colors[index];
-    const to = index === colors.length - 1 ? colors[index] : colors[index + 1];
-    const diff = to.diff(from);
-    const scale = t / (colorInterval * colors.length);
-    diff.r *= scale;
-    diff.g *= scale;
-    diff.b *= scale;
-    diff.a *= scale;
-    const res = from.clone();
-    res.r += diff.r;
-    res.g += diff.g;
-    res.b += diff.b;
-    res.a += diff.a;
-    return res;
-}
 export function matrixFromRotation(rotation) {
     let rotMatrix = mat4.identity();
     mat4.rotateZ(rotMatrix, rotation[2], rotMatrix);
@@ -308,8 +283,6 @@ export function getTotalVertices(scene) {
     let total = 0;
     for (let i = 0; i < scene.length; i++) {
         const obj = scene[i].getObj();
-        if (obj.isCollection)
-            continue;
         total += obj.getVertexCount();
     }
     return total;

package/dist/simulation.d.ts

@@ -44,6 +44,7 @@ export declare class SceneCollection extends SimulationElement3d {
     setWireframe(_: boolean): void;
     getName(): string;
     getScene(): SimSceneObjInfo[];
+    getVertexCount(): number;
     getSceneObjects(): SimulationElement<Vector3 | Vector2>[];
     setSceneObjects(newScene: SimulationElement<any>[]): void;
     setScene(newScene: SimSceneObjInfo[]): void;

package/dist/simulation.js

@@ -266,7 +266,8 @@ export class Simulation {
         this.renderInfo = {
             uniformBuffer,
             bindGroupLayout,
-            instanceBuffer
+            instanceBuffer,
+            vertexBuffer: null
         };
         this.pipelines = {
             triangleList2d: createPipeline(device, shaderModule, bindGroupLayout, presentationFormat, 'vertex_main_2d', 'triangle-list'),
@@ -329,6 +330,8 @@ export class Simulation {
         const frame = async () => {
             if (!canvas)
                 return;
+            if (!this.renderInfo)
+                return;
             requestAnimationFrame(frame);
             if (!this.running)
                 return;
@@ -369,22 +372,25 @@ export class Simulation {
             const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
             passEncoder.setPipeline(this.pipelines.triangleList3d);
             passEncoder.setBindGroup(0, uniformBindGroup);
-            this.renderScene(device, passEncoder, this.scene, diff);
+            const totalVertices = getTotalVertices(this.scene);
+            if (this.renderInfo.vertexBuffer === null ||
+                this.renderInfo.vertexBuffer.size / (4 * BUF_LEN) < totalVertices) {
+                this.renderInfo.vertexBuffer = device.createBuffer({
+                    size: totalVertices * 4 * BUF_LEN,
+                    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+                });
+            }
+            this.renderScene(device, passEncoder, this.renderInfo.vertexBuffer, this.scene, 0, diff);
             this.camera.updateConsumed();
             passEncoder.end();
             device.queue.submit([commandEncoder.finish()]);
         };
         requestAnimationFrame(frame);
     }
-    async renderScene(device, passEncoder, scene, diff) {
+    renderScene(device, passEncoder, vertexBuffer, scene, startOffset, diff) {
         if (this.pipelines === null)
-            return;
-        let totalVertices = getTotalVertices(scene);
-        const vertexBuffer = device.createBuffer({
-            size: totalVertices * 4 * BUF_LEN,
-            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
-        });
-        let currentOffset = 0;
+            return 0;
+        let currentOffset = startOffset;
         let toRemove = [];
         for (let i = 0; i < scene.length; i++) {
             const lifetime = scene[i].getLifetime();
@@ -398,7 +404,7 @@ export class Simulation {
             }
             const obj = scene[i].getObj();
             if (obj.isCollection) {
-                this.renderScene(device, passEncoder, obj.getScene(), diff);
+                currentOffset += this.renderScene(device, passEncoder, vertexBuffer, obj.getScene(), currentOffset, diff);
                 continue;
             }
             const buffer = new Float32Array(obj.getBuffer(this.camera));
@@ -465,6 +471,7 @@ export class Simulation {
         for (let i = toRemove.length - 1; i >= 0; i--) {
             removeObject(scene, scene[i].getObj());
         }
+        return currentOffset - startOffset;
     }
     fitElement() {
         this.assertHasCanvas();
@@ -501,6 +508,13 @@ export class SceneCollection extends SimulationElement3d {
     getScene() {
         return this.scene;
     }
+    getVertexCount() {
+        let total = 0;
+        for (let i = 0; i < this.scene.length; i++) {
+            total += this.scene[i].getObj().getVertexCount();
+        }
+        return total;
+    }
     getSceneObjects() {
         return this.scene.map((item) => item.getObj());
     }

package/dist/types.d.ts

@@ -75,4 +75,5 @@ export type RenderInfo = {
     uniformBuffer: GPUBuffer;
     instanceBuffer: GPUBuffer;
     bindGroupLayout: GPUBindGroupLayout;
+    vertexBuffer: GPUBuffer | null;
 };

package/dist/utils.d.ts

@@ -80,3 +80,4 @@ export declare function distance2d(vector1: Vector2, vector2: Vector2): number;
 export declare function distance3d(vector1: Vector3, vector2: Vector3): number;
 export declare function toSceneObjInfo(el: SimulationElement<any>, id?: string): SimSceneObjInfo;
 export declare function toSceneObjInfoMany(el: SimulationElement<any>[], id?: (string | undefined)[]): SimSceneObjInfo[];
+export declare function interpolateColors(colors: Color[], t: number): Color;

package/dist/utils.js

@@ -260,3 +260,28 @@ export function toSceneObjInfo(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)
+        return color();
+    if (colors.length === 1)
+        return colors[0];
+    const colorInterval = 1 / colors.length;
+    let index = Math.floor(t / colorInterval);
+    if (index >= colors.length)
+        index = colors.length - 1;
+    const from = index === colors.length - 1 ? colors[index - 1] : colors[index];
+    const to = index === colors.length - 1 ? colors[index] : colors[index + 1];
+    const diff = to.diff(from);
+    const scale = t / (colorInterval * colors.length);
+    diff.r *= scale;
+    diff.g *= scale;
+    diff.b *= scale;
+    diff.a *= scale;
+    const res = from.clone();
+    res.r += diff.r;
+    res.g += diff.g;
+    res.b += diff.b;
+    res.a += diff.a;
+    return res;
+}

package/package.json

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