simulationjsv2 0.10.5 → 0.11.0

package/dist/graphics.js

@@ -2,14 +2,12 @@ import { vec3, mat4, vec2 } from 'wgpu-matrix';
 import { cloneBuf, vector2, vector3, vector2FromVector3, matrix4, vector3FromVector2, distance2d, interpolateColors } from './utils.js';
 import { BlankGeometry, CircleGeometry, CubeGeometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, Spline2dGeometry, SquareGeometry, TraceLinesGeometry as TraceLinesGeometry } from './geometry.js';
 import { Float32ArrayCache, internalTransitionValues, posTo2dScreen } from './internalUtils.js';
-import { mat4ByteLength, modelProjMatOffset } from './constants.js';
-import { MemoBuffer } from './buffers.js';
+import { mat4ByteLength } from './constants.js';
 import { globalInfo, logger, pipelineCache } from './globals.js';
-import { defaultShader, uniformBufferSize, vertexColorShader } from './shaders.js';
 import { BasicMaterial, VertexColorMaterial } from './materials.js';
+import { getDefaultShaderForBackend, getDefaultVertexColorShaderForBackend } from './shaders/utils.js';
 export class SimulationElement3d {
     children;
-    uniformBuffer;
     prevInfo;
     pipeline;
     id;
@@ -23,6 +21,7 @@ export class SimulationElement3d {
     vertexCache;
     rotation;
     modelMatrix;
+    uniformBuffer = null;
     isInstance = false;
     isInstanced = false;
     is3d = true;
@@ -33,16 +32,28 @@ export class SimulationElement3d {
         this.vertexCache = new Float32ArrayCache();
         this.wireframe = false;
         this.rotation = cloneBuf(rotation);
-        this.uniformBuffer = new MemoBuffer(GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST, uniformBufferSize);
         this.children = [];
         this.modelMatrix = matrix4();
         this.parent = null;
         this.pipeline = null;
         this.prevInfo = null;
-        this.shader = defaultShader;
         this.material = new BasicMaterial(color);
         this.cullMode = 'none';
         this.id = null;
+        const canvas = globalInfo.getCanvas();
+        if (!canvas)
+            throw logger.error('Canvas is null');
+        const backendType = canvas.getBackend().getBackendType();
+        this.shader = getDefaultShaderForBackend(backendType);
+    }
+    delete() {
+        this.uniformBuffer?.destroy();
+    }
+    setUniformBuffer(buffer) {
+        this.uniformBuffer = buffer;
+    }
+    getUniformBuffer() {
+        return this.uniformBuffer;
     }
     emptyShallow() {
         this.children = [];
@@ -113,7 +124,7 @@ export class SimulationElement3d {
         this.vertexCache.updated();
         this.geometry.compute();
     }
-    /// may have unexpeced behavior for 3d shapes
+    /// may have unexpected behavior for 3d shapes
     setSubdivisions(divisions, vertexLimit) {
         this.geometry.setSubdivisions(divisions, vertexLimit);
         this.vertexCache.updated();
@@ -158,20 +169,18 @@ export class SimulationElement3d {
         return this.material.isTransparent();
     }
     getObjectInfo() {
-        const topologyString = this.isWireframe() ? 'line-strip' : 'triangle-' + this.getGeometryTopology();
+        const topologyString = this.isWireframe()
+            ? 'line-strip'
+            : 'triangle-' + this.getGeometryTopology();
         return `{ "topology": "${topologyString}", "transparent": ${this.isTransparent()}, "cullMode": "${this.cullMode}" }`;
     }
-    getUniformBuffer() {
-        const mat = this.getModelMatrix();
-        const device = globalInfo.errorGetDevice();
-        const buffer = this.uniformBuffer.getBuffer();
-        device.queue.writeBuffer(buffer, modelProjMatOffset, mat);
-        return buffer;
-    }
     getPipeline() {
-        const device = globalInfo.errorGetDevice();
+        // TODO - probably change
+        const backend = globalInfo.errorGetCanvas().getBackend();
+        const device = backend.as('webgpu').getDeviceOrError();
         const objInfo = this.getObjectInfo();
         if (!this.pipeline || !this.prevInfo || this.prevInfo !== objInfo) {
+            // @ts-ignore
             this.pipeline = pipelineCache.getPipeline(device, objInfo, this.shader);
             this.prevInfo = objInfo;
         }
@@ -402,10 +411,7 @@ export class SimulationElement3d {
         }
         return indexCount;
     }
-    writeBuffers() {
-        this.shader.writeBuffers(this);
-    }
-    getVertexBuffer() {
+    getVertexCallBuffer() {
         if (this.vertexCache.shouldUpdate() || this.geometry.hasUpdated()) {
             this.geometry.compute();
             const vertices = this.geometry.getVertices();
@@ -605,7 +611,6 @@ export class Polygon extends SimulationElement2d {
         super(pos, vector3(0, 0, rotation), color);
         const vectors = vertices.map((vert) => vert.getPos());
         const prevColor = this.getColor();
-        this.shader = vertexColorShader;
         this.geometry = new PolygonGeometry(vectors);
         this.material = new VertexColorMaterial([]);
         this.material.setColor(prevColor);
@@ -970,8 +975,9 @@ export class Spline2d extends SimulationElement2d {
         this.geometry = new Spline2dGeometry(points, this.thickness, this.detail);
         this.material = new VertexColorMaterial([]);
         this.material.setColor(pos.getColor() ?? globalInfo.getDefaultColor());
+        const backend = globalInfo.getCanvas()?.getBackend().getBackendType();
+        this.shader = getDefaultVertexColorShaderForBackend(backend);
         this.setVertexColors();
-        this.shader = vertexColorShader;
         this.estimateLength();
     }
     setVertexColors() {
@@ -993,11 +999,11 @@ export class Spline2d extends SimulationElement2d {
         }
         this.material.setVertexColors(colorArray);
     }
-    getVertexBuffer() {
+    getVertexCallBuffer() {
         if (this.vertexCache.shouldUpdate()) {
             this.setVertexColors();
         }
-        return super.getVertexBuffer();
+        return super.getVertexCallBuffer();
     }
     isTransparent() {
         const curves = this.geometry.getCurves();
@@ -1104,31 +1110,29 @@ export class Instance extends SimulationElement3d {
     matrixBuffer;
     baseMat;
     maxInstances;
-    hasMapped;
     isInstance = true;
     constructor(obj, numInstances) {
         super(vector3(), vector3());
         // 32 matrices
         this.maxInstances = 32;
-        this.matrixBuffer = new MemoBuffer(GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST, this.maxInstances * mat4ByteLength);
+        this.matrixBuffer = new Float32Array(this.maxInstances * mat4ByteLength);
         obj.isInstanced = true;
         this.obj = obj;
         this.instanceMatrix = [];
         this.is3d = obj.is3d;
         this.geometry = new BlankGeometry();
-        this.hasMapped = false;
         this.baseMat = matrix4();
         for (let i = 0; i < numInstances; i++) {
             const clone = cloneBuf(this.baseMat);
             this.instanceMatrix.push(clone);
         }
     }
-    setNumInstances(numInstances, forceResizeBuffer = false) {
+    setInstanceCount(numInstances, forceResizeBuffer = false) {
         if (numInstances < 0)
             throw logger.error('Num instances is less than 0');
         if (numInstances > this.maxInstances || forceResizeBuffer) {
             this.maxInstances = numInstances;
-            this.matrixBuffer.setSize(numInstances * mat4ByteLength);
+            this.matrixBuffer = new Float32Array(numInstances * mat4ByteLength);
         }
         const oldLen = this.instanceMatrix.length;
         if (numInstances < oldLen) {
@@ -1151,38 +1155,31 @@ export class Instance extends SimulationElement3d {
         if (instance >= this.instanceMatrix.length || instance < 0)
             return;
         this.instanceMatrix[instance] = transformation;
-        const device = globalInfo.getDevice();
-        if (!device)
-            return;
-        const gpuBuffer = this.matrixBuffer.getBuffer();
-        const buf = new Float32Array(transformation);
-        device.queue.writeBuffer(gpuBuffer, instance * mat4ByteLength, buf.buffer, buf.byteOffset, buf.byteLength);
-        gpuBuffer.unmap();
-    }
-    mapBuffer() {
-        const device = globalInfo.getDevice();
-        if (!device)
-            return;
-        const minSize = this.maxInstances * mat4ByteLength;
-        const size = Math.max(minSize, this.instanceMatrix.length);
-        this.matrixBuffer.setSize(size);
-        const gpuBuffer = this.matrixBuffer.getBuffer();
-        const buf = new Float32Array(this.instanceMatrix.map((mat) => [...mat]).flat());
-        device.queue.writeBuffer(gpuBuffer, 0, buf.buffer, buf.byteOffset, buf.byteLength);
-        gpuBuffer.unmap();
-        this.hasMapped = true;
-    }
-    getInstances() {
+        for (let i = 0; i < transformation.length; i++) {
+            this.matrixBuffer[i + instance * transformation.length] = transformation[i];
+        }
+        console.log(this.matrixBuffer);
+    }
+    // private mapBuffer() {
+    //     const device = globalInfo.getDevice();
+    //     if (!device) return;
+    //     const minSize = this.maxInstances * mat4ByteLength;
+    //     const size = Math.max(minSize, this.instanceMatrix.length);
+    //     this.matrixBuffer.setSize(size);
+    //     const gpuBuffer = this.matrixBuffer.getBuffer();
+    //     const buf = new Float32Array(this.instanceMatrix.map((mat) => [...mat]).flat());
+    //     device.queue.writeBuffer(gpuBuffer, 0, buf.buffer, buf.byteOffset, buf.byteLength);
+    //     gpuBuffer.unmap();
+    //     this.hasMapped = true;
+    // }
+    getInstanceMatrices() {
         return this.instanceMatrix;
     }
-    getNumInstances() {
+    getInstanceCount() {
         return this.instanceMatrix.length;
     }
     getInstanceBuffer() {
-        if (!this.hasMapped) {
-            this.mapBuffer();
-        }
-        return this.matrixBuffer.getBuffer();
+        return this.matrixBuffer;
     }
     getTreeVertexCount() {
         return this.obj.getTreeVertexCount();
@@ -1193,8 +1190,8 @@ export class Instance extends SimulationElement3d {
     getGeometryTopology() {
         return this.obj.getGeometryTopology();
     }
-    getVertexBuffer() {
-        return this.obj.getVertexBuffer();
+    getVertexCallBuffer() {
+        return this.obj.getVertexCallBuffer();
     }
     getIndexBuffer() {
         return this.obj.getIndexBuffer();
@@ -1211,7 +1208,8 @@ export class TraceLines2d extends SimulationElement2d {
         this.material = new VertexColorMaterial([]);
         if (color)
             this.material.setColor(color);
-        this.shader = vertexColorShader;
+        const backend = globalInfo.getCanvas()?.getBackend().getBackendType();
+        this.shader = getDefaultShaderForBackend(backend);
     }
     addPoint(vert, color) {
         const newVert = vert.length < 3 ? vector3(vert[0] ?? 0, vert[1] ?? 0, 0) : vert;

package/dist/index.d.ts

@@ -2,7 +2,9 @@ export * from './simulation.js';
 export * from './graphics.js';
 export * from './utils.js';
 export * from './types.js';
-export * from './shaders.js';
+export * as webGPUShaderUtils from './shaders/webgpu.js';
 export * from './materials.js';
 export * from './constants.js';
+export * from './backends/backend.js';
+export * from './shaders/shader.js';
 export { vec2, vec3, vec4, mat3, mat4, quat } from 'wgpu-matrix';

package/dist/index.js

@@ -2,7 +2,9 @@ export * from './simulation.js';
 export * from './graphics.js';
 export * from './utils.js';
 export * from './types.js';
-export * from './shaders.js';
+export * as webGPUShaderUtils from './shaders/webgpu.js';
 export * from './materials.js';
 export * from './constants.js';
+export * from './backends/backend.js';
+export * from './shaders/shader.js';
 export { vec2, vec3, vec4, mat3, mat4, quat } from 'wgpu-matrix';

package/dist/internalUtils.d.ts

@@ -1,13 +1,12 @@
-/// <reference types="@webgpu/types" />
 import { Mat4, Vector3 } from './types.js';
-import { Shader } from './shaders.js';
+import { SimJSWebGPUShader } from './shaders/webgpu.js';
 import { SimulationElement3d } from './graphics.js';
 export declare class Float32ArrayCache {
     private vertices;
     private hasUpdated;
     constructor();
     setCache(vertices: Float32Array | number[]): void;
-    getCache(): Float32Array;
+    getCache(): Float32Array<ArrayBufferLike>;
     updated(): void;
     shouldUpdate(): boolean;
     getVertexCount(stride?: number): number;
@@ -33,7 +32,7 @@ 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>;
 export declare function posTo2dScreen(pos: Vector3): Vector3;
-export declare function createPipeline(device: GPUDevice, info: string, shader: Shader): GPURenderPipeline;
+export declare function createPipeline(device: GPUDevice, info: string, shader: SimJSWebGPUShader): GPURenderPipeline;
 export declare function addToScene(scene: SimulationElement3d[], el: SimulationElement3d, id?: string): void;
 export declare function removeSceneObj(scene: SimulationElement3d[], el: SimulationElement3d): void;
 export declare function removeSceneId(scene: SimulationElement3d[], id: string): void;

package/dist/internalUtils.js

@@ -88,7 +88,7 @@ export const buildMultisampleTexture = (device, ctx, width, height) => {
         sampleCount: 4
     });
 };
-// optomized for speed, depending on orientation of vertices as input, shape may not be preserved
+// optimized for speed, depending on orientation of vertices as input, shape may not be preserved
 export function lossyTriangulate(vertices) {
     const res = [];
     let facingRight = true;
@@ -236,6 +236,7 @@ export function addToScene(scene, el, id) {
 export function removeSceneObj(scene, el) {
     for (let i = 0; i < scene.length; i++) {
         if (scene[i] === el) {
+            scene[i].delete();
             scene.splice(i, 1);
             break;
         }
@@ -244,6 +245,7 @@ export function removeSceneObj(scene, el) {
 export function removeSceneId(scene, id) {
     for (let i = 0; i < scene.length; i++) {
         if (scene[i].getId() === id) {
+            scene[i].delete();
             scene.splice(i, 1);
             break;
         }

package/dist/shaders/shader.d.ts

@@ -0,0 +1,18 @@
+import { MemoBuffer } from '../buffers/buffer.js';
+import { SimulationElement3d } from '../graphics.js';
+import { BackendType, SpecificShaderType, Vector3, VertexBufferWriter } from '../types.js';
+export declare abstract class SimJSShader {
+    protected abstract buffers: MemoBuffer[];
+    protected vertexBufferWriter: VertexBufferWriter;
+    protected compatableBackend: BackendType;
+    protected bufferLength: number;
+    constructor(conpatableBackend: BackendType, vertexBufferWriter: VertexBufferWriter);
+    abstract writeUniformBuffers(obj: SimulationElement3d): void;
+    setVertexInfo(element: SimulationElement3d, buffer: Float32Array, vertex: Vector3, vertexIndex: number, offset: number): void;
+    getCompatableBackend(): BackendType;
+    compatableWith(backendType: BackendType): boolean;
+    getBufferLength(): number;
+    as<T extends BackendType>(type: T): SpecificShaderType<T>;
+}
+export declare const defaultVertexBufferWriter: VertexBufferWriter;
+export declare const defaultVertexColorBufferWriter: VertexBufferWriter;

package/dist/shaders/shader.js

@@ -0,0 +1,63 @@
+import { logger } from '../globals.js';
+export class SimJSShader {
+    vertexBufferWriter;
+    compatableBackend;
+    bufferLength;
+    constructor(conpatableBackend, vertexBufferWriter) {
+        this.bufferLength = 0;
+        this.vertexBufferWriter = vertexBufferWriter;
+        this.compatableBackend = conpatableBackend;
+    }
+    setVertexInfo(element, buffer, vertex, vertexIndex, offset) {
+        this.vertexBufferWriter(element, buffer, vertex, vertexIndex, offset);
+    }
+    getCompatableBackend() {
+        return this.compatableBackend;
+    }
+    compatableWith(backendType) {
+        return this.compatableBackend === backendType;
+    }
+    // returns number of floats (4 bytes)
+    getBufferLength() {
+        return this.bufferLength;
+    }
+    as(type) {
+        if (this.compatableBackend !== type)
+            throw logger.error('Incompatible shader cast');
+        return this;
+    }
+}
+export const defaultVertexBufferWriter = (el, buffer, vertex, vertexIndex, offset) => {
+    const material = el.getMaterial();
+    const colors = material.getVertexColors();
+    const vertexColor = colors[vertexIndex] ?? el.getColor();
+    // const vertexColor = color(0, 255, 255);
+    buffer[offset] = vertex[0];
+    buffer[offset + 1] = vertex[1];
+    buffer[offset + 2] = vertex[2];
+    buffer[offset + 3] = vertexColor.r / 255;
+    buffer[offset + 4] = vertexColor.g / 255;
+    buffer[offset + 5] = vertexColor.b / 255;
+    buffer[offset + 6] = vertexColor.a;
+    // TODO possibly change uv for textures
+    buffer[offset + 7] = 0;
+    buffer[offset + 8] = 0;
+    buffer[offset + 9] = el.isInstanced ? 1 : 0;
+};
+export const defaultVertexColorBufferWriter = (el, buffer, vertex, vertexIndex, offset) => {
+    const material = el.getMaterial();
+    const colors = material.getVertexColors();
+    const vertexColor = colors[vertexIndex] ?? el.getColor();
+    // const vertexColor = color(0, 255, 255);
+    buffer[offset] = vertex[0];
+    buffer[offset + 1] = vertex[1];
+    buffer[offset + 2] = vertex[2];
+    buffer[offset + 3] = vertexColor.r / 255;
+    buffer[offset + 4] = vertexColor.g / 255;
+    buffer[offset + 5] = vertexColor.b / 255;
+    buffer[offset + 6] = vertexColor.a;
+    // TODO possibly change uv for textures
+    buffer[offset + 7] = 0;
+    buffer[offset + 8] = 0;
+    buffer[offset + 9] = el.isInstanced ? 1 : 0;
+};

package/dist/shaders/utils.d.ts

@@ -0,0 +1,33 @@
+import { BackendType } from '../types.js';
+export declare function getDefaultShaderForBackend(backendType: BackendType): import("./webgpu.js").SimJSWebGPUShader | import("./webgl.js").SimJSWebGLShader<{
+    attributeLocations: [{
+        readonly position: 3;
+    }, {
+        readonly color: 4;
+    }, {
+        readonly uv: 2;
+    }, {
+        readonly drawingInstance: 1;
+    }];
+    uniformLocations: [{
+        readonly worldProjectionMatrix: 64;
+    }, {
+        readonly modelProjectionMatrix: 64;
+    }];
+}>;
+export declare function getDefaultVertexColorShaderForBackend(backendType: BackendType): import("./webgpu.js").SimJSWebGPUShader | import("./webgl.js").SimJSWebGLShader<{
+    attributeLocations: [{
+        readonly position: 3;
+    }, {
+        readonly color: 4;
+    }, {
+        readonly uv: 2;
+    }, {
+        readonly drawingInstance: 1;
+    }];
+    uniformLocations: [{
+        readonly worldProjectionMatrix: 64;
+    }, {
+        readonly modelProjectionMatrix: 64;
+    }];
+}>;

package/dist/shaders/utils.js

@@ -0,0 +1,25 @@
+import { logger } from '../globals.js';
+import { defaultWebGLShader } from './webgl.js';
+import { defaultWebGPUShader, defaultWebGPUVertexColorShader } from './webgpu.js';
+export function getDefaultShaderForBackend(backendType) {
+    if (backendType === 'webgpu') {
+        return defaultWebGPUShader;
+    }
+    else if (backendType === 'webgl') {
+        return defaultWebGLShader;
+    }
+    else {
+        throw logger.error('Unknown backend');
+    }
+}
+export function getDefaultVertexColorShaderForBackend(backendType) {
+    if (backendType === 'webgpu') {
+        return defaultWebGPUVertexColorShader;
+    }
+    else if (backendType === 'webgl') {
+        return defaultWebGLShader;
+    }
+    else {
+        throw logger.error('Unknown backend');
+    }
+}

package/dist/shaders/webgl.d.ts

@@ -0,0 +1,74 @@
+import { WebGLMemoBuffer } from '../buffers/webgl.js';
+import { SimulationElement3d } from '../graphics.js';
+import { VertexBufferWriter, WebGLBufferDecleration } from '../types.js';
+import { SimJSShader } from './shader.js';
+type WebGLUniformBufferWriter<T> = (programInfo: T, gl: WebGL2RenderingContext, element: SimulationElement3d, buffers: WebGLMemoBuffer[]) => void;
+type ProgramInfoLayout = {
+    attributeLocations: {
+        [key: string]: number;
+    }[];
+    uniformLocations: {
+        [key: string]: number;
+    }[];
+};
+type ToTuple<T> = [keyof T, T[keyof T]];
+type ToTupleList<T> = T extends [infer First, ...infer Rest] ? [ToTuple<First>, ...ToTupleList<Rest>] : [];
+type ProgramInfoLayoutToInfo<T extends ProgramInfoLayout> = {
+    program: WebGLProgram;
+    attributeLocations: ToTupleList<T['attributeLocations']>;
+    uniformLocations: ToTupleList<T['uniformLocations']>;
+};
+export declare class SimJSWebGLShader<T extends ProgramInfoLayout> extends SimJSShader {
+    protected buffers: WebGLMemoBuffer[];
+    private shaderProgram;
+    private shaderProgramInfoLayout;
+    private shaderProgramInfo;
+    private gl;
+    private uniformBufferWriter;
+    private getShaderProgramInfoFn;
+    private vertexSource;
+    private fragmentSource;
+    private bufferDeclerations;
+    constructor(vertexSource: string, fragmentSource: string, bufferDeclerations: WebGLBufferDecleration[], uniformBufferWriter: WebGLUniformBufferWriter<ProgramInfoLayoutToInfo<T>>, vertexBufferWriter: VertexBufferWriter, getShaderProgramInfoFn: () => T);
+    init(gl: WebGL2RenderingContext): void;
+    programInfoLayoutToProgramInfo(program: WebGLProgram, gl: WebGL2RenderingContext, layout: T): ProgramInfoLayoutToInfo<T>;
+    private initShaderProgram;
+    private loadShader;
+    getShaderProgram(): WebGLProgram;
+    getShaderProgramInfo(): ProgramInfoLayoutToInfo<T>;
+    writeUniformBuffers(obj: SimulationElement3d): void;
+    writeShaderProgramAttributes(buffer: WebGLMemoBuffer, vertexCallOffset: number, vertexCallBuffer: Float32Array): void;
+}
+export declare const defaultWebGLShader: SimJSWebGLShader<{
+    attributeLocations: [{
+        readonly position: 3;
+    }, {
+        readonly color: 4;
+    }, {
+        readonly uv: 2;
+    }, {
+        readonly drawingInstance: 1;
+    }];
+    uniformLocations: [{
+        readonly worldProjectionMatrix: 64;
+    }, {
+        readonly modelProjectionMatrix: 64;
+    }];
+}>;
+export declare const defaultWebGLVertexColorShader: SimJSWebGLShader<{
+    attributeLocations: [{
+        readonly position: 3;
+    }, {
+        readonly color: 4;
+    }, {
+        readonly uv: 2;
+    }, {
+        readonly drawingInstance: 1;
+    }];
+    uniformLocations: [{
+        readonly worldProjectionMatrix: 64;
+    }, {
+        readonly modelProjectionMatrix: 64;
+    }];
+}>;
+export {};