simulationjsv2 0.2.5 → 0.2.7

package/dist/graphics.d.ts

@@ -9,7 +9,7 @@ export declare abstract class SimulationElement<T extends Vector2 | Vector3 = Ve
     protected wireframe: boolean;
     protected vertexCache: VertexCache;
     protected rotation: ElementRotation<T>;
-    is3d: boolean;
+    readonly is3d: boolean;
     /**
      * @param pos - Expected to be adjusted to devicePixelRatio before reaching constructor
      */

package/dist/graphics.js

@@ -219,8 +219,8 @@ export class Square extends SimulationElement2d {
      */
     constructor(pos, width, height, color, rotation, vertexColors) {
         super(pos, rotation, color);
-        this.width = width * devicePixelRatio;
-        this.height = height * devicePixelRatio;
+        this.width = width;
+        this.height = height;
         this.vertexColors = this.cloneColorMap(vertexColors || {});
         this.geometry = new SquareGeometry(this.width, this.height);
         this.geometry.setVertexColorMap(this.vertexColors);

package/dist/simulation.d.ts

@@ -11,6 +11,7 @@ export declare class Simulation {
     private running;
     private frameRateView;
     private camera;
+    private pipelines;
     constructor(idOrCanvasRef: string | HTMLCanvasElement, camera?: Camera | null, showFrameRate?: boolean);
     add(el: SimulationElement<any>): void;
     setCanvasSize(width: number, height: number): void;
@@ -18,6 +19,7 @@ export declare class Simulation {
     stop(): void;
     setBackground(color: Color): void;
     render(device: GPUDevice, ctx: GPUCanvasContext): void;
+    private renderScene;
     fitElement(): void;
     private assertHasCanvas;
 }
@@ -26,7 +28,9 @@ export declare class SceneCollection extends SimulationElement3d {
     private name;
     private scene;
     constructor(name: string);
+    setWireframe(_: boolean): void;
     getName(): string;
+    getScene(): SimulationElement<Vector3>[];
     add(el: SimulationElement<any>): void;
     empty(): void;
     getSceneBuffer(camera: Camera): number[];

package/dist/simulation.js

@@ -106,6 +106,7 @@ export class Simulation {
     running = true;
     frameRateView;
     camera;
+    pipelines;
     constructor(idOrCanvasRef, camera = null, showFrameRate = false) {
         if (typeof idOrCanvasRef === 'string') {
             const ref = document.getElementById(idOrCanvasRef);
@@ -134,6 +135,7 @@ export class Simulation {
                 this.setCanvasSize(width, height);
             }
         });
+        this.pipelines = null;
         this.frameRateView = new FrameRateView(showFrameRate);
         this.frameRateView.updateFrameRate(1);
     }
@@ -185,19 +187,21 @@ export class Simulation {
             format: presentationFormat,
             alphaMode: 'premultiplied'
         });
-        const pipeline2dTriangleList = createPipeline(device, shaderModule, presentationFormat, 'vertex_main_2d', 'triangle-list');
-        const pipeline2dTriangleStrip = createPipeline(device, shaderModule, presentationFormat, 'vertex_main_2d', 'triangle-strip');
-        const pipeline2dLineStrip = createPipeline(device, shaderModule, presentationFormat, 'vertex_main_2d', 'line-strip');
-        const pipeline3dTriangleList = createPipeline(device, shaderModule, presentationFormat, 'vertex_main_3d', 'triangle-list');
-        const pipeline3dTriangleStrip = createPipeline(device, shaderModule, presentationFormat, 'vertex_main_3d', 'triangle-strip');
-        const pipeline3dLineStrip = createPipeline(device, shaderModule, presentationFormat, 'vertex_main_3d', 'line-strip');
+        this.pipelines = {
+            triangleList2d: createPipeline(device, shaderModule, presentationFormat, 'vertex_main_2d', 'triangle-list'),
+            triangleStrip2d: createPipeline(device, shaderModule, presentationFormat, 'vertex_main_2d', 'triangle-strip'),
+            lineStrip2d: createPipeline(device, shaderModule, presentationFormat, 'vertex_main_2d', 'line-strip'),
+            triangleList3d: createPipeline(device, shaderModule, presentationFormat, 'vertex_main_3d', 'triangle-list'),
+            triangleStrip3d: createPipeline(device, shaderModule, presentationFormat, 'vertex_main_3d', 'triangle-strip'),
+            lineStrip3d: createPipeline(device, shaderModule, presentationFormat, 'vertex_main_3d', 'line-strip')
+        };
         const uniformBufferSize = 4 * 16 + 4 * 16 + 4 * 2 + 8; // 4x4 matrix + 4x4 matrix + vec2<f32> + 8 bc 144 is cool
         const uniformBuffer = device.createBuffer({
             size: uniformBufferSize,
             usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
         });
         const uniformBindGroup = device.createBindGroup({
-            layout: pipeline3dTriangleList.getBindGroupLayout(0),
+            layout: this.pipelines.triangleList3d.getBindGroupLayout(0),
             entries: [
                 {
                     binding: 0,
@@ -281,54 +285,63 @@ export class Simulation {
             screenSize.buffer, screenSize.byteOffset, screenSize.byteLength);
             const commandEncoder = device.createCommandEncoder();
             const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
-            passEncoder.setPipeline(pipeline3dTriangleList);
+            passEncoder.setPipeline(this.pipelines.triangleList3d);
             passEncoder.setBindGroup(0, uniformBindGroup);
-            for (let i = 0; i < this.scene.length; i++) {
-                const buffer = this.scene[i].getBuffer(this.camera);
-                const vertexF32Array = new Float32Array(buffer);
-                const vertexBuffer = device.createBuffer({
-                    size: vertexF32Array.byteLength,
-                    usage: GPUBufferUsage.VERTEX,
-                    mappedAtCreation: true
-                });
-                new Float32Array(vertexBuffer.getMappedRange()).set(vertexF32Array);
-                vertexBuffer.unmap();
-                const vertexCount = vertexF32Array.length / BUF_LEN;
-                if (this.scene[i].isWireframe()) {
-                    if (this.scene[i].is3d) {
-                        passEncoder.setPipeline(pipeline3dLineStrip);
+            this.renderScene(device, passEncoder, this.scene);
+            this.camera.updateConsumed();
+            passEncoder.end();
+            device.queue.submit([commandEncoder.finish()]);
+        };
+        requestAnimationFrame(frame);
+    }
+    renderScene(device, passEncoder, scene) {
+        if (this.pipelines === null)
+            return;
+        for (let i = 0; i < scene.length; i++) {
+            if (scene[i] instanceof SceneCollection) {
+                this.renderScene(device, passEncoder, scene[i].getScene());
+                continue;
+            }
+            const buffer = scene[i].getBuffer(this.camera);
+            const vertexF32Array = new Float32Array(buffer);
+            const vertexBuffer = device.createBuffer({
+                size: vertexF32Array.byteLength,
+                usage: GPUBufferUsage.VERTEX,
+                mappedAtCreation: true
+            });
+            new Float32Array(vertexBuffer.getMappedRange()).set(vertexF32Array);
+            vertexBuffer.unmap();
+            const vertexCount = vertexF32Array.length / BUF_LEN;
+            if (scene[i].isWireframe()) {
+                if (scene[i].is3d) {
+                    passEncoder.setPipeline(this.pipelines.lineStrip3d);
+                }
+                else {
+                    passEncoder.setPipeline(this.pipelines.lineStrip2d);
+                }
+            }
+            else {
+                const type = scene[i].getGeometryType();
+                if (type === 'strip') {
+                    if (scene[i].is3d) {
+                        passEncoder.setPipeline(this.pipelines.triangleStrip3d);
                     }
                     else {
-                        passEncoder.setPipeline(pipeline2dLineStrip);
+                        passEncoder.setPipeline(this.pipelines.triangleStrip2d);
                     }
                 }
-                else {
-                    const type = this.scene[i].getGeometryType();
-                    if (type === 'strip') {
-                        if (this.scene[i].is3d) {
-                            passEncoder.setPipeline(pipeline3dTriangleStrip);
-                        }
-                        else {
-                            passEncoder.setPipeline(pipeline2dTriangleStrip);
-                        }
+                else if (type === 'list') {
+                    if (scene[i].is3d) {
+                        passEncoder.setPipeline(this.pipelines.triangleList3d);
                     }
-                    else if (type === 'list') {
-                        if (this.scene[i].is3d) {
-                            passEncoder.setPipeline(pipeline3dTriangleList);
-                        }
-                        else {
-                            passEncoder.setPipeline(pipeline2dTriangleList);
-                        }
+                    else {
+                        passEncoder.setPipeline(this.pipelines.triangleList2d);
                     }
                 }
-                passEncoder.setVertexBuffer(0, vertexBuffer);
-                passEncoder.draw(vertexCount);
             }
-            this.camera.updateConsumed();
-            passEncoder.end();
-            device.queue.submit([commandEncoder.finish()]);
-        };
-        requestAnimationFrame(frame);
+            passEncoder.setVertexBuffer(0, vertexBuffer);
+            passEncoder.draw(vertexCount);
+        }
     }
     fitElement() {
         this.assertHasCanvas();
@@ -352,13 +365,18 @@ export class SceneCollection extends SimulationElement3d {
     scene;
     constructor(name) {
         super(vector3());
+        this.wireframe = false;
         this.name = name;
         this.scene = [];
         this.geometry = new BlankGeometry();
     }
+    setWireframe(_) { }
     getName() {
         return this.name;
     }
+    getScene() {
+        return this.scene;
+    }
     add(el) {
         applyElementToScene(this.scene, el);
     }
@@ -372,6 +390,7 @@ export class SceneCollection extends SimulationElement3d {
         return this.getSceneBuffer(camera);
     }
     getTriangles(camera) {
+        console.log('here');
         return this.getSceneBuffer(camera);
     }
     updateMatrix(camera) {

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="dist" />
 import { CubicBezierCurve2d, SplinePoint2d } from './graphics.js';
 import { Color, Vertex } from './utils.js';
 export type Vector4 = Float32Array & [number, number, number, number];
@@ -59,3 +60,11 @@ export type Line3dGeometryParams = LineGeometryParams<Vector3>;
 export type PolygonGeometryParams = {
     points: Vertex[];
 };
+export type PipelineGroup = {
+    triangleList2d: GPURenderPipeline;
+    triangleStrip2d: GPURenderPipeline;
+    lineStrip2d: GPURenderPipeline;
+    triangleList3d: GPURenderPipeline;
+    triangleStrip3d: GPURenderPipeline;
+    lineStrip3d: GPURenderPipeline;
+};

package/package.json

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