simulationjsv2 0.5.1 → 0.6.0

package/dist/simulation.js

@@ -1,64 +1,40 @@
 import { vec3 } from 'wgpu-matrix';
 import { Instance, SimulationElement3d } from './graphics.js';
-import { BUF_LEN } from './constants.js';
-import { Color, toSceneObjInfoMany, transitionValues, vector2, vector3 } from './utils.js';
+import { BUF_LEN, worldProjMatOffset } from './constants.js';
+import { Color, matrix4, toSceneObjInfoMany, transitionValues, vector2, vector3 } from './utils.js';
 import { BlankGeometry } from './geometry.js';
-import { addObject, buildDepthTexture, buildMultisampleTexture, buildProjectionMatrix, createPipeline, getOrthoMatrix, getTotalVertices, getTransformationMatrix, logger, removeObject, removeObjectId } from './internalUtils.js';
+import { addObject, buildDepthTexture, buildMultisampleTexture, updateProjectionMatrix, createPipeline, getTotalVertices, logger, removeObject, removeObjectId, updateOrthoProjectionMatrix, updateWorldProjectionMatrix, wrapVoidPromise } from './internalUtils.js';
 const shader = `
 struct Uniforms {
-  modelViewProjectionMatrix : mat4x4<f32>,
-  orthoProjectionMatrix : mat4x4<f32>
+  worldProjectionMatrix: mat4x4<f32>,
+  modelProjectionMatrix: mat4x4<f32>,
 }
  
-@group(0) @binding(0) var<uniform> uniforms : Uniforms;
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
 
-@group(0) @binding(1) var<storage> instanceMatrices : array<mat4x4f>;
+@group(0) @binding(1) var<storage> instanceMatrices: array<mat4x4f>;
 
 struct VertexOutput {
-  @builtin(position) Position : vec4<f32>,
-  @location(0) fragUV : vec2<f32>,
-  @location(1) fragColor : vec4<f32>,
+  @builtin(position) Position: vec4<f32>,
+  @location(0) fragUV: vec2<f32>,
+  @location(1) fragColor: vec4<f32>,
   @location(2) fragPosition: vec4<f32>,
 }
 
 @vertex
-fn vertex_main_3d(
-  @builtin(instance_index) instanceIdx : u32,
-  @location(0) position : vec4<f32>,
-  @location(1) color : vec4<f32>,
-  @location(2) uv : vec2<f32>,
-  @location(3) drawingInstance: f32
-) -> VertexOutput {
-  var output : VertexOutput;
-
-  if (drawingInstance == 1) {
-    let transformedPos = instanceMatrices[instanceIdx] * position;
-    output.Position = uniforms.modelViewProjectionMatrix * transformedPos;
-  } else {
-    output.Position = uniforms.modelViewProjectionMatrix * position;
-  }
-
-  output.fragUV = uv;
-  output.fragPosition = output.Position;
-  output.fragColor = color;
-  return output;
-}
-
-@vertex
-fn vertex_main_2d(
-  @builtin(instance_index) instanceIdx : u32,
-  @location(0) position : vec4<f32>,
-  @location(1) color : vec4<f32>,
-  @location(2) uv : vec2<f32>,
+fn vertex_main(
+  @builtin(instance_index) instanceIdx: u32,
+  @location(0) position: vec3<f32>,
+  @location(1) color: vec4<f32>,
+  @location(2) uv: vec2<f32>,
   @location(3) drawingInstance: f32
 ) -> VertexOutput {
   var output: VertexOutput;
 
   if (drawingInstance == 1) {
-    let transformedPos = instanceMatrices[instanceIdx] * position;
-    output.Position = uniforms.orthoProjectionMatrix * transformedPos;
+    output.Position = uniforms.worldProjectionMatrix * uniforms.modelProjectionMatrix * instanceMatrices[instanceIdx] * vec4(position, 1.0);
   } else {
-    output.Position = uniforms.orthoProjectionMatrix * position;
+    output.Position = uniforms.worldProjectionMatrix * uniforms.modelProjectionMatrix * vec4(position, 1.0);
   }
 
   output.fragUV = uv;
@@ -117,6 +93,28 @@ class FrameRateView {
         }
     }
 }
+const baseBindGroupLayout = {
+    entries: [
+        {
+            binding: 0,
+            visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+            buffer: {
+                type: 'uniform'
+            }
+        },
+        {
+            binding: 1,
+            visibility: GPUShaderStage.VERTEX,
+            buffer: {
+                type: 'read-only-storage'
+            }
+        }
+    ]
+};
+let aspectRatio = 0;
+const projMat = matrix4();
+const worldProjMat = matrix4();
+const orthoMatrix = matrix4();
 export class Simulation {
     canvasRef = null;
     bgColor = new Color(255, 255, 255);
@@ -237,7 +235,7 @@ export class Simulation {
     propagateDevice(device) {
         for (let i = 0; i < this.scene.length; i++) {
             const el = this.scene[i].getObj();
-            if (el instanceof Instance || el instanceof SceneCollection) {
+            if (el instanceof SceneCollection) {
                 el.setDevice(device);
             }
         }
@@ -268,64 +266,21 @@ export class Simulation {
             format: presentationFormat,
             alphaMode: 'premultiplied'
         });
-        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 instanceBuffer = device.createBuffer({
             size: 10 * 4 * 16,
             usage: GPUBufferUsage.STORAGE
         });
-        const bindGroupLayout = device.createBindGroupLayout({
-            entries: [
-                {
-                    binding: 0,
-                    visibility: GPUShaderStage.VERTEX,
-                    buffer: {
-                        type: 'uniform'
-                    }
-                },
-                {
-                    binding: 1,
-                    visibility: GPUShaderStage.VERTEX,
-                    buffer: {
-                        type: 'read-only-storage'
-                    }
-                }
-            ]
-        });
+        const bindGroupLayout = device.createBindGroupLayout(baseBindGroupLayout);
         this.renderInfo = {
-            uniformBuffer,
             bindGroupLayout,
             instanceBuffer,
             vertexBuffer: null
         };
         this.pipelines = {
-            triangleList2d: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'vertex_main_2d', 'triangle-list'),
-            triangleStrip2d: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'vertex_main_2d', 'triangle-strip'),
-            lineStrip2d: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'vertex_main_2d', 'line-strip'),
-            triangleList3d: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'vertex_main_3d', 'triangle-list'),
-            triangleStrip3d: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'vertex_main_3d', 'triangle-strip'),
-            lineStrip3d: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'vertex_main_3d', 'line-strip')
+            triangleList: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'triangle-list'),
+            triangleStrip: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'triangle-strip'),
+            lineStrip: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'line-strip')
         };
-        const uniformBindGroup = device.createBindGroup({
-            layout: bindGroupLayout,
-            entries: [
-                {
-                    binding: 0,
-                    resource: {
-                        buffer: uniformBuffer
-                    }
-                },
-                {
-                    binding: 1,
-                    resource: {
-                        buffer: instanceBuffer
-                    }
-                }
-            ]
-        });
         const colorAttachment = {
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
@@ -334,18 +289,13 @@ export class Simulation {
             loadOp: 'clear',
             storeOp: 'store'
         };
-        let aspect = canvas.width / canvas.height;
-        let projectionMatrix = buildProjectionMatrix(aspect);
-        let modelViewProjectionMatrix;
-        let orthoMatrix;
-        const updateModelViewProjectionMatrix = () => {
-            modelViewProjectionMatrix = getTransformationMatrix(this.camera.getPos(), this.camera.getRotation(), projectionMatrix);
-        };
-        updateModelViewProjectionMatrix();
-        const updateOrthoMatrix = () => {
-            orthoMatrix = getOrthoMatrix(this.camera.getScreenSize());
-        };
-        updateOrthoMatrix();
+        const newAspectRatio = canvas.width / canvas.height;
+        if (newAspectRatio !== aspectRatio) {
+            updateProjectionMatrix(projMat, newAspectRatio);
+            aspectRatio = newAspectRatio;
+        }
+        updateWorldProjectionMatrix(worldProjMat, projMat, this.camera);
+        updateOrthoProjectionMatrix(orthoMatrix, this.camera.getScreenSize());
         let multisampleTexture = buildMultisampleTexture(device, ctx, canvas.width, canvas.height);
         let depthTexture = buildDepthTexture(device, canvas.width, canvas.height);
         const renderPassDescriptor = {
@@ -383,9 +333,9 @@ export class Simulation {
                 this.camera.setScreenSize(vector2(canvas.width, canvas.height));
                 screenSize[0] = canvas.width;
                 screenSize[1] = canvas.height;
-                aspect = this.camera.getAspectRatio();
-                projectionMatrix = buildProjectionMatrix(aspect);
-                updateModelViewProjectionMatrix();
+                aspectRatio = this.camera.getAspectRatio();
+                updateProjectionMatrix(projMat, aspectRatio);
+                updateWorldProjectionMatrix(worldProjMat, projMat, this.camera);
                 multisampleTexture = buildMultisampleTexture(device, ctx, screenSize[0], screenSize[1]);
                 depthTexture = buildDepthTexture(device, screenSize[0], screenSize[1]);
                 renderPassDescriptor.depthStencilAttachment.view = depthTexture.createView();
@@ -397,16 +347,12 @@ export class Simulation {
             // @ts-ignore
             renderPassDescriptor.colorAttachments[0].resolveTarget = ctx.getCurrentTexture().createView();
             if (this.camera.hasUpdated()) {
-                updateOrthoMatrix();
-                updateModelViewProjectionMatrix();
+                updateOrthoProjectionMatrix(orthoMatrix, this.camera.getScreenSize());
+                updateWorldProjectionMatrix(worldProjMat, projMat, this.camera);
             }
-            device.queue.writeBuffer(uniformBuffer, 0, modelViewProjectionMatrix.buffer, modelViewProjectionMatrix.byteOffset, modelViewProjectionMatrix.byteLength);
-            device.queue.writeBuffer(uniformBuffer, 4 * 16, // 4x4 matrix
-            orthoMatrix.buffer, orthoMatrix.byteOffset, orthoMatrix.byteLength);
             const commandEncoder = device.createCommandEncoder();
             const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
-            passEncoder.setPipeline(this.pipelines.triangleList3d);
-            passEncoder.setBindGroup(0, uniformBindGroup);
+            passEncoder.setPipeline(this.pipelines.triangleList);
             const totalVertices = getTotalVertices(this.scene);
             if (this.renderInfo.vertexBuffer === null ||
                 this.renderInfo.vertexBuffer.size / (4 * BUF_LEN) < totalVertices) {
@@ -458,66 +404,63 @@ export class Simulation {
                 currentOffset += this.renderScene(device, passEncoder, vertexBuffer, obj.getScene(), currentOffset, diff, shaderInfo || undefined);
                 continue;
             }
-            const buffer = new Float32Array(obj.getBuffer(this.camera, shaderInfo?.paramGenerator));
+            const buffer = new Float32Array(obj.getBuffer(shaderInfo?.paramGenerator));
             const bufLen = shaderInfo?.paramGenerator?.bufferSize || BUF_LEN;
             const vertexCount = buffer.length / bufLen;
             device.queue.writeBuffer(vertexBuffer, currentOffset, buffer);
             vertexBuffer.unmap();
-            const is3d = Boolean(obj.is3d);
+            passEncoder.setVertexBuffer(0, vertexBuffer, currentOffset, buffer.byteLength);
+            const modelMatrix = obj.getModelMatrix(this.camera);
+            const uniformBuffer = obj.getUniformBuffer(device, modelMatrix);
+            if (obj.is3d) {
+                device.queue.writeBuffer(uniformBuffer, worldProjMatOffset, worldProjMat.buffer, worldProjMat.byteOffset, worldProjMat.byteLength);
+            }
+            else {
+                device.queue.writeBuffer(uniformBuffer, worldProjMatOffset, orthoMatrix.buffer, orthoMatrix.byteOffset, orthoMatrix.byteLength);
+            }
             if (shaderInfo) {
                 passEncoder.setPipeline(shaderInfo.pipeline);
             }
             else if (obj.isWireframe()) {
-                if (is3d) {
-                    passEncoder.setPipeline(this.pipelines.lineStrip3d);
-                }
-                else {
-                    passEncoder.setPipeline(this.pipelines.lineStrip2d);
-                }
+                passEncoder.setPipeline(this.pipelines.lineStrip);
             }
             else {
                 const type = obj.getGeometryType();
                 if (type === 'strip') {
-                    if (is3d) {
-                        passEncoder.setPipeline(this.pipelines.triangleStrip3d);
-                    }
-                    else {
-                        passEncoder.setPipeline(this.pipelines.triangleStrip2d);
-                    }
+                    passEncoder.setPipeline(this.pipelines.triangleStrip);
                 }
                 else if (type === 'list') {
-                    if (is3d) {
-                        passEncoder.setPipeline(this.pipelines.triangleList3d);
-                    }
-                    else {
-                        passEncoder.setPipeline(this.pipelines.triangleList2d);
-                    }
+                    passEncoder.setPipeline(this.pipelines.triangleList);
                 }
             }
             let instances = 1;
-            if (obj instanceof Instance) {
-                instances = obj.getNumInstances();
-                const buf = obj.getMatrixBuffer();
-                if (buf && this.renderInfo) {
-                    const uniformBindGroup = device.createBindGroup({
-                        layout: this.renderInfo.bindGroupLayout,
-                        entries: [
-                            {
-                                binding: 0,
-                                resource: {
-                                    buffer: this.renderInfo.uniformBuffer
-                                }
-                            },
-                            {
-                                binding: 1,
-                                resource: {
-                                    buffer: buf
-                                }
-                            }
-                        ]
-                    });
-                    passEncoder.setBindGroup(0, uniformBindGroup);
+            if (this.renderInfo) {
+                let instanceBuffer;
+                if (obj instanceof Instance) {
+                    instances = obj.getNumInstances();
+                    instanceBuffer = obj.getMatrixBuffer(device);
+                }
+                else {
+                    instanceBuffer = this.renderInfo.instanceBuffer;
                 }
+                const uniformBindGroup = device.createBindGroup({
+                    layout: this.renderInfo.bindGroupLayout,
+                    entries: [
+                        {
+                            binding: 0,
+                            resource: {
+                                buffer: uniformBuffer
+                            }
+                        },
+                        {
+                            binding: 1,
+                            resource: {
+                                buffer: instanceBuffer
+                            }
+                        }
+                    ]
+                });
+                passEncoder.setBindGroup(0, uniformBindGroup);
             }
             if (shaderInfo && shaderInfo.bufferInfo) {
                 const bindGroupEntries = shaderInfo.bufferInfo.buffers.map((buffer, index) => ({
@@ -532,7 +475,7 @@ export class Simulation {
                 });
                 passEncoder.setBindGroup(1, bindGroup);
             }
-            passEncoder.setVertexBuffer(0, vertexBuffer, currentOffset, buffer.byteLength);
+            // TODO maybe switch to drawIndexed
             passEncoder.draw(vertexCount, instances, 0, 0);
             currentOffset += buffer.byteLength;
         }
@@ -565,8 +508,12 @@ export class SceneCollection extends SimulationElement3d {
         this.scene = [];
         this.geometry = new BlankGeometry();
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    setWireframe(_) { }
+    setWireframe(wireframe) {
+        this.wireframe = wireframe;
+        for (let i = 0; i < this.scene.length; i++) {
+            this.scene[i].getObj().setWireframe(wireframe);
+        }
+    }
     getName() {
         return this.name;
     }
@@ -580,7 +527,7 @@ export class SceneCollection extends SimulationElement3d {
     propagateDevice(device) {
         for (let i = 0; i < this.scene.length; i++) {
             const el = this.scene[i].getObj();
-            if (el instanceof Instance || el instanceof SceneCollection) {
+            if (el instanceof SceneCollection) {
                 el.setDevice(device);
             }
         }
@@ -622,16 +569,14 @@ export class SceneCollection extends SimulationElement3d {
     empty() {
         this.scene = [];
     }
-    getSceneBuffer(camera) {
-        return this.scene.map((item) => item.getObj().getBuffer(camera)).flat();
+    getSceneBuffer() {
+        return this.scene.map((item) => item.getObj().getBuffer()).flat();
     }
-    // TODO - improve
-    getWireframe(camera) {
-        return this.getSceneBuffer(camera);
+    getWireframe() {
+        return this.getSceneBuffer();
     }
-    // TODO - improve
-    getTriangles(camera) {
-        return this.getSceneBuffer(camera);
+    getTriangles() {
+        return this.getSceneBuffer();
     }
     updateMatrix(camera) {
         this.defaultUpdateMatrix(camera);
@@ -726,13 +671,13 @@ export class Camera {
 }
 const defaultShaderCode = `
 struct Uniforms {
-  modelViewProjectionMatrix : mat4x4<f32>,
-  orthoProjectionMatrix : mat4x4<f32>
+  worldProjectionMatrix: mat4x4<f32>,
+  modelProjectionMatrix: mat4x4<f32>,
 }
  
-@group(0) @binding(0) var<uniform> uniforms : Uniforms;
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
 
-@group(0) @binding(1) var<storage, read> instanceMatrices : array<mat4x4f>;
+@group(0) @binding(1) var<storage> instanceMatrices: array<mat4x4f>;
 `;
 export class ShaderGroup extends SceneCollection {
     geometry;
@@ -762,24 +707,7 @@ export class ShaderGroup extends SceneCollection {
         super.propagateDevice(device);
         this.module = device.createShaderModule({ code: this.code });
         const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-        const bindGroupLayout = device.createBindGroupLayout({
-            entries: [
-                {
-                    binding: 0,
-                    visibility: GPUShaderStage.VERTEX,
-                    buffer: {
-                        type: 'uniform'
-                    }
-                },
-                {
-                    binding: 1,
-                    visibility: GPUShaderStage.VERTEX,
-                    buffer: {
-                        type: 'read-only-storage'
-                    }
-                }
-            ]
-        });
+        const bindGroupLayout = device.createBindGroupLayout(baseBindGroupLayout);
         const bindGroups = [bindGroupLayout];
         if (this.bindGroup !== null) {
             const entryValues = this.bindGroup.bindings.map((binding, index) => ({
@@ -792,7 +720,7 @@ export class ShaderGroup extends SceneCollection {
             });
             bindGroups.push(this.bindGroupLayout);
         }
-        this.pipeline = createPipeline(device, this.module, bindGroups, presentationFormat, 'vertex_main_2d', this.topology, this.vertexParams);
+        this.pipeline = createPipeline(device, this.module, bindGroups, presentationFormat, this.topology, this.vertexParams);
     }
     getBindGroupLayout() {
         return this.bindGroupLayout;
@@ -852,3 +780,39 @@ export class ShaderGroup extends SceneCollection {
         return !!this.bindGroup;
     }
 }
+export class Group extends SceneCollection {
+    constructor(name) {
+        super(name);
+    }
+    move(amount, t, f) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        return this.loopElements((el) => el.move(amount, t, f));
+    }
+    moveTo(pos, t, f) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        return this.loopElements((el) => el.moveTo(pos, t, f));
+    }
+    rotate(amount, t, f) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        return this.loopElements((el) => el.rotate(amount, t, f));
+    }
+    rotateTo(rotation, t, f) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        return this.loopElements((el) => el.rotateTo(rotation, t, f));
+    }
+    fill(newColor, t, f) {
+        return this.loopElements((el) => el.fill(newColor, t, f));
+    }
+    loopElements(cb) {
+        const scene = this.getScene();
+        const promises = Array(scene.length);
+        for (let i = 0; i < scene.length; i++) {
+            promises[i] = cb(scene[i].getObj());
+        }
+        return wrapVoidPromise(Promise.all(promises));
+    }
+}

package/dist/types.d.ts

@@ -23,6 +23,7 @@ export type Mat4 = FloatArray & [
     number,
     number
 ];
+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;
@@ -54,26 +55,22 @@ export type Spline2dGeometryParams = {
     color: Color;
     vertexColors: Color[];
 };
-export type LineGeometryParams<T extends Vector2 | Vector3> = {
-    pos: T;
-    to: T;
+export type LineGeometryParams = {
+    pos: Vector3;
+    to: Vector3;
+    fromColor: Color | null;
+    toColor: Color | null;
     thickness: number;
 };
-export type Line2dGeometryParams = LineGeometryParams<Vector2>;
-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;
+    triangleList: GPURenderPipeline;
+    triangleStrip: GPURenderPipeline;
+    lineStrip: GPURenderPipeline;
 };
 export type RenderInfo = {
-    uniformBuffer: GPUBuffer;
     instanceBuffer: GPUBuffer;
     bindGroupLayout: GPUBindGroupLayout;
     vertexBuffer: GPUBuffer | null;
@@ -81,7 +78,6 @@ export type RenderInfo = {
 export type VertexParamGeneratorInfo = {
     bufferSize: number;
     createBuffer: (x: number, y: number, z: number, color: Color) => number[];
-    shouldEvaluate?: () => boolean;
 };
 export type ShaderInfo = {
     pipeline: GPURenderPipeline;

package/dist/utils.d.ts

@@ -45,6 +45,7 @@ export declare class Vertex {
  */
 export declare function transitionValues(callback1: (deltaT: number, t: number) => void, callback2: () => void, transitionLength: number, func?: (n: number) => number): Promise<void>;
 export declare function frameLoop<T extends (dt: number, ...args: any[]) => any>(cb: T): (...params: Parameters<T>) => void;
+export declare function clamp(num: number, min: number, max: number): number;
 export declare function lerp(a: number, b: number, t: number): number;
 export declare function smoothStep(t: number): number;
 export declare function linearStep(t: number): number;

package/dist/utils.js

@@ -40,7 +40,7 @@ export class Vertex {
     uv;
     constructor(x = 0, y = 0, z = 0, color, is3dPoint = true, uv = vector2()) {
         this.pos = vector3(x, y, z);
-        this.color = color ? color : null;
+        this.color = color || null;
         this.is3d = is3dPoint;
         this.uv = uv;
     }
@@ -101,7 +101,8 @@ export function transitionValues(callback1, callback2, transitionLength, func) {
             let prevTime = Date.now();
             const step = (t, f) => {
                 const newT = f(t);
-                callback1(newT - prevPercent, t);
+                const deltaT = newT - prevPercent;
+                callback1(deltaT, t);
                 prevPercent = newT;
                 const now = Date.now();
                 let diff = now - prevTime;
@@ -143,6 +144,9 @@ export function frameLoop(cb) {
         start(0, ...p);
     };
 }
+export function clamp(num, min, max) {
+    return Math.min(max, Math.max(min, num));
+}
 export function lerp(a, b, t) {
     return a + (b - a) * t;
 }

package/package.json

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