simulationjsv2 0.7.1 → 0.7.3

package/TODO.md

@@ -1,5 +1,7 @@
 # TODO
 
+- [ ] Make materials
+  - [ ] Move shader group to material
 - [ ] Fix transparency
 - [x] Update `updateModelMatrix2d`
 - [x] Trace line element (wireframe strip for tracing paths)

package/dist/constants.d.ts

@@ -6,6 +6,7 @@ export declare const drawingInstancesOffset = 36;
 export declare const BUF_LEN: number;
 export declare const worldProjMatOffset = 0;
 export declare const modelProjMatOffset: number;
+export declare const mat4ByteLength = 64;
 export declare const xAxis: import("./types.js").Vector3;
 export declare const yAxis: import("./types.js").Vector3;
 export declare const zAxis: import("./types.js").Vector3;

package/dist/constants.js

@@ -7,6 +7,7 @@ export const drawingInstancesOffset = 36;
 export const BUF_LEN = vertexSize / 4;
 export const worldProjMatOffset = 0;
 export const modelProjMatOffset = 4 * 16;
+export const mat4ByteLength = 64;
 export const xAxis = vector3(1);
 export const yAxis = vector3(0, 1);
 export const zAxis = vector3(0, 0, 1);

package/dist/graphics.d.ts

@@ -34,9 +34,8 @@ export declare abstract class SimulationElement3d {
     setCenterOffset(offset: Vector3): void;
     setRotationOffset(offset: Vector3): void;
     resetCenterOffset(): void;
-    propagateDevice(device: GPUDevice): void;
     getModelMatrix(): Mat4;
-    getUniformBuffer(device: GPUDevice, mat: Mat4): GPUBuffer;
+    getUniformBuffer(mat: Mat4): GPUBuffer;
     protected mirrorParentTransforms3d(mat: Mat4): void;
     protected updateModelMatrix3d(): void;
     protected mirrorParentTransforms2d(mat: Mat4): void;
@@ -59,7 +58,6 @@ export declare abstract class SimulationElement3d {
     rotateTo(rot: Vector3, t?: number, f?: LerpFunc): Promise<void>;
     getVertexCount(): number;
     getBuffer(vertexParamGenerator?: VertexParamGeneratorInfo): Float32Array | number[];
-    protected abstract onDeviceChange(device: GPUDevice): void;
 }
 export declare class EmptyElement extends SimulationElement3d {
     protected geometry: BlankGeometry;
@@ -67,7 +65,6 @@ export declare class EmptyElement extends SimulationElement3d {
     isEmpty: boolean;
     constructor(label?: string);
     getLabel(): string | null;
-    protected onDeviceChange(_device: GPUDevice): void;
 }
 export declare abstract class SimulationElement2d extends SimulationElement3d {
     is3d: boolean;
@@ -81,7 +78,6 @@ export declare class Plane extends SimulationElement3d {
     points: Vertex[];
     constructor(pos: Vector3, points: Vertex[], color?: Color, rotation?: Vector3);
     setPoints(newPoints: Vertex[]): void;
-    protected onDeviceChange(_device: GPUDevice): void;
 }
 export declare class Square extends SimulationElement2d {
     protected geometry: SquareGeometry;
@@ -102,7 +98,6 @@ export declare class Square extends SimulationElement2d {
     scale(amount: number, t?: number, f?: LerpFunc): Promise<void>;
     setWidth(num: number, t?: number, f?: LerpFunc): Promise<void>;
     setHeight(num: number, t?: number, f?: LerpFunc): Promise<void>;
-    protected onDeviceChange(_device: GPUDevice): void;
 }
 export declare class Circle extends SimulationElement2d {
     protected geometry: CircleGeometry;
@@ -111,7 +106,6 @@ export declare class Circle extends SimulationElement2d {
     constructor(pos: Vector2, radius: number, color?: Color, detail?: number);
     setRadius(num: number, t?: number, f?: LerpFunc): Promise<void>;
     scale(amount: number, t?: number, f?: LerpFunc): Promise<void>;
-    protected onDeviceChange(_device: GPUDevice): void;
 }
 export declare class Polygon extends SimulationElement2d {
     protected geometry: PolygonGeometry;
@@ -119,7 +113,6 @@ export declare class Polygon extends SimulationElement2d {
     constructor(pos: Vector2, points: Vertex[], color?: Color, rotation?: number);
     getVertices(): Vertex[];
     setVertices(newVertices: Vertex[], t?: number, f?: LerpFunc): Promise<void>;
-    protected onDeviceChange(_device: GPUDevice): void;
 }
 export declare class Line3d extends SimulationElement3d {
     protected geometry: Line3dGeometry;
@@ -128,7 +121,6 @@ export declare class Line3d extends SimulationElement3d {
     constructor(pos: Vertex, to: Vertex, thickness: number);
     setStart(pos: Vector3, t?: number, f?: LerpFunc): Promise<void>;
     setEnd(pos: Vector3, t?: number, f?: LerpFunc): Promise<void>;
-    protected onDeviceChange(_device: GPUDevice): void;
 }
 export declare class Line2d extends SimulationElement2d {
     protected geometry: Line2dGeometry;
@@ -137,7 +129,6 @@ export declare class Line2d extends SimulationElement2d {
     constructor(from: Vertex, to: Vertex, thickness?: number);
     setStart(pos: Vector3, t?: number, f?: LerpFunc): Promise<void>;
     setEnd(pos: Vector3, t?: number, f?: LerpFunc): Promise<void>;
-    protected onDeviceChange(_device: GPUDevice): void;
 }
 export declare class Cube extends SimulationElement3d {
     protected geometry: CubeGeometry;
@@ -149,7 +140,6 @@ export declare class Cube extends SimulationElement3d {
     setHeight(height: number, t?: number, f?: LerpFunc): Promise<void>;
     setDepth(depth: number, t?: number, f?: LerpFunc): Promise<void>;
     scale(amount: number, t?: number, f?: LerpFunc): Promise<void>;
-    protected onDeviceChange(_device: GPUDevice): void;
 }
 export declare class BezierCurve2d {
     private points;
@@ -202,7 +192,6 @@ export declare class Spline2d extends SimulationElement2d {
     setThickness(thickness: number, t?: number, f?: LerpFunc): Promise<void>;
     interpolateSlope(t: number): Vector2[] | readonly [Vector2, Vector2];
     interpolate(t: number): Vector2;
-    protected onDeviceChange(_device: GPUDevice): void;
 }
 export declare class Instance<T extends AnySimulationElement> extends SimulationElement3d {
     protected geometry: BlankGeometry;
@@ -210,18 +199,20 @@ export declare class Instance<T extends AnySimulationElement> extends Simulation
     private instanceMatrix;
     private matrixBuffer;
     private baseMat;
+    private maxInstances;
+    private hasMapped;
     isInstance: boolean;
     constructor(obj: T, numInstances: number);
     setNumInstances(numInstances: number): void;
     setInstance(instance: number, transformation: Mat4): void;
+    private allocBuffer;
     private mapBuffer;
     getInstances(): Mat4[];
     getNumInstances(): number;
-    getMatrixBuffer(device: GPUDevice): GPUBuffer;
+    getMatrixBuffer(): GPUBuffer;
     getVertexCount(): number;
     getGeometryType(): "list" | "strip";
     getBuffer(): Float32Array | number[];
-    protected onDeviceChange(device: GPUDevice): void;
     getModelMatrix(): Mat4;
 }
 export declare class TraceLines2d extends SimulationElement2d {
@@ -229,12 +220,10 @@ export declare class TraceLines2d extends SimulationElement2d {
     constructor(color?: Color, maxLen?: number);
     addPoint(point: Vector2 | Vector3, color?: Color): void;
     isWireframe(): boolean;
-    protected onDeviceChange(_: GPUDevice): void;
 }
 export declare class TraceLines3d extends SimulationElement3d {
     protected geometry: TraceLinesGeometry;
     constructor(color?: Color, maxLen?: number);
     addPoint(point: Vector2 | Vector3, color?: Color): void;
     isWireframe(): boolean;
-    protected onDeviceChange(_: GPUDevice): void;
 }

package/dist/graphics.js

@@ -1,8 +1,8 @@
 import { vec3, mat4, vec2, vec4 } from 'wgpu-matrix';
 import { Vertex, cloneBuf, color, colorFromVector4, vector2, vector3, vertex, Color, vector2FromVector3, matrix4, vector3FromVector2, distance2d } from './utils.js';
 import { BlankGeometry, CircleGeometry, CubeGeometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, Spline2dGeometry, SquareGeometry, TraceLines2dGeometry as TraceLinesGeometry } from './geometry.js';
-import { SimSceneObjInfo, VertexCache, bufferGenerator, internalTransitionValues, logger, posTo2dScreen, rotateMat4, vector3ToPixelRatio } from './internalUtils.js';
-import { modelProjMatOffset } from './constants.js';
+import { SimSceneObjInfo, VertexCache, bufferGenerator, globalInfo, internalTransitionValues, logger, posTo2dScreen, vector3ToPixelRatio } from './internalUtils.js';
+import { mat4ByteLength, modelProjMatOffset } from './constants.js';
 export class SimulationElement3d {
     children;
     uniformBuffer;
@@ -74,17 +74,12 @@ export class SimulationElement3d {
         this.centerOffset[1] = 0;
         this.centerOffset[2] = 0;
     }
-    propagateDevice(device) {
-        this.onDeviceChange(device);
-        for (let i = 0; i < this.children.length; i++) {
-            this.children[i].getObj().propagateDevice(device);
-        }
-    }
     getModelMatrix() {
         this.updateModelMatrix3d();
         return this.modelMatrix;
     }
-    getUniformBuffer(device, mat) {
+    getUniformBuffer(mat) {
+        const device = globalInfo.errorGetDevice();
         if (!this.uniformBuffer) {
             const uniformBufferSize = 4 * 16 + 4 * 16 + 4 * 2 + 8; // 4x4 matrix + 4x4 matrix + vec2<f32> + 8 bc 144 is cool
             this.uniformBuffer = device.createBuffer({
@@ -302,8 +297,6 @@ export class EmptyElement extends SimulationElement3d {
     getLabel() {
         return this.label;
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onDeviceChange(_device) { }
 }
 export class SimulationElement2d extends SimulationElement3d {
     is3d = false;
@@ -335,8 +328,6 @@ export class Plane extends SimulationElement3d {
         this.points = newPoints;
         this.vertexCache.updated();
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onDeviceChange(_device) { }
 }
 export class Square extends SimulationElement2d {
     geometry;
@@ -478,8 +469,6 @@ export class Square extends SimulationElement2d {
             this.vertexCache.updated();
         }, t, f);
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onDeviceChange(_device) { }
 }
 export class Circle extends SimulationElement2d {
     geometry;
@@ -517,8 +506,6 @@ export class Circle extends SimulationElement2d {
             this.vertexCache.updated();
         }, t, f);
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onDeviceChange(_device) { }
 }
 export class Polygon extends SimulationElement2d {
     geometry;
@@ -597,8 +584,6 @@ export class Polygon extends SimulationElement2d {
             this.vertexCache.updated();
         }, t, f);
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onDeviceChange(_device) { }
 }
 export class Line3d extends SimulationElement3d {
     geometry;
@@ -630,8 +615,6 @@ export class Line3d extends SimulationElement3d {
             this.vertexCache.updated();
         }, t, f);
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onDeviceChange(_device) { }
 }
 export class Line2d extends SimulationElement2d {
     geometry;
@@ -663,8 +646,6 @@ export class Line2d extends SimulationElement2d {
             this.vertexCache.updated();
         }, t, f);
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onDeviceChange(_device) { }
 }
 export class Cube extends SimulationElement3d {
     geometry;
@@ -743,8 +724,6 @@ export class Cube extends SimulationElement3d {
             this.vertexCache.updated();
         }, t, f);
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onDeviceChange(_device) { }
 }
 export class BezierCurve2d {
     points;
@@ -992,8 +971,6 @@ export class Spline2d extends SimulationElement2d {
         const [vec] = this.interpolateSlope(t);
         return vec;
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onDeviceChange(_device) { }
 }
 export class Instance extends SimulationElement3d {
     geometry;
@@ -1001,17 +978,21 @@ export class Instance extends SimulationElement3d {
     instanceMatrix;
     matrixBuffer;
     baseMat;
+    maxInstances;
+    hasMapped;
     isInstance = true;
     constructor(obj, numInstances) {
         super(vector3(), vector3());
+        // 32 matrices
+        this.maxInstances = 32;
         this.matrixBuffer = null;
         obj.isInstanced = true;
         this.obj = obj;
         this.instanceMatrix = [];
         this.is3d = obj.is3d;
         this.geometry = new BlankGeometry();
+        this.hasMapped = false;
         this.baseMat = matrix4();
-        rotateMat4(this.baseMat, obj.getRotation());
         for (let i = 0; i < numInstances; i++) {
             const clone = cloneBuf(this.baseMat);
             this.instanceMatrix.push(clone);
@@ -1020,6 +1001,10 @@ export class Instance extends SimulationElement3d {
     setNumInstances(numInstances) {
         if (numInstances < 0)
             throw logger.error('Num instances is less than 0');
+        if (numInstances > this.maxInstances) {
+            this.maxInstances = numInstances;
+            this.allocBuffer(numInstances);
+        }
         const oldLen = this.instanceMatrix.length;
         if (numInstances < oldLen) {
             const diff = oldLen - numInstances;
@@ -1041,13 +1026,41 @@ export class Instance extends SimulationElement3d {
         if (instance >= this.instanceMatrix.length || instance < 0)
             return;
         this.instanceMatrix[instance] = transformation;
+        const device = globalInfo.getDevice();
+        if (!device)
+            return;
+        if (!this.matrixBuffer) {
+            const minSize = this.maxInstances * mat4ByteLength;
+            const size = Math.max(minSize, this.instanceMatrix.length);
+            this.allocBuffer(size);
+        }
+        const buf = new Float32Array(transformation);
+        device.queue.writeBuffer(this.matrixBuffer, instance * mat4ByteLength, buf.buffer, buf.byteOffset, buf.byteLength);
+        this.matrixBuffer.unmap();
     }
-    mapBuffer(device) {
-        if (this.matrixBuffer === null)
+    allocBuffer(size) {
+        const device = globalInfo.getDevice();
+        if (!device)
             return;
+        const byteSize = size * mat4ByteLength;
+        this.matrixBuffer = device.createBuffer({
+            size: byteSize,
+            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+        });
+    }
+    mapBuffer() {
+        const device = globalInfo.getDevice();
+        if (!device)
+            return;
+        if (!this.matrixBuffer) {
+            const minSize = this.maxInstances * mat4ByteLength;
+            const size = Math.max(minSize, this.instanceMatrix.length);
+            this.allocBuffer(size);
+        }
         const buf = new Float32Array(this.instanceMatrix.map((mat) => [...mat]).flat());
         device.queue.writeBuffer(this.matrixBuffer, 0, buf.buffer, buf.byteOffset, buf.byteLength);
         this.matrixBuffer.unmap();
+        this.hasMapped = true;
     }
     getInstances() {
         return this.instanceMatrix;
@@ -1055,16 +1068,10 @@ export class Instance extends SimulationElement3d {
     getNumInstances() {
         return this.instanceMatrix.length;
     }
-    getMatrixBuffer(device) {
-        if (!this.matrixBuffer) {
-            const minSize = 512;
-            const size = Math.max(minSize, this.instanceMatrix[0].byteLength * this.instanceMatrix.length);
-            this.matrixBuffer = device.createBuffer({
-                size,
-                usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-            });
+    getMatrixBuffer() {
+        if (!this.hasMapped) {
+            this.mapBuffer();
         }
-        this.mapBuffer(device);
         return this.matrixBuffer;
     }
     getVertexCount() {
@@ -1076,9 +1083,6 @@ export class Instance extends SimulationElement3d {
     getBuffer() {
         return this.obj.getBuffer();
     }
-    onDeviceChange(device) {
-        this.obj.propagateDevice(device);
-    }
     getModelMatrix() {
         return this.obj.getModelMatrix();
     }
@@ -1100,8 +1104,6 @@ export class TraceLines2d extends SimulationElement2d {
     isWireframe() {
         return true;
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onDeviceChange(_) { }
 }
 export class TraceLines3d extends SimulationElement3d {
     geometry;
@@ -1120,6 +1122,4 @@ export class TraceLines3d extends SimulationElement3d {
     isWireframe() {
         return true;
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onDeviceChange(_) { }
 }

package/dist/internalUtils.d.ts

@@ -12,6 +12,14 @@ export declare class VertexCache {
     shouldUpdate(): boolean;
     getVertexCount(): number;
 }
+export declare class GlobalInfo {
+    private device;
+    constructor();
+    setDevice(device: GPUDevice): void;
+    errorGetDevice(): GPUDevice;
+    getDevice(): GPUDevice | null;
+}
+export declare const globalInfo: GlobalInfo;
 export declare const updateProjectionMatrix: (mat: Mat4, aspectRatio: number, zNear?: number, zFar?: number) => any;
 export declare const updateWorldProjectionMatrix: (worldProjMat: Mat4, projMat: Mat4) => void;
 export declare const updateOrthoProjectionMatrix: (mat: Mat4, screenSize: [number, number]) => Float32Array;
@@ -57,8 +65,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 matrixFromRotation(rotation: Vector3): Mat4;
-export declare function rotateMat4(mat: Mat4, rotation: Vector3): void;
 export declare function createPipeline(device: GPUDevice, module: GPUShaderModule, bindGroupLayouts: GPUBindGroupLayout[], presentationFormat: GPUTextureFormat, topology: GPUPrimitiveTopology, vertexParams?: VertexParamInfo[]): GPURenderPipeline;
 export declare function triangulateWireFrameOrder(len: number): number[];
 export declare function getTotalVertices(scene: SimSceneObjInfo[]): number;

package/dist/internalUtils.js

@@ -26,6 +26,24 @@ export class VertexCache {
         return this.vertices.length / BUF_LEN;
     }
 }
+export class GlobalInfo {
+    device;
+    constructor() {
+        this.device = null;
+    }
+    setDevice(device) {
+        this.device = device;
+    }
+    errorGetDevice() {
+        if (!this.device)
+            throw logger.error('GPUDevice is null');
+        return this.device;
+    }
+    getDevice() {
+        return this.device;
+    }
+}
+export const globalInfo = new GlobalInfo();
 export const updateProjectionMatrix = (mat, aspectRatio, zNear = 1, zFar = 500) => {
     const fov = Math.PI / 4;
     return mat4.perspective(fov, aspectRatio, zNear, zFar, mat);
@@ -201,18 +219,6 @@ export function vector2ToPixelRatio(vec) {
     vec[0] *= devicePixelRatio;
     vec[1] *= devicePixelRatio;
 }
-export function matrixFromRotation(rotation) {
-    const 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, bindGroupLayouts, presentationFormat, topology, vertexParams) {
     let params = [
         {

package/dist/simulation.d.ts

@@ -31,11 +31,10 @@ export declare class Simulation extends Settings {
     private fittingElement;
     private running;
     private initialized;
-    private frameRateView;
-    private device;
     private pipelines;
     private renderInfo;
     private resizeEvents;
+    private frameRateView;
     constructor(idOrCanvasRef: string | HTMLCanvasElement, sceneCamera?: Camera | null, showFrameRate?: boolean);
     private handleCanvasResize;
     onResize(cb: (width: number, height: number) => void): void;
@@ -51,7 +50,6 @@ export declare class Simulation extends Settings {
     private applyCanvasSize;
     setCanvasSize(width: number, height: number): void;
     start(): void;
-    private propagateDevice;
     stop(): void;
     setBackground(color: Color): void;
     getScene(): SimSceneObjInfo[];
@@ -71,7 +69,7 @@ export declare class ShaderGroup extends EmptyElement {
     private bindGroup;
     private valueBuffers;
     constructor(shaderCode: string, topology: GPUPrimitiveTopology | undefined, vertexParams: VertexParamInfo[], paramGenerator: VertexParamGeneratorInfo, bindGroup?: BindGroupInfo);
-    protected onDeviceChange(device: GPUDevice): void;
+    private initPipeline;
     getBindGroupLayout(): GPUBindGroupLayout | null;
     getPipeline(): GPURenderPipeline | null;
     getBindGroupBuffers(device: GPUDevice): GPUBuffer[] | null;

package/dist/simulation.js

@@ -3,7 +3,7 @@ import { EmptyElement, SimulationElement3d } from './graphics.js';
 import { BUF_LEN, worldProjMatOffset } from './constants.js';
 import { Color, matrix4, transitionValues, vector2, vector3 } from './utils.js';
 import { BlankGeometry } from './geometry.js';
-import { SimSceneObjInfo, buildDepthTexture, buildMultisampleTexture, updateProjectionMatrix, createPipeline, getTotalVertices, logger, removeObjectId, updateOrthoProjectionMatrix, updateWorldProjectionMatrix } from './internalUtils.js';
+import { SimSceneObjInfo, buildDepthTexture, buildMultisampleTexture, updateProjectionMatrix, createPipeline, getTotalVertices, logger, removeObjectId, updateOrthoProjectionMatrix, updateWorldProjectionMatrix, globalInfo } from './internalUtils.js';
 import { Settings } from './settings.js';
 const shader = `
 struct Uniforms {
@@ -32,7 +32,6 @@ fn vertex_main(
 ) -> VertexOutput {
   var output: VertexOutput;
 
-
   if (drawingInstance == 1) {
     output.Position = uniforms.worldProjectionMatrix * uniforms.modelProjectionMatrix * instanceMatrices[instanceIdx] * vec4(position, 1.0);
   } else {
@@ -70,16 +69,21 @@ class FrameRateView {
     fpsBuffer = [];
     maxFpsBufferLength = 8;
     prevAvg = 0;
+    showing;
     constructor(show) {
         this.el = document.createElement('div');
         this.el.classList.add('simjs-frame-rate');
+        this.showing = show;
         const style = document.createElement('style');
         style.innerHTML = simjsFrameRateCss;
-        if (show) {
+        if (this.showing) {
             document.head.appendChild(style);
             document.body.appendChild(this.el);
         }
     }
+    isActive() {
+        return this.showing;
+    }
     updateFrameRate(num) {
         if (this.fpsBuffer.length < this.maxFpsBufferLength) {
             this.fpsBuffer.push(num);
@@ -212,11 +216,10 @@ export class Simulation extends Settings {
     fittingElement = false;
     running = true;
     initialized = false;
-    frameRateView;
-    device = null;
     pipelines = null;
     renderInfo = null;
     resizeEvents;
+    frameRateView;
     constructor(idOrCanvasRef, sceneCamera = null, showFrameRate = false) {
         super();
         if (typeof idOrCanvasRef === 'string') {
@@ -263,9 +266,6 @@ export class Simulation extends Settings {
     }
     add(el, id) {
         if (el instanceof SimulationElement3d) {
-            if (this.device !== null) {
-                el.propagateDevice(this.device);
-            }
             const obj = new SimSceneObjInfo(el, id);
             this.scene.unshift(obj);
         }
@@ -324,8 +324,7 @@ export class Simulation extends Settings {
             if (!ctx)
                 throw logger.error('Context is null');
             const device = await adapter.requestDevice();
-            this.device = device;
-            this.propagateDevice(device);
+            globalInfo.setDevice(device);
             ctx.configure({
                 device,
                 format: 'bgra8unorm'
@@ -335,12 +334,6 @@ export class Simulation extends Settings {
             this.render(ctx);
         })();
     }
-    propagateDevice(device) {
-        for (let i = 0; i < this.scene.length; i++) {
-            const el = this.scene[i].getObj();
-            el.propagateDevice(device);
-        }
-    }
     stop() {
         this.running = false;
     }
@@ -354,10 +347,10 @@ export class Simulation extends Settings {
         return this.scene.map((item) => item.getObj());
     }
     render(ctx) {
-        if (this.canvasRef === null || this.device === null)
+        const device = globalInfo.getDevice();
+        if (this.canvasRef === null || device === null)
             return;
         const canvas = this.canvasRef;
-        const device = this.device;
         canvas.width = canvas.clientWidth * devicePixelRatio;
         canvas.height = canvas.clientHeight * devicePixelRatio;
         const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
@@ -412,9 +405,7 @@ export class Simulation extends Settings {
         let prev = Date.now() - 10;
         let prevFps = 0;
         const frame = async () => {
-            if (!canvas)
-                return;
-            if (!this.renderInfo)
+            if (!canvas || !this.renderInfo)
                 return;
             requestAnimationFrame(frame);
             if (!this.running)
@@ -423,7 +414,7 @@ export class Simulation extends Settings {
             const diff = Math.max(now - prev, 1);
             prev = now;
             const fps = 1000 / diff;
-            if (fps === prevFps) {
+            if (fps === prevFps && this.frameRateView.isActive()) {
                 this.frameRateView.updateFrameRate(fps);
             }
             prevFps = fps;
@@ -513,7 +504,7 @@ export class Simulation extends Settings {
             vertexBuffer.unmap();
             passEncoder.setVertexBuffer(0, vertexBuffer, currentOffset, buffer.byteLength);
             const modelMatrix = obj.getModelMatrix();
-            const uniformBuffer = obj.getUniformBuffer(device, modelMatrix);
+            const uniformBuffer = obj.getUniformBuffer(modelMatrix);
             const projBuf = obj.is3d ? worldProjMat : orthoMatrix;
             device.queue.writeBuffer(uniformBuffer, worldProjMatOffset, projBuf.buffer, projBuf.byteOffset, projBuf.byteLength);
             if (shaderInfo) {
@@ -536,7 +527,8 @@ export class Simulation extends Settings {
                 let instanceBuffer;
                 if (obj.isInstance) {
                     instances = obj.getNumInstances();
-                    instanceBuffer = obj.getMatrixBuffer(device);
+                    instanceBuffer =
+                        obj.getMatrixBuffer() ?? this.renderInfo.instanceBuffer;
                 }
                 else {
                     instanceBuffer = this.renderInfo.instanceBuffer;
@@ -627,7 +619,8 @@ export class ShaderGroup extends EmptyElement {
         this.vertexParams = vertexParams;
         this.valueBuffers = null;
     }
-    onDeviceChange(device) {
+    initPipeline() {
+        const device = globalInfo.errorGetDevice();
         this.module = device.createShaderModule({ code: this.code });
         const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
         const bindGroupLayout = device.createBindGroupLayout(baseBindGroupLayout);
@@ -649,6 +642,8 @@ export class ShaderGroup extends EmptyElement {
         return this.bindGroupLayout;
     }
     getPipeline() {
+        if (!this.pipeline)
+            this.initPipeline();
         return this.pipeline;
     }
     getBindGroupBuffers(device) {

package/package.json

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