simulationjsv2 0.7.3 → 0.8.0

package/dist/simulation.js

@@ -1,58 +1,10 @@
 import { vec3 } from 'wgpu-matrix';
-import { EmptyElement, SimulationElement3d } from './graphics.js';
-import { BUF_LEN, worldProjMatOffset } from './constants.js';
+import { SimulationElement3d } from './graphics.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 { SimSceneObjInfo, buildDepthTexture, buildMultisampleTexture, updateProjectionMatrix, getVertexAndIndexSize, removeObjectId, updateOrthoProjectionMatrix, updateWorldProjectionMatrix, CachedArray } 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 { MemoBuffer } from './buffers.js';
+import { globalInfo, logger } from './globals.js';
 const simjsFrameRateCss = `.simjs-frame-rate {
   position: absolute;
   top: 0;
@@ -99,28 +51,10 @@ 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();
-const orthoMatrix = matrix4();
+export const worldProjectionMatrix = matrix4();
+export const orthogonalMatrix = matrix4();
 export class Camera {
     pos;
     rotation;
@@ -216,25 +150,24 @@ export class Simulation extends Settings {
     fittingElement = false;
     running = true;
     initialized = false;
-    pipelines = null;
-    renderInfo = null;
     resizeEvents;
     frameRateView;
+    transparentElements;
+    vertexBuffer;
+    indexBuffer;
     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 +180,9 @@ 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);
+        this.indexBuffer = new MemoBuffer(GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST, 0);
     }
     handleCanvasResize(parent) {
         if (this.fittingElement) {
@@ -325,13 +261,18 @@ 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.render(device, ctx, canvas);
         })();
     }
     stop() {
@@ -346,35 +287,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
@@ -388,8 +301,8 @@ export class Simulation extends Settings {
             updateProjectionMatrix(projMat, newAspectRatio);
             aspectRatio = newAspectRatio;
         }
-        updateWorldProjectionMatrix(worldProjMat, projMat);
-        updateOrthoProjectionMatrix(orthoMatrix, camera.getScreenSize());
+        updateWorldProjectionMatrix(worldProjectionMatrix, projMat);
+        updateOrthoProjectionMatrix(orthogonalMatrix, camera.getScreenSize());
         let multisampleTexture = buildMultisampleTexture(device, ctx, canvas.width, canvas.height);
         let depthTexture = buildDepthTexture(device, canvas.width, canvas.height);
         const renderPassDescriptor = {
@@ -405,7 +318,7 @@ export class Simulation extends Settings {
         let prev = Date.now() - 10;
         let prevFps = 0;
         const frame = async () => {
-            if (!canvas || !this.renderInfo)
+            if (!canvas)
                 return;
             requestAnimationFrame(frame);
             if (!this.running)
@@ -414,12 +327,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));
@@ -427,7 +338,7 @@ export class Simulation extends Settings {
                 screenSize[1] = canvas.height;
                 aspectRatio = camera.getAspectRatio();
                 updateProjectionMatrix(projMat, aspectRatio);
-                updateWorldProjectionMatrix(worldProjMat, projMat);
+                updateWorldProjectionMatrix(worldProjectionMatrix, projMat);
                 multisampleTexture = buildMultisampleTexture(device, ctx, screenSize[0], screenSize[1]);
                 depthTexture = buildDepthTexture(device, screenSize[0], screenSize[1]);
                 renderPassDescriptor.depthStencilAttachment.view = depthTexture.createView();
@@ -439,140 +350,72 @@ export class Simulation extends Settings {
             // @ts-ignore
             renderPassDescriptor.colorAttachments[0].resolveTarget = ctx.getCurrentTexture().createView();
             if (camera.hasUpdated()) {
-                updateOrthoProjectionMatrix(orthoMatrix, camera.getScreenSize());
-                updateWorldProjectionMatrix(worldProjMat, projMat);
+                updateOrthoProjectionMatrix(orthogonalMatrix, camera.getScreenSize());
+                updateWorldProjectionMatrix(worldProjectionMatrix, projMat);
             }
             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);
+            const [totalVerticesSize, totalIndexSize] = getVertexAndIndexSize(this.scene);
+            this.vertexBuffer.setSize(totalVerticesSize * 4);
+            this.indexBuffer.setSize(totalIndexSize * 4);
+            this.transparentElements.reset();
+            const [opaqueVertexOffset, opaqueIndexOffset] = this.renderScene(device, passEncoder, this.vertexBuffer.getBuffer(), this.indexBuffer.getBuffer(), 0, 0, this.scene, this.scene.length, diff, false);
+            this.renderScene(device, passEncoder, this.vertexBuffer.getBuffer(), this.indexBuffer.getBuffer(), opaqueVertexOffset, opaqueIndexOffset, this.transparentElements.getArray(), this.transparentElements.length, diff, true);
             camera.updateConsumed();
             passEncoder.end();
             device.queue.submit([commandEncoder.finish()]);
         };
         requestAnimationFrame(frame);
     }
-    renderScene(device, passEncoder, vertexBuffer, scene, startOffset, diff, shaderInfo) {
-        if (this.pipelines === null)
-            return 0;
-        let currentOffset = startOffset;
+    renderScene(device, passEncoder, vertexBuffer, indexBuffer, startVertexOffset, startIndexOffset, scene, numElements, diff, transparent) {
+        let vertexOffset = startVertexOffset;
+        let indexOffset = startIndexOffset;
         const toRemove = [];
-        for (let i = 0; i < scene.length; i++) {
-            const lifetime = scene[i].getLifetime();
+        for (let i = 0; i < numElements; i++) {
+            const sceneObj = scene[i];
+            const lifetime = sceneObj.getLifetime();
             if (lifetime !== null) {
-                const complete = scene[i].lifetimeComplete();
+                const complete = sceneObj.lifetimeComplete();
                 if (complete) {
                     toRemove.push(i);
                     continue;
                 }
-                scene[i].traverseLife(diff);
+                sceneObj.traverseLife(diff);
+            }
+            const obj = sceneObj.getObj();
+            if (!transparent && obj.isTransparent()) {
+                this.transparentElements.add(sceneObj);
+                continue;
             }
-            const obj = scene[i].getObj();
             if (obj.hasChildren()) {
-                let shaderInfo = undefined;
-                if (obj instanceof ShaderGroup) {
-                    const pipeline = obj.getPipeline();
-                    if (pipeline !== null) {
-                        shaderInfo = {
-                            pipeline,
-                            paramGenerator: obj.getVertexParamGenerator(),
-                            bufferInfo: obj.hasBindGroup()
-                                ? {
-                                    buffers: obj.getBindGroupBuffers(device),
-                                    layout: obj.getBindGroupLayout()
-                                }
-                                : null
-                        };
-                    }
-                }
-                currentOffset += this.renderScene(device, passEncoder, vertexBuffer, obj.getChildrenInfos(), currentOffset, diff, shaderInfo);
+                const childObjects = obj.getChildrenInfos();
+                const [vertexDiff, indexDiff] = this.renderScene(device, passEncoder, vertexBuffer, indexBuffer, vertexOffset, indexOffset, childObjects, childObjects.length, diff, transparent);
+                vertexOffset += vertexDiff;
+                indexOffset += indexDiff;
             }
             if (obj.isEmpty)
                 continue;
-            const buffer = new Float32Array(obj.getBuffer(shaderInfo?.paramGenerator));
-            const bufLen = shaderInfo?.paramGenerator?.bufferSize || BUF_LEN;
-            const vertexCount = buffer.length / bufLen;
-            device.queue.writeBuffer(vertexBuffer, currentOffset, buffer.buffer, buffer.byteOffset, buffer.byteLength);
-            vertexBuffer.unmap();
-            passEncoder.setVertexBuffer(0, vertexBuffer, currentOffset, buffer.byteLength);
-            const modelMatrix = obj.getModelMatrix();
-            const uniformBuffer = obj.getUniformBuffer(modelMatrix);
-            const projBuf = obj.is3d ? worldProjMat : orthoMatrix;
-            device.queue.writeBuffer(uniformBuffer, worldProjMatOffset, projBuf.buffer, projBuf.byteOffset, projBuf.byteLength);
-            if (shaderInfo) {
-                passEncoder.setPipeline(shaderInfo.pipeline);
-            }
-            else if (obj.isWireframe()) {
-                passEncoder.setPipeline(this.pipelines.lineStrip);
+            const vertices = obj.getVertexBuffer();
+            const indices = obj.getIndexBuffer();
+            device.queue.writeBuffer(vertexBuffer, vertexOffset, vertices.buffer, vertices.byteOffset, vertices.byteLength);
+            device.queue.writeBuffer(indexBuffer, indexOffset, indices.buffer, indices.byteOffset, indices.byteLength);
+            passEncoder.setVertexBuffer(0, vertexBuffer, vertexOffset, vertices.byteLength);
+            passEncoder.setIndexBuffer(indexBuffer, 'uint32', indexOffset, indices.byteLength);
+            passEncoder.setPipeline(obj.getPipeline());
+            obj.writeBuffers();
+            const instances = obj.isInstance ? obj.getNumInstances() : 1;
+            const bindGroups = obj.getShader().getBindGroups(obj);
+            for (let i = 0; i < bindGroups.length; i++) {
+                passEncoder.setBindGroup(i, bindGroups[i]);
             }
-            else {
-                const type = obj.getGeometryType();
-                if (type === 'strip') {
-                    passEncoder.setPipeline(this.pipelines.triangleStrip);
-                }
-                else if (type === 'list') {
-                    passEncoder.setPipeline(this.pipelines.triangleList);
-                }
-            }
-            let instances = 1;
-            if (this.renderInfo) {
-                let instanceBuffer;
-                if (obj.isInstance) {
-                    instances = obj.getNumInstances();
-                    instanceBuffer =
-                        obj.getMatrixBuffer() ?? this.renderInfo.instanceBuffer;
-                }
-                else {
-                    instanceBuffer = this.renderInfo.instanceBuffer;
-                }
-                const uniformBindGroup = device.createBindGroup({
-                    layout: this.renderInfo.bindGroupLayout,
-                    entries: [
-                        {
-                            binding: 0,
-                            resource: {
-                                buffer: uniformBuffer
-                            }
-                        },
-                        {
-                            binding: 1,
-                            resource: {
-                                buffer: instanceBuffer
-                            }
-                        }
-                    ]
-                });
-                passEncoder.setBindGroup(0, uniformBindGroup);
-            }
-            if (shaderInfo && shaderInfo.bufferInfo) {
-                const bindGroupEntries = shaderInfo.bufferInfo.buffers.map((buffer, index) => ({
-                    binding: index,
-                    resource: {
-                        buffer
-                    }
-                }));
-                const bindGroup = device.createBindGroup({
-                    layout: shaderInfo.bufferInfo.layout,
-                    entries: bindGroupEntries
-                });
-                passEncoder.setBindGroup(1, bindGroup);
-            }
-            // TODO maybe switch to drawIndexed
-            passEncoder.draw(vertexCount, instances, 0, 0);
-            currentOffset += buffer.byteLength;
+            passEncoder.drawIndexed(indices.length, instances);
+            vertexOffset += vertices.byteLength;
+            indexOffset += indices.byteLength;
         }
         for (let i = toRemove.length - 1; i >= 0; i--) {
-            this.remove(scene[i].getObj());
+            this.remove(scene.at(i).getObj());
         }
-        return currentOffset - startOffset;
+        return [vertexOffset - startVertexOffset, indexOffset - startIndexOffset];
     }
     fitElement() {
         if (this.canvasRef === null)
@@ -586,112 +429,3 @@ export class Simulation extends Settings {
         }
     }
 }
-const defaultShaderCode = `
-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>;
-`;
-export class ShaderGroup extends EmptyElement {
-    code;
-    module;
-    pipeline;
-    bindGroupLayout;
-    topology;
-    paramGenerator;
-    vertexParams;
-    bindGroup;
-    valueBuffers;
-    constructor(shaderCode, topology = 'triangle-list', vertexParams, paramGenerator, bindGroup) {
-        super();
-        this.geometry = new BlankGeometry();
-        this.code = defaultShaderCode + shaderCode;
-        this.module = null;
-        this.pipeline = null;
-        this.bindGroupLayout = null;
-        this.bindGroup = bindGroup || null;
-        this.topology = topology;
-        this.paramGenerator = paramGenerator;
-        this.vertexParams = vertexParams;
-        this.valueBuffers = null;
-    }
-    initPipeline() {
-        const device = globalInfo.errorGetDevice();
-        this.module = device.createShaderModule({ code: this.code });
-        const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-        const bindGroupLayout = device.createBindGroupLayout(baseBindGroupLayout);
-        const bindGroups = [bindGroupLayout];
-        if (this.bindGroup !== null) {
-            const entryValues = this.bindGroup.bindings.map((binding, index) => ({
-                binding: index,
-                visibility: binding.visibility,
-                buffer: binding.buffer
-            }));
-            this.bindGroupLayout = device.createBindGroupLayout({
-                entries: entryValues
-            });
-            bindGroups.push(this.bindGroupLayout);
-        }
-        this.pipeline = createPipeline(device, this.module, bindGroups, presentationFormat, this.topology, this.vertexParams);
-    }
-    getBindGroupLayout() {
-        return this.bindGroupLayout;
-    }
-    getPipeline() {
-        if (!this.pipeline)
-            this.initPipeline();
-        return this.pipeline;
-    }
-    getBindGroupBuffers(device) {
-        if (this.bindGroup === null)
-            return null;
-        if (device === null)
-            return null;
-        const values = this.bindGroup.values();
-        if (this.valueBuffers === null) {
-            this.valueBuffers = [];
-            for (let i = 0; i < values.length; i++) {
-                const buffer = this.createBuffer(device, values[i]);
-                this.valueBuffers.push(buffer);
-            }
-        }
-        else {
-            for (let i = 0; i < values.length; i++) {
-                const arrayConstructor = values[i].array;
-                const array = new arrayConstructor(values[i].value);
-                if (array.byteLength > this.valueBuffers[i].size) {
-                    const newBuffer = this.createBuffer(device, values[i]);
-                    this.valueBuffers[i].destroy();
-                    this.valueBuffers[i] = newBuffer;
-                }
-                else {
-                    device.queue.writeBuffer(this.valueBuffers[i], 0, array.buffer, array.byteOffset, array.byteLength);
-                }
-            }
-        }
-        return this.valueBuffers;
-    }
-    createBuffer(device, value) {
-        const arrayConstructor = value.array;
-        const array = new arrayConstructor(value.value);
-        const buffer = device.createBuffer({
-            mappedAtCreation: true,
-            size: array.byteLength,
-            usage: value.usage
-        });
-        const bufferArr = new arrayConstructor(buffer.getMappedRange());
-        bufferArr.set(array);
-        buffer.unmap();
-        return buffer;
-    }
-    getVertexParamGenerator() {
-        return this.paramGenerator;
-    }
-    hasBindGroup() {
-        return !!this.bindGroup;
-    }
-}

package/dist/types.d.ts

@@ -1,7 +1,11 @@
 /// <reference types="@webgpu/types" />
+import { MemoBuffer } from './buffers.js';
 import { CubicBezierCurve2d, SimulationElement2d, SimulationElement3d, SplinePoint2d } from './graphics.js';
-import { Color, Vertex } from './utils.js';
+import { Color } from './utils.js';
 export type FloatArray = Float32Array | Float64Array;
+export type UintArray = Uint8Array | Uint16Array | Uint32Array;
+export type IntArray = Int8Array | Int16Array | Int32Array;
+export type ArrayTypes = FloatArray | UintArray | IntArray;
 export type Vector4 = FloatArray & [number, number, number, number];
 export type Vector3 = FloatArray & [number, number, number];
 export type Vector2 = FloatArray & [number, number];
@@ -29,84 +33,86 @@ export type VertexColorMap = Record<number, Color>;
 export type ElementRotation<T extends Vector2 | Vector3> = T extends Vector2 ? number : T;
 export type AnySimulationElement = SimulationElement2d | SimulationElement3d;
 export type EmptyParams = object;
-export type CubeGeometryParams = {
+export interface CubeGeometryParams {
     width: number;
     height: number;
     depth: number;
-};
-export type SquareGeometryParams = {
+}
+export interface SquareGeometryParams {
     width: number;
     height: number;
-    colorMap: VertexColorMap;
-    centerOffset: Vector2;
-};
-export type CircleGeometryParams = {
+}
+export interface CircleGeometryParams {
     radius: number;
     detail: number;
-};
-export type Spline2dGeometryParams = {
+}
+export interface Spline2dGeometryParams {
     points: SplinePoint2d[];
-    curves: CubicBezierCurve2d[];
-    distance: number;
     detail: number;
     interpolateStart: number;
     interpolateLimit: number;
     thickness: number;
-    color: Color;
-    vertexColors: Color[];
-};
-export type LineGeometryParams = {
+    curves: CubicBezierCurve2d[];
+    distance: number;
+    vertexInterpolations: number[];
+    curveVertexIndices: number[];
+}
+export interface LineGeometryParams {
     pos: Vector3;
     to: Vector3;
-    fromColor: Color | null;
-    toColor: Color | null;
     thickness: number;
-};
-export type PolygonGeometryParams = {
-    points: Vertex[];
-};
-export type TraceLinesParams = {
-    vertices: Vertex[];
+}
+export interface TraceLinesParams {
     maxLength: number | null;
-};
-export type PipelineGroup = {
+}
+export interface PipelineGroup {
     triangleList: GPURenderPipeline;
     triangleStrip: GPURenderPipeline;
     lineStrip: GPURenderPipeline;
-};
-export type RenderInfo = {
-    instanceBuffer: GPUBuffer;
-    bindGroupLayout: GPUBindGroupLayout;
-    vertexBuffer: GPUBuffer | null;
-};
-export type VertexParamGeneratorInfo = {
+    triangleListTransparent: GPURenderPipeline;
+    triangleStripTransparent: GPURenderPipeline;
+    lineStripTransparent: GPURenderPipeline;
+}
+export interface VertexParamGeneratorInfo {
     bufferSize: number;
     createBuffer: (x: number, y: number, z: number, color: Color) => number[];
-};
-export type ShaderInfo = {
+}
+export interface ShaderInfo {
     pipeline: GPURenderPipeline;
     paramGenerator: VertexParamGeneratorInfo;
     bufferInfo: {
         buffers: GPUBuffer[];
         layout: GPUBindGroupLayout;
     } | null;
-};
-export type VertexParamInfo = {
+}
+export interface VertexParamInfo {
     format: GPUVertexFormat;
     size: number;
-};
-export type BindGroupEntry = {
+}
+export interface BindGroupEntry {
     visibility: GPUBindGroupLayoutEntry['visibility'];
     buffer: GPUBindGroupLayoutEntry['buffer'];
-};
+}
 export type ArrayConstructors = Float32ArrayConstructor | Float64ArrayConstructor | Int8ArrayConstructor | Int16ArrayConstructor | Int32ArrayConstructor;
-export type ArrayTypes = Float32Array | Float64Array | Int8Array | Int16Array | Int32Array;
-export type BindGroupValue = {
+export interface BindGroupValue {
     value: number[];
     usage: GPUBufferDescriptor['usage'];
     array: ArrayConstructors;
-};
-export type BindGroupInfo = {
+}
+export interface BindGroupInfo {
     bindings: BindGroupEntry[];
     values: () => BindGroupValue[];
-};
+}
+export interface SimulationElementInfo {
+    topology: GPUPrimitiveTopology;
+    transparent: boolean;
+    cullMode: GPUCullMode;
+}
+export interface BufferInfo {
+    usage: GPUBufferDescriptor['usage'];
+    defaultSize?: number;
+    owned?: boolean;
+}
+export type VertexBufferWriter = (element: SimulationElement3d, buffer: Float32Array, vertex: Vector3, vertexIndex: number, offset: number) => void;
+export type BufferWriter = (element: SimulationElement3d, buffers: MemoBuffer[], device: GPUDevice) => void;
+export type BindGroupGenerator = (element: SimulationElement3d, buffers: MemoBuffer[]) => GPUBindGroup[];