simulationjsv2 0.8.4 → 0.9.0

package/dist/geometry.js

@@ -110,10 +110,10 @@ export class SquareGeometry extends Geometry {
     }
     recompute() {
         this.vertices = [
-            vector3(-this.params.width, this.params.height),
-            vector3(this.params.width, this.params.height),
-            vector3(this.params.width, -this.params.height),
-            vector3(-this.params.width, -this.params.height)
+            vector3(-this.params.width / 2, this.params.height / 2),
+            vector3(this.params.width / 2, this.params.height / 2),
+            vector3(this.params.width / 2, -this.params.height / 2),
+            vector3(-this.params.width / 2, -this.params.height / 2)
         ];
     }
 }
@@ -310,7 +310,7 @@ export class Line2dGeometry extends Geometry {
     recompute() {
         const normal = vector2(-this.params.to[1], this.params.to[0]);
         vec2.normalize(normal, normal);
-        vec2.scale(normal, this.params.thickness / 2, normal);
+        vec2.scale(normal, this.params.thickness, normal);
         this.vertices = [
             vector3(-normal[0], -normal[1]),
             vector3(normal[0], normal[1]),

package/dist/graphics.d.ts

@@ -26,9 +26,6 @@ export declare abstract class SimulationElement3d {
     isInstanced: boolean;
     is3d: boolean;
     isEmpty: boolean;
-    /**
-     * @param pos - Expected to be adjusted to devicePixelRatio before reaching constructor
-     */
     constructor(pos: Vector3, rotation: Vector3, color?: Color);
     getId(): string | null;
     setId(id: string): void;
@@ -67,8 +64,8 @@ export declare abstract class SimulationElement3d {
     getRotation(): Vector3;
     getCenterOffset(): Vector3;
     fill(newColor: Color, t?: number, f?: LerpFunc): Promise<void>;
-    move(amount: Vector3, t?: number, f?: LerpFunc, fromDevicePixelRatio?: boolean): Promise<void>;
-    moveTo(pos: Vector3, t?: number, f?: LerpFunc, fromDevicePixelRatio?: boolean): Promise<void>;
+    move(amount: Vector3, t?: number, f?: LerpFunc): Promise<void>;
+    moveTo(pos: Vector3, t?: number, f?: LerpFunc): Promise<void>;
     rotateChildren(angle: Vector3): void;
     rotate(amount: Vector3, t?: number, f?: LerpFunc): Promise<void>;
     rotateTo(rot: Vector3, t?: number, f?: LerpFunc): Promise<void>;

package/dist/graphics.js

@@ -1,7 +1,7 @@
 import { vec3, mat4, vec2 } from 'wgpu-matrix';
 import { cloneBuf, vector2, vector3, Color, vector2FromVector3, matrix4, vector3FromVector2, distance2d, color, interpolateColors } from './utils.js';
 import { BlankGeometry, CircleGeometry, CubeGeometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, Spline2dGeometry, SquareGeometry, TraceLines2dGeometry as TraceLinesGeometry } from './geometry.js';
-import { Float32ArrayCache, internalTransitionValues, posTo2dScreen, vector3ToPixelRatio } from './internalUtils.js';
+import { Float32ArrayCache, internalTransitionValues, posTo2dScreen } from './internalUtils.js';
 import { mat4ByteLength, modelProjMatOffset } from './constants.js';
 import { MemoBuffer } from './buffers.js';
 import { globalInfo, logger, pipelineCache } from './globals.js';
@@ -27,9 +27,6 @@ export class SimulationElement3d {
     isInstanced = false;
     is3d = true;
     isEmpty = false;
-    /**
-     * @param pos - Expected to be adjusted to devicePixelRatio before reaching constructor
-     */
     constructor(pos, rotation, color = new Color()) {
         this.pos = pos;
         this.centerOffset = vector3();
@@ -150,7 +147,8 @@ export class SimulationElement3d {
         if (!this.parent)
             return;
         this.parent.mirrorParentTransforms3d(mat);
-        mat4.translate(mat, this.parent.getRelativePos(), mat);
+        const pos = cloneBuf(this.parent.getRelativePos());
+        mat4.translate(mat, pos, mat);
         const parentRot = this.parent.getRotation();
         mat4.rotateZ(mat, parentRot[2], mat);
         mat4.rotateY(mat, parentRot[1], mat);
@@ -161,7 +159,8 @@ export class SimulationElement3d {
         if (this.parent) {
             this.mirrorParentTransforms3d(this.modelMatrix);
         }
-        mat4.translate(this.modelMatrix, this.pos, this.modelMatrix);
+        const pos = cloneBuf(this.pos);
+        mat4.translate(this.modelMatrix, pos, this.modelMatrix);
         mat4.rotateZ(this.modelMatrix, this.rotation[2], this.modelMatrix);
         mat4.rotateY(this.modelMatrix, this.rotation[1], this.modelMatrix);
         mat4.rotateX(this.modelMatrix, this.rotation[0], this.modelMatrix);
@@ -176,7 +175,8 @@ export class SimulationElement3d {
         this.parent.mirrorParentTransforms2d(mat);
         const parentRot = this.parent.getRotation();
         mat4.rotateZ(mat, parentRot[2], mat);
-        mat4.translate(mat, this.pos, mat);
+        const pos = cloneBuf(this.pos);
+        mat4.translate(mat, pos, mat);
     }
     updateModelMatrix2d() {
         mat4.identity(this.modelMatrix);
@@ -235,10 +235,8 @@ export class SimulationElement3d {
             this.vertexCache.updated();
         }, t, f);
     }
-    move(amount, t = 0, f, fromDevicePixelRatio = false) {
+    move(amount, t = 0, f) {
         const tempAmount = cloneBuf(amount);
-        if (!fromDevicePixelRatio)
-            vector3ToPixelRatio(tempAmount);
         const finalPos = cloneBuf(this.pos);
         vec3.add(finalPos, tempAmount, finalPos);
         return internalTransitionValues((p) => {
@@ -249,10 +247,8 @@ export class SimulationElement3d {
             this.pos = finalPos;
         }, t, f);
     }
-    moveTo(pos, t = 0, f, fromDevicePixelRatio = false) {
+    moveTo(pos, t = 0, f) {
         const tempPos = cloneBuf(pos);
-        if (!fromDevicePixelRatio)
-            vector3ToPixelRatio(tempPos);
         const diff = vector3();
         vec3.sub(tempPos, this.pos, diff);
         return internalTransitionValues((p) => {
@@ -319,7 +315,6 @@ export class SimulationElement3d {
             const vertices = this.geometry.getVertices();
             const stride = this.shader.getBufferLength();
             const vertexBuffer = new Float32Array(vertices.length * stride);
-            // const shader = this.isWireframe() ? defaultShader : this.shader;
             for (let i = 0; i < vertices.length; i++) {
                 this.shader.setVertexInfo(this, vertexBuffer, vertices[i], i, i * stride);
             }
@@ -349,7 +344,6 @@ export class SimulationElement2d extends SimulationElement3d {
     is3d = false;
     constructor(pos, rotation = vector3(), color) {
         super(vector3FromVector2(pos), rotation, color);
-        vector3ToPixelRatio(this.pos);
     }
     rotate2d(amount, t = 0, f) {
         return super.rotate(vector3(0, 0, amount), t, f);
@@ -387,8 +381,8 @@ export class Square extends SimulationElement2d {
      */
     constructor(pos, width, height, color, rotation) {
         super(pos, vector3(0, 0, rotation), color);
-        this.width = width / devicePixelRatio;
-        this.height = height / devicePixelRatio;
+        this.width = width;
+        this.height = height;
         this.geometry = new SquareGeometry(this.width, this.height);
     }
     getWidth() {
@@ -443,7 +437,6 @@ export class Square extends SimulationElement2d {
         }, t, f);
     }
     setWidth(num, t = 0, f) {
-        num *= devicePixelRatio;
         const diffWidth = num - this.width;
         return internalTransitionValues((p) => {
             this.width += diffWidth * p;
@@ -456,7 +449,6 @@ export class Square extends SimulationElement2d {
         }, t, f);
     }
     setHeight(num, t = 0, f) {
-        num *= devicePixelRatio;
         const diffHeight = num - this.height;
         return internalTransitionValues((p) => {
             this.height += diffHeight * p;
@@ -475,12 +467,11 @@ export class Circle extends SimulationElement2d {
     detail;
     constructor(pos, radius, color, detail = 50) {
         super(pos, vector3(), color);
-        this.radius = radius * devicePixelRatio;
+        this.radius = radius;
         this.detail = detail;
         this.geometry = new CircleGeometry(this.radius, this.detail);
     }
     setRadius(num, t = 0, f) {
-        num *= devicePixelRatio;
         const diff = num - this.radius;
         return internalTransitionValues((p) => {
             this.radius += diff * p;
@@ -592,7 +583,6 @@ export class Line3d extends SimulationElement3d {
         super(pos.getPos(), vector3(), to.getColor() ?? undefined);
         this.thickness = thickness;
         this.to = to.getPos();
-        vec3.scale(this.to, devicePixelRatio, this.to);
         vec3.sub(this.to, this.pos, this.to);
         this.geometry = new Line3dGeometry(this.pos, this.to, this.thickness);
     }
@@ -621,7 +611,7 @@ export class Line2d extends SimulationElement2d {
     thickness;
     constructor(from, to, thickness = 1) {
         super(vector2FromVector3(from.getPos()), vector3(), from.getColor() ?? undefined);
-        this.thickness = thickness * devicePixelRatio;
+        this.thickness = thickness;
         this.to = to.getPos();
         vec2.sub(this.to, this.pos, this.to);
         this.geometry = new Line2dGeometry(this.pos, this.to, this.thickness);
@@ -631,8 +621,6 @@ export class Line2d extends SimulationElement2d {
     }
     setEnd(pos, t = 0, f) {
         const tempPos = cloneBuf(pos);
-        vector3ToPixelRatio(tempPos);
-        // vec2.sub(tempPos, this.getPos(), tempPos);
         const diff = vector3();
         vec2.sub(tempPos, this.to, diff);
         return internalTransitionValues((p) => {
@@ -660,7 +648,6 @@ export class Cube extends SimulationElement3d {
         this.geometry = new CubeGeometry(this.width, this.height, this.depth);
     }
     setWidth(width, t = 0, f) {
-        width *= devicePixelRatio;
         const diff = width - this.width;
         return internalTransitionValues((p) => {
             this.width += diff * p;
@@ -673,7 +660,6 @@ export class Cube extends SimulationElement3d {
         }, t, f);
     }
     setHeight(height, t = 0, f) {
-        height *= devicePixelRatio;
         const diff = height - this.width;
         return internalTransitionValues((p) => {
             this.height += diff * p;
@@ -686,7 +672,6 @@ export class Cube extends SimulationElement3d {
         }, t, f);
     }
     setDepth(depth, t = 0, f) {
-        depth *= devicePixelRatio;
         const diff = depth - this.width;
         return internalTransitionValues((p) => {
             this.depth += diff * p;
@@ -872,10 +857,10 @@ export class Spline2d extends SimulationElement2d {
     interpolateStart;
     interpolateLimit;
     length;
-    constructor(pos, points, thickness = devicePixelRatio, detail = 40) {
+    constructor(pos, points, thickness = 1, detail = 40) {
         const tempPos = vector2FromVector3(pos.getPos());
         super(tempPos, vector3(), pos.getColor() ?? undefined);
-        this.thickness = thickness * devicePixelRatio;
+        this.thickness = thickness;
         this.detail = detail;
         this.interpolateStart = 0;
         this.interpolateLimit = 1;
@@ -974,7 +959,6 @@ export class Spline2d extends SimulationElement2d {
         this.vertexCache.updated();
     }
     setThickness(thickness, t = 0, f) {
-        thickness *= devicePixelRatio;
         const diff = thickness - this.thickness;
         return internalTransitionValues((p) => {
             this.thickness += diff * p;
@@ -1068,7 +1052,6 @@ export class Instance extends SimulationElement3d {
         const device = globalInfo.getDevice();
         if (!device)
             return;
-        // this.allocBuffer(size);
         const gpuBuffer = this.matrixBuffer.getBuffer();
         const buf = new Float32Array(transformation);
         device.queue.writeBuffer(gpuBuffer, instance * mat4ByteLength, buf.buffer, buf.byteOffset, buf.byteLength);

package/dist/internalUtils.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="@webgpu/types" />
-import { Mat4, Vector2, Vector3 } from './types.js';
+import { Mat4, Vector3 } from './types.js';
 import { Shader } from './shaders.js';
 import { SimulationElement3d } from './graphics.js';
 export declare class Float32ArrayCache {
@@ -29,8 +29,6 @@ export declare const buildMultisampleTexture: (device: GPUDevice, ctx: GPUCanvas
 export declare function lossyTriangulate<T>(vertices: T[]): (readonly [T, T, T])[];
 export declare function lossyTriangulateStrip<T>(vertices: T[]): T[];
 export declare function createIndexArray(length: number): number[];
-export declare function vector3ToPixelRatio(vec: Vector3): void;
-export declare function vector2ToPixelRatio(vec: Vector2): void;
 export declare function triangulateWireFrameOrder(len: number): number[];
 export declare function getVertexAndIndexSize(scene: SimulationElement3d[]): readonly [number, number];
 export declare function internalTransitionValues(onFrame: (deltaT: number, t: number, total: number) => void, adjustment: () => void, transitionLength: number, func?: (n: number) => number): Promise<void>;

package/dist/internalUtils.js

@@ -141,15 +141,6 @@ export function createIndexArray(length) {
         .fill(0)
         .map((_, index) => index);
 }
-export function vector3ToPixelRatio(vec) {
-    vec[0] *= devicePixelRatio;
-    vec[1] *= devicePixelRatio;
-    vec[2] *= devicePixelRatio;
-}
-export function vector2ToPixelRatio(vec) {
-    vec[0] *= devicePixelRatio;
-    vec[1] *= devicePixelRatio;
-}
 export function triangulateWireFrameOrder(len) {
     const order = Array(len)
         .fill(0)

package/dist/simulation.js

@@ -199,10 +199,10 @@ export class Simulation extends Settings {
         this.resizeEvents.push(cb);
     }
     getWidth() {
-        return (this.canvasRef?.width || 0) / devicePixelRatio;
+        return this.canvasRef?.width || 0;
     }
     getHeight() {
-        return (this.canvasRef?.height || 0) / devicePixelRatio;
+        return this.canvasRef?.height || 0;
     }
     add(el, id) {
         addToScene(this.scene, el, id);

package/dist/utils.js

@@ -233,16 +233,11 @@ export function colorf(val, a) {
     return color(val, val, val, a);
 }
 export function splinePoint2d(end, control1, control2, detail) {
-    vec2.scale(control1, devicePixelRatio, control1);
-    vec2.scale(control2, devicePixelRatio, control2);
-    vec2.scale(end.getPos(), devicePixelRatio, end.getPos());
     const rawControls = [cloneBuf(control1), cloneBuf(control2)];
     vec2.add(end.getPos(), control2, control2);
     return new SplinePoint2d(null, end, control1, control2, rawControls, detail);
 }
 export function continuousSplinePoint2d(end, control, detail) {
-    vec2.scale(control, devicePixelRatio, control);
-    vec2.scale(end.getPos(), devicePixelRatio, end.getPos());
     const rawControls = [vector2(), cloneBuf(control)];
     vec2.add(end.getPos(), control, control);
     return new SplinePoint2d(null, end, null, control, rawControls, detail);

package/package.json

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