simulationjsv2 0.7.3 → 0.7.4

package/TODO.md

@@ -3,6 +3,7 @@
 - [ ] Make materials
   - [ ] Move shader group to material
 - [ ] Fix transparency
+- [x] Change absolute pos function to pos function, and pos function to relative pos
 - [x] Update `updateModelMatrix2d`
 - [x] Trace line element (wireframe strip for tracing paths)
 - [x] Test new transform things on 3d stuff

package/dist/buffers.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="@webgpu/types" />
+export declare class MemoBuffer {
+    private buffer;
+    private bufferSize;
+    private usage;
+    constructor(usage: GPUBufferDescriptor['usage'], size: number);
+    private allocBuffer;
+    getBuffer(): GPUBuffer;
+    setSize(size: number): void;
+    destroy(): void;
+}

package/dist/buffers.js

@@ -0,0 +1,36 @@
+import { globalInfo } from './internalUtils.js';
+export class MemoBuffer {
+    buffer;
+    bufferSize;
+    usage;
+    constructor(usage, size) {
+        this.usage = usage;
+        this.bufferSize = size;
+        this.buffer = null;
+    }
+    allocBuffer() {
+        const device = globalInfo.getDevice();
+        if (!device)
+            return;
+        this.buffer = device.createBuffer({
+            size: this.bufferSize,
+            usage: this.usage
+        });
+    }
+    getBuffer() {
+        if (!this.buffer)
+            this.allocBuffer();
+        return this.buffer;
+    }
+    setSize(size) {
+        if (!this.buffer)
+            this.allocBuffer();
+        if (size > this.bufferSize) {
+            this.bufferSize = size;
+            this.allocBuffer();
+        }
+    }
+    destroy() {
+        this.buffer?.destroy();
+    }
+}

package/dist/graphics.d.ts

@@ -35,6 +35,7 @@ export declare abstract class SimulationElement3d {
     setRotationOffset(offset: Vector3): void;
     resetCenterOffset(): void;
     getModelMatrix(): Mat4;
+    isTransparent(): boolean;
     getUniformBuffer(mat: Mat4): GPUBuffer;
     protected mirrorParentTransforms3d(mat: Mat4): void;
     protected updateModelMatrix3d(): void;
@@ -44,8 +45,8 @@ export declare abstract class SimulationElement3d {
     setWireframe(wireframe: boolean): void;
     isWireframe(): boolean;
     getColor(): Color;
+    getRelativePos(): Vector3;
     getPos(): Vector3;
-    getAbsolutePos(): Vector3;
     getRotation(): Vector3;
     getCenterOffset(): Vector3;
     fill(newColor: Color, t?: number, f?: LerpFunc): Promise<void>;
@@ -183,6 +184,7 @@ export declare class Spline2d extends SimulationElement2d {
     private interpolateLimit;
     private length;
     constructor(pos: Vertex, points: SplinePoint2d[], thickness?: number, detail?: number);
+    isTransparent(): boolean;
     private estimateLength;
     getLength(): number;
     setInterpolateStart(start: number, t?: number, f?: LerpFunc): Promise<void>;
@@ -203,9 +205,8 @@ export declare class Instance<T extends AnySimulationElement> extends Simulation
     private hasMapped;
     isInstance: boolean;
     constructor(obj: T, numInstances: number);
-    setNumInstances(numInstances: number): void;
+    setNumInstances(numInstances: number, forceResizeBuffer?: boolean): void;
     setInstance(instance: number, transformation: Mat4): void;
-    private allocBuffer;
     private mapBuffer;
     getInstances(): Mat4[];
     getNumInstances(): number;

package/dist/graphics.js

@@ -3,6 +3,7 @@ import { Vertex, cloneBuf, color, colorFromVector4, vector2, vector3, vertex, Co
 import { BlankGeometry, CircleGeometry, CubeGeometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, Spline2dGeometry, SquareGeometry, TraceLines2dGeometry as TraceLinesGeometry } from './geometry.js';
 import { SimSceneObjInfo, VertexCache, bufferGenerator, globalInfo, internalTransitionValues, logger, posTo2dScreen, vector3ToPixelRatio } from './internalUtils.js';
 import { mat4ByteLength, modelProjMatOffset } from './constants.js';
+import { MemoBuffer } from './buffers.js';
 export class SimulationElement3d {
     children;
     uniformBuffer;
@@ -23,6 +24,7 @@ export class SimulationElement3d {
      * @param pos - Expected to be adjusted to devicePixelRatio before reaching constructor
      */
     constructor(pos, rotation, color = new Color()) {
+        const uniformBufferSize = mat4ByteLength * 2 + 4 * 2 + 8; // 4x4 matrix * 2 + vec2<f32> + 8 bc 144 is cool
         this.pos = pos;
         this.centerOffset = vector3();
         // TODO test this
@@ -31,7 +33,7 @@ export class SimulationElement3d {
         this.vertexCache = new VertexCache();
         this.wireframe = false;
         this.rotation = cloneBuf(rotation);
-        this.uniformBuffer = null;
+        this.uniformBuffer = new MemoBuffer(GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST, uniformBufferSize);
         this.children = [];
         this.modelMatrix = matrix4();
         this.parent = null;
@@ -78,23 +80,20 @@ export class SimulationElement3d {
         this.updateModelMatrix3d();
         return this.modelMatrix;
     }
+    isTransparent() {
+        return this.color.a < 1;
+    }
     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({
-                size: uniformBufferSize,
-                usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-            });
-        }
-        device.queue.writeBuffer(this.uniformBuffer, modelProjMatOffset, mat);
-        return this.uniformBuffer;
+        const buffer = this.uniformBuffer.getBuffer();
+        device.queue.writeBuffer(buffer, modelProjMatOffset, mat);
+        return buffer;
     }
     mirrorParentTransforms3d(mat) {
         if (!this.parent)
             return;
         this.parent.mirrorParentTransforms3d(mat);
-        mat4.translate(mat, this.parent.getPos(), mat);
+        mat4.translate(mat, this.parent.getRelativePos(), mat);
         const parentRot = this.parent.getRotation();
         mat4.rotateZ(mat, parentRot[2], mat);
         mat4.rotateY(mat, parentRot[1], mat);
@@ -150,10 +149,10 @@ export class SimulationElement3d {
     getColor() {
         return this.color;
     }
-    getPos() {
+    getRelativePos() {
         return this.pos;
     }
-    getAbsolutePos() {
+    getPos() {
         const vec = vector3();
         this.updateModelMatrix3d();
         mat4.getTranslation(this.modelMatrix, vec);
@@ -884,6 +883,17 @@ export class Spline2d extends SimulationElement2d {
         this.geometry = new Spline2dGeometry(points, this.getColor(), this.thickness, this.detail);
         this.estimateLength();
     }
+    isTransparent() {
+        const curves = this.geometry.getCurves();
+        for (let i = 0; i < curves.length; i++) {
+            const colors = curves[i].getColors();
+            for (let j = 0; j < colors.length; j++) {
+                if (colors[j]?.a ?? 0 < 1)
+                    return true;
+            }
+        }
+        return false;
+    }
     estimateLength() {
         this.length = 0;
         const curves = this.geometry.getCurves();
@@ -927,7 +937,7 @@ export class Spline2d extends SimulationElement2d {
         const clonePoint = newPoint.clone();
         const start = clonePoint.getStart()?.getPos() || vector3();
         const end = clonePoint.getEnd().getPos();
-        const pos = this.getPos();
+        const pos = this.getRelativePos();
         vec3.sub(start, pos, start);
         vec3.sub(end, pos, end);
         this.geometry.updatePoint(pointIndex, clonePoint);
@@ -985,7 +995,7 @@ export class Instance extends SimulationElement3d {
         super(vector3(), vector3());
         // 32 matrices
         this.maxInstances = 32;
-        this.matrixBuffer = null;
+        this.matrixBuffer = new MemoBuffer(GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST, this.maxInstances * mat4ByteLength);
         obj.isInstanced = true;
         this.obj = obj;
         this.instanceMatrix = [];
@@ -998,12 +1008,12 @@ export class Instance extends SimulationElement3d {
             this.instanceMatrix.push(clone);
         }
     }
-    setNumInstances(numInstances) {
+    setNumInstances(numInstances, forceResizeBuffer = false) {
         if (numInstances < 0)
             throw logger.error('Num instances is less than 0');
-        if (numInstances > this.maxInstances) {
+        if (numInstances > this.maxInstances || forceResizeBuffer) {
             this.maxInstances = numInstances;
-            this.allocBuffer(numInstances);
+            this.matrixBuffer.setSize(numInstances * mat4ByteLength);
         }
         const oldLen = this.instanceMatrix.length;
         if (numInstances < oldLen) {
@@ -1029,37 +1039,32 @@ export class Instance extends SimulationElement3d {
         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);
-        }
+        // this.allocBuffer(size);
+        const gpuBuffer = this.matrixBuffer.getBuffer();
         const buf = new Float32Array(transformation);
-        device.queue.writeBuffer(this.matrixBuffer, instance * mat4ByteLength, buf.buffer, buf.byteOffset, buf.byteLength);
-        this.matrixBuffer.unmap();
-    }
-    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
-        });
-    }
+        device.queue.writeBuffer(gpuBuffer, instance * mat4ByteLength, buf.buffer, buf.byteOffset, buf.byteLength);
+        gpuBuffer.unmap();
+    }
+    // private allocBuffer(size: number) {
+    //   const device = globalInfo.getDevice();
+    //   if (!device) return;
+    //   const byteSize = size * mat4ByteLength;
+    //   this.matrixBuffer = device.createBuffer({
+    //     size: byteSize,
+    //     usage:
+    //   });
+    // }
     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 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(this.matrixBuffer, 0, buf.buffer, buf.byteOffset, buf.byteLength);
-        this.matrixBuffer.unmap();
+        device.queue.writeBuffer(gpuBuffer, 0, buf.buffer, buf.byteOffset, buf.byteLength);
+        gpuBuffer.unmap();
         this.hasMapped = true;
     }
     getInstances() {
@@ -1072,7 +1077,7 @@ export class Instance extends SimulationElement3d {
         if (!this.hasMapped) {
             this.mapBuffer();
         }
-        return this.matrixBuffer;
+        return this.matrixBuffer.getBuffer();
     }
     getVertexCount() {
         return this.obj.getVertexCount();

package/dist/internalUtils.d.ts

@@ -2,6 +2,7 @@
 import { VertexParamGeneratorInfo, Mat4, Vector2, Vector3, VertexParamInfo } from './types.js';
 import { Color } from './utils.js';
 import { SimulationElement3d } from './graphics.js';
+import { Shader } from './shaders.js';
 export declare class VertexCache {
     private vertices;
     private hasUpdated;
@@ -20,6 +21,15 @@ export declare class GlobalInfo {
     getDevice(): GPUDevice | null;
 }
 export declare const globalInfo: GlobalInfo;
+export declare class CachedArray<T> {
+    private length;
+    private data;
+    constructor();
+    add(index: T): void;
+    reset(): void;
+    clearCache(): void;
+    toArray(): T[];
+}
 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;
@@ -65,11 +75,21 @@ 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 createPipeline(device: GPUDevice, module: GPUShaderModule, bindGroupLayouts: GPUBindGroupLayout[], presentationFormat: GPUTextureFormat, topology: GPUPrimitiveTopology, vertexParams?: VertexParamInfo[]): GPURenderPipeline;
+export declare function createPipeline(device: GPUDevice, module: GPUShaderModule, bindGroupLayouts: GPUBindGroupLayout[], presentationFormat: GPUTextureFormat, topology: GPUPrimitiveTopology, transparent: boolean, vertexParams?: VertexParamInfo[]): GPURenderPipeline;
 export declare function triangulateWireFrameOrder(len: number): number[];
 export declare function getTotalVertices(scene: SimSceneObjInfo[]): number;
 export declare function vectorCompAngle(a: number, b: number): number;
 export declare function angleBetween(pos1: Vector3, pos2: Vector3): Vector3;
 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 createShaderModule(shader: Shader): GPUShaderModule;
+export declare function createDefaultPipelines(shader: Shader): {
+    triangleList: GPURenderPipeline;
+    triangleStrip: GPURenderPipeline;
+    lineStrip: GPURenderPipeline;
+    triangleListTransparent: GPURenderPipeline;
+    triangleStripTransparent: GPURenderPipeline;
+    lineStripTransparent: GPURenderPipeline;
+};
+export default function createUniformBindGroup(shader: Shader, buffers: GPUBuffer[]): GPUBindGroup;
 export {};

package/dist/internalUtils.js

@@ -44,6 +44,33 @@ export class GlobalInfo {
     }
 }
 export const globalInfo = new GlobalInfo();
+export class CachedArray {
+    length;
+    data;
+    constructor() {
+        this.length = 0;
+        this.data = [];
+    }
+    add(index) {
+        if (this.length < this.data.length) {
+            this.data[this.length - 1] = index;
+        }
+        else {
+            this.data.push(index);
+        }
+        this.length++;
+    }
+    reset() {
+        this.length = 0;
+    }
+    clearCache() {
+        this.reset();
+        this.data = [];
+    }
+    toArray() {
+        return this.data.slice(0, this.length);
+    }
+}
 export const updateProjectionMatrix = (mat, aspectRatio, zNear = 1, zFar = 500) => {
     const fov = Math.PI / 4;
     return mat4.perspective(fov, aspectRatio, zNear, zFar, mat);
@@ -219,7 +246,7 @@ export function vector2ToPixelRatio(vec) {
     vec[0] *= devicePixelRatio;
     vec[1] *= devicePixelRatio;
 }
-export function createPipeline(device, module, bindGroupLayouts, presentationFormat, topology, vertexParams) {
+export function createPipeline(device, module, bindGroupLayouts, presentationFormat, topology, transparent, vertexParams) {
     let params = [
         {
             // position
@@ -279,7 +306,17 @@ export function createPipeline(device, module, bindGroupLayouts, presentationFor
             entryPoint: 'fragment_main',
             targets: [
                 {
-                    format: presentationFormat
+                    format: presentationFormat,
+                    blend: {
+                        color: {
+                            srcFactor: 'src-alpha',
+                            dstFactor: 'one-minus-src-alpha'
+                        },
+                        alpha: {
+                            srcFactor: 'src-alpha',
+                            dstFactor: 'one-minus-src-alpha'
+                        }
+                    }
                 }
             ]
         },
@@ -290,7 +327,7 @@ export function createPipeline(device, module, bindGroupLayouts, presentationFor
             count: 4
         },
         depthStencil: {
-            depthWriteEnabled: true,
+            depthWriteEnabled: !transparent,
             depthCompare: 'less',
             format: 'depth24plus'
         }
@@ -346,3 +383,36 @@ export function posTo2dScreen(pos) {
     newPos[1] = camera.getScreenSize()[1] + newPos[1];
     return newPos;
 }
+export function createShaderModule(shader) {
+    const device = globalInfo.errorGetDevice();
+    return device.createShaderModule({
+        code: shader.getCode()
+    });
+}
+export function createDefaultPipelines(shader) {
+    const device = globalInfo.errorGetDevice();
+    const bindGroupLayout = device.createBindGroupLayout(shader.getBindGroupLayoutDescriptor());
+    const shaderModule = createShaderModule(shader);
+    const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+    return {
+        triangleList: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'triangle-list', false),
+        triangleStrip: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'triangle-strip', false),
+        lineStrip: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'line-strip', false),
+        triangleListTransparent: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'triangle-list', true),
+        triangleStripTransparent: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'triangle-strip', true),
+        lineStripTransparent: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'line-strip', true)
+    };
+}
+export default function createUniformBindGroup(shader, buffers) {
+    const device = globalInfo.errorGetDevice();
+    const bindGroupLayout = shader.getBindGroupLayout();
+    return device.createBindGroup({
+        layout: bindGroupLayout,
+        entries: buffers.map((buffer, index) => ({
+            binding: index,
+            resource: {
+                buffer
+            }
+        }))
+    });
+}

package/dist/materials.d.ts

@@ -0,0 +1,3 @@
+export declare class Material {
+    constructor();
+}

package/dist/materials.js

@@ -0,0 +1,3 @@
+export class Material {
+    constructor() { }
+}

package/dist/pipelines.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/pipelines.js

@@ -0,0 +1 @@
+export {};

package/dist/shaders.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="@webgpu/types" />
+export declare class Shader {
+    private bindGroupLayoutDescriptor;
+    private bindGroupLayout;
+    private code;
+    constructor(code: string, descriptor: GPUBindGroupLayoutDescriptor);
+    getCode(): string;
+    getBindGroupLayout(): GPUBindGroupLayout;
+    getBindGroupLayoutDescriptor(): GPUBindGroupLayoutDescriptor;
+}
+export declare const defaultShader: Shader;

package/dist/shaders.js

@@ -0,0 +1,89 @@
+import { globalInfo } from './internalUtils.js';
+export class Shader {
+    bindGroupLayoutDescriptor;
+    bindGroupLayout;
+    code;
+    constructor(code, descriptor) {
+        this.code = code;
+        this.bindGroupLayoutDescriptor = descriptor;
+        this.bindGroupLayout = null;
+    }
+    getCode() {
+        return this.code;
+    }
+    getBindGroupLayout() {
+        const device = globalInfo.errorGetDevice();
+        if (!this.bindGroupLayout) {
+            this.bindGroupLayout = device.createBindGroupLayout(this.bindGroupLayoutDescriptor);
+        }
+        return this.bindGroupLayout;
+    }
+    getBindGroupLayoutDescriptor() {
+        return this.bindGroupLayoutDescriptor;
+    }
+}
+export const defaultShader = 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'
+            }
+        }
+    ]
+});

package/dist/simulation.d.ts

@@ -35,6 +35,8 @@ export declare class Simulation extends Settings {
     private renderInfo;
     private resizeEvents;
     private frameRateView;
+    private transparentElements;
+    private vertexBuffer;
     constructor(idOrCanvasRef: string | HTMLCanvasElement, sceneCamera?: Camera | null, showFrameRate?: boolean);
     private handleCanvasResize;
     onResize(cb: (width: number, height: number) => void): void;

package/dist/simulation.js

@@ -3,56 +3,10 @@ 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, globalInfo } from './internalUtils.js';
+import createUniformBindGroup, { SimSceneObjInfo, buildDepthTexture, buildMultisampleTexture, updateProjectionMatrix, createPipeline, getTotalVertices, logger, removeObjectId, updateOrthoProjectionMatrix, updateWorldProjectionMatrix, globalInfo, CachedArray, createDefaultPipelines } from './internalUtils.js';
 import { Settings } from './settings.js';
-const 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;
-}
-`;
+import { defaultShader } from './shaders.js';
+import { MemoBuffer } from './buffers.js';
 const simjsFrameRateCss = `.simjs-frame-rate {
   position: absolute;
   top: 0;
@@ -99,24 +53,6 @@ class FrameRateView {
         }
     }
 }
-const baseBindGroupLayout = {
-    entries: [
-        {
-            binding: 0,
-            visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-            buffer: {
-                type: 'uniform'
-            }
-        },
-        {
-            binding: 1,
-            visibility: GPUShaderStage.VERTEX,
-            buffer: {
-                type: 'read-only-storage'
-            }
-        }
-    ]
-};
 let aspectRatio = 0;
 const projMat = matrix4();
 const worldProjMat = matrix4();
@@ -220,21 +156,21 @@ export class Simulation extends Settings {
     renderInfo = null;
     resizeEvents;
     frameRateView;
+    transparentElements;
+    vertexBuffer;
     constructor(idOrCanvasRef, sceneCamera = null, showFrameRate = false) {
         super();
         if (typeof idOrCanvasRef === 'string') {
             const ref = document.getElementById(idOrCanvasRef);
-            if (ref !== null)
-                this.canvasRef = ref;
-            else
+            if (!ref)
                 throw logger.error(`Cannot find canvas with id ${idOrCanvasRef}`);
+            this.canvasRef = ref;
         }
         else if (idOrCanvasRef instanceof HTMLCanvasElement) {
             this.canvasRef = idOrCanvasRef;
         }
-        else {
+        else
             throw logger.error(`Canvas ref/id provided is invalid`);
-        }
         const parent = this.canvasRef.parentElement;
         if (sceneCamera) {
             camera = sceneCamera;
@@ -247,6 +183,8 @@ export class Simulation extends Settings {
         });
         this.frameRateView = new FrameRateView(showFrameRate);
         this.frameRateView.updateFrameRate(1);
+        this.transparentElements = new CachedArray();
+        this.vertexBuffer = new MemoBuffer(GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, 0);
     }
     handleCanvasResize(parent) {
         if (this.fittingElement) {
@@ -325,13 +263,26 @@ export class Simulation extends Settings {
                 throw logger.error('Context is null');
             const device = await adapter.requestDevice();
             globalInfo.setDevice(device);
+            const screenSize = vector2(this.canvasRef.width, this.canvasRef.height);
+            camera.setScreenSize(screenSize);
+            const canvas = this.canvasRef;
+            canvas.width = canvas.clientWidth * devicePixelRatio;
+            canvas.height = canvas.clientHeight * devicePixelRatio;
+            const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
             ctx.configure({
                 device,
-                format: 'bgra8unorm'
+                format: presentationFormat,
+                alphaMode: 'opaque'
             });
-            const screenSize = vector2(this.canvasRef.width, this.canvasRef.height);
-            camera.setScreenSize(screenSize);
-            this.render(ctx);
+            this.pipelines = createDefaultPipelines(defaultShader);
+            const instanceBuffer = device.createBuffer({
+                size: 10 * 4 * 16,
+                usage: GPUBufferUsage.STORAGE
+            });
+            this.renderInfo = {
+                instanceBuffer
+            };
+            this.render(device, ctx, canvas);
         })();
     }
     stop() {
@@ -346,35 +297,7 @@ export class Simulation extends Settings {
     getSceneObjects() {
         return this.scene.map((item) => item.getObj());
     }
-    render(ctx) {
-        const device = globalInfo.getDevice();
-        if (this.canvasRef === null || device === null)
-            return;
-        const canvas = this.canvasRef;
-        canvas.width = canvas.clientWidth * devicePixelRatio;
-        canvas.height = canvas.clientHeight * devicePixelRatio;
-        const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-        const shaderModule = device.createShaderModule({ code: shader });
-        ctx.configure({
-            device,
-            format: presentationFormat,
-            alphaMode: 'premultiplied'
-        });
-        const instanceBuffer = device.createBuffer({
-            size: 10 * 4 * 16,
-            usage: GPUBufferUsage.STORAGE
-        });
-        const bindGroupLayout = device.createBindGroupLayout(baseBindGroupLayout);
-        this.renderInfo = {
-            bindGroupLayout,
-            instanceBuffer,
-            vertexBuffer: null
-        };
-        this.pipelines = {
-            triangleList: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'triangle-list'),
-            triangleStrip: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'triangle-strip'),
-            lineStrip: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'line-strip')
-        };
+    render(device, ctx, canvas) {
         const colorAttachment = {
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
@@ -414,12 +337,10 @@ export class Simulation extends Settings {
             const diff = Math.max(now - prev, 1);
             prev = now;
             const fps = 1000 / diff;
-            if (fps === prevFps && this.frameRateView.isActive()) {
+            if (this.frameRateView.isActive() && fps === prevFps) {
                 this.frameRateView.updateFrameRate(fps);
             }
             prevFps = fps;
-            canvas.width = canvas.clientWidth * devicePixelRatio;
-            canvas.height = canvas.clientHeight * devicePixelRatio;
             const screenSize = camera.getScreenSize();
             if (screenSize[0] !== canvas.width || screenSize[1] !== canvas.height) {
                 camera.setScreenSize(vector2(canvas.width, canvas.height));
@@ -444,23 +365,18 @@ export class Simulation extends Settings {
             }
             const commandEncoder = device.createCommandEncoder();
             const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
-            passEncoder.setPipeline(this.pipelines.triangleList);
             const totalVertices = getTotalVertices(this.scene);
-            if (this.renderInfo.vertexBuffer === null ||
-                this.renderInfo.vertexBuffer.size / (4 * BUF_LEN) < totalVertices) {
-                this.renderInfo.vertexBuffer = device.createBuffer({
-                    size: totalVertices * 4 * BUF_LEN,
-                    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
-                });
-            }
-            this.renderScene(device, passEncoder, this.renderInfo.vertexBuffer, this.scene, 0, diff);
+            this.vertexBuffer.setSize(totalVertices * 4 * BUF_LEN);
+            this.transparentElements.reset();
+            const opaqueOffset = this.renderScene(device, passEncoder, this.vertexBuffer.getBuffer(), this.scene, 0, diff, false);
+            this.renderScene(device, passEncoder, this.vertexBuffer.getBuffer(), this.transparentElements.toArray(), opaqueOffset, diff, true);
             camera.updateConsumed();
             passEncoder.end();
             device.queue.submit([commandEncoder.finish()]);
         };
         requestAnimationFrame(frame);
     }
-    renderScene(device, passEncoder, vertexBuffer, scene, startOffset, diff, shaderInfo) {
+    renderScene(device, passEncoder, vertexBuffer, scene, startOffset, diff, transparent, shaderInfo) {
         if (this.pipelines === null)
             return 0;
         let currentOffset = startOffset;
@@ -476,6 +392,10 @@ export class Simulation extends Settings {
                 scene[i].traverseLife(diff);
             }
             const obj = scene[i].getObj();
+            if (!transparent && obj.isTransparent()) {
+                this.transparentElements.add(scene[i]);
+                continue;
+            }
             if (obj.hasChildren()) {
                 let shaderInfo = undefined;
                 if (obj instanceof ShaderGroup) {
@@ -493,7 +413,7 @@ export class Simulation extends Settings {
                         };
                     }
                 }
-                currentOffset += this.renderScene(device, passEncoder, vertexBuffer, obj.getChildrenInfos(), currentOffset, diff, shaderInfo);
+                currentOffset += this.renderScene(device, passEncoder, vertexBuffer, obj.getChildrenInfos(), currentOffset, diff, transparent, shaderInfo);
             }
             if (obj.isEmpty)
                 continue;
@@ -511,15 +431,25 @@ export class Simulation extends Settings {
                 passEncoder.setPipeline(shaderInfo.pipeline);
             }
             else if (obj.isWireframe()) {
-                passEncoder.setPipeline(this.pipelines.lineStrip);
+                if (obj.isTransparent())
+                    passEncoder.setPipeline(this.pipelines.lineStripTransparent);
+                else
+                    passEncoder.setPipeline(this.pipelines.lineStrip);
             }
             else {
                 const type = obj.getGeometryType();
+                // must be exhaustive
                 if (type === 'strip') {
-                    passEncoder.setPipeline(this.pipelines.triangleStrip);
+                    if (obj.isTransparent())
+                        passEncoder.setPipeline(this.pipelines.triangleStripTransparent);
+                    else
+                        passEncoder.setPipeline(this.pipelines.triangleStrip);
                 }
                 else if (type === 'list') {
-                    passEncoder.setPipeline(this.pipelines.triangleList);
+                    if (obj.isTransparent())
+                        passEncoder.setPipeline(this.pipelines.triangleListTransparent);
+                    else
+                        passEncoder.setPipeline(this.pipelines.triangleList);
                 }
             }
             let instances = 1;
@@ -533,23 +463,7 @@ export class Simulation extends Settings {
                 else {
                     instanceBuffer = this.renderInfo.instanceBuffer;
                 }
-                const uniformBindGroup = device.createBindGroup({
-                    layout: this.renderInfo.bindGroupLayout,
-                    entries: [
-                        {
-                            binding: 0,
-                            resource: {
-                                buffer: uniformBuffer
-                            }
-                        },
-                        {
-                            binding: 1,
-                            resource: {
-                                buffer: instanceBuffer
-                            }
-                        }
-                    ]
-                });
+                const uniformBindGroup = createUniformBindGroup(defaultShader, [uniformBuffer, instanceBuffer]);
                 passEncoder.setBindGroup(0, uniformBindGroup);
             }
             if (shaderInfo && shaderInfo.bufferInfo) {
@@ -623,7 +537,7 @@ export class ShaderGroup extends EmptyElement {
         const device = globalInfo.errorGetDevice();
         this.module = device.createShaderModule({ code: this.code });
         const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-        const bindGroupLayout = device.createBindGroupLayout(baseBindGroupLayout);
+        const bindGroupLayout = defaultShader.getBindGroupLayout();
         const bindGroups = [bindGroupLayout];
         if (this.bindGroup !== null) {
             const entryValues = this.bindGroup.bindings.map((binding, index) => ({
@@ -636,7 +550,9 @@ export class ShaderGroup extends EmptyElement {
             });
             bindGroups.push(this.bindGroupLayout);
         }
-        this.pipeline = createPipeline(device, this.module, bindGroups, presentationFormat, this.topology, this.vertexParams);
+        this.pipeline = createPipeline(device, this.module, bindGroups, presentationFormat, this.topology, 
+        // TODO possibly make transparent materials
+        false, this.vertexParams);
     }
     getBindGroupLayout() {
         return this.bindGroupLayout;

package/dist/types.d.ts

@@ -73,11 +73,12 @@ export type PipelineGroup = {
     triangleList: GPURenderPipeline;
     triangleStrip: GPURenderPipeline;
     lineStrip: GPURenderPipeline;
+    triangleListTransparent: GPURenderPipeline;
+    triangleStripTransparent: GPURenderPipeline;
+    lineStripTransparent: GPURenderPipeline;
 };
 export type RenderInfo = {
     instanceBuffer: GPUBuffer;
-    bindGroupLayout: GPUBindGroupLayout;
-    vertexBuffer: GPUBuffer | null;
 };
 export type VertexParamGeneratorInfo = {
     bufferSize: number;

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.3",
+  "version": "0.7.4",
   "exports": {
     ".": {
       "import": "./dist/index.js",