simulationjsv2 0.2.3 → 0.2.5

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export * from './simulation.js';
 export * from './graphics.js';
 export * from './types.js';
-export { Vertex, Color, cloneBuf, vector4, vector3, vector2, vector3FromVector2, colorFromVector4, randomInt, randomColor, vertex, color, colorf, transitionValues, lerp, smoothStep, linearStep, splinePoint2d, continuousSplinePoint2d, easeInOutQuad, easeInOutExpo, easeInOutQuart } from './utils.js';
+export { Vertex, Color, cloneBuf, vector4, vector3, vector2, vector3FromVector2, colorFromVector4, randomInt, randomColor, vertex, color, colorf, transitionValues, lerp, smoothStep, linearStep, splinePoint2d, continuousSplinePoint2d, easeInOutQuad, easeInOutExpo, easeInOutQuart, waitFor } from './utils.js';

package/dist/index.js

@@ -1,4 +1,4 @@
 export * from './simulation.js';
 export * from './graphics.js';
 export * from './types.js';
-export { Vertex, Color, cloneBuf, vector4, vector3, vector2, vector3FromVector2, colorFromVector4, randomInt, randomColor, vertex, color, colorf, transitionValues, lerp, smoothStep, linearStep, splinePoint2d, continuousSplinePoint2d, easeInOutQuad, easeInOutExpo, easeInOutQuart } from './utils.js';
+export { Vertex, Color, cloneBuf, vector4, vector3, vector2, vector3FromVector2, colorFromVector4, randomInt, randomColor, vertex, color, colorf, transitionValues, lerp, smoothStep, linearStep, splinePoint2d, continuousSplinePoint2d, easeInOutQuad, easeInOutExpo, easeInOutQuart, waitFor } from './utils.js';

package/dist/simulation.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="dist" />
-import { SimulationElement } from './graphics.js';
+import { SimulationElement, SimulationElement3d } from './graphics.js';
 import type { Vector2, Vector3, LerpFunc } from './types.js';
 import { Color } from './utils.js';
+import { BlankGeometry } from './geometry.js';
 export declare class Simulation {
     canvasRef: HTMLCanvasElement | null;
     private bgColor;
@@ -20,14 +21,18 @@ export declare class Simulation {
     fitElement(): void;
     private assertHasCanvas;
 }
-export declare class SceneCollection extends SimulationElement {
+export declare class SceneCollection extends SimulationElement3d {
+    protected geometry: BlankGeometry;
     private name;
     private scene;
     constructor(name: string);
     getName(): string;
     add(el: SimulationElement<any>): void;
     empty(): void;
-    getBuffer(camera: Camera, force: boolean): number[];
+    getSceneBuffer(camera: Camera): number[];
+    getWireframe(camera: Camera): number[];
+    getTriangles(camera: Camera): number[];
+    protected updateMatrix(camera: Camera): void;
 }
 export declare class Camera {
     private pos;

package/dist/simulation.js

@@ -1,11 +1,8 @@
 import { vec3 } from 'wgpu-matrix';
-import { SimulationElement } from './graphics.js';
+import { SimulationElement3d } from './graphics.js';
 import { BUF_LEN } from './constants.js';
-import { Color, applyElementToScene, buildDepthTexture, buildMultisampleTexture, buildProjectionMatrix, getOrthoMatrix, getTransformationMatrix, logger, transitionValues, vector2, vector3 } from './utils.js';
-const vertexSize = 44; // 4 * 10 + 1
-const colorOffset = 16; // 4 * 4
-const uvOffset = 32; // 4 * 8
-const is3dOffset = 40; // 4 * 10
+import { Color, applyElementToScene, buildDepthTexture, buildMultisampleTexture, buildProjectionMatrix, createPipeline, getOrthoMatrix, getTransformationMatrix, logger, transitionValues, vector2, vector3 } from './utils.js';
+import { BlankGeometry } from './geometry.js';
 const shader = `
 struct Uniforms {
   modelViewProjectionMatrix : mat4x4<f32>,
@@ -23,19 +20,29 @@ struct VertexOutput {
 }
 
 @vertex
-fn vertex_main(
+fn vertex_main_3d(
   @location(0) position : vec4<f32>,
   @location(1) color : vec4<f32>,
   @location(2) uv : vec2<f32>,
-  @location(3) is3d : f32
 ) -> VertexOutput {
   var output : VertexOutput;
 
-  if is3d == 1 {
-    output.Position = uniforms.modelViewProjectionMatrix * position;
-  } else {
-    output.Position = uniforms.orthoProjectionMatrix * position;
-  }
+  output.Position = uniforms.modelViewProjectionMatrix * position;
+  output.fragUV = uv;
+  output.fragPosition = position;
+  output.fragColor = color;
+  return output;
+}
+
+@vertex
+fn vertex_main_2d(
+  @location(0) position : vec4<f32>,
+  @location(1) color : vec4<f32>,
+  @location(2) uv : vec2<f32>,
+) -> VertexOutput {
+  var output : VertexOutput;
+
+  output.Position = uniforms.orthoProjectionMatrix * position;
   output.fragUV = uv;
   output.fragPosition = position;
   output.fragColor = color;
@@ -131,7 +138,7 @@ export class Simulation {
         this.frameRateView.updateFrameRate(1);
     }
     add(el) {
-        applyElementToScene(this.scene, this.camera, el);
+        applyElementToScene(this.scene, el);
     }
     setCanvasSize(width, height) {
         this.assertHasCanvas();
@@ -178,71 +185,19 @@ export class Simulation {
             format: presentationFormat,
             alphaMode: 'premultiplied'
         });
-        const pipeline = device.createRenderPipeline({
-            layout: 'auto',
-            vertex: {
-                module: shaderModule,
-                entryPoint: 'vertex_main',
-                buffers: [
-                    {
-                        arrayStride: vertexSize,
-                        attributes: [
-                            {
-                                // position
-                                shaderLocation: 0,
-                                offset: 0,
-                                format: 'float32x4'
-                            },
-                            {
-                                // color
-                                shaderLocation: 1,
-                                offset: colorOffset,
-                                format: 'float32x4'
-                            },
-                            {
-                                // size
-                                shaderLocation: 2,
-                                offset: uvOffset,
-                                format: 'float32x2'
-                            },
-                            {
-                                // is3d
-                                shaderLocation: 3,
-                                offset: is3dOffset,
-                                format: 'float32'
-                            }
-                        ]
-                    }
-                ]
-            },
-            fragment: {
-                module: shaderModule,
-                entryPoint: 'fragment_main',
-                targets: [
-                    {
-                        format: presentationFormat
-                    }
-                ]
-            },
-            primitive: {
-                topology: 'triangle-list'
-            },
-            multisample: {
-                count: 4
-            },
-            depthStencil: {
-                depthWriteEnabled: true,
-                depthCompare: 'less',
-                format: 'depth24plus'
-            }
-        });
+        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');
         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: pipeline.getBindGroupLayout(0),
+            layout: pipeline3dTriangleList.getBindGroupLayout(0),
             entries: [
                 {
                     binding: 0,
@@ -324,27 +279,52 @@ export class Simulation {
             orthoMatrix.buffer, orthoMatrix.byteOffset, orthoMatrix.byteLength);
             device.queue.writeBuffer(uniformBuffer, 4 * 16 + 4 * 16, // 4x4 matrix + 4x4 matrix
             screenSize.buffer, screenSize.byteOffset, screenSize.byteLength);
-            let vertexArray = [];
-            for (let i = 0; i < this.scene.length; i++) {
-                const buffer = this.scene[i].getBuffer(this.camera, this.camera.hasUpdated());
-                vertexArray = vertexArray.concat(buffer);
-            }
-            this.camera.updateConsumed();
-            const vertexF32Array = new Float32Array(vertexArray);
-            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;
             const commandEncoder = device.createCommandEncoder();
             const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
-            passEncoder.setPipeline(pipeline);
+            passEncoder.setPipeline(pipeline3dTriangleList);
             passEncoder.setBindGroup(0, uniformBindGroup);
-            passEncoder.setVertexBuffer(0, vertexBuffer);
-            passEncoder.draw(vertexCount);
+            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);
+                    }
+                    else {
+                        passEncoder.setPipeline(pipeline2dLineStrip);
+                    }
+                }
+                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 (this.scene[i].is3d) {
+                            passEncoder.setPipeline(pipeline3dTriangleList);
+                        }
+                        else {
+                            passEncoder.setPipeline(pipeline2dTriangleList);
+                        }
+                    }
+                }
+                passEncoder.setVertexBuffer(0, vertexBuffer);
+                passEncoder.draw(vertexCount);
+            }
+            this.camera.updateConsumed();
             passEncoder.end();
             device.queue.submit([commandEncoder.finish()]);
         };
@@ -366,27 +346,36 @@ export class Simulation {
         }
     }
 }
-export class SceneCollection extends SimulationElement {
+export class SceneCollection extends SimulationElement3d {
+    geometry;
     name;
     scene;
     constructor(name) {
         super(vector3());
         this.name = name;
         this.scene = [];
+        this.geometry = new BlankGeometry();
     }
     getName() {
         return this.name;
     }
     add(el) {
-        applyElementToScene(this.scene, this.camera, el);
+        applyElementToScene(this.scene, el);
     }
     empty() {
         this.scene = [];
     }
-    getBuffer(camera, force) {
-        const res = [];
-        this.scene.forEach((item) => res.push(...item.getBuffer(camera, force)));
-        return res;
+    getSceneBuffer(camera) {
+        return this.scene.map((item) => item.getBuffer(camera)).flat();
+    }
+    getWireframe(camera) {
+        return this.getSceneBuffer(camera);
+    }
+    getTriangles(camera) {
+        return this.getSceneBuffer(camera);
+    }
+    updateMatrix(camera) {
+        this.defaultUpdateMatrix(camera);
     }
 }
 export class Camera {

package/dist/types.d.ts

@@ -1,6 +1,61 @@
-import { Color } from './utils.js';
+import { CubicBezierCurve2d, SplinePoint2d } from './graphics.js';
+import { Color, Vertex } from './utils.js';
 export type Vector4 = Float32Array & [number, number, number, number];
 export type Vector3 = Float32Array & [number, number, number];
 export type Vector2 = Float32Array & [number, number];
+export type Mat4 = Float32Array & [
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number
+];
 export type LerpFunc = (n: number) => number;
-export type VertexColorMap = Record<0 | 1 | 2 | 3, Color>;
+export type VertexColorMap = Record<number, Color>;
+export type ElementRotation<T extends Vector2 | Vector3> = T extends Vector2 ? number : T;
+export type CubeGeometryParams = {
+    width: number;
+    height: number;
+    depth: number;
+};
+export type SquareGeometryParams = {
+    width: number;
+    height: number;
+    colorMap: VertexColorMap;
+};
+export type CircleGeometryParams = {
+    radius: number;
+    detail: number;
+};
+export type SplineGeometryParams = {
+    points: SplinePoint2d[];
+    curves: CubicBezierCurve2d[];
+    distance: number;
+    detail: number;
+    interpolateStart: number;
+    interpolateLimit: number;
+    thickness: number;
+    color: Color;
+    vertexColors: Color[];
+};
+export type LineGeometryParams<T extends Vector2 | Vector3> = {
+    pos: T;
+    to: T;
+    thickness: number;
+};
+export type Line2dGeometryParams = LineGeometryParams<Vector2>;
+export type Line3dGeometryParams = LineGeometryParams<Vector3>;
+export type PolygonGeometryParams = {
+    points: Vertex[];
+};

package/dist/utils.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="dist" />
 import { SimulationElement, SplinePoint2d } from './graphics.js';
-import { Vector2, Vector3, Vector4 } from './types.js';
-import { Camera } from './simulation.js';
+import { Mat4, Vector2, Vector3, Vector4 } from './types.js';
 export declare class Color {
     r: number;
     g: number;
@@ -53,7 +52,7 @@ 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[], camera: Camera | null, el: SimulationElement) => void;
+export declare const applyElementToScene: (scene: SimulationElement[], el: SimulationElement) => void;
 declare class Logger {
     constructor();
     private fmt;
@@ -63,7 +62,7 @@ declare class Logger {
     log_error(msg: string): void;
 }
 export declare const logger: Logger;
-export declare function lossyTriangulate(vertices: Vertex[]): (readonly [Vertex, Vertex, Vertex])[];
+export declare function lossyTriangulate<T>(vertices: T[]): (readonly [T, T, T])[];
 /**
  * @param callback1 - called every frame until the animation is finished
  * @param callback2 - called after animation is finished (called immediately when t = 0)
@@ -77,13 +76,14 @@ export declare function linearStep(t: number): number;
 export declare function easeInOutExpo(t: number): number;
 export declare function easeInOutQuart(t: number): number;
 export declare function easeInOutQuad(t: number): number;
-export declare function vertexBuffer3d(x: number, y: number, z: number, color: Color, uv?: Vector2): number[];
-export declare function vertexBuffer2d(x: number, y: number, color: Color, uv?: Vector2): number[];
-export declare function vec3ToPixelRatio(vec: Vector3): void;
+export declare function vertexBuffer(x: number, y: number, z: number, color: Color, uv?: Vector2): number[];
+export declare function vector3ToPixelRatio(vec: Vector3): void;
+export declare function vector2ToPixelRatio(vec: Vector2): void;
 export declare function cloneBuf<T extends Float32Array>(buf: T): T;
 export declare function vector4(x?: number, y?: number, z?: number, w?: number): Vector4;
 export declare function vector3(x?: number, y?: number, z?: number): Vector3;
 export declare function vector2(x?: number, y?: number): Vector2;
+export declare function matrix4(): Mat4;
 export declare function vector3FromVector2(vec: Vector2): Vector3;
 export declare function vector2FromVector3(vec: Vector3): Vector2;
 export declare function colorFromVector4(vec: Vector4): Color;
@@ -95,4 +95,12 @@ export declare function colorf(val: number, a?: number): Color;
 export declare function splinePoint2d(end: Vertex, control1: Vector2, control2: Vector2, detail?: number): SplinePoint2d;
 export declare function continuousSplinePoint2d(end: Vertex, control: Vector2, detail?: number): SplinePoint2d;
 export declare function interpolateColors(colors: Color[], t: number): Color;
+/**
+ * @param t - seconds
+ */
+export declare function waitFor(t: number): Promise<unknown>;
+export declare function matrixFromRotation(rotation: Vector3): Mat4;
+export declare function rotateMat4(mat: Mat4, rotation: Vector3): void;
+export declare function createPipeline(device: GPUDevice, module: GPUShaderModule, presentationFormat: GPUTextureFormat, entryPoint: string, topology: GPUPrimitiveTopology): GPURenderPipeline;
+export declare function triangulateWireFrameOrder(len: number): number[];
 export {};

package/dist/utils.js

@@ -1,6 +1,6 @@
 import { mat4, vec2, vec3, vec4 } from 'wgpu-matrix';
 import { SimulationElement, SplinePoint2d } from './graphics.js';
-import { BUF_LEN } from './constants.js';
+import { BUF_LEN, colorOffset, uvOffset, vertexSize } from './constants.js';
 export class Color {
     r; // 0 - 255
     g; // 0 - 255
@@ -100,9 +100,9 @@ export class Vertex {
     }
     toBuffer(defaultColor) {
         if (this.is3d)
-            return vertexBuffer3d(this.pos[0], this.pos[1], this.pos[2], this.color || defaultColor, this.uv);
+            return vertexBuffer(this.pos[0], this.pos[1], this.pos[2], this.color || defaultColor, this.uv);
         else
-            return vertexBuffer2d(this.pos[0], this.pos[1], this.color || defaultColor, this.uv);
+            return vertexBuffer(this.pos[0], this.pos[1], 0, this.color || defaultColor, this.uv);
     }
 }
 export const buildProjectionMatrix = (aspectRatio, zNear = 1, zFar = 500) => {
@@ -141,11 +141,8 @@ export const buildMultisampleTexture = (device, ctx, width, height) => {
         sampleCount: 4
     });
 };
-export const applyElementToScene = (scene, camera, el) => {
-    if (!camera)
-        throw logger.error('Camera is not initialized in element');
+export const applyElementToScene = (scene, el) => {
     if (el instanceof SimulationElement) {
-        el.setCamera(camera);
         scene.push(el);
     }
     else {
@@ -263,14 +260,17 @@ export function easeInOutQuart(t) {
 export function easeInOutQuad(t) {
     return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
 }
-export function vertexBuffer3d(x, y, z, color, uv = vector2()) {
-    return [x, y, z, 1, ...color.toBuffer(), ...uv, 1];
+export function vertexBuffer(x, y, z, color, uv = vector2()) {
+    return [x, y, z, 1, ...color.toBuffer(), ...uv];
 }
-export function vertexBuffer2d(x, y, color, uv = vector2()) {
-    return [x, y, 0, 1, ...color.toBuffer(), ...uv, 0];
+export function vector3ToPixelRatio(vec) {
+    vec[0] *= devicePixelRatio;
+    vec[1] *= devicePixelRatio;
+    vec[2] *= devicePixelRatio;
 }
-export function vec3ToPixelRatio(vec) {
-    vec3.mul(vec, vector3(devicePixelRatio, devicePixelRatio, devicePixelRatio), vec);
+export function vector2ToPixelRatio(vec) {
+    vec[0] *= devicePixelRatio;
+    vec[1] *= devicePixelRatio;
 }
 export function cloneBuf(buf) {
     return new Float32Array(buf);
@@ -284,6 +284,9 @@ export function vector3(x = 0, y = 0, z = 0) {
 export function vector2(x = 0, y = 0) {
     return vec2.fromValues(x, y);
 }
+export function matrix4() {
+    return mat4.identity();
+}
 export function vector3FromVector2(vec) {
     return vector3(vec[0], vec[1]);
 }
@@ -348,3 +351,90 @@ export function interpolateColors(colors, t) {
     res.a += diff.a;
     return res;
 }
+/**
+ * @param t - seconds
+ */
+export function waitFor(t) {
+    return new Promise((resolve) => {
+        setTimeout(resolve, t * 1000);
+    });
+}
+export function matrixFromRotation(rotation) {
+    let rotMatrix = mat4.identity();
+    mat4.rotateZ(rotMatrix, rotation[2], rotMatrix);
+    mat4.rotateY(rotMatrix, rotation[1], rotMatrix);
+    mat4.rotateX(rotMatrix, rotation[0], rotMatrix);
+    return rotMatrix;
+}
+export function rotateMat4(mat, rotation) {
+    mat4.rotateZ(mat, rotation[2], mat);
+    mat4.rotateY(mat, rotation[1], mat);
+    mat4.rotateX(mat, rotation[0], mat);
+}
+export function createPipeline(device, module, presentationFormat, entryPoint, topology) {
+    return device.createRenderPipeline({
+        layout: 'auto',
+        vertex: {
+            module,
+            entryPoint,
+            buffers: [
+                {
+                    arrayStride: vertexSize,
+                    attributes: [
+                        {
+                            // position
+                            shaderLocation: 0,
+                            offset: 0,
+                            format: 'float32x4'
+                        },
+                        {
+                            // color
+                            shaderLocation: 1,
+                            offset: colorOffset,
+                            format: 'float32x4'
+                        },
+                        {
+                            // size
+                            shaderLocation: 2,
+                            offset: uvOffset,
+                            format: 'float32x2'
+                        }
+                    ]
+                }
+            ]
+        },
+        fragment: {
+            module,
+            entryPoint: 'fragment_main',
+            targets: [
+                {
+                    format: presentationFormat
+                }
+            ]
+        },
+        primitive: {
+            topology
+        },
+        multisample: {
+            count: 4
+        },
+        depthStencil: {
+            depthWriteEnabled: true,
+            depthCompare: 'less',
+            format: 'depth24plus'
+        }
+    });
+}
+export function triangulateWireFrameOrder(len) {
+    const order = Array(len)
+        .fill(0)
+        .map((_, index) => index);
+    let front = 0;
+    let back = len - 1;
+    while (front < back) {
+        order.push(front, back);
+        front++;
+        back--;
+    }
+    return order;
+}

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.3",
+  "version": "0.2.5",
   "exports": {
     ".": {
       "import": "./dist/index.js",