simulationjsv2 0.7.4 → 0.8.0

package/dist/shaders.js

@@ -1,29 +1,138 @@
-import { globalInfo } from './internalUtils.js';
+import { MemoBuffer } from './buffers.js';
+import { mat4ByteLength } from './constants.js';
+import { globalInfo } from './globals.js';
+import { color, createBindGroup, writeUniformWorldMatrix } from './utils.js';
+export const uniformBufferSize = 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,
+        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 defaultBindGroupGenerator = (el, buffers) => {
+    const shader = el.getShader();
+    const gpuBuffers = [
+        el.getUniformBuffer(),
+        el.isInstance ? el.getInstanceBuffer() : buffers[0].getBuffer()
+    ];
+    return [createBindGroup(shader, 0, gpuBuffers)];
+};
 export class Shader {
-    bindGroupLayoutDescriptor;
-    bindGroupLayout;
+    bindGroupLayoutDescriptors;
+    bindGroupLayouts;
+    module;
     code;
-    constructor(code, descriptor) {
+    fragmentMain;
+    vertexMain;
+    vertexBuffers;
+    bufferLength;
+    bufferWriter;
+    vertexBufferWriter;
+    bindGroupGenerator;
+    buffers;
+    bufferInfos;
+    constructor(code, descriptors, vertexParams, bufferInfos, bufferWriter, bindGroupGenerator, vertexBufferWriter, vertexMain = 'vertex_main', fragmentMain = 'fragment_main') {
         this.code = code;
-        this.bindGroupLayoutDescriptor = descriptor;
-        this.bindGroupLayout = null;
+        this.bindGroupLayoutDescriptors = descriptors;
+        this.bindGroupLayouts = null;
+        this.module = null;
+        this.bufferWriter = bufferWriter;
+        this.vertexBufferWriter = vertexBufferWriter;
+        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));
+        }
+        let stride = 0;
+        const attributes = [];
+        for (let i = 0; i < vertexParams.length; i++) {
+            attributes.push({
+                shaderLocation: i,
+                offset: stride,
+                format: vertexParams[i].format
+            });
+            stride += vertexParams[i].size;
+        }
+        this.bufferLength = stride / 4;
+        this.vertexBuffers = {
+            arrayStride: stride,
+            attributes
+        };
     }
     getCode() {
         return this.code;
     }
-    getBindGroupLayout() {
+    getBufferLength() {
+        return this.bufferLength;
+    }
+    getVertexBuffers() {
+        return this.vertexBuffers;
+    }
+    getBindGroupLayouts() {
+        const device = globalInfo.errorGetDevice();
+        if (!this.bindGroupLayouts) {
+            this.bindGroupLayouts = this.bindGroupLayoutDescriptors.map((descriptor) => device.createBindGroupLayout(descriptor));
+        }
+        return this.bindGroupLayouts;
+    }
+    getBindGroupLayoutDescriptors() {
+        return this.bindGroupLayoutDescriptors;
+    }
+    getBufferInfo() {
+        return this.bufferInfos;
+    }
+    getBufferWriter() {
+        return this.bufferWriter;
+    }
+    getVertexBufferWriter() {
+        return this.vertexBufferWriter;
+    }
+    getBindGroupGenerator() {
+        return this.bindGroupGenerator;
+    }
+    getModule() {
         const device = globalInfo.errorGetDevice();
-        if (!this.bindGroupLayout) {
-            this.bindGroupLayout = device.createBindGroupLayout(this.bindGroupLayoutDescriptor);
+        if (!this.module) {
+            this.module = device.createShaderModule({ code: this.code });
         }
-        return this.bindGroupLayout;
+        return this.module;
+    }
+    getVertexMain() {
+        return this.vertexMain;
+    }
+    getFragmentMain() {
+        return this.fragmentMain;
+    }
+    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);
     }
-    getBindGroupLayoutDescriptor() {
-        return this.bindGroupLayoutDescriptor;
+    getBindGroups(el) {
+        return this.bindGroupGenerator(el, this.buffers);
     }
 }
-export const defaultShader = new Shader(`
-struct Uniforms {
+const positionSize = 4 * 3;
+const colorSize = 4 * 4;
+const uvSize = 4 * 2;
+const drawingInstancesSize = 4;
+export const defaultShader = new Shader(`struct Uniforms {
   worldProjectionMatrix: mat4x4<f32>,
   modelProjectionMatrix: mat4x4<f32>,
 }
@@ -69,21 +178,153 @@ fn fragment_main(
 ) -> @location(0) vec4<f32> {
   return fragColor;
 }
-`, {
-    entries: [
-        {
-            binding: 0,
-            visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-            buffer: {
-                type: 'uniform'
+`, [
+    {
+        entries: [
+            {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: {
+                    type: 'uniform'
+                }
+            },
+            {
+                binding: 1,
+                visibility: GPUShaderStage.VERTEX,
+                buffer: {
+                    type: 'read-only-storage'
+                }
             }
-        },
-        {
-            binding: 1,
-            visibility: GPUShaderStage.VERTEX,
-            buffer: {
-                type: 'read-only-storage'
+        ]
+    }
+], [
+    {
+        size: positionSize,
+        format: 'float32x3'
+    },
+    {
+        size: colorSize,
+        format: 'float32x4'
+    },
+    {
+        size: uvSize,
+        format: 'float32x2'
+    },
+    {
+        size: drawingInstancesSize,
+        format: 'float32'
+    }
+], defaultInfos, defaultBufferWriter, defaultBindGroupGenerator, (el, buffer, vertex, _, offset) => {
+    const material = el.getMaterial();
+    const color = material.getColor();
+    buffer[offset] = vertex[0];
+    buffer[offset + 1] = vertex[1];
+    buffer[offset + 2] = vertex[2];
+    buffer[offset + 3] = color.r / 255;
+    buffer[offset + 4] = color.g / 255;
+    buffer[offset + 5] = color.b / 255;
+    buffer[offset + 6] = color.a;
+    // TODO possibly change uv for textures
+    buffer[offset + 7] = 0;
+    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;
+}
+`, [
+    {
+        entries: [
+            {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: {
+                    type: 'uniform'
+                }
+            },
+            {
+                binding: 1,
+                visibility: GPUShaderStage.VERTEX,
+                buffer: {
+                    type: 'read-only-storage'
+                }
             }
-        }
-    ]
+        ]
+    }
+], [
+    {
+        size: positionSize,
+        format: 'float32x3'
+    },
+    {
+        size: colorSize,
+        format: 'float32x4'
+    },
+    {
+        size: uvSize,
+        format: 'float32x2'
+    },
+    {
+        size: drawingInstancesSize,
+        format: 'float32'
+    }
+], defaultInfos, defaultBufferWriter, defaultBindGroupGenerator, (el, buffer, vertex, vertexIndex, offset) => {
+    const material = el.getMaterial();
+    const colors = material.getVertexColors();
+    const vertexColor = colors[vertexIndex] ?? color();
+    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/simulation.d.ts

@@ -1,9 +1,10 @@
-/// <reference types="@webgpu/types" />
-import { EmptyElement, SimulationElement3d } from './graphics.js';
-import type { Vector2, Vector3, LerpFunc, AnySimulationElement, VertexParamGeneratorInfo, VertexParamInfo, BindGroupInfo } from './types.js';
+import { SimulationElement3d } from './graphics.js';
+import type { Vector2, Vector3, LerpFunc, AnySimulationElement } from './types.js';
 import { Color } from './utils.js';
 import { SimSceneObjInfo } from './internalUtils.js';
 import { Settings } from './settings.js';
+export declare const worldProjectionMatrix: import("./types.js").Mat4;
+export declare const orthogonalMatrix: import("./types.js").Mat4;
 export declare class Camera {
     private pos;
     private rotation;
@@ -31,12 +32,11 @@ export declare class Simulation extends Settings {
     private fittingElement;
     private running;
     private initialized;
-    private pipelines;
-    private renderInfo;
     private resizeEvents;
     private frameRateView;
     private transparentElements;
     private vertexBuffer;
+    private indexBuffer;
     constructor(idOrCanvasRef: string | HTMLCanvasElement, sceneCamera?: Camera | null, showFrameRate?: boolean);
     private handleCanvasResize;
     onResize(cb: (width: number, height: number) => void): void;
@@ -60,22 +60,3 @@ export declare class Simulation extends Settings {
     private renderScene;
     fitElement(): void;
 }
-export declare class ShaderGroup extends EmptyElement {
-    private code;
-    private module;
-    private pipeline;
-    private bindGroupLayout;
-    private topology;
-    private paramGenerator;
-    private vertexParams;
-    private bindGroup;
-    private valueBuffers;
-    constructor(shaderCode: string, topology: GPUPrimitiveTopology | undefined, vertexParams: VertexParamInfo[], paramGenerator: VertexParamGeneratorInfo, bindGroup?: BindGroupInfo);
-    private initPipeline;
-    getBindGroupLayout(): GPUBindGroupLayout | null;
-    getPipeline(): GPURenderPipeline | null;
-    getBindGroupBuffers(device: GPUDevice): GPUBuffer[] | null;
-    private createBuffer;
-    getVertexParamGenerator(): VertexParamGeneratorInfo;
-    hasBindGroup(): boolean;
-}