simulationjsv2 0.7.3 → 0.8.0

package/dist/index.d.ts

@@ -2,4 +2,6 @@ export * from './simulation.js';
 export * from './graphics.js';
 export * from './utils.js';
 export * from './types.js';
+export * from './shaders.js';
+export * from './materials.js';
 export { vec2, vec3, vec4, mat3, mat4 } from 'wgpu-matrix';

package/dist/index.js

@@ -2,4 +2,6 @@ export * from './simulation.js';
 export * from './graphics.js';
 export * from './utils.js';
 export * from './types.js';
+export * from './shaders.js';
+export * from './materials.js';
 export { vec2, vec3, vec4, mat3, mat4 } from 'wgpu-matrix';

package/dist/internalUtils.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="@webgpu/types" />
-import { VertexParamGeneratorInfo, Mat4, Vector2, Vector3, VertexParamInfo } from './types.js';
-import { Color } from './utils.js';
+import { Mat4, Vector2, Vector3 } from './types.js';
 import { SimulationElement3d } from './graphics.js';
-export declare class VertexCache {
+import { Shader } from './shaders.js';
+export declare class Float32ArrayCache {
     private vertices;
     private hasUpdated;
     constructor();
@@ -10,16 +10,17 @@ export declare class VertexCache {
     getCache(): Float32Array;
     updated(): void;
     shouldUpdate(): boolean;
-    getVertexCount(): number;
+    getVertexCount(stride?: number): number;
 }
-export declare class GlobalInfo {
-    private device;
+export declare class CachedArray<T> {
+    length: number;
+    private data;
     constructor();
-    setDevice(device: GPUDevice): void;
-    errorGetDevice(): GPUDevice;
-    getDevice(): GPUDevice | null;
+    add(index: T): void;
+    reset(): void;
+    clearCache(): void;
+    getArray(): T[];
 }
-export declare const globalInfo: GlobalInfo;
 export declare const updateProjectionMatrix: (mat: Mat4, aspectRatio: number, zNear?: number, zFar?: number) => any;
 export declare const updateWorldProjectionMatrix: (worldProjMat: Mat4, projMat: Mat4) => void;
 export declare const updateOrthoProjectionMatrix: (mat: Mat4, screenSize: [number, number]) => Float32Array;
@@ -45,31 +46,13 @@ export declare class SimSceneObjInfo {
     getObj(): SimulationElement3d;
     getId(): string | null;
 }
-declare class Logger {
-    constructor();
-    private fmt;
-    log(msg: string): void;
-    error(msg: string): Error;
-    warn(msg: string): void;
-    log_error(msg: string): void;
-}
-export declare const logger: Logger;
 export declare function lossyTriangulate<T>(vertices: T[]): (readonly [T, T, T])[];
 export declare function lossyTriangulateStrip<T>(vertices: T[]): T[];
-declare class BufferGenerator {
-    private instancing;
-    constructor();
-    setInstancing(state: boolean): void;
-    generate(x: number, y: number, z: number, color: Color, uv?: Vector2, vertexParamGenerator?: VertexParamGeneratorInfo): number[];
-}
-export declare const bufferGenerator: BufferGenerator;
+export declare function createIndexArray(length: number): number[];
 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 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 getVertexAndIndexSize(scene: SimSceneObjInfo[]): 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 {};
+export declare function createPipeline(device: GPUDevice, info: string, shader: Shader): GPURenderPipeline;

package/dist/internalUtils.js

@@ -1,9 +1,8 @@
 import { mat4, vec3 } from 'wgpu-matrix';
-import { BUF_LEN, colorOffset, drawingInstancesOffset, uvOffset, vertexSize } from './constants.js';
-import { cloneBuf, transitionValues, vector2, vector3 } from './utils.js';
+import { cloneBuf, transitionValues } from './utils.js';
 import { camera } from './simulation.js';
 import { settings } from './settings.js';
-export class VertexCache {
+export class Float32ArrayCache {
     vertices;
     hasUpdated = true;
     constructor() {
@@ -22,28 +21,37 @@ export class VertexCache {
     shouldUpdate() {
         return this.hasUpdated;
     }
-    getVertexCount() {
-        return this.vertices.length / BUF_LEN;
+    getVertexCount(stride = 1) {
+        return this.vertices.length / stride;
     }
 }
-export class GlobalInfo {
-    device;
+export class CachedArray {
+    length;
+    data;
     constructor() {
-        this.device = null;
+        this.length = 0;
+        this.data = [];
     }
-    setDevice(device) {
-        this.device = device;
+    add(index) {
+        if (this.length < this.data.length) {
+            this.data[this.length - 1] = index;
+        }
+        else {
+            this.data.push(index);
+        }
+        this.length++;
     }
-    errorGetDevice() {
-        if (!this.device)
-            throw logger.error('GPUDevice is null');
-        return this.device;
+    reset() {
+        this.length = 0;
     }
-    getDevice() {
-        return this.device;
+    clearCache() {
+        this.reset();
+        this.data = [];
+    }
+    getArray() {
+        return this.data;
     }
 }
-export const globalInfo = new GlobalInfo();
 export const updateProjectionMatrix = (mat, aspectRatio, zNear = 1, zFar = 500) => {
     const fov = Math.PI / 4;
     return mat4.perspective(fov, aspectRatio, zNear, zFar, mat);
@@ -52,7 +60,7 @@ export const updateWorldProjectionMatrix = (worldProjMat, projMat) => {
     mat4.identity(worldProjMat);
     const camPos = cloneBuf(camera.getPos());
     const rotation = camera.getRotation();
-    vec3.scale(camPos, -1, camPos);
+    vec3.negate(camPos, camPos);
     mat4.rotateZ(worldProjMat, rotation[2], worldProjMat);
     mat4.rotateY(worldProjMat, rotation[1], worldProjMat);
     mat4.rotateX(worldProjMat, rotation[0], worldProjMat);
@@ -124,25 +132,6 @@ export class SimSceneObjInfo {
         return this.id;
     }
 }
-class Logger {
-    constructor() { }
-    fmt(msg) {
-        return `SimJS: ${msg}`;
-    }
-    log(msg) {
-        console.log(this.fmt(msg));
-    }
-    error(msg) {
-        return new Error(this.fmt(msg));
-    }
-    warn(msg) {
-        console.warn(this.fmt(msg));
-    }
-    log_error(msg) {
-        console.error(this.fmt(msg));
-    }
-}
-export const logger = new Logger();
 // optomized for speed, depending on orientation of vertices as input, shape may not be preserved
 export function lossyTriangulate(vertices) {
     const res = [];
@@ -191,25 +180,11 @@ export function lossyTriangulateStrip(vertices) {
     res.push(vertices[upper]);
     return res;
 }
-class BufferGenerator {
-    instancing = false;
-    constructor() { }
-    setInstancing(state) {
-        this.instancing = state;
-    }
-    generate(x, y, z, color, uv = vector2(), vertexParamGenerator) {
-        if (vertexParamGenerator) {
-            const buf = vertexParamGenerator.createBuffer(x, y, z, color);
-            if (buf.length !== vertexParamGenerator.bufferSize) {
-                logger.log_error(`Vertex size for shader group does not match buffer extension size (${buf.length} to expected ${vertexParamGenerator.bufferSize})`);
-                return [];
-            }
-            return buf;
-        }
-        return [x, y, z, ...color.toBuffer(), ...uv, this.instancing ? 1 : 0];
-    }
+export function createIndexArray(length) {
+    return Array(length)
+        .fill(0)
+        .map((_, index) => index);
 }
-export const bufferGenerator = new BufferGenerator();
 export function vector3ToPixelRatio(vec) {
     vec[0] *= devicePixelRatio;
     vec[1] *= devicePixelRatio;
@@ -219,83 +194,6 @@ export function vector2ToPixelRatio(vec) {
     vec[0] *= devicePixelRatio;
     vec[1] *= devicePixelRatio;
 }
-export function createPipeline(device, module, bindGroupLayouts, presentationFormat, topology, vertexParams) {
-    let params = [
-        {
-            // position
-            shaderLocation: 0,
-            offset: 0,
-            format: 'float32x4'
-        },
-        {
-            // color
-            shaderLocation: 1,
-            offset: colorOffset,
-            format: 'float32x4'
-        },
-        {
-            // size
-            shaderLocation: 2,
-            offset: uvOffset,
-            format: 'float32x2'
-        },
-        {
-            // drawing instances
-            shaderLocation: 3,
-            offset: drawingInstancesOffset,
-            format: 'float32'
-        }
-    ];
-    let stride = vertexSize;
-    if (vertexParams) {
-        params = [];
-        let offset = 0;
-        for (let i = 0; i < vertexParams.length; i++) {
-            params.push({
-                shaderLocation: i,
-                offset,
-                format: vertexParams[i].format
-            });
-            offset += vertexParams[i].size;
-        }
-        stride = offset;
-    }
-    return device.createRenderPipeline({
-        layout: device.createPipelineLayout({
-            bindGroupLayouts: bindGroupLayouts
-        }),
-        vertex: {
-            module,
-            entryPoint: 'vertex_main',
-            buffers: [
-                {
-                    arrayStride: stride,
-                    attributes: params
-                }
-            ]
-        },
-        fragment: {
-            module,
-            entryPoint: 'fragment_main',
-            targets: [
-                {
-                    format: presentationFormat
-                }
-            ]
-        },
-        primitive: {
-            topology
-        },
-        multisample: {
-            count: 4
-        },
-        depthStencil: {
-            depthWriteEnabled: true,
-            depthCompare: 'less',
-            format: 'depth24plus'
-        }
-    });
-}
 export function triangulateWireFrameOrder(len) {
     const order = Array(len)
         .fill(0)
@@ -309,30 +207,15 @@ export function triangulateWireFrameOrder(len) {
     }
     return order;
 }
-export function getTotalVertices(scene) {
-    let total = 0;
+export function getVertexAndIndexSize(scene) {
+    let vertexSize = 0;
+    let indexSize = 0;
     for (let i = 0; i < scene.length; i++) {
         const obj = scene[i].getObj();
-        total += obj.getVertexCount();
-    }
-    return total;
-}
-export function vectorCompAngle(a, b) {
-    if (a === 0)
-        return 0;
-    else {
-        if (b === 0)
-            return 0;
-        else
-            return Math.atan2(a, b);
+        vertexSize += obj.getVertexCount() * obj.getShader().getBufferLength();
+        indexSize += obj.getIndexCount();
     }
-}
-export function angleBetween(pos1, pos2) {
-    const diff = vec3.sub(pos1, pos2);
-    const angleZ = vectorCompAngle(diff[0], diff[1]);
-    const angleY = vectorCompAngle(diff[2], diff[0]);
-    const angleX = vectorCompAngle(diff[2], diff[1]);
-    return vector3(angleX, angleY, angleZ);
+    return [vertexSize, indexSize];
 }
 export function internalTransitionValues(onFrame, adjustment, transitionLength, func) {
     const newAdjustment = () => {
@@ -346,3 +229,50 @@ export function posTo2dScreen(pos) {
     newPos[1] = camera.getScreenSize()[1] + newPos[1];
     return newPos;
 }
+export function createPipeline(device, info, shader) {
+    const shaderModule = shader.getModule();
+    const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+    const infoObj = JSON.parse(info);
+    return device.createRenderPipeline({
+        layout: device.createPipelineLayout({
+            bindGroupLayouts: shader.getBindGroupLayouts()
+        }),
+        vertex: {
+            module: shaderModule,
+            entryPoint: shader.getVertexMain(),
+            buffers: [shader.getVertexBuffers()]
+        },
+        fragment: {
+            module: shaderModule,
+            entryPoint: 'fragment_main',
+            targets: [
+                {
+                    format: presentationFormat,
+                    blend: {
+                        color: {
+                            srcFactor: 'src-alpha',
+                            dstFactor: 'one-minus-src-alpha'
+                        },
+                        alpha: {
+                            srcFactor: 'src-alpha',
+                            dstFactor: 'one-minus-src-alpha'
+                        }
+                    }
+                }
+            ]
+        },
+        primitive: {
+            topology: infoObj.topology,
+            stripIndexFormat: infoObj.topology.endsWith('strip') ? 'uint32' : undefined,
+            cullMode: infoObj.cullMode
+        },
+        multisample: {
+            count: 4
+        },
+        depthStencil: {
+            depthWriteEnabled: !infoObj.transparent,
+            depthCompare: 'less',
+            format: 'depth24plus'
+        }
+    });
+}

package/dist/materials.d.ts

@@ -0,0 +1,20 @@
+import { Color } from './utils.js';
+export declare class Material {
+    protected color: Color;
+    protected vertexColors: Color[];
+    protected isVertexColors: boolean;
+    constructor();
+    hasVertexColors(): boolean;
+    getVertexColors(): Color[];
+    getColor(): Color;
+    addVertexColor(color: Color): void;
+    setVertexColors(colors: Color[]): void;
+    isTransparent(): boolean;
+    setColor(color: Color): void;
+}
+export declare class BasicMaterial extends Material {
+    constructor(color: Color);
+}
+export declare class VertexColorMaterial extends Material {
+    constructor();
+}

package/dist/materials.js

@@ -0,0 +1,51 @@
+import { color } from './utils.js';
+export class Material {
+    color;
+    vertexColors;
+    isVertexColors;
+    constructor() {
+        this.color = color();
+        this.vertexColors = [];
+        this.isVertexColors = false;
+    }
+    hasVertexColors() {
+        return this.isVertexColors;
+    }
+    getVertexColors() {
+        return this.vertexColors;
+    }
+    getColor() {
+        return this.color;
+    }
+    addVertexColor(color) {
+        this.vertexColors.push(color);
+    }
+    setVertexColors(colors) {
+        this.vertexColors = colors;
+    }
+    isTransparent() {
+        if (this.isVertexColors) {
+            for (let i = 0; i < this.vertexColors.length; i++) {
+                if (this.vertexColors[i].isTransparent())
+                    return true;
+            }
+            return false;
+        }
+        return this.color.isTransparent();
+    }
+    setColor(color) {
+        this.color = color;
+    }
+}
+export class BasicMaterial extends Material {
+    constructor(color) {
+        super();
+        this.color = color;
+    }
+}
+export class VertexColorMaterial extends Material {
+    constructor() {
+        super();
+        this.isVertexColors = true;
+    }
+}

package/dist/shaders.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="@webgpu/types" />
+import { SimulationElement3d } from './graphics.js';
+import { BindGroupGenerator, BufferInfo, BufferWriter, Vector3, VertexBufferWriter, VertexParamInfo } from './types.js';
+export declare const uniformBufferSize: number;
+export declare class Shader {
+    private bindGroupLayoutDescriptors;
+    private bindGroupLayouts;
+    private module;
+    private code;
+    private fragmentMain;
+    private vertexMain;
+    private vertexBuffers;
+    private bufferLength;
+    private bufferWriter;
+    private vertexBufferWriter;
+    private bindGroupGenerator;
+    private buffers;
+    private bufferInfos;
+    constructor(code: string, descriptors: GPUBindGroupLayoutDescriptor[], vertexParams: VertexParamInfo[], bufferInfos: BufferInfo[], bufferWriter: BufferWriter, bindGroupGenerator: BindGroupGenerator, vertexBufferWriter: VertexBufferWriter, vertexMain?: string, fragmentMain?: string);
+    getCode(): string;
+    getBufferLength(): number;
+    getVertexBuffers(): GPUVertexBufferLayout;
+    getBindGroupLayouts(): GPUBindGroupLayout[];
+    getBindGroupLayoutDescriptors(): GPUBindGroupLayoutDescriptor[];
+    getBufferInfo(): BufferInfo[];
+    getBufferWriter(): BufferWriter;
+    getVertexBufferWriter(): VertexBufferWriter;
+    getBindGroupGenerator(): BindGroupGenerator;
+    getModule(): GPUShaderModule;
+    getVertexMain(): string;
+    getFragmentMain(): string;
+    setVertexInfo(element: SimulationElement3d, buffer: Float32Array, vertex: Vector3, vertexIndex: number, offset: number): void;
+    writeBuffers(el: SimulationElement3d): void;
+    getBindGroups(el: SimulationElement3d): GPUBindGroup[];
+}
+export declare const defaultShader: Shader;
+export declare const vertexColorShader: Shader;