simulationjsv2 0.10.6 → 0.11.0

package/TODO.md

@@ -1,25 +1,9 @@
 # TODO
 
+- [ ] per object depth test settings on webgl backend
+
+## later features
+
 - [ ] hex to color
 - [ ] Materials for planes
 - [ ] Transform vertex colors on material
-- [x] Morph objects into other objects
-  - [x] `transform` function taking another object and transitioning from current geometry's vertices (positions only)
-- [x] Change render vertices to use index buffer
-- [x] Add cull modes
-- [x] Fix shaders
-- [x] Clean up polygons
-- [x] 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
-- [x] Fix rotating nested children elements
-- [x] Fix instancing
-- [x] Remove SceneCollection and replace by elements with children
-- [x] Change position/rotation to be matrix transform on gpu
-- [x] Add update square center offset position in-place + not
-- [x] Make getBuffer return cached Float32Array
-- [x] Make input buffer position vec3 not vec4
-- [x] Use line strip vertices for polygon buffers
-- [x] Scene collection wireframe

package/dist/backend.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="@webgpu/types" />
+import { SimulationElement3d } from './graphics.js';
+import { Shader } from './shaders/webgpu.js';
+import { BackendType, Vector2 } from './types.js';
+import { Color } from './utils.js';
+export declare abstract class SimJsBackend {
+    readonly type: BackendType;
+    constructor(type: BackendType);
+    init(_canvas: HTMLCanvasElement): Promise<void>;
+    renderStart(_canvas: HTMLCanvasElement, _clearColor: Color): void;
+    updateTextures(_screenSize: Vector2): void;
+    preRender(_scene: SimulationElement3d[]): void;
+    finishRender(): void;
+    draw(_obj: SimulationElement3d, _vertexOffset: number, _vertices: Float32Array, _vertexByteOffset: number, _vertexByteLength: number, _indexOffset: number, _indices: Uint32Array, _indexByteOffset: number, _indexByteLength: number): void;
+    initShaders(_shaders: Shader[]): void;
+}
+export declare class WebGPUBackend extends SimJsBackend {
+    private device;
+    private ctx;
+    private renderPassDescriptor;
+    private multisampleTexture;
+    private depthTexture;
+    private passEncoder;
+    private commandEncoder;
+    private buffers;
+    constructor();
+    getDevice(): GPUDevice | null;
+    init(canvas: HTMLCanvasElement): Promise<void>;
+    renderStart(canvas: HTMLCanvasElement, clearColor: Color): void;
+    updateTextures(screenSize: Vector2): void;
+    preRender(scene: SimulationElement3d[]): void;
+    finishRender(): void;
+    draw(obj: SimulationElement3d, vertexOffset: number, vertices: Float32Array, vertexByteOffset: number, vertexByteLength: number, indexOffset: number, indices: Uint32Array, indexByteOffset: number, indexByteLength: number): void;
+    initShaders(shaders: Shader[]): void;
+}
+export declare class WebGLBackend extends SimJsBackend {
+    constructor();
+}

package/dist/backend.js

@@ -0,0 +1,127 @@
+import { WebGPUMemoBuffer } from './buffers.js';
+import { logger } from './globals.js';
+import { buildDepthTexture, buildMultisampleTexture, getVertexAndIndexSize } from './internalUtils.js';
+export class SimJsBackend {
+    type;
+    constructor(type) {
+        this.type = type;
+    }
+    async init(_canvas) { }
+    renderStart(_canvas, _clearColor) { }
+    updateTextures(_screenSize) { }
+    preRender(_scene) { }
+    finishRender() { }
+    draw(_obj, _vertexOffset, _vertices, _vertexByteOffset, _vertexByteLength, _indexOffset, _indices, _indexByteOffset, _indexByteLength) { }
+    initShaders(_shaders) { }
+}
+export class WebGPUBackend extends SimJsBackend {
+    device = null;
+    ctx = null;
+    renderPassDescriptor = null;
+    multisampleTexture = null;
+    depthTexture = null;
+    passEncoder = null;
+    commandEncoder = null;
+    buffers = null;
+    constructor() {
+        super('webgpu');
+    }
+    getDevice() {
+        return this.device;
+    }
+    async init(canvas) {
+        const adapter = await navigator.gpu.requestAdapter();
+        if (!adapter)
+            throw logger.error('Adapter is null');
+        this.ctx = canvas.getContext('webgpu');
+        if (!this.ctx)
+            throw logger.error('Context is null');
+        this.device = await adapter.requestDevice();
+        const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+        this.ctx.configure({
+            device: this.device,
+            format: presentationFormat,
+            alphaMode: 'opaque'
+        });
+        this.buffers = {
+            gpuVertexBuffer: new WebGPUMemoBuffer(this.device, GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, 0),
+            gpuIndexBuffer: new WebGPUMemoBuffer(this.device, GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST, 0)
+        };
+    }
+    renderStart(canvas, clearColor) {
+        if (!this.device || !this.ctx)
+            throw logger.error('Invalid render start state');
+        const colorAttachment = {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            view: undefined, // Assigned later
+            clearValue: clearColor.toObject(),
+            loadOp: 'clear',
+            storeOp: 'store'
+        };
+        this.multisampleTexture = buildMultisampleTexture(this.device, this.ctx, canvas.width, canvas.height);
+        this.depthTexture = buildDepthTexture(this.device, canvas.width, canvas.height);
+        this.renderPassDescriptor = {
+            colorAttachments: [colorAttachment],
+            depthStencilAttachment: {
+                view: this.depthTexture.createView(),
+                depthClearValue: 1.0,
+                depthLoadOp: 'clear',
+                depthStoreOp: 'store'
+            }
+        };
+    }
+    updateTextures(screenSize) {
+        if (!this.device || !this.ctx || !this.renderPassDescriptor)
+            return;
+        this.multisampleTexture = buildMultisampleTexture(this.device, this.ctx, screenSize[0], screenSize[1]);
+        this.depthTexture = buildDepthTexture(this.device, screenSize[0], screenSize[1]);
+        this.renderPassDescriptor.depthStencilAttachment.view = this.depthTexture.createView();
+    }
+    preRender(scene) {
+        if (!this.renderPassDescriptor || !this.ctx || !this.multisampleTexture || !this.device) {
+            throw logger.error('Invalid prerender state');
+        }
+        const attachment = this.renderPassDescriptor.colorAttachments[0];
+        attachment.view = this.multisampleTexture.createView();
+        attachment.resolveTarget = this.ctx.getCurrentTexture().createView();
+        this.commandEncoder = this.device.createCommandEncoder();
+        this.passEncoder = this.commandEncoder.beginRenderPass(this.renderPassDescriptor);
+        const [totalVerticesSize, totalIndexSize] = getVertexAndIndexSize(scene);
+        this.buffers.gpuVertexBuffer.ensureCapacity(totalVerticesSize * 4);
+        this.buffers.gpuIndexBuffer.ensureCapacity(totalIndexSize * 4);
+    }
+    finishRender() {
+        this.passEncoder.end();
+        this.device.queue.submit([this.commandEncoder.finish()]);
+    }
+    draw(obj, vertexOffset, vertices, vertexByteOffset, vertexByteLength, indexOffset, indices, indexByteOffset, indexByteLength) {
+        this.device.queue.writeBuffer(this.buffers.gpuVertexBuffer.getBuffer(), vertexOffset, vertices.buffer, vertexByteOffset, vertexByteLength);
+        this.device.queue.writeBuffer(this.buffers.gpuIndexBuffer.getBuffer(), indexOffset, indices.buffer, indexByteOffset, indexByteLength);
+        this.passEncoder.setVertexBuffer(0, this.buffers.gpuVertexBuffer.getBuffer(), vertexOffset, vertexByteLength);
+        this.passEncoder.setIndexBuffer(this.buffers.gpuIndexBuffer.getBuffer(), 'uint32', indexOffset, indexByteLength);
+        this.passEncoder.setPipeline(obj.getPipeline());
+        const shader = obj.getShader();
+        shader.writeBuffers(this.device, obj);
+        const bindGroups = obj.getShader().getBindGroups(this.device, obj);
+        for (let i = 0; i < bindGroups.length; i++) {
+            this.passEncoder.setBindGroup(i, bindGroups[i]);
+        }
+        const instances = obj.isInstance
+            ? obj.getInstanceCount()
+            : 1;
+        this.passEncoder.drawIndexed(indices.length, instances);
+    }
+    initShaders(shaders) {
+        if (!this.device)
+            throw logger.error('Device is null');
+        for (let i = 0; i < shaders.length; i++) {
+            shaders[i].init(this.device);
+        }
+    }
+}
+export class WebGLBackend extends SimJsBackend {
+    constructor() {
+        super('webgl');
+    }
+}

package/dist/backends/backend.d.ts

@@ -0,0 +1,22 @@
+import { SimulationElement3d } from '../graphics.js';
+import { SimJSShader } from '../shaders/shader.js';
+import { BackendType, GPUBuffers, SpecificBackendType, Vector2 } from '../types.js';
+import { Color } from '../utils.js';
+export declare abstract class SimJsBackend {
+    private type;
+    protected abstract buffers: GPUBuffers<unknown> | null;
+    protected clearColor: Color;
+    constructor(type: BackendType);
+    getBackendType(): BackendType;
+    abstract init(canvas: HTMLCanvasElement): Promise<void>;
+    abstract renderStart(canvas: HTMLCanvasElement): void;
+    abstract updateTextures(screenSize: Vector2): void;
+    abstract preRender(scene: SimulationElement3d[]): void;
+    abstract finishRender(): void;
+    abstract draw(obj: SimulationElement3d, vertexCallOffset: number, vertexCallBuffer: Float32Array, indexOffset: number, indices: Uint32Array): void;
+    abstract initShaders(shaders: SimJSShader[]): void;
+    abstract destroy(): void;
+    abstract onClearColorChange(): void;
+    setClearColor(color: Color): void;
+    as<T extends BackendType>(type: T): SpecificBackendType<T>;
+}

package/dist/backends/backend.js

@@ -0,0 +1,21 @@
+import { logger } from '../globals.js';
+import { color } from '../utils.js';
+export class SimJsBackend {
+    type;
+    clearColor = color();
+    constructor(type) {
+        this.type = type;
+    }
+    getBackendType() {
+        return this.type;
+    }
+    setClearColor(color) {
+        this.clearColor = color;
+        this.onClearColorChange();
+    }
+    as(type) {
+        if (this.type !== type)
+            throw logger.error('Incompatible backend cast');
+        return this;
+    }
+}

package/dist/backends/webgl.d.ts

@@ -0,0 +1,19 @@
+import { SimulationElement3d } from '../graphics.js';
+import { SimJsBackend } from './backend.js';
+import { SimJSShader } from '../shaders/shader.js';
+import { GPUBuffers, Vector2 } from '../types.js';
+export declare class WebGLBackend extends SimJsBackend {
+    private gl;
+    protected buffers: GPUBuffers<'webgl'> | null;
+    constructor();
+    init(canvas: HTMLCanvasElement): Promise<void>;
+    getContextOrError(): WebGL2RenderingContext;
+    renderStart(_canvas: HTMLCanvasElement): void;
+    updateTextures(screenSize: Vector2): void;
+    preRender(): void;
+    finishRender(): void;
+    initShaders(shaders: SimJSShader[]): void;
+    draw(obj: SimulationElement3d, vertexCallOffset: number, vertexCallBuffer: Float32Array, indexOffset: number, indices: Uint32Array): void;
+    destroy(): void;
+    onClearColorChange(): void;
+}

package/dist/backends/webgl.js

@@ -0,0 +1,112 @@
+import { logger } from '../globals.js';
+import { SimJsBackend } from './backend.js';
+import { WebGLMemoBuffer } from '../buffers/webgl.js';
+export class WebGLBackend extends SimJsBackend {
+    gl = null;
+    buffers = null;
+    constructor() {
+        super('webgl');
+        console.log('new webgl backend');
+    }
+    async init(canvas) {
+        this.gl = canvas.getContext('webgl2');
+        if (this.gl === null) {
+            throw logger.error('WebGL init error');
+        }
+        this.buffers = {
+            gpuVertexCallBuffer: new WebGLMemoBuffer(this.gl, this.gl.ARRAY_BUFFER, this.gl.DYNAMIC_DRAW, 0),
+            gpuIndexBuffer: new WebGLMemoBuffer(this.gl, this.gl.ELEMENT_ARRAY_BUFFER, this.gl.DYNAMIC_DRAW, 0)
+        };
+        this.gl.viewport(0, 0, canvas.width, canvas.height);
+        const clearColor = this.clearColor.toObject();
+        this.gl.clearColor(clearColor.r, clearColor.g, clearColor.b, clearColor.a);
+        this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+    }
+    getContextOrError() {
+        if (!this.gl)
+            throw logger.error('Backend not initialized');
+        return this.gl;
+    }
+    renderStart(_canvas) {
+        if (!this.gl)
+            throw logger.error('Invalid render start state');
+        const gl = this.gl;
+        gl.enable(gl.DEPTH_TEST);
+        gl.depthFunc(gl.LESS);
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        const clearColor = this.clearColor.toObject();
+        gl.clearColor(clearColor.r, clearColor.g, clearColor.b, clearColor.a);
+        gl.clearDepth(1.0);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    }
+    updateTextures(screenSize) {
+        const gl = this.gl;
+        if (!gl)
+            throw logger.error('Invalid update texture state');
+        gl.viewport(0, 0, screenSize[0], screenSize[1]);
+        const clearColor = this.clearColor.toObject();
+        gl.clearColor(clearColor.r, clearColor.g, clearColor.b, clearColor.a);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    }
+    preRender() {
+        const gl = this.gl;
+        if (!gl)
+            throw logger.error('Backend not initialized');
+        const clearColor = this.clearColor.toObject();
+        gl.clearColor(clearColor.r, clearColor.g, clearColor.b, clearColor.a);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    }
+    finishRender() { }
+    initShaders(shaders) {
+        if (!this.gl)
+            throw logger.error('WebGL context is null');
+        for (let i = 0; i < shaders.length; i++) {
+            const shader = shaders[i];
+            if (shader.compatableWith('webgl')) {
+                shader.as('webgl').init(this.gl);
+            }
+        }
+    }
+    draw(obj, vertexCallOffset, vertexCallBuffer, indexOffset, indices) {
+        if (!this.gl || !this.buffers)
+            throw logger.error('Invalid draw state');
+        const gl = this.gl;
+        const shader = obj.getShader().as('webgl');
+        const shaderProgram = shader.getShaderProgram();
+        if (!shaderProgram)
+            throw logger.error('Null shader program');
+        const program = shader.getShaderProgram();
+        gl.useProgram(program);
+        this.buffers.gpuVertexCallBuffer.ensureCapacity(vertexCallBuffer.length);
+        shader.writeShaderProgramAttributes(this.buffers.gpuVertexCallBuffer, vertexCallOffset, vertexCallBuffer);
+        shader.writeUniformBuffers(obj);
+        this.buffers.gpuIndexBuffer.write(indices, indexOffset);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.buffers.gpuIndexBuffer.getBuffer());
+        const topology = obj.getGeometryTopology();
+        const wireframe = obj.isWireframe();
+        const mode = wireframe
+            ? gl.LINE_STRIP
+            : topology === 'list'
+                ? gl.TRIANGLES
+                : gl.TRIANGLE_STRIP;
+        const type = gl.UNSIGNED_INT;
+        const instances = obj.isInstance
+            ? obj.getInstanceCount()
+            : 1;
+        gl.drawElementsInstanced(mode, indices.length, type, indexOffset, instances);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+    }
+    destroy() {
+        if (!this.gl || !this.buffers)
+            return;
+        this.gl.deleteBuffer(this.buffers.gpuVertexCallBuffer);
+        this.gl.deleteBuffer(this.buffers.gpuIndexBuffer);
+    }
+    onClearColorChange() {
+        if (!this.gl)
+            return;
+        const clearColor = this.clearColor.toObject();
+        this.gl.clearColor(clearColor.r, clearColor.g, clearColor.b, clearColor.a);
+    }
+}

package/dist/backends/webgpu.d.ts

@@ -0,0 +1,25 @@
+import { SimulationElement3d } from '../graphics.js';
+import { SimJSShader } from '../shaders/shader.js';
+import { GPUBuffers, Vector2 } from '../types.js';
+import { SimJsBackend } from './backend.js';
+export declare class WebGPUBackend extends SimJsBackend {
+    private device;
+    private ctx;
+    private renderPassDescriptor;
+    private multisampleTexture;
+    private depthTexture;
+    private passEncoder;
+    private commandEncoder;
+    protected buffers: GPUBuffers<'webgpu'> | null;
+    constructor();
+    getDeviceOrError(): GPUDevice;
+    init(canvas: HTMLCanvasElement): Promise<void>;
+    renderStart(canvas: HTMLCanvasElement): void;
+    destroy(): void;
+    updateTextures(screenSize: Vector2): void;
+    preRender(scene: SimulationElement3d[]): void;
+    finishRender(): void;
+    draw(obj: SimulationElement3d, vertexCallOffset: number, vertexCallBuffer: Float32Array, indexOffset: number, indices: Uint32Array): void;
+    initShaders(shaders: SimJSShader[]): void;
+    onClearColorChange(): void;
+}

package/dist/backends/webgpu.js

@@ -0,0 +1,134 @@
+import { WebGPUMemoBuffer } from '../buffers/webgpu.js';
+import { logger } from '../globals.js';
+import { buildDepthTexture, buildMultisampleTexture, getVertexAndIndexSize } from '../internalUtils.js';
+import { SimJsBackend } from './backend.js';
+export class WebGPUBackend extends SimJsBackend {
+    device = null;
+    ctx = null;
+    renderPassDescriptor = null;
+    multisampleTexture = null;
+    depthTexture = null;
+    passEncoder = null;
+    commandEncoder = null;
+    buffers = null;
+    constructor() {
+        super('webgpu');
+    }
+    getDeviceOrError() {
+        if (!this.device)
+            throw logger.error('Backend not initialized');
+        return this.device;
+    }
+    async init(canvas) {
+        const adapter = await navigator.gpu.requestAdapter();
+        if (!adapter)
+            throw logger.error('Adapter is null');
+        this.ctx = canvas.getContext('webgpu');
+        if (!this.ctx)
+            throw logger.error('Context is null');
+        this.device = await adapter.requestDevice();
+        const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+        this.ctx.configure({
+            device: this.device,
+            format: presentationFormat,
+            alphaMode: 'opaque'
+        });
+        this.buffers = {
+            gpuVertexCallBuffer: new WebGPUMemoBuffer(this.device, GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, 0),
+            gpuIndexBuffer: new WebGPUMemoBuffer(this.device, GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST, 0)
+        };
+    }
+    renderStart(canvas) {
+        if (!this.device || !this.ctx)
+            throw logger.error('Invalid render start state');
+        const colorAttachment = {
+            // @ts-ignore
+            view: undefined, // Assigned later
+            clearValue: this.clearColor.toObject(),
+            loadOp: 'clear',
+            storeOp: 'store'
+        };
+        this.multisampleTexture = buildMultisampleTexture(this.device, this.ctx, canvas.width, canvas.height);
+        this.depthTexture = buildDepthTexture(this.device, canvas.width, canvas.height);
+        this.renderPassDescriptor = {
+            colorAttachments: [colorAttachment],
+            depthStencilAttachment: {
+                view: this.depthTexture.createView(),
+                depthClearValue: 1.0,
+                depthLoadOp: 'clear',
+                depthStoreOp: 'store'
+            }
+        };
+    }
+    destroy() {
+        this.device?.destroy();
+        this.multisampleTexture?.destroy();
+        this.depthTexture?.destroy();
+        this.buffers?.gpuVertexCallBuffer.destroy();
+        this.buffers?.gpuIndexBuffer.destroy();
+    }
+    updateTextures(screenSize) {
+        if (!this.device || !this.ctx || !this.renderPassDescriptor) {
+            throw logger.error('Invalid update texture state');
+        }
+        this.multisampleTexture = buildMultisampleTexture(this.device, this.ctx, screenSize[0], screenSize[1]);
+        this.depthTexture = buildDepthTexture(this.device, screenSize[0], screenSize[1]);
+        this.renderPassDescriptor.depthStencilAttachment.view = this.depthTexture.createView();
+    }
+    preRender(scene) {
+        if (!this.renderPassDescriptor || !this.ctx || !this.multisampleTexture || !this.device) {
+            throw logger.error('Invalid prerender state');
+        }
+        const colorAttachments = this.renderPassDescriptor
+            .colorAttachments;
+        const attachment = colorAttachments[0];
+        attachment.view = this.multisampleTexture.createView();
+        attachment.resolveTarget = this.ctx.getCurrentTexture().createView();
+        this.commandEncoder = this.device.createCommandEncoder();
+        this.passEncoder = this.commandEncoder.beginRenderPass(this.renderPassDescriptor);
+        const [totalVerticesSize, totalIndexSize] = getVertexAndIndexSize(scene);
+        this.buffers.gpuVertexCallBuffer.ensureCapacity(totalVerticesSize * 4);
+        this.buffers.gpuIndexBuffer.ensureCapacity(totalIndexSize * 4);
+    }
+    finishRender() {
+        this.passEncoder.end();
+        this.device.queue.submit([this.commandEncoder.finish()]);
+    }
+    draw(obj, vertexCallOffset, vertexCallBuffer, indexOffset, indices) {
+        if (!this.device || !this.buffers || !this.passEncoder) {
+            throw logger.error('Invalid draw state');
+        }
+        this.device.queue.writeBuffer(this.buffers.gpuVertexCallBuffer.getBuffer(), vertexCallOffset, vertexCallBuffer.buffer, vertexCallBuffer.byteOffset, vertexCallBuffer.byteLength);
+        this.device.queue.writeBuffer(this.buffers.gpuIndexBuffer.getBuffer(), indexOffset, indices.buffer, indices.byteOffset, indices.byteLength);
+        this.passEncoder.setVertexBuffer(0, this.buffers.gpuVertexCallBuffer.getBuffer(), vertexCallOffset, vertexCallBuffer.byteLength);
+        this.passEncoder.setIndexBuffer(this.buffers.gpuIndexBuffer.getBuffer(), 'uint32', indexOffset, indices.byteLength);
+        this.passEncoder.setPipeline(obj.getPipeline());
+        const shader = obj.getShader().as('webgpu');
+        shader.writeUniformBuffers(obj);
+        const bindGroups = shader.getBindGroups(this.device, obj);
+        for (let i = 0; i < bindGroups.length; i++) {
+            this.passEncoder.setBindGroup(i, bindGroups[i]);
+        }
+        const instances = obj.isInstance
+            ? obj.getInstanceCount()
+            : 1;
+        this.passEncoder.drawIndexed(indices.length, instances);
+    }
+    initShaders(shaders) {
+        if (!this.device)
+            throw logger.error('WebGPU device is null');
+        for (let i = 0; i < shaders.length; i++) {
+            const shader = shaders[i];
+            if (shader.compatableWith('webgpu')) {
+                shader.as('webgpu').init(this.device);
+            }
+        }
+    }
+    onClearColorChange() {
+        if (!this.renderPassDescriptor)
+            return;
+        const colorAttachments = this.renderPassDescriptor
+            .colorAttachments;
+        colorAttachments[0].clearValue = this.clearColor.toObject();
+    }
+}

package/dist/buffers/buffer.d.ts

@@ -0,0 +1,15 @@
+import { ArrayTypes, BackendType, BufferFromBackendType, SpecificMemoBufferType } from '../types.js';
+export declare abstract class MemoBuffer {
+    protected abstract buffer: BufferFromBackendType<unknown> | null;
+    protected bufferCapacity: number;
+    private backendType;
+    constructor(backendType: BackendType, initCapacity: number);
+    abstract allocBuffer(): void;
+    abstract destroy(): void;
+    write(_buf: ArrayTypes, _offset?: number): void;
+    getBuffer(): {};
+    private growCapacity;
+    ensureCapacity(capacity: number): void;
+    setCapacityPrecise(capacity: number): void;
+    as<T extends BackendType>(type: T): SpecificMemoBufferType<T>;
+}

package/dist/buffers/buffer.js

@@ -0,0 +1,42 @@
+import { logger } from '../globals.js';
+export class MemoBuffer {
+    bufferCapacity;
+    backendType;
+    constructor(backendType, initCapacity) {
+        this.backendType = backendType;
+        this.bufferCapacity = initCapacity;
+    }
+    // cant be abstract because offset should be default param to 0
+    // which it wont allow (even though it could)
+    write(_buf, _offset = 0) { }
+    getBuffer() {
+        if (!this.buffer)
+            this.allocBuffer();
+        return this.buffer;
+    }
+    growCapacity(current, target) {
+        let res = Math.max(1, current);
+        while (res < target) {
+            res += Math.ceil(res / 2);
+        }
+        return res;
+    }
+    ensureCapacity(capacity) {
+        this.setCapacityPrecise(this.growCapacity(this.bufferCapacity, capacity));
+    }
+    setCapacityPrecise(capacity) {
+        if (!this.buffer) {
+            this.bufferCapacity = capacity;
+            this.allocBuffer();
+        }
+        if (capacity <= this.bufferCapacity)
+            return;
+        this.bufferCapacity = capacity;
+        this.allocBuffer();
+    }
+    as(type) {
+        if (type !== this.backendType)
+            throw logger.error('Incompatible memo buffer cast');
+        return this;
+    }
+}

package/dist/buffers/webgl.d.ts

@@ -0,0 +1,13 @@
+import { ArrayTypes } from '../types.js';
+import { MemoBuffer } from './buffer.js';
+export declare class WebGLMemoBuffer extends MemoBuffer {
+    private gl;
+    protected buffer: WebGLBuffer | null;
+    private target;
+    private usage;
+    constructor(gl: WebGL2RenderingContext, target: GLenum, usage: GLenum, initCapacity: number);
+    allocBuffer(): void;
+    destroy(): void;
+    getBuffer(): WebGLBuffer;
+    write(buf: ArrayTypes, offset?: number): void;
+}

package/dist/buffers/webgl.js

@@ -0,0 +1,46 @@
+import { logger } from '../globals.js';
+import { MemoBuffer } from './buffer.js';
+export class WebGLMemoBuffer extends MemoBuffer {
+    gl;
+    buffer = null;
+    target;
+    usage;
+    constructor(gl, target, usage, initCapacity) {
+        super('webgl', initCapacity);
+        this.gl = gl;
+        this.target = target;
+        this.usage = usage;
+    }
+    allocBuffer() {
+        const gl = this.gl;
+        if (this.buffer)
+            gl.deleteBuffer(this.buffer);
+        this.buffer = gl.createBuffer();
+        if (!this.buffer)
+            throw logger.error('WebGLMemoBuffer init error');
+        gl.bindBuffer(this.target, this.buffer);
+        gl.bufferData(this.target, this.bufferCapacity, this.usage);
+        gl.bindBuffer(this.target, null);
+    }
+    destroy() {
+        if (this.buffer) {
+            this.gl.deleteBuffer(this.buffer);
+            this.buffer = null;
+        }
+    }
+    getBuffer() {
+        if (!this.buffer)
+            this.allocBuffer();
+        return this.buffer;
+    }
+    write(buf, offset = 0) {
+        const neededSize = offset + buf.byteLength;
+        if (!this.buffer || neededSize > this.bufferCapacity) {
+            this.bufferCapacity = neededSize;
+            this.allocBuffer();
+        }
+        this.gl.bindBuffer(this.target, this.buffer);
+        this.gl.bufferSubData(this.target, offset, buf);
+        this.gl.bindBuffer(this.target, null);
+    }
+}

package/dist/buffers/webgpu.d.ts

@@ -0,0 +1,12 @@
+import { ArrayTypes } from '../types.js';
+import { MemoBuffer } from './buffer.js';
+export declare class WebGPUMemoBuffer extends MemoBuffer {
+    protected device: GPUDevice;
+    protected buffer: GPUBuffer | null;
+    private usage;
+    constructor(device: GPUDevice, usage: GPUBufferDescriptor['usage'], initCapacity: number);
+    allocBuffer(): void;
+    getBuffer(): GPUBuffer;
+    write(buf: ArrayTypes, offset?: number): void;
+    destroy(): void;
+}