simulationjsv2 0.5.2 → 0.7.1

package/dist/simulation.js

@@ -1,64 +1,42 @@
 import { vec3 } from 'wgpu-matrix';
-import { Instance, SimulationElement3d } from './graphics.js';
-import { BUF_LEN } from './constants.js';
-import { Color, toSceneObjInfoMany, transitionValues, vector2, vector3 } from './utils.js';
+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 { addObject, buildDepthTexture, buildMultisampleTexture, buildProjectionMatrix, createPipeline, getOrthoMatrix, getTotalVertices, getTransformationMatrix, logger, removeObject, removeObjectId } from './internalUtils.js';
+import { SimSceneObjInfo, buildDepthTexture, buildMultisampleTexture, updateProjectionMatrix, createPipeline, getTotalVertices, logger, removeObjectId, updateOrthoProjectionMatrix, updateWorldProjectionMatrix } from './internalUtils.js';
+import { Settings } from './settings.js';
 const shader = `
 struct Uniforms {
-  modelViewProjectionMatrix : mat4x4<f32>,
-  orthoProjectionMatrix : mat4x4<f32>
+  worldProjectionMatrix: mat4x4<f32>,
+  modelProjectionMatrix: mat4x4<f32>,
 }
  
-@group(0) @binding(0) var<uniform> uniforms : Uniforms;
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
 
-@group(0) @binding(1) var<storage> instanceMatrices : array<mat4x4f>;
+@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>,
+  @builtin(position) Position: vec4<f32>,
+  @location(0) fragUV: vec2<f32>,
+  @location(1) fragColor: vec4<f32>,
   @location(2) fragPosition: vec4<f32>,
 }
 
 @vertex
-fn vertex_main_3d(
-  @builtin(instance_index) instanceIdx : u32,
-  @location(0) position : vec4<f32>,
-  @location(1) color : vec4<f32>,
-  @location(2) uv : vec2<f32>,
-  @location(3) drawingInstance: f32
-) -> VertexOutput {
-  var output : VertexOutput;
-
-  if (drawingInstance == 1) {
-    let transformedPos = instanceMatrices[instanceIdx] * position;
-    output.Position = uniforms.modelViewProjectionMatrix * transformedPos;
-  } else {
-    output.Position = uniforms.modelViewProjectionMatrix * position;
-  }
-
-  output.fragUV = uv;
-  output.fragPosition = output.Position;
-  output.fragColor = color;
-  return output;
-}
-
-@vertex
-fn vertex_main_2d(
-  @builtin(instance_index) instanceIdx : u32,
-  @location(0) position : vec4<f32>,
-  @location(1) color : vec4<f32>,
-  @location(2) uv : vec2<f32>,
+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) {
-    let transformedPos = instanceMatrices[instanceIdx] * position;
-    output.Position = uniforms.orthoProjectionMatrix * transformedPos;
+    output.Position = uniforms.worldProjectionMatrix * uniforms.modelProjectionMatrix * instanceMatrices[instanceIdx] * vec4(position, 1.0);
   } else {
-    output.Position = uniforms.orthoProjectionMatrix * position;
+    output.Position = uniforms.worldProjectionMatrix * uniforms.modelProjectionMatrix * vec4(position, 1.0);
   }
 
   output.fragUV = uv;
@@ -117,7 +95,117 @@ class FrameRateView {
         }
     }
 }
-export class Simulation {
+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 class Camera {
+    pos;
+    rotation;
+    aspectRatio = 1;
+    updated;
+    screenSize = vector2();
+    constructor(pos, rotation = vector3()) {
+        this.pos = pos;
+        this.updated = false;
+        this.rotation = rotation;
+    }
+    setScreenSize(size) {
+        this.screenSize = size;
+        this.aspectRatio = size[0] / size[1];
+        this.updated = true;
+    }
+    getScreenSize() {
+        return this.screenSize;
+    }
+    hasUpdated() {
+        return this.updated;
+    }
+    updateConsumed() {
+        this.updated = false;
+    }
+    move(amount, t = 0, f) {
+        const initial = vector3();
+        vec3.clone(this.pos, initial);
+        return transitionValues((p) => {
+            const x = amount[0] * p;
+            const y = amount[1] * p;
+            const z = amount[2] * p;
+            const diff = vector3(x, y, z);
+            vec3.add(this.pos, diff, this.pos);
+        }, () => {
+            vec3.add(initial, amount, this.pos);
+        }, t, f);
+    }
+    moveTo(pos, t = 0, f) {
+        const diff = vector3();
+        vec3.sub(pos, this.pos, diff);
+        return transitionValues((p) => {
+            const x = diff[0] * p;
+            const y = diff[1] * p;
+            const z = diff[2] * p;
+            const amount = vector3(x, y, z);
+            vec3.add(this.pos, amount, this.pos);
+        }, () => {
+            vec3.clone(pos, this.pos);
+        }, t, f);
+    }
+    rotateTo(value, t = 0, f) {
+        const diff = vec3.clone(value);
+        vec3.sub(diff, diff, this.rotation);
+        return transitionValues((p) => {
+            const x = diff[0] * p;
+            const y = diff[1] * p;
+            const z = diff[2] * p;
+            vec3.add(this.rotation, this.rotation, vector3(x, y, z));
+            this.updated = true;
+        }, () => {
+            this.rotation = value;
+        }, t, f);
+    }
+    rotate(amount, t = 0, f) {
+        const initial = vector3();
+        vec3.clone(this.rotation, initial);
+        return transitionValues((p) => {
+            const x = amount[0] * p;
+            const y = amount[1] * p;
+            const z = amount[2] * p;
+            vec3.add(this.rotation, vector3(x, y, z), this.rotation);
+            this.updated = true;
+        }, () => {
+            vec3.add(initial, amount, this.rotation);
+        }, t, f);
+    }
+    getRotation() {
+        return this.rotation;
+    }
+    getPos() {
+        return this.pos;
+    }
+    getAspectRatio() {
+        return this.aspectRatio;
+    }
+}
+export let camera = new Camera(vector3());
+export class Simulation extends Settings {
     canvasRef = null;
     bgColor = new Color(255, 255, 255);
     scene = [];
@@ -125,12 +213,12 @@ export class Simulation {
     running = true;
     initialized = false;
     frameRateView;
-    camera;
     device = null;
     pipelines = null;
     renderInfo = null;
     resizeEvents;
-    constructor(idOrCanvasRef, camera = null, showFrameRate = false) {
+    constructor(idOrCanvasRef, sceneCamera = null, showFrameRate = false) {
+        super();
         if (typeof idOrCanvasRef === 'string') {
             const ref = document.getElementById(idOrCanvasRef);
             if (ref !== null)
@@ -145,10 +233,9 @@ export class Simulation {
             throw logger.error(`Canvas ref/id provided is invalid`);
         }
         const parent = this.canvasRef.parentElement;
-        if (!camera)
-            this.camera = new Camera(vector3());
-        else
-            this.camera = camera;
+        if (sceneCamera) {
+            camera = sceneCamera;
+        }
         if (parent === null)
             throw logger.error('Canvas parent is null');
         this.resizeEvents = [];
@@ -175,10 +262,24 @@ export class Simulation {
         return (this.canvasRef?.height || 0) / devicePixelRatio;
     }
     add(el, id) {
-        addObject(this.scene, el, this.device, id);
+        if (el instanceof SimulationElement3d) {
+            if (this.device !== null) {
+                el.propagateDevice(this.device);
+            }
+            const obj = new SimSceneObjInfo(el, id);
+            this.scene.unshift(obj);
+        }
+        else {
+            throw logger.error('Cannot add invalid SimulationElement');
+        }
     }
     remove(el) {
-        removeObject(this.scene, el);
+        for (let i = 0; i < this.scene.length; i++) {
+            if (this.scene[i].getObj() === el) {
+                this.scene.splice(i, 1);
+                break;
+            }
+        }
     }
     removeId(id) {
         removeObjectId(this.scene, id);
@@ -230,16 +331,14 @@ export class Simulation {
                 format: 'bgra8unorm'
             });
             const screenSize = vector2(this.canvasRef.width, this.canvasRef.height);
-            this.camera.setScreenSize(screenSize);
+            camera.setScreenSize(screenSize);
             this.render(ctx);
         })();
     }
     propagateDevice(device) {
         for (let i = 0; i < this.scene.length; i++) {
             const el = this.scene[i].getObj();
-            if (el instanceof Instance || el instanceof SceneCollection) {
-                el.setDevice(device);
-            }
+            el.propagateDevice(device);
         }
     }
     stop() {
@@ -268,64 +367,21 @@ export class Simulation {
             format: presentationFormat,
             alphaMode: 'premultiplied'
         });
-        const uniformBufferSize = 4 * 16 + 4 * 16 + 4 * 2 + 8; // 4x4 matrix + 4x4 matrix + vec2<f32> + 8 bc 144 is cool
-        const uniformBuffer = device.createBuffer({
-            size: uniformBufferSize,
-            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-        });
         const instanceBuffer = device.createBuffer({
             size: 10 * 4 * 16,
             usage: GPUBufferUsage.STORAGE
         });
-        const bindGroupLayout = device.createBindGroupLayout({
-            entries: [
-                {
-                    binding: 0,
-                    visibility: GPUShaderStage.VERTEX,
-                    buffer: {
-                        type: 'uniform'
-                    }
-                },
-                {
-                    binding: 1,
-                    visibility: GPUShaderStage.VERTEX,
-                    buffer: {
-                        type: 'read-only-storage'
-                    }
-                }
-            ]
-        });
+        const bindGroupLayout = device.createBindGroupLayout(baseBindGroupLayout);
         this.renderInfo = {
-            uniformBuffer,
             bindGroupLayout,
             instanceBuffer,
             vertexBuffer: null
         };
         this.pipelines = {
-            triangleList2d: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'vertex_main_2d', 'triangle-list'),
-            triangleStrip2d: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'vertex_main_2d', 'triangle-strip'),
-            lineStrip2d: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'vertex_main_2d', 'line-strip'),
-            triangleList3d: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'vertex_main_3d', 'triangle-list'),
-            triangleStrip3d: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'vertex_main_3d', 'triangle-strip'),
-            lineStrip3d: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'vertex_main_3d', 'line-strip')
+            triangleList: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'triangle-list'),
+            triangleStrip: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'triangle-strip'),
+            lineStrip: createPipeline(device, shaderModule, [bindGroupLayout], presentationFormat, 'line-strip')
         };
-        const uniformBindGroup = device.createBindGroup({
-            layout: bindGroupLayout,
-            entries: [
-                {
-                    binding: 0,
-                    resource: {
-                        buffer: uniformBuffer
-                    }
-                },
-                {
-                    binding: 1,
-                    resource: {
-                        buffer: instanceBuffer
-                    }
-                }
-            ]
-        });
         const colorAttachment = {
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
@@ -334,18 +390,13 @@ export class Simulation {
             loadOp: 'clear',
             storeOp: 'store'
         };
-        let aspect = canvas.width / canvas.height;
-        let projectionMatrix = buildProjectionMatrix(aspect);
-        let modelViewProjectionMatrix;
-        let orthoMatrix;
-        const updateModelViewProjectionMatrix = () => {
-            modelViewProjectionMatrix = getTransformationMatrix(this.camera.getPos(), this.camera.getRotation(), projectionMatrix);
-        };
-        updateModelViewProjectionMatrix();
-        const updateOrthoMatrix = () => {
-            orthoMatrix = getOrthoMatrix(this.camera.getScreenSize());
-        };
-        updateOrthoMatrix();
+        const newAspectRatio = canvas.width / canvas.height;
+        if (newAspectRatio !== aspectRatio) {
+            updateProjectionMatrix(projMat, newAspectRatio);
+            aspectRatio = newAspectRatio;
+        }
+        updateWorldProjectionMatrix(worldProjMat, projMat);
+        updateOrthoProjectionMatrix(orthoMatrix, camera.getScreenSize());
         let multisampleTexture = buildMultisampleTexture(device, ctx, canvas.width, canvas.height);
         let depthTexture = buildDepthTexture(device, canvas.width, canvas.height);
         const renderPassDescriptor = {
@@ -378,14 +429,14 @@ export class Simulation {
             prevFps = fps;
             canvas.width = canvas.clientWidth * devicePixelRatio;
             canvas.height = canvas.clientHeight * devicePixelRatio;
-            const screenSize = this.camera.getScreenSize();
+            const screenSize = camera.getScreenSize();
             if (screenSize[0] !== canvas.width || screenSize[1] !== canvas.height) {
-                this.camera.setScreenSize(vector2(canvas.width, canvas.height));
+                camera.setScreenSize(vector2(canvas.width, canvas.height));
                 screenSize[0] = canvas.width;
                 screenSize[1] = canvas.height;
-                aspect = this.camera.getAspectRatio();
-                projectionMatrix = buildProjectionMatrix(aspect);
-                updateModelViewProjectionMatrix();
+                aspectRatio = camera.getAspectRatio();
+                updateProjectionMatrix(projMat, aspectRatio);
+                updateWorldProjectionMatrix(worldProjMat, projMat);
                 multisampleTexture = buildMultisampleTexture(device, ctx, screenSize[0], screenSize[1]);
                 depthTexture = buildDepthTexture(device, screenSize[0], screenSize[1]);
                 renderPassDescriptor.depthStencilAttachment.view = depthTexture.createView();
@@ -396,17 +447,13 @@ export class Simulation {
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             renderPassDescriptor.colorAttachments[0].resolveTarget = ctx.getCurrentTexture().createView();
-            if (this.camera.hasUpdated()) {
-                updateOrthoMatrix();
-                updateModelViewProjectionMatrix();
+            if (camera.hasUpdated()) {
+                updateOrthoProjectionMatrix(orthoMatrix, camera.getScreenSize());
+                updateWorldProjectionMatrix(worldProjMat, projMat);
             }
-            device.queue.writeBuffer(uniformBuffer, 0, modelViewProjectionMatrix.buffer, modelViewProjectionMatrix.byteOffset, modelViewProjectionMatrix.byteLength);
-            device.queue.writeBuffer(uniformBuffer, 4 * 16, // 4x4 matrix
-            orthoMatrix.buffer, orthoMatrix.byteOffset, orthoMatrix.byteLength);
             const commandEncoder = device.createCommandEncoder();
             const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
-            passEncoder.setPipeline(this.pipelines.triangleList3d);
-            passEncoder.setBindGroup(0, uniformBindGroup);
+            passEncoder.setPipeline(this.pipelines.triangleList);
             const totalVertices = getTotalVertices(this.scene);
             if (this.renderInfo.vertexBuffer === null ||
                 this.renderInfo.vertexBuffer.size / (4 * BUF_LEN) < totalVertices) {
@@ -416,7 +463,7 @@ export class Simulation {
                 });
             }
             this.renderScene(device, passEncoder, this.renderInfo.vertexBuffer, this.scene, 0, diff);
-            this.camera.updateConsumed();
+            camera.updateConsumed();
             passEncoder.end();
             device.queue.submit([commandEncoder.finish()]);
         };
@@ -438,7 +485,7 @@ export class Simulation {
                 scene[i].traverseLife(diff);
             }
             const obj = scene[i].getObj();
-            if (obj instanceof SceneCollection) {
+            if (obj.hasChildren()) {
                 let shaderInfo = undefined;
                 if (obj instanceof ShaderGroup) {
                     const pipeline = obj.getPipeline();
@@ -448,76 +495,70 @@ export class Simulation {
                             paramGenerator: obj.getVertexParamGenerator(),
                             bufferInfo: obj.hasBindGroup()
                                 ? {
-                                    buffers: obj.getBindGroupBuffers(),
+                                    buffers: obj.getBindGroupBuffers(device),
                                     layout: obj.getBindGroupLayout()
                                 }
                                 : null
                         };
                     }
                 }
-                currentOffset += this.renderScene(device, passEncoder, vertexBuffer, obj.getScene(), currentOffset, diff, shaderInfo || undefined);
-                continue;
+                currentOffset += this.renderScene(device, passEncoder, vertexBuffer, obj.getChildrenInfos(), currentOffset, diff, shaderInfo);
             }
-            const buffer = new Float32Array(obj.getBuffer(this.camera, shaderInfo?.paramGenerator));
+            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);
+            device.queue.writeBuffer(vertexBuffer, currentOffset, buffer.buffer, buffer.byteOffset, buffer.byteLength);
             vertexBuffer.unmap();
-            const is3d = Boolean(obj.is3d);
+            passEncoder.setVertexBuffer(0, vertexBuffer, currentOffset, buffer.byteLength);
+            const modelMatrix = obj.getModelMatrix();
+            const uniformBuffer = obj.getUniformBuffer(device, 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()) {
-                if (is3d) {
-                    passEncoder.setPipeline(this.pipelines.lineStrip3d);
-                }
-                else {
-                    passEncoder.setPipeline(this.pipelines.lineStrip2d);
-                }
+                passEncoder.setPipeline(this.pipelines.lineStrip);
             }
             else {
                 const type = obj.getGeometryType();
                 if (type === 'strip') {
-                    if (is3d) {
-                        passEncoder.setPipeline(this.pipelines.triangleStrip3d);
-                    }
-                    else {
-                        passEncoder.setPipeline(this.pipelines.triangleStrip2d);
-                    }
+                    passEncoder.setPipeline(this.pipelines.triangleStrip);
                 }
                 else if (type === 'list') {
-                    if (is3d) {
-                        passEncoder.setPipeline(this.pipelines.triangleList3d);
-                    }
-                    else {
-                        passEncoder.setPipeline(this.pipelines.triangleList2d);
-                    }
+                    passEncoder.setPipeline(this.pipelines.triangleList);
                 }
             }
             let instances = 1;
-            if (obj instanceof Instance) {
-                instances = obj.getNumInstances();
-                const buf = obj.getMatrixBuffer();
-                if (buf && this.renderInfo) {
-                    const uniformBindGroup = device.createBindGroup({
-                        layout: this.renderInfo.bindGroupLayout,
-                        entries: [
-                            {
-                                binding: 0,
-                                resource: {
-                                    buffer: this.renderInfo.uniformBuffer
-                                }
-                            },
-                            {
-                                binding: 1,
-                                resource: {
-                                    buffer: buf
-                                }
-                            }
-                        ]
-                    });
-                    passEncoder.setBindGroup(0, uniformBindGroup);
+            if (this.renderInfo) {
+                let instanceBuffer;
+                if (obj.isInstance) {
+                    instances = obj.getNumInstances();
+                    instanceBuffer = obj.getMatrixBuffer(device);
                 }
+                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) => ({
@@ -532,12 +573,12 @@ export class Simulation {
                 });
                 passEncoder.setBindGroup(1, bindGroup);
             }
-            passEncoder.setVertexBuffer(0, vertexBuffer, currentOffset, buffer.byteLength);
+            // TODO maybe switch to drawIndexed
             passEncoder.draw(vertexCount, instances, 0, 0);
             currentOffset += buffer.byteLength;
         }
         for (let i = toRemove.length - 1; i >= 0; i--) {
-            removeObject(scene, scene[i].getObj());
+            this.remove(scene[i].getObj());
         }
         return currentOffset - startOffset;
     }
@@ -553,189 +594,17 @@ export class Simulation {
         }
     }
 }
-export class SceneCollection extends SimulationElement3d {
-    geometry;
-    name;
-    scene;
-    device = null;
-    constructor(name) {
-        super(vector3());
-        this.wireframe = false;
-        this.name = name || null;
-        this.scene = [];
-        this.geometry = new BlankGeometry();
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    setWireframe(_) { }
-    getName() {
-        return this.name;
-    }
-    getScene() {
-        return this.scene;
-    }
-    setDevice(device) {
-        this.device = device;
-        this.propagateDevice(device);
-    }
-    propagateDevice(device) {
-        for (let i = 0; i < this.scene.length; i++) {
-            const el = this.scene[i].getObj();
-            if (el instanceof Instance || el instanceof SceneCollection) {
-                el.setDevice(device);
-            }
-        }
-    }
-    getVertexCount() {
-        let total = 0;
-        for (let i = 0; i < this.scene.length; i++) {
-            total += this.scene[i].getObj().getVertexCount();
-        }
-        return total;
-    }
-    getSceneObjects() {
-        return this.scene.map((item) => item.getObj());
-    }
-    setSceneObjects(newScene) {
-        this.scene = toSceneObjInfoMany(newScene);
-    }
-    setScene(newScene) {
-        this.scene = newScene;
-    }
-    add(el, id) {
-        addObject(this.scene, el, this.device, id);
-    }
-    remove(el) {
-        removeObject(this.scene, el);
-    }
-    removeId(id) {
-        removeObjectId(this.scene, id);
-    }
-    /**
-     * @param lifetime - ms
-     */
-    setLifetime(el, lifetime) {
-        for (let i = 0; i < this.scene.length; i++) {
-            if (this.scene[i].getObj() === el)
-                this.scene[i].setLifetime(lifetime);
-        }
-    }
-    empty() {
-        this.scene = [];
-    }
-    getSceneBuffer(camera) {
-        return this.scene.map((item) => item.getObj().getBuffer(camera)).flat();
-    }
-    // TODO - improve
-    getWireframe(camera) {
-        return this.getSceneBuffer(camera);
-    }
-    // TODO - improve
-    getTriangles(camera) {
-        return this.getSceneBuffer(camera);
-    }
-    updateMatrix(camera) {
-        this.defaultUpdateMatrix(camera);
-    }
-}
-export class Camera {
-    pos;
-    rotation;
-    aspectRatio = 1;
-    updated;
-    screenSize = vector2();
-    constructor(pos, rotation = vector3()) {
-        this.pos = pos;
-        this.updated = false;
-        this.rotation = rotation;
-    }
-    setScreenSize(size) {
-        this.screenSize = size;
-        this.aspectRatio = size[0] / size[1];
-        this.updated = true;
-    }
-    getScreenSize() {
-        return this.screenSize;
-    }
-    hasUpdated() {
-        return this.updated;
-    }
-    updateConsumed() {
-        this.updated = false;
-    }
-    move(amount, t = 0, f) {
-        const initial = vector3();
-        vec3.clone(this.pos, initial);
-        return transitionValues((p) => {
-            const x = amount[0] * p;
-            const y = amount[1] * p;
-            const z = amount[2] * p;
-            const diff = vector3(x, y, z);
-            vec3.add(this.pos, diff, this.pos);
-        }, () => {
-            vec3.add(initial, amount, this.pos);
-        }, t, f);
-    }
-    moveTo(pos, t = 0, f) {
-        const diff = vector3();
-        vec3.sub(pos, this.pos, diff);
-        return transitionValues((p) => {
-            const x = diff[0] * p;
-            const y = diff[1] * p;
-            const z = diff[2] * p;
-            const amount = vector3(x, y, z);
-            vec3.add(this.pos, amount, this.pos);
-        }, () => {
-            vec3.clone(pos, this.pos);
-        }, t, f);
-    }
-    rotateTo(value, t = 0, f) {
-        const diff = vec3.clone(value);
-        vec3.sub(diff, diff, this.rotation);
-        return transitionValues((p) => {
-            const x = diff[0] * p;
-            const y = diff[1] * p;
-            const z = diff[2] * p;
-            vec3.add(this.rotation, this.rotation, vector3(x, y, z));
-            this.updated = true;
-        }, () => {
-            this.rotation = value;
-        }, t, f);
-    }
-    rotate(amount, t = 0, f) {
-        const initial = vector3();
-        vec3.clone(this.rotation, initial);
-        return transitionValues((p) => {
-            const x = amount[0] * p;
-            const y = amount[1] * p;
-            const z = amount[2] * p;
-            vec3.add(this.rotation, vector3(x, y, z), this.rotation);
-            this.updated = true;
-        }, () => {
-            vec3.add(initial, amount, this.rotation);
-        }, t, f);
-    }
-    getRotation() {
-        return this.rotation;
-    }
-    getPos() {
-        return this.pos;
-    }
-    getAspectRatio() {
-        return this.aspectRatio;
-    }
-}
 const defaultShaderCode = `
 struct Uniforms {
-  modelViewProjectionMatrix : mat4x4<f32>,
-  orthoProjectionMatrix : mat4x4<f32>
+  worldProjectionMatrix: mat4x4<f32>,
+  modelProjectionMatrix: mat4x4<f32>,
 }
  
-@group(0) @binding(0) var<uniform> uniforms : Uniforms;
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
 
-@group(0) @binding(1) var<storage, read> instanceMatrices : array<mat4x4f>;
+@group(0) @binding(1) var<storage> instanceMatrices: array<mat4x4f>;
 `;
-export class ShaderGroup extends SceneCollection {
-    geometry;
+export class ShaderGroup extends EmptyElement {
     code;
     module;
     pipeline;
@@ -758,28 +627,10 @@ export class ShaderGroup extends SceneCollection {
         this.vertexParams = vertexParams;
         this.valueBuffers = null;
     }
-    propagateDevice(device) {
-        super.propagateDevice(device);
+    onDeviceChange(device) {
         this.module = device.createShaderModule({ code: this.code });
         const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-        const bindGroupLayout = device.createBindGroupLayout({
-            entries: [
-                {
-                    binding: 0,
-                    visibility: GPUShaderStage.VERTEX,
-                    buffer: {
-                        type: 'uniform'
-                    }
-                },
-                {
-                    binding: 1,
-                    visibility: GPUShaderStage.VERTEX,
-                    buffer: {
-                        type: 'read-only-storage'
-                    }
-                }
-            ]
-        });
+        const bindGroupLayout = device.createBindGroupLayout(baseBindGroupLayout);
         const bindGroups = [bindGroupLayout];
         if (this.bindGroup !== null) {
             const entryValues = this.bindGroup.bindings.map((binding, index) => ({
@@ -792,7 +643,7 @@ export class ShaderGroup extends SceneCollection {
             });
             bindGroups.push(this.bindGroupLayout);
         }
-        this.pipeline = createPipeline(device, this.module, bindGroups, presentationFormat, 'vertex_main_2d', this.topology, this.vertexParams);
+        this.pipeline = createPipeline(device, this.module, bindGroups, presentationFormat, this.topology, this.vertexParams);
     }
     getBindGroupLayout() {
         return this.bindGroupLayout;
@@ -800,16 +651,16 @@ export class ShaderGroup extends SceneCollection {
     getPipeline() {
         return this.pipeline;
     }
-    getBindGroupBuffers() {
+    getBindGroupBuffers(device) {
         if (this.bindGroup === null)
             return null;
-        if (this.device === 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(this.device, values[i]);
+                const buffer = this.createBuffer(device, values[i]);
                 this.valueBuffers.push(buffer);
             }
         }
@@ -818,12 +669,12 @@ export class ShaderGroup extends SceneCollection {
                 const arrayConstructor = values[i].array;
                 const array = new arrayConstructor(values[i].value);
                 if (array.byteLength > this.valueBuffers[i].size) {
-                    const newBuffer = this.createBuffer(this.device, values[i]);
+                    const newBuffer = this.createBuffer(device, values[i]);
                     this.valueBuffers[i].destroy();
                     this.valueBuffers[i] = newBuffer;
                 }
                 else {
-                    this.device.queue.writeBuffer(this.valueBuffers[i], 0, array.buffer, array.byteOffset, array.byteLength);
+                    device.queue.writeBuffer(this.valueBuffers[i], 0, array.buffer, array.byteOffset, array.byteLength);
                 }
             }
         }
@@ -842,9 +693,6 @@ export class ShaderGroup extends SceneCollection {
         buffer.unmap();
         return buffer;
     }
-    updateMatrix(camera) {
-        this.defaultUpdateMatrix(camera);
-    }
     getVertexParamGenerator() {
         return this.paramGenerator;
     }