simulationjsv2 0.10.5 → 0.11.0

package/dist/shaders/webgl.js

@@ -0,0 +1,242 @@
+import { WebGLMemoBuffer } from '../buffers/webgl.js';
+import { FLOAT_SIZE, mat4ByteLength } from '../constants.js';
+import { globalInfo, logger } from '../globals.js';
+import { orthogonalMatrix, worldProjectionMatrix } from '../simulation.js';
+import { defaultVertexBufferWriter, defaultVertexColorBufferWriter, SimJSShader } from './shader.js';
+export class SimJSWebGLShader extends SimJSShader {
+    buffers;
+    shaderProgram = null;
+    shaderProgramInfoLayout = null;
+    shaderProgramInfo = null;
+    gl = null;
+    uniformBufferWriter;
+    getShaderProgramInfoFn;
+    vertexSource;
+    fragmentSource;
+    bufferDeclerations;
+    constructor(vertexSource, fragmentSource, bufferDeclerations, uniformBufferWriter, vertexBufferWriter, getShaderProgramInfoFn) {
+        super('webgl', vertexBufferWriter);
+        this.buffers = [];
+        this.vertexSource = vertexSource;
+        this.fragmentSource = fragmentSource;
+        this.uniformBufferWriter = uniformBufferWriter;
+        this.getShaderProgramInfoFn = getShaderProgramInfoFn;
+        this.bufferDeclerations = bufferDeclerations;
+        const canvas = globalInfo.getCanvas();
+        if (!canvas) {
+            globalInfo.addToInitShader(this);
+            return;
+        }
+        const backend = canvas.getBackend().as('webgl');
+        this.init(backend.getContextOrError());
+    }
+    init(gl) {
+        this.gl = gl;
+        this.shaderProgram = this.initShaderProgram(gl, this.vertexSource, this.fragmentSource);
+        this.shaderProgramInfoLayout = this.getShaderProgramInfoFn();
+        this.shaderProgramInfo = this.programInfoLayoutToProgramInfo(this.shaderProgram, gl, this.shaderProgramInfoLayout);
+        for (const dec of this.bufferDeclerations) {
+            const buf = new WebGLMemoBuffer(this.gl, dec.target, dec.usage, dec.defaultCapacity ?? 0);
+            this.buffers.push(buf);
+        }
+    }
+    programInfoLayoutToProgramInfo(program, gl, layout) {
+        const res = {
+            program: program,
+            // @ts-ignore
+            attributeLocations: [],
+            // @ts-ignore
+            uniformLocations: []
+        };
+        let bufferLength = 0;
+        for (const obj of layout.attributeLocations) {
+            const key = Object.keys(obj)[0];
+            const size = obj[key];
+            const loc = gl.getAttribLocation(program, key);
+            const tuple = [key, loc];
+            // @ts-ignore
+            res.attributeLocations.push(tuple);
+            bufferLength += size;
+        }
+        this.bufferLength = bufferLength;
+        for (const obj of layout.uniformLocations) {
+            const key = Object.keys(obj)[0];
+            const loc = gl.getUniformLocation(program, key);
+            const tuple = [key, loc];
+            // @ts-ignore
+            res.uniformLocations.push(tuple);
+        }
+        return res;
+    }
+    initShaderProgram(gl, vertexShaderSource, fragmentShaderSource) {
+        const vertexShader = this.loadShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
+        const fragmentShader = this.loadShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
+        const shaderProgram = gl.createProgram();
+        if (!shaderProgram)
+            throw logger.error('Shader program init error');
+        gl.attachShader(shaderProgram, vertexShader);
+        gl.attachShader(shaderProgram, fragmentShader);
+        gl.linkProgram(shaderProgram);
+        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+            throw logger.error('Error initializing shader program');
+        }
+        return shaderProgram;
+    }
+    loadShader(ctx, shaderType, code) {
+        const shader = ctx.createShader(shaderType);
+        if (!shader)
+            throw logger.error('Error creating shader');
+        ctx.shaderSource(shader, code);
+        ctx.compileShader(shader);
+        if (!ctx.getShaderParameter(shader, ctx.COMPILE_STATUS)) {
+            const err = logger.error(`Error compiling shaders: ${ctx.getShaderInfoLog(shader)}`);
+            ctx.deleteShader(shader);
+            throw err;
+        }
+        return shader;
+    }
+    getShaderProgram() {
+        if (!this.shaderProgram)
+            throw logger.error('Shader program not initialized');
+        return this.shaderProgram;
+    }
+    getShaderProgramInfo() {
+        if (!this.shaderProgramInfo)
+            throw logger.error('Shader program not initialized');
+        return this.shaderProgramInfo;
+    }
+    writeUniformBuffers(obj) {
+        if (!this.gl || !this.shaderProgramInfo)
+            throw logger.error('Shader not initialized');
+        this.uniformBufferWriter(this.shaderProgramInfo, this.gl, obj, this.buffers);
+    }
+    writeShaderProgramAttributes(buffer, vertexCallOffset, vertexCallBuffer) {
+        if (!this.gl || !this.shaderProgramInfoLayout || !this.shaderProgramInfo) {
+            throw logger.error('Shader not initialized');
+        }
+        const gl = this.gl;
+        buffer.write(vertexCallBuffer, vertexCallOffset);
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer.getBuffer());
+        const STRIDE = this.bufferLength * FLOAT_SIZE;
+        let localOffset = 0;
+        for (let i = 0; i < this.shaderProgramInfo.attributeLocations.length; i++) {
+            const [key, loc] = this.shaderProgramInfo.attributeLocations[i];
+            const size = this.shaderProgramInfoLayout.attributeLocations[i][key];
+            gl.enableVertexAttribArray(loc);
+            gl.vertexAttribPointer(loc, size, gl.FLOAT, false, STRIDE, vertexCallOffset + localOffset);
+            localOffset += size * FLOAT_SIZE;
+        }
+    }
+}
+function defaultWebGLUniformBufferWriter(programInfo, gl, obj, _buffers) {
+    const projBuf = obj.is3d ? worldProjectionMatrix : orthogonalMatrix;
+    let buffer = obj.getUniformBuffer();
+    if (!buffer) {
+        buffer = new WebGLMemoBuffer(gl, gl.ARRAY_BUFFER, gl.DYNAMIC_DRAW, WEBGL_DEFAULT_SHADER_UNIFORM_BUFFER_SIZE);
+        obj.setUniformBuffer(buffer);
+    }
+    else {
+        buffer.as('webgl');
+    }
+    gl.uniformMatrix4fv(programInfo.uniformLocations[0][1], false, projBuf);
+    const modelMatrix = obj.getModelMatrix();
+    gl.uniformMatrix4fv(programInfo.uniformLocations[1][1], false, modelMatrix);
+    // gl.bindBuffer(gl.ARRAY_BUFFER, null);
+    // if (obj.isInstance) {
+    //     buffers[0].write((obj as Instance<SimulationElement3d>).getInstanceBuffer());
+    // }
+    // gl.bindBuffer(gl.ARRAY_BUFFER, buffers[0].getBuffer());
+    // const mat4BaseLoc = programInfo.attributeLocations.instanceMatrix;
+    // const mat4Stride = 64;
+    // for (let i = 0; i < 4; i++) {
+    //     const loc = mat4BaseLoc + i;
+    //     const offset = i * 4 * FLOAT_SIZE;
+    //     gl.enableVertexAttribArray(loc);
+    //     gl.vertexAttribPointer(loc, 4, gl.FLOAT, false, mat4Stride, offset);
+    //     gl.vertexAttribDivisor(loc, 1);
+    // }
+    // gl.bindBuffer(gl.ARRAY_BUFFER, null);
+}
+const defaultWebGLVertexShader = `#version 300 es
+
+// uniforms
+uniform mat4 worldProjectionMatrix;
+uniform mat4 modelProjectionMatrix;
+
+// attributes
+layout(location = 0) in vec3 position;
+layout(location = 1) in vec4 color;
+layout(location = 2) in vec2 uv;
+layout(location = 3) in float drawingInstance;
+
+// consumes locations 4, 5, 6, 7
+//layout(location = 4) in mat4 instanceMatrix; 
+
+out vec2 vFragUV;
+out vec4 vFragColor;
+out vec4 vFragPosition;
+
+void main() {
+    vec4 finalPosition;
+    vec4 posInput = vec4(position, 1.0);
+
+    if (drawingInstance == 1.0) {
+        //finalPosition = worldProjectionMatrix * modelProjectionMatrix * instanceMatrix * posInput;
+        finalPosition = worldProjectionMatrix * modelProjectionMatrix * posInput;
+    } else {
+        finalPosition = worldProjectionMatrix * modelProjectionMatrix * posInput;
+    }
+
+    gl_Position = finalPosition;
+
+    vFragUV = uv;
+    vFragColor = color;
+    vFragPosition = finalPosition;
+}
+`;
+const defaultWebGLFragmentShader = `#version 300 es
+precision mediump float;
+
+in vec2 vFragUV;
+in vec4 vFragColor;
+in vec4 vFragPosition;
+
+layout(location = 0) out vec4 outColor;
+
+void main() {
+    outColor = vFragColor;
+}
+`;
+const WEBGL_DEFAULT_SHADER_UNIFORM_BUFFER_SIZE = mat4ByteLength * 2;
+export const defaultWebGLShader = new SimJSWebGLShader(defaultWebGLVertexShader, defaultWebGLFragmentShader, [
+// {
+//     target: WebGL2RenderingContext.ARRAY_BUFFER,
+//     usage: WebGL2RenderingContext.DYNAMIC_DRAW,
+//     defaultCapacity: 64
+// }
+], defaultWebGLUniformBufferWriter, defaultVertexBufferWriter, () => ({
+    attributeLocations: [
+        { position: 3 },
+        { color: 4 },
+        { uv: 2 },
+        { drawingInstance: 1 }
+        // instanceMatrix: 16
+    ],
+    uniformLocations: [{ worldProjectionMatrix: 64 }, { modelProjectionMatrix: 64 }]
+}));
+export const defaultWebGLVertexColorShader = new SimJSWebGLShader(defaultWebGLVertexShader, defaultWebGLFragmentShader, [
+// {
+//     target: WebGL2RenderingContext.ARRAY_BUFFER,
+//     usage: WebGL2RenderingContext.DYNAMIC_DRAW,
+//     defaultCapacity: 64
+// }
+], defaultWebGLUniformBufferWriter, defaultVertexColorBufferWriter, () => ({
+    attributeLocations: [
+        { position: 3 },
+        { color: 4 },
+        { uv: 2 },
+        { drawingInstance: 1 }
+        // instanceMatrix: 16
+    ],
+    uniformLocations: [{ worldProjectionMatrix: 64 }, { modelProjectionMatrix: 64 }]
+}));

package/dist/shaders/webgpu.d.ts

@@ -0,0 +1,40 @@
+import { WebGPUMemoBuffer } from '../buffers/webgpu.js';
+import { SimulationElement3d } from '../graphics.js';
+import { WebGPUBufferDecleration, Vector3, VertexBufferWriter, VertexParamInfo } from '../types.js';
+import { SimJSShader } from './shader.js';
+export declare const WEBGPU_DEFAULT_SHADER_UNIFORM_BUFFER_SIZE: number;
+type WebGPUUniformBufferWriter = (device: GPUDevice, element: SimulationElement3d, buffers: WebGPUMemoBuffer[]) => void;
+type WebGPUBindGroupGenerator = (device: GPUDevice, element: SimulationElement3d, buffers: WebGPUMemoBuffer[]) => GPUBindGroup[];
+export declare class SimJSWebGPUShader extends SimJSShader {
+    protected buffers: WebGPUMemoBuffer[];
+    private bindGroupLayoutDescriptors;
+    private bindGroupLayouts;
+    private module;
+    private code;
+    private fragmentMain;
+    private vertexMain;
+    private vertexBuffers;
+    private uniformBufferWriter;
+    private bindGroupGenerator;
+    private bufferDeclerations;
+    private device;
+    constructor(code: string, descriptors: GPUBindGroupLayoutDescriptor[], vertexParams: VertexParamInfo[], bufferDeclerations: WebGPUBufferDecleration[], uniformBufferWriter: WebGPUUniformBufferWriter, bindGroupGenerator: WebGPUBindGroupGenerator, vertexBufferWriter: VertexBufferWriter, vertexMain?: string, fragmentMain?: string);
+    init(device: GPUDevice): void;
+    getCode(): string;
+    getVertexBuffers(): GPUVertexBufferLayout;
+    getBindGroupLayouts(): GPUBindGroupLayout[];
+    getBindGroupLayoutDescriptors(): GPUBindGroupLayoutDescriptor[];
+    getBufferInfo(): WebGPUBufferDecleration[];
+    getUniformBufferWriter(): WebGPUUniformBufferWriter;
+    getVertexBufferWriter(): VertexBufferWriter;
+    getBindGroupGenerator(): WebGPUBindGroupGenerator;
+    getModule(): GPUShaderModule;
+    getVertexMain(): string;
+    getFragmentMain(): string;
+    setVertexInfo(element: SimulationElement3d, buffer: Float32Array, vertex: Vector3, vertexIndex: number, offset: number): void;
+    writeUniformBuffers(el: SimulationElement3d): void;
+    getBindGroups(device: GPUDevice, el: SimulationElement3d): GPUBindGroup[];
+}
+export declare const defaultWebGPUShader: SimJSWebGPUShader;
+export declare const defaultWebGPUVertexColorShader: SimJSWebGPUShader;
+export {};

package/dist/{shaders.js → shaders/webgpu.js}

@@ -1,32 +1,44 @@
-import { MemoBuffer } from './buffers.js';
-import { mat4ByteLength } from './constants.js';
-import { globalInfo } from './globals.js';
-import { createBindGroup, writeUniformWorldMatrix } from './utils.js';
-export const uniformBufferSize = mat4ByteLength * 2 + 4 * 2 + 8; // 4x4 matrix * 2 + vec2<f32> + 8 bc 144 is cool
+import { WebGPUMemoBuffer } from '../buffers/webgpu.js';
+import { mat4ByteLength, modelProjMatOffset } from '../constants.js';
+import { globalInfo, logger } from '../globals.js';
+import { createBindGroup } from '../utils.js';
+import { orthogonalMatrix, worldProjectionMatrix } from '../simulation.js';
+import { worldProjMatOffset } from '../constants.js';
+import { defaultVertexColorBufferWriter, SimJSShader } from './shader.js';
+export const WEBGPU_DEFAULT_SHADER_UNIFORM_BUFFER_SIZE = mat4ByteLength * 2 + 4 * 2 + 8; // 4x4 matrix * 2 + vec2<f32> + 8 bc 144 is cool
 const defaultInfos = [
     {
-        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-        owned: false
-    },
-    {
-        usage: GPUBufferUsage.STORAGE,
+        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
         defaultSize: 10 * 4 * 16 // not sure where this came from, made it up a while ago
     }
 ];
-const defaultBufferWriter = (el) => {
-    writeUniformWorldMatrix(el);
-    // not writing to buffer[0] because the buffer exists
-    // on the element
+const defaultWebGPUUniformBufferWriter = (device, el, buffers) => {
+    const projBuf = el.is3d ? worldProjectionMatrix : orthogonalMatrix;
+    let buffer = el.getUniformBuffer();
+    if (!buffer) {
+        buffer = new WebGPUMemoBuffer(device, GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST, WEBGPU_DEFAULT_SHADER_UNIFORM_BUFFER_SIZE);
+        el.setUniformBuffer(buffer);
+    }
+    device.queue.writeBuffer(buffer.getBuffer(), worldProjMatOffset, projBuf.buffer, projBuf.byteOffset, projBuf.byteLength);
+    const modelMatrix = el.getModelMatrix();
+    device.queue.writeBuffer(buffer.getBuffer(), modelProjMatOffset, modelMatrix.buffer, modelMatrix.byteOffset, modelMatrix.byteLength);
+    if (el.isInstance) {
+        buffers[0].write(el.getInstanceBuffer());
+    }
 };
-const defaultBindGroupGenerator = (el, buffers) => {
+const defaultBindGroupGenerator = (_device, el, buffers) => {
+    // TODO - why is this here?
     const shader = el.getShader();
+    if (!shader.compatableWith('webgpu'))
+        throw logger.error('Wrong shader type for backend or something idk');
     const gpuBuffers = [
-        el.getUniformBuffer(),
-        el.isInstance ? el.getInstanceBuffer() : buffers[0].getBuffer()
+        el.getUniformBuffer().getBuffer(),
+        buffers[0].getBuffer()
     ];
     return [createBindGroup(shader, 0, gpuBuffers)];
 };
-export class Shader {
+export class SimJSWebGPUShader extends SimJSShader {
+    buffers;
     bindGroupLayoutDescriptors;
     bindGroupLayouts;
     module;
@@ -34,29 +46,23 @@ export class Shader {
     fragmentMain;
     vertexMain;
     vertexBuffers;
-    bufferLength;
-    bufferWriter;
-    vertexBufferWriter;
+    uniformBufferWriter;
     bindGroupGenerator;
-    buffers;
-    bufferInfos;
-    constructor(code, descriptors, vertexParams, bufferInfos, bufferWriter, bindGroupGenerator, vertexBufferWriter, vertexMain = 'vertex_main', fragmentMain = 'fragment_main') {
+    bufferDeclerations;
+    device;
+    constructor(code, descriptors, vertexParams, bufferDeclerations, uniformBufferWriter, bindGroupGenerator, vertexBufferWriter, vertexMain = 'vertex_main', fragmentMain = 'fragment_main') {
+        super('webgpu', vertexBufferWriter);
+        this.buffers = [];
+        this.device = null;
         this.code = code;
         this.bindGroupLayoutDescriptors = descriptors;
         this.bindGroupLayouts = null;
         this.module = null;
-        this.bufferWriter = bufferWriter;
-        this.vertexBufferWriter = vertexBufferWriter;
+        this.uniformBufferWriter = uniformBufferWriter;
         this.bindGroupGenerator = bindGroupGenerator;
         this.vertexMain = vertexMain;
         this.fragmentMain = fragmentMain;
-        this.bufferInfos = bufferInfos;
-        this.buffers = [];
-        for (let i = 0; i < bufferInfos.length; i++) {
-            if (bufferInfos[i].owned === false)
-                continue;
-            this.buffers.push(new MemoBuffer(bufferInfos[i].usage, bufferInfos[i].defaultSize ?? 0));
-        }
+        this.bufferDeclerations = bufferDeclerations;
         let stride = 0;
         const attributes = [];
         for (let i = 0; i < vertexParams.length; i++) {
@@ -72,18 +78,30 @@ export class Shader {
             arrayStride: stride,
             attributes
         };
+        const canvas = globalInfo.getCanvas();
+        if (!canvas) {
+            globalInfo.addToInitShader(this);
+            return;
+        }
+        const backend = canvas.getBackend().as('webgpu');
+        this.init(backend.getDeviceOrError());
+    }
+    init(device) {
+        this.device = device;
+        for (let i = 0; i < this.bufferDeclerations.length; i++) {
+            this.buffers.push(new WebGPUMemoBuffer(device, this.bufferDeclerations[i].usage, this.bufferDeclerations[i].defaultSize ?? 0));
+        }
     }
     getCode() {
         return this.code;
     }
-    getBufferLength() {
-        return this.bufferLength;
-    }
     getVertexBuffers() {
         return this.vertexBuffers;
     }
     getBindGroupLayouts() {
-        const device = globalInfo.errorGetDevice();
+        // TODO - probably change
+        const backend = globalInfo.errorGetCanvas().getBackend();
+        const device = backend.getDeviceOrError();
         if (!this.bindGroupLayouts) {
             this.bindGroupLayouts = this.bindGroupLayoutDescriptors.map((descriptor) => device.createBindGroupLayout(descriptor));
         }
@@ -93,10 +111,10 @@ export class Shader {
         return this.bindGroupLayoutDescriptors;
     }
     getBufferInfo() {
-        return this.bufferInfos;
+        return this.bufferDeclerations;
     }
-    getBufferWriter() {
-        return this.bufferWriter;
+    getUniformBufferWriter() {
+        return this.uniformBufferWriter;
     }
     getVertexBufferWriter() {
         return this.vertexBufferWriter;
@@ -105,7 +123,9 @@ export class Shader {
         return this.bindGroupGenerator;
     }
     getModule() {
-        const device = globalInfo.errorGetDevice();
+        // TODO - probably change
+        const backend = globalInfo.errorGetCanvas().getBackend();
+        const device = backend.getDeviceOrError();
         if (!this.module) {
             this.module = device.createShaderModule({ code: this.code });
         }
@@ -120,19 +140,20 @@ export class Shader {
     setVertexInfo(element, buffer, vertex, vertexIndex, offset) {
         this.vertexBufferWriter(element, buffer, vertex, vertexIndex, offset);
     }
-    writeBuffers(el) {
-        const device = globalInfo.errorGetDevice();
-        this.bufferWriter(el, this.buffers, device);
+    writeUniformBuffers(el) {
+        if (!this.device)
+            throw logger.error('Shader not initialized');
+        this.uniformBufferWriter(this.device, el, this.buffers);
     }
-    getBindGroups(el) {
-        return this.bindGroupGenerator(el, this.buffers);
+    getBindGroups(device, el) {
+        return this.bindGroupGenerator(device, el, this.buffers);
     }
 }
 const positionSize = 4 * 3;
 const colorSize = 4 * 4;
 const uvSize = 4 * 2;
 const drawingInstancesSize = 4;
-export const defaultShader = new Shader(`struct Uniforms {
+const defaultWebGPUShaderSource = `struct Uniforms {
   worldProjectionMatrix: mat4x4<f32>,
   modelProjectionMatrix: mat4x4<f32>,
 }
@@ -178,7 +199,8 @@ fn fragment_main(
 ) -> @location(0) vec4<f32> {
   return fragColor;
 }
-`, [
+`;
+export const defaultWebGPUShader = new SimJSWebGPUShader(defaultWebGPUShaderSource, [
     {
         entries: [
             {
@@ -214,7 +236,7 @@ fn fragment_main(
         size: drawingInstancesSize,
         format: 'float32'
     }
-], defaultInfos, defaultBufferWriter, defaultBindGroupGenerator, (el, buffer, vertex, _, offset) => {
+], defaultInfos, defaultWebGPUUniformBufferWriter, defaultBindGroupGenerator, (el, buffer, vertex, _, offset) => {
     const material = el.getMaterial();
     const vertexColor = material.getColor();
     buffer[offset] = vertex[0];
@@ -229,54 +251,7 @@ fn fragment_main(
     buffer[offset + 8] = 0;
     buffer[offset + 9] = el.isInstanced ? 1 : 0;
 });
-export const vertexColorShader = new Shader(`
-struct Uniforms {
-  worldProjectionMatrix: mat4x4<f32>,
-  modelProjectionMatrix: mat4x4<f32>,
-}
- 
-@group(0) @binding(0) var<uniform> uniforms: Uniforms;
-
-@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>,
-  @location(2) fragPosition: vec4<f32>,
-}
-
-@vertex
-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) {
-    output.Position = uniforms.worldProjectionMatrix * uniforms.modelProjectionMatrix * instanceMatrices[instanceIdx] * vec4(position, 1.0);
-  } else {
-    output.Position = uniforms.worldProjectionMatrix * uniforms.modelProjectionMatrix * vec4(position, 1.0);
-  }
-
-  output.fragUV = uv;
-  output.fragPosition = output.Position;
-  output.fragColor = color;
-  return output;
-}
-
-@fragment
-fn fragment_main(
-  @location(0) fragUV: vec2<f32>,
-  @location(1) fragColor: vec4<f32>,
-  @location(2) fragPosition: vec4<f32>
-) -> @location(0) vec4<f32> {
-  return fragColor;
-}
-`, [
+export const defaultWebGPUVertexColorShader = new SimJSWebGPUShader(defaultWebGPUShaderSource, [
     {
         entries: [
             {
@@ -312,20 +287,4 @@ fn fragment_main(
         size: drawingInstancesSize,
         format: 'float32'
     }
-], defaultInfos, defaultBufferWriter, defaultBindGroupGenerator, (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;
-});
+], defaultInfos, defaultWebGPUUniformBufferWriter, defaultBindGroupGenerator, defaultVertexColorBufferWriter);

package/dist/simulation.d.ts

@@ -1,7 +1,8 @@
 import { SimulationElement3d } from './graphics.js';
-import type { Vector2, Vector3, LerpFunc } from './types.js';
+import type { Vector2, Vector3, LerpFunc, BackendType } from './types.js';
 import { Color } from './utils.js';
 import { Settings } from './settings.js';
+import { SimJsBackend } from './backends/backend.js';
 export declare const worldProjectionMatrix: import("./types.js").Mat4;
 export declare const orthogonalMatrix: import("./types.js").Mat4;
 export declare class Camera {
@@ -24,9 +25,13 @@ export declare class Camera {
     getAspectRatio(): number;
 }
 export declare let camera: Camera;
+type SimulationOptions = {
+    sceneCamera?: Camera | null;
+    showFrameRate?: boolean;
+    backendMode?: BackendType;
+};
 export declare class Simulation extends Settings {
     canvasRef: HTMLCanvasElement | null;
-    private bgColor;
     private scene;
     private fittingElement;
     private running;
@@ -34,12 +39,12 @@ export declare class Simulation extends Settings {
     private resizeEvents;
     private frameRateView;
     private transparentElements;
-    private vertexBuffer;
-    private indexBuffer;
-    constructor(idOrCanvasRef: string | HTMLCanvasElement, sceneCamera?: Camera | null, showFrameRate?: boolean);
+    private backend;
+    constructor(idOrCanvasRef: string | HTMLCanvasElement, options?: SimulationOptions);
     private handleCanvasResize;
     on<K extends keyof HTMLElementEventMap>(event: K, cb: (this: HTMLCanvasElement, ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
     onResize(cb: (width: number, height: number) => void): void;
+    getBackend(): SimJsBackend;
     getWidth(): number;
     getHeight(): number;
     add(el: SimulationElement3d, id?: string): void;
@@ -58,3 +63,4 @@ export declare class Simulation extends Settings {
     private renderScene;
     fitElement(): void;
 }
+export {};