matrix-engine-wgpu 1.0.2 → 1.0.4

package/public/app.js

@@ -1,53 +1,68 @@
 (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 "use strict";
 
-var _meWGPU = _interopRequireDefault(require("./src/meWGPU"));
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.application = void 0;
+var _world = _interopRequireDefault(require("./src/world.js"));
+var _loaderObj = require("./src/engine/loader-obj.js");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-let application = new _meWGPU.default({
-  useSingleRenderPass: false
+let application = exports.application = new _world.default({
+  useSingleRenderPass: false,
+  canvasSize: 'fullscreen'
 }, () => {
-  let c = {
-    position: {
-      x: -3,
-      y: 0,
-      z: -5
-    },
-    rotation: {
-      x: 0,
-      y: 45,
-      z: 0
-    },
-    rotationSpeed: {
-      x: 0,
-      y: 0,
-      z: 0
-    },
-    texturesPaths: ['./res/textures/rust.jpg']
-  };
-  let o = {
-    position: {
-      x: 3,
-      y: 0,
-      z: -10
-    },
-    rotation: {
-      x: 0,
-      y: 45,
-      z: 0
-    },
-    rotationSpeed: {
-      x: 0,
-      y: 10,
-      z: 0
-    },
-    texturesPaths: ['./res/textures/rust.jpg']
-  };
-  application.addBall(o);
-  application.addCube(c);
+  function onLoadObj(m) {
+    console.log('Loaded objs:', m);
+    application.addMeshObj({
+      position: {
+        x: -3,
+        y: 0,
+        z: -5
+      },
+      rotation: {
+        x: 0,
+        y: 0,
+        z: 0
+      },
+      rotationSpeed: {
+        x: 0,
+        y: 10,
+        z: 0
+      },
+      texturesPaths: ['./res/meshes/obj/armor.png'],
+      name: 'Armor',
+      mesh: m.armor
+    });
+    application.addMeshObj({
+      position: {
+        x: 3,
+        y: 0,
+        z: -5
+      },
+      rotation: {
+        x: -90,
+        y: 0,
+        z: 0
+      },
+      rotationSpeed: {
+        x: 0,
+        y: 0,
+        z: 0
+      },
+      texturesPaths: ['./res/meshes/obj/armor.png'],
+      name: 'MyText',
+      mesh: m.welcomeText
+    });
+  }
+  (0, _loaderObj.downloadMeshes)({
+    welcomeText: "./res/meshes/blender/piramyd.obj",
+    armor: "./res/meshes/obj/armor.obj"
+  }, onLoadObj);
 });
 window.app = application;
 
-},{"./src/meWGPU":6}],2:[function(require,module,exports){
+},{"./src/engine/loader-obj.js":6,"./src/world.js":15}],2:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -5404,10 +5419,23 @@ exports.default = void 0;
 var _shaders = require("../shaders/shaders");
 var _wgpuMatrix = require("wgpu-matrix");
 var _matrixClass = require("./matrix-class");
+var _engine = require("./engine");
 class MEBall {
   constructor(canvas, device, context, o) {
     this.context = context;
     this.device = device;
+
+    // The input handler
+    this.inputHandler = (0, _engine.createInputHandler)(window, canvas);
+    this.cameras = o.cameras;
+    this.scale = o.scale;
+    console.log('passed : o.mainCameraParams.responseCoef ', o.mainCameraParams.responseCoef);
+    this.cameraParams = {
+      type: o.mainCameraParams.type,
+      responseCoef: o.mainCameraParams.responseCoef
+    }; // |  WASD 'arcball' };
+
+    this.lastFrameMS = 0;
     this.entityArgPass = o.entityArgPass;
     this.SphereLayout = {
       vertexStride: 8 * 4,
@@ -5425,7 +5453,7 @@ class MEBall {
     this.rotation.rotationSpeed.y = o.rotationSpeed.y;
     this.rotation.rotationSpeed.z = o.rotationSpeed.z;
     this.shaderModule = device.createShaderModule({
-      code: _shaders.BALL_SHADER
+      code: _shaders.UNLIT_SHADER
     });
     this.presentationFormat = navigator.gpu.getPreferredCanvasFormat();
     this.pipeline = device.createRenderPipeline({
@@ -5495,7 +5523,6 @@ class MEBall {
     };
     this.loadTex0(this.texturesPaths, device).then(() => {
       this.loadTex1(device).then(() => {
-        console.log('NICE THIS', this);
         this.sampler = device.createSampler({
           magFilter: 'linear',
           minFilter: 'linear'
@@ -5504,9 +5531,9 @@ class MEBall {
         _wgpuMatrix.mat4.identity(this.transform);
 
         // Create one large central planet surrounded by a large ring of asteroids
-        this.planet = this.createSphereRenderable(1.0);
+        this.planet = this.createGeometry(this.scale);
         this.planet.bindGroup = this.createSphereBindGroup(this.texture0, this.transform);
-        var asteroids = [this.createSphereRenderable(0.2, 8, 6, 0.15), this.createSphereRenderable(0.13, 8, 6, 0.15)];
+        var asteroids = [this.createGeometry(12, 8, 6, 0.15)];
         this.renderables = [this.planet];
 
         // this.ensureEnoughAsteroids(asteroids, this.transform);
@@ -5585,7 +5612,7 @@ class MEBall {
     this.renderScene(renderBundleEncoder);
     this.renderBundle = renderBundleEncoder.finish();
   }
-  createSphereRenderable(radius, widthSegments = 8, heightSegments = 4, randomness = 0) {
+  createGeometry(radius, widthSegments = 8, heightSegments = 4, randomness = 0) {
     const sphereMesh = this.createSphereMesh(radius, widthSegments, heightSegments, randomness);
     // Create a vertex buffer from the sphere data.
     const vertices = this.device.createBuffer({
@@ -5635,9 +5662,15 @@ class MEBall {
     return bindGroup;
   }
   getTransformationMatrix(pos) {
-    const viewMatrix = _wgpuMatrix.mat4.identity();
+    // const viewMatrix = mat4.identity();
+    const now = Date.now();
+    const deltaTime = (now - this.lastFrameMS) / this.cameraParams.responseCoef;
+    this.lastFrameMS = now;
+
+    // const viewMatrix = mat4.identity(); ORI
+    const camera = this.cameras[this.cameraParams.type];
+    const viewMatrix = camera.update(deltaTime, this.inputHandler());
     _wgpuMatrix.mat4.translate(viewMatrix, _wgpuMatrix.vec3.fromValues(pos.x, pos.y, pos.z), viewMatrix);
-    const now = Date.now() / 1000;
     _wgpuMatrix.mat4.rotateX(viewMatrix, Math.PI * this.rotation.getRotX(), viewMatrix);
     _wgpuMatrix.mat4.rotateY(viewMatrix, Math.PI * this.rotation.getRotY(), viewMatrix);
     _wgpuMatrix.mat4.rotateZ(viewMatrix, Math.PI * this.rotation.getRotZ(), viewMatrix);
@@ -5783,7 +5816,7 @@ class MEBall {
 }
 exports.default = MEBall;
 
-},{"../shaders/shaders":7,"./matrix-class":5,"wgpu-matrix":2}],4:[function(require,module,exports){
+},{"../shaders/shaders":12,"./engine":5,"./matrix-class":7,"wgpu-matrix":2}],4:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -5793,6 +5826,7 @@ exports.default = void 0;
 var _shaders = require("../shaders/shaders");
 var _wgpuMatrix = require("wgpu-matrix");
 var _matrixClass = require("./matrix-class");
+var _engine = require("./engine");
 var SphereLayout = {
   vertexStride: 8 * 4,
   positionsOffset: 0,
@@ -5804,9 +5838,17 @@ class MECube {
     this.device = device;
     this.context = context;
     this.entityArgPass = o.entityArgPass;
-    console.log('passed args', o.entityArgPass);
+    this.inputHandler = (0, _engine.createInputHandler)(window, canvas);
+    this.cameras = o.cameras;
+    console.log('passed : o.mainCameraParams.responseCoef ', o.mainCameraParams.responseCoef);
+    this.cameraParams = {
+      type: o.mainCameraParams.type,
+      responseCoef: o.mainCameraParams.responseCoef
+    }; // |  WASD 'arcball' };
+
+    this.lastFrameMS = 0;
     this.shaderModule = device.createShaderModule({
-      code: _shaders.BALL_SHADER
+      code: _shaders.UNLIT_SHADER
     });
     this.texturesPaths = [];
     o.texturesPaths.forEach(t => {
@@ -5814,10 +5856,12 @@ class MECube {
     });
     this.presentationFormat = navigator.gpu.getPreferredCanvasFormat();
     this.position = new _matrixClass.Position(o.position.x, o.position.y, o.position.z);
+    console.log('cube added on pos : ', this.position);
     this.rotation = new _matrixClass.Rotation(o.rotation.x, o.rotation.y, o.rotation.z);
     this.rotation.rotationSpeed.x = o.rotationSpeed.x;
     this.rotation.rotationSpeed.y = o.rotationSpeed.y;
     this.rotation.rotationSpeed.z = o.rotationSpeed.z;
+    this.scale = o.scale;
     this.pipeline = device.createRenderPipeline({
       layout: 'auto',
       vertex: {
@@ -5896,9 +5940,16 @@ class MECube {
         _wgpuMatrix.mat4.identity(this.transform);
 
         // Create one large central planet surrounded by a large ring of asteroids
-        this.planet = this.createSphereRenderable(1.0);
+        this.planet = this.createGeometry({
+          scale: this.scale,
+          useUVShema4x2: false
+        });
         this.planet.bindGroup = this.createSphereBindGroup(this.texture0, this.transform);
-        var asteroids = [this.createSphereRenderable(0.2, 8, 6, 0.15), this.createSphereRenderable(0.13, 8, 6, 0.15)];
+
+        // can be used like instance draws
+        var asteroids = [
+          // this.createGeometry(0.2, 8, 6, 0.15),
+        ];
         this.renderables = [this.planet];
         // this.ensureEnoughAsteroids(asteroids, this.transform);
         this.renderPassDescriptor = {
@@ -5921,7 +5972,7 @@ class MECube {
           }
         };
         const aspect = canvas.width / canvas.height;
-        this.projectionMatrix = _wgpuMatrix.mat4.perspective(2 * Math.PI / 5, aspect, 1, 100.0);
+        this.projectionMatrix = _wgpuMatrix.mat4.perspective(2 * Math.PI / 5, aspect, 1, 1000.0);
         this.modelViewProjectionMatrix = _wgpuMatrix.mat4.create();
         this.frameBindGroup = device.createBindGroup({
           layout: this.pipeline.getBindGroupLayout(0),
@@ -5976,27 +6027,27 @@ class MECube {
     this.renderScene(renderBundleEncoder);
     this.renderBundle = renderBundleEncoder.finish();
   }
-  createSphereRenderable(radius, widthSegments = 32, heightSegments = 16, randomness = 0) {
-    const sphereMesh = this.createCubeVertices();
+  createGeometry(options) {
+    const mesh = this.createCubeVertices(options);
     // Create a vertex buffer from the sphere data.
     const vertices = this.device.createBuffer({
-      size: sphereMesh.vertices.byteLength,
+      size: mesh.vertices.byteLength,
       usage: GPUBufferUsage.VERTEX,
       mappedAtCreation: true
     });
-    new Float32Array(vertices.getMappedRange()).set(sphereMesh.vertices);
+    new Float32Array(vertices.getMappedRange()).set(mesh.vertices);
     vertices.unmap();
     const indices = this.device.createBuffer({
-      size: sphereMesh.indices.byteLength,
+      size: mesh.indices.byteLength,
       usage: GPUBufferUsage.INDEX,
       mappedAtCreation: true
     });
-    new Uint16Array(indices.getMappedRange()).set(sphereMesh.indices);
+    new Uint16Array(indices.getMappedRange()).set(mesh.indices);
     indices.unmap();
     return {
       vertices,
       indices,
-      indexCount: sphereMesh.indices.length
+      indexCount: mesh.indices.length
     };
   }
   createSphereBindGroup(texture, transform) {
@@ -6026,9 +6077,13 @@ class MECube {
     return bindGroup;
   }
   getTransformationMatrix(pos) {
-    // const now = Date.now() / 1000;
+    const now = Date.now();
+    const deltaTime = (now - this.lastFrameMS) / this.cameraParams.responseCoef;
+    this.lastFrameMS = now;
 
-    const viewMatrix = _wgpuMatrix.mat4.identity();
+    // const viewMatrix = mat4.identity(); ORI
+    const camera = this.cameras[this.cameraParams.type];
+    const viewMatrix = camera.update(deltaTime, this.inputHandler());
     _wgpuMatrix.mat4.translate(viewMatrix, _wgpuMatrix.vec3.fromValues(pos.x, pos.y, pos.z), viewMatrix);
     _wgpuMatrix.mat4.rotateX(viewMatrix, Math.PI * this.rotation.getRotX(), viewMatrix);
     _wgpuMatrix.mat4.rotateY(viewMatrix, Math.PI * this.rotation.getRotY(), viewMatrix);
@@ -6105,6 +6160,7 @@ class MECube {
         useUVShema4x2: false
       };
     }
+    if (typeof options.scale === 'undefined') options.scale = 1;
     let vertices;
     if (options.useUVShema4x2 == true) {
       vertices = new Float32Array([
@@ -6124,20 +6180,20 @@ class MECube {
       -1, 1, 1, 1, 0, 0, 0.5, 0.5, 1, 1, 1, 1, 0, 0, 0.75, 0.5, -1, 1, -1, 1, 0, 0, 0.5, 1, 1, 1, -1, 1, 0, 0, 0.75, 1]);
     } else {
       vertices = new Float32Array([
-      //  position   |  texture coordinate
-      //-------------+----------------------
+      //  position                                                   |  texture coordinate
+      //-------------                                              +----------------------
       // front face     select the top left image  1, 0.5,   
-      -1, 1, 1, 1, 0, 0, 0, 0, -1, -1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 0, 1, -1, 1, 1, 0, 0, 1, 1,
+      -1 * options.scale, 1 * options.scale, 1 * options.scale, 1, 0, 0, 0, 0, -1 * options.scale, -1 * options.scale, 1 * options.scale, 1, 0, 0, 0, 1, 1 * options.scale, 1 * options.scale, 1 * options.scale, 1, 0, 0, 1, 0, 1 * options.scale, -1 * options.scale, 1 * options.scale, 1, 0, 0, 1, 1,
       // right face     select the top middle image
-      1, 1, -1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 1, -1, -1, 1, 0, 0, 1, 0, 1, -1, 1, 1, 0, 0, 1, 1,
+      1 * options.scale, 1 * options.scale, -1 * options.scale, 1, 0, 0, 0, 0, 1 * options.scale, 1 * options.scale, 1 * options.scale, 1, 0, 0, 0, 1, 1 * options.scale, -1 * options.scale, -1 * options.scale, 1, 0, 0, 1, 0, 1 * options.scale, -1 * options.scale, 1 * options.scale, 1, 0, 0, 1, 1,
       // back face      select to top right image
-      1, 1, -1, 1, 0, 0, 0, 0, 1, -1, -1, 1, 0, 0, 0, 1, -1, 1, -1, 1, 0, 0, 1, 0, -1, -1, -1, 1, 0, 0, 1, 1,
+      1 * options.scale, 1 * options.scale, -1 * options.scale, 1, 0, 0, 0, 0, 1 * options.scale, -1 * options.scale, -1 * options.scale, 1, 0, 0, 0, 1, -1 * options.scale, 1 * options.scale, -1 * options.scale, 1, 0, 0, 1, 0, -1 * options.scale, -1 * options.scale, -1 * options.scale, 1, 0, 0, 1, 1,
       // left face       select the bottom left image
-      -1, 1, 1, 1, 0, 0, 0, 0, -1, 1, -1, 1, 0, 0, 0, 1, -1, -1, 1, 1, 0, 0, 1, 0, -1, -1, -1, 1, 0, 0, 1, 1,
+      -1 * options.scale, 1 * options.scale, 1 * options.scale, 1, 0, 0, 0, 0, -1 * options.scale, 1 * options.scale, -1 * options.scale, 1, 0, 0, 0, 1, -1 * options.scale, -1 * options.scale, 1 * options.scale, 1, 0, 0, 1, 0, -1 * options.scale, -1 * options.scale, -1 * options.scale, 1, 0, 0, 1, 1,
       // bottom face     select the bottom middle image
-      1, -1, 1, 1, 0, 0, 0, 0, -1, -1, 1, 1, 0, 0, 0, 1, 1, -1, -1, 1, 0, 0, 1, 0, -1, -1, -1, 1, 0, 0, 1, 1,
+      1 * options.scale, -1 * options.scale, 1 * options.scale, 1, 0, 0, 0, 0, -1 * options.scale, -1 * options.scale, 1 * options.scale, 1, 0, 0, 0, 1, 1 * options.scale, -1 * options.scale, -1 * options.scale, 1, 0, 0, 1, 0, -1 * options.scale, -1 * options.scale, -1 * options.scale, 1, 0, 0, 1, 1,
       // top face        select the bottom right image
-      -1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, -1, 1, -1, 1, 0, 0, 1, 0, 1, 1, -1, 1, 0, 0, 1, 1]);
+      -1 * options.scale, 1 * options.scale, 1 * options.scale, 1, 0, 0, 0, 0, 1 * options.scale, 1 * options.scale, 1 * options.scale, 1, 0, 0, 0, 1, -1 * options.scale, 1 * options.scale, -1 * options.scale, 1, 0, 0, 1, 0, 1 * options.scale, 1 * options.scale, -1 * options.scale, 1, 0, 0, 1, 1]);
     }
     const indices = new Uint16Array([0, 1, 2, 2, 1, 3,
     // front
@@ -6169,15 +6225,942 @@ class MECube {
 }
 exports.default = MECube;
 
-},{"../shaders/shaders":7,"./matrix-class":5,"wgpu-matrix":2}],5:[function(require,module,exports){
+},{"../shaders/shaders":12,"./engine":5,"./matrix-class":7,"wgpu-matrix":2}],5:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WASDCamera = exports.ArcballCamera = void 0;
+exports.createInputHandler = createInputHandler;
+var _wgpuMatrix = require("wgpu-matrix");
+// Note: The code in this file does not use the 'dst' output parameter of functions in the
+// 'wgpu-matrix' library, so produces many temporary vectors and matrices.
+// This is intentional, as this sample prefers readability over performance.
+
+// import Input from './input';
+
+// // Common interface for camera implementations
+// export default interface Camera {
+//   // update updates the camera using the user-input and returns the view matrix.
+//   update(delta_time: number, input: Input): Mat4;
+
+//   // The camera matrix.
+//   // This is the inverse of the view matrix.
+//   matrix: Mat4;
+//   // Alias to column vector 0 of the camera matrix.
+//   right: Vec4;
+//   // Alias to column vector 1 of the camera matrix.
+//   up: Vec4;
+//   // Alias to column vector 2 of the camera matrix.
+//   back: Vec4;
+//   // Alias to column vector 3 of the camera matrix.
+//   position: Vec4;
+// }
+
+// The common functionality between camera implementations
+class CameraBase {
+  // The camera matrix
+  matrix_ = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+
+  // The calculated view matrix readonly
+  view_ = _wgpuMatrix.mat4.create();
+
+  // Aliases to column vectors of the matrix
+  right_ = new Float32Array(this.matrix_.buffer, 4 * 0, 4);
+  up_ = new Float32Array(this.matrix_.buffer, 4 * 4, 4);
+  back_ = new Float32Array(this.matrix_.buffer, 4 * 8, 4);
+  position_ = new Float32Array(this.matrix_.buffer, 4 * 12, 4);
+
+  // Returns the camera matrix
+  get matrix() {
+    return this.matrix_;
+  }
+  // Assigns `mat` to the camera matrix
+  set matrix(mat) {
+    _wgpuMatrix.mat4.copy(mat, this.matrix_);
+  }
+
+  // Returns the camera view matrix
+  get view() {
+    return this.view_;
+  }
+  // Assigns `mat` to the camera view
+  set view(mat) {
+    _wgpuMatrix.mat4.copy(mat, this.view_);
+  }
+
+  // Returns column vector 0 of the camera matrix
+  get right() {
+    return this.right_;
+  }
+  // Assigns `vec` to the first 3 elements of column vector 0 of the camera matrix
+  set right(vec) {
+    _wgpuMatrix.vec3.copy(vec, this.right_);
+  }
+
+  // Returns column vector 1 of the camera matrix
+  get up() {
+    return this.up_;
+  }
+  // Assigns `vec` to the first 3 elements of column vector 1 of the camera matrix \ Vec3
+  set up(vec) {
+    _wgpuMatrix.vec3.copy(vec, this.up_);
+  }
+
+  // Returns column vector 2 of the camera matrix
+  get back() {
+    return this.back_;
+  }
+  // Assigns `vec` to the first 3 elements of column vector 2 of the camera matrix
+  set back(vec) {
+    _wgpuMatrix.vec3.copy(vec, this.back_);
+  }
+
+  // Returns column vector 3 of the camera matrix
+  get position() {
+    return this.position_;
+  }
+  // Assigns `vec` to the first 3 elements of column vector 3 of the camera matrix
+  set position(vec) {
+    _wgpuMatrix.vec3.copy(vec, this.position_);
+  }
+}
+
+// WASDCamera is a camera implementation that behaves similar to first-person-shooter PC games.
+class WASDCamera extends CameraBase {
+  // The camera absolute pitch angle
+  pitch = 0;
+  // The camera absolute yaw angle
+  yaw = 0;
+
+  // The movement veloicty readonly
+  velocity_ = _wgpuMatrix.vec3.create();
+
+  // Speed multiplier for camera movement
+  movementSpeed = 10;
+
+  // Speed multiplier for camera rotation
+  rotationSpeed = 1;
+
+  // Movement velocity drag coeffient [0 .. 1]
+  // 0: Continues forever
+  // 1: Instantly stops moving
+  frictionCoefficient = 0.99;
+
+  // Returns velocity vector
+  get velocity() {
+    return this.velocity_;
+  }
+  // Assigns `vec` to the velocity vector
+  set velocity(vec) {
+    _wgpuMatrix.vec3.copy(vec, this.velocity_);
+  }
+
+  // Construtor
+  constructor(options) {
+    super();
+    if (options && (options.position || options.target)) {
+      const position = options.position ?? _wgpuMatrix.vec3.create(0, 0, 0);
+      const target = options.target ?? _wgpuMatrix.vec3.create(0, 0, 0);
+      const forward = _wgpuMatrix.vec3.normalize(_wgpuMatrix.vec3.sub(target, position));
+      this.recalculateAngles(forward);
+      this.position = position;
+      console.log('camera postion:', position);
+    }
+  }
+
+  // Returns the camera matrix
+  get matrix() {
+    return super.matrix;
+  }
+
+  // Assigns `mat` to the camera matrix, and recalcuates the camera angles
+  set matrix(mat) {
+    super.matrix = mat;
+    this.recalculateAngles(this.back);
+  }
+  update(deltaTime, input) {
+    const sign = (positive, negative) => (positive ? 1 : 0) - (negative ? 1 : 0);
+
+    // Apply the delta rotation to the pitch and yaw angles
+    this.yaw -= input.analog.x * deltaTime * this.rotationSpeed;
+    this.pitch -= input.analog.y * deltaTime * this.rotationSpeed;
+
+    // Wrap yaw between [0° .. 360°], just to prevent large accumulation.
+    this.yaw = mod(this.yaw, Math.PI * 2);
+    // Clamp pitch between [-90° .. +90°] to prevent somersaults.
+    this.pitch = clamp(this.pitch, -Math.PI / 2, Math.PI / 2);
+
+    // Save the current position, as we're about to rebuild the camera matrix.
+    const position = _wgpuMatrix.vec3.copy(this.position);
+
+    // Reconstruct the camera's rotation, and store into the camera matrix.
+    super.matrix = _wgpuMatrix.mat4.rotateX(_wgpuMatrix.mat4.rotationY(this.yaw), this.pitch);
+
+    // Calculate the new target velocity
+    const digital = input.digital;
+    const deltaRight = sign(digital.right, digital.left);
+    const deltaUp = sign(digital.up, digital.down);
+    const targetVelocity = _wgpuMatrix.vec3.create();
+    const deltaBack = sign(digital.backward, digital.forward);
+    _wgpuMatrix.vec3.addScaled(targetVelocity, this.right, deltaRight, targetVelocity);
+    _wgpuMatrix.vec3.addScaled(targetVelocity, this.up, deltaUp, targetVelocity);
+    _wgpuMatrix.vec3.addScaled(targetVelocity, this.back, deltaBack, targetVelocity);
+    _wgpuMatrix.vec3.normalize(targetVelocity, targetVelocity);
+    _wgpuMatrix.vec3.mulScalar(targetVelocity, this.movementSpeed, targetVelocity);
+
+    // Mix new target velocity
+    this.velocity = lerp(targetVelocity, this.velocity, Math.pow(1 - this.frictionCoefficient, deltaTime));
+
+    // Integrate velocity to calculate new position
+    this.position = _wgpuMatrix.vec3.addScaled(position, this.velocity, deltaTime);
+
+    // Invert the camera matrix to build the view matrix
+    this.view = _wgpuMatrix.mat4.invert(this.matrix);
+    return this.view;
+  }
+
+  // Recalculates the yaw and pitch values from a directional vector
+  recalculateAngles(dir) {
+    this.yaw = Math.atan2(dir[0], dir[2]);
+    this.pitch = -Math.asin(dir[1]);
+  }
+}
+
+// ArcballCamera implements a basic orbiting camera around the world origin
+exports.WASDCamera = WASDCamera;
+class ArcballCamera extends CameraBase {
+  // The camera distance from the target
+  distance = 0;
+
+  // The current angular velocity
+  angularVelocity = 0;
+
+  // The current rotation axis
+  axis_ = _wgpuMatrix.vec3.create();
+
+  // Returns the rotation axis
+  get axis() {
+    return this.axis_;
+  }
+  // Assigns `vec` to the rotation axis
+  set axis(vec) {
+    _wgpuMatrix.vec3.copy(vec, this.axis_);
+  }
+
+  // Speed multiplier for camera rotation
+  rotationSpeed = 1;
+
+  // Speed multiplier for camera zoom
+  zoomSpeed = 0.1;
+
+  // Rotation velocity drag coeffient [0 .. 1]
+  // 0: Spins forever
+  // 1: Instantly stops spinning
+  frictionCoefficient = 0.999;
+
+  // Construtor
+  constructor(options) {
+    super();
+    if (options && options.position) {
+      this.position = options.position;
+      this.distance = _wgpuMatrix.vec3.len(this.position);
+      this.back = _wgpuMatrix.vec3.normalize(this.position);
+      this.recalcuateRight();
+      this.recalcuateUp();
+    }
+  }
+
+  // Returns the camera matrix
+  get matrix() {
+    return super.matrix;
+  }
+
+  // Assigns `mat` to the camera matrix, and recalcuates the distance
+  set matrix(mat) {
+    super.matrix = mat;
+    this.distance = _wgpuMatrix.vec3.len(this.position);
+  }
+  update(deltaTime, input) {
+    const epsilon = 0.0000001;
+    if (input.analog.touching) {
+      // Currently being dragged.
+      this.angularVelocity = 0;
+    } else {
+      // Dampen any existing angular velocity
+      this.angularVelocity *= Math.pow(1 - this.frictionCoefficient, deltaTime);
+    }
+
+    // Calculate the movement vector
+    const movement = _wgpuMatrix.vec3.create();
+    _wgpuMatrix.vec3.addScaled(movement, this.right, input.analog.x, movement);
+    _wgpuMatrix.vec3.addScaled(movement, this.up, -input.analog.y, movement);
+
+    // Cross the movement vector with the view direction to calculate the rotation axis x magnitude
+    const crossProduct = _wgpuMatrix.vec3.cross(movement, this.back);
+
+    // Calculate the magnitude of the drag
+    const magnitude = _wgpuMatrix.vec3.len(crossProduct);
+    if (magnitude > epsilon) {
+      // Normalize the crossProduct to get the rotation axis
+      this.axis = _wgpuMatrix.vec3.scale(crossProduct, 1 / magnitude);
+
+      // Remember the current angular velocity. This is used when the touch is released for a fling.
+      this.angularVelocity = magnitude * this.rotationSpeed;
+    }
+
+    // The rotation around this.axis to apply to the camera matrix this update
+    const rotationAngle = this.angularVelocity * deltaTime;
+    if (rotationAngle > epsilon) {
+      // Rotate the matrix around axis
+      // Note: The rotation is not done as a matrix-matrix multiply as the repeated multiplications
+      // will quickly introduce substantial error into the matrix.
+      this.back = _wgpuMatrix.vec3.normalize(rotate(this.back, this.axis, rotationAngle));
+      this.recalcuateRight();
+      this.recalcuateUp();
+    }
+
+    // recalculate `this.position` from `this.back` considering zoom
+    if (input.analog.zoom !== 0) {
+      this.distance *= 1 + input.analog.zoom * this.zoomSpeed;
+    }
+    this.position = _wgpuMatrix.vec3.scale(this.back, this.distance);
+
+    // Invert the camera matrix to build the view matrix
+    this.view = _wgpuMatrix.mat4.invert(this.matrix);
+    return this.view;
+  }
+
+  // Assigns `this.right` with the cross product of `this.up` and `this.back`
+  recalcuateRight() {
+    this.right = _wgpuMatrix.vec3.normalize(_wgpuMatrix.vec3.cross(this.up, this.back));
+  }
+
+  // Assigns `this.up` with the cross product of `this.back` and `this.right`
+  recalcuateUp() {
+    this.up = _wgpuMatrix.vec3.normalize(_wgpuMatrix.vec3.cross(this.back, this.right));
+  }
+}
+
+// Returns `x` clamped between [`min` .. `max`]
+exports.ArcballCamera = ArcballCamera;
+function clamp(x, min, max) {
+  return Math.min(Math.max(x, min), max);
+}
+
+// Returns `x` float-modulo `div`
+function mod(x, div) {
+  return x - Math.floor(Math.abs(x) / div) * div * Math.sign(x);
+}
+
+// Returns `vec` rotated `angle` radians around `axis`
+function rotate(vec, axis, angle) {
+  return _wgpuMatrix.vec3.transformMat4Upper3x3(vec, _wgpuMatrix.mat4.rotation(axis, angle));
+}
+
+// Returns the linear interpolation between 'a' and 'b' using 's'
+function lerp(a, b, s) {
+  return _wgpuMatrix.vec3.addScaled(a, _wgpuMatrix.vec3.sub(b, a), s);
+}
+
+// IMPUT 
+
+// // Input holds as snapshot of input state
+// export default interface Input {
+//   // Digital input (e.g keyboard state)
+//   readonly digital: {
+//     readonly forward: boolean;
+//     readonly backward: boolean;
+//     readonly left: boolean;
+//     readonly right: boolean;
+//     readonly up: boolean;
+//     readonly down: boolean;
+//   };
+//   // Analog input (e.g mouse, touchscreen)
+//   readonly analog: {
+//     readonly x: number;
+//     readonly y: number;
+//     readonly zoom: number;
+//     readonly touching: boolean;
+//   };
+// }
+
+// InputHandler is a function that when called, returns the current Input state.
+// export type InputHandler = () => Input;
+
+// createInputHandler returns an InputHandler by attaching event handlers to the window and canvas.
+function createInputHandler(window, canvas) {
+  let digital = {
+    forward: false,
+    backward: false,
+    left: false,
+    right: false,
+    up: false,
+    down: false
+  };
+  let analog = {
+    x: 0,
+    y: 0,
+    zoom: 0
+  };
+  let mouseDown = false;
+  const setDigital = (e, value) => {
+    switch (e.code) {
+      case 'KeyW':
+        digital.forward = value;
+        e.preventDefault();
+        e.stopPropagation();
+        break;
+      case 'KeyS':
+        digital.backward = value;
+        e.preventDefault();
+        e.stopPropagation();
+        break;
+      case 'KeyA':
+        digital.left = value;
+        e.preventDefault();
+        e.stopPropagation();
+        break;
+      case 'KeyD':
+        digital.right = value;
+        e.preventDefault();
+        e.stopPropagation();
+        break;
+      case 'Space':
+        digital.up = value;
+        e.preventDefault();
+        e.stopPropagation();
+        break;
+      case 'ShiftLeft':
+      case 'ControlLeft':
+      case 'KeyC':
+        digital.down = value;
+        e.preventDefault();
+        e.stopPropagation();
+        break;
+    }
+  };
+  window.addEventListener('keydown', e => setDigital(e, true));
+  window.addEventListener('keyup', e => setDigital(e, false));
+  canvas.style.touchAction = 'pinch-zoom';
+  canvas.addEventListener('pointerdown', () => {
+    mouseDown = true;
+  });
+  canvas.addEventListener('pointerup', () => {
+    mouseDown = false;
+  });
+  canvas.addEventListener('pointermove', e => {
+    mouseDown = e.pointerType == 'mouse' ? (e.buttons & 1) !== 0 : true;
+    if (mouseDown) {
+      // console.log('TEST ', analog)
+      analog.x += e.movementX / 10;
+      analog.y += e.movementY / 10;
+    }
+  });
+  canvas.addEventListener('wheel', e => {
+    mouseDown = (e.buttons & 1) !== 0;
+    if (mouseDown) {
+      // The scroll value varies substantially between user agents / browsers.
+      // Just use the sign.
+      analog.zoom += Math.sign(e.deltaY);
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }, {
+    passive: false
+  });
+  return () => {
+    const out = {
+      digital,
+      analog: {
+        x: analog.x,
+        y: analog.y,
+        zoom: analog.zoom,
+        touching: mouseDown
+      }
+    };
+    // Clear the analog values, as these accumulate.
+    analog.x = 0;
+    analog.y = 0;
+    analog.zoom = 0;
+    return out;
+  };
+}
+
+},{"wgpu-matrix":2}],6:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.makeObjSeqArg = exports.initMeshBuffers = exports.downloadMeshes = exports.constructMesh = void 0;
+exports.play = play;
+/**
+ * The main Mesh class. The constructor will parse through the OBJ file data
+ * and collect the vertex, vertex normal, texture, and face information. This
+ * information can then be used later on when creating your VBOs. See
+ * OBJ.initMeshBuffers for an example of how to use the newly created Mesh
+ *
+ * @class Mesh
+ * @constructor
+ *
+ * @param {String} objectData a string representation of an OBJ file with newlines preserved.
+ */
+
+class constructMesh {
+  constructor(objectData, inputArg) {
+    this.inputArg = inputArg;
+    this.objectData = objectData;
+    this.create(objectData, inputArg);
+    this.setScale = s => {
+      this.inputArg.scale = s;
+      this.create(this.objectData, this.inputArg);
+    };
+    this.updateBuffers = () => {
+      this.inputArg.scale = 1;
+      this.create(this.objectData, this.inputArg);
+    };
+  }
+  create = (objectData, inputArg, callback) => {
+    if (typeof callback === 'undefined') callback = function () {};
+    let initOrientation = [0, 1, 2];
+    /*
+      The OBJ file format does a sort of compression when saving a model in a
+      program like Blender. There are at least 3 sections (4 including textures)
+      within the file. Each line in a section begins with the same string:
+        * 'v': indicates vertex section
+        * 'vn': indicates vertex normal section
+        * 'f': indicates the faces section
+        * 'vt': indicates vertex texture section (if textures were used on the model)
+      Each of the above sections (except for the faces section) is a list/set of
+      unique vertices.
+      Each line of the faces section contains a list of
+      (vertex, [texture], normal) groups
+      Some examples:
+          // the texture index is optional, both formats are possible for models
+          // without a texture applied
+          f 1/25 18/46 12/31
+          f 1//25 18//46 12//31
+          // A 3 vertex face with texture indices
+          f 16/92/11 14/101/22 1/69/1
+          // A 4 vertex face
+          f 16/92/11 40/109/40 38/114/38 14/101/22
+      The first two lines are examples of a 3 vertex face without a texture applied.
+      The second is an example of a 3 vertex face with a texture applied.
+      The third is an example of a 4 vertex face. Note: a face can contain N
+      number of vertices.
+      Each number that appears in one of the groups is a 1-based index
+      corresponding to an item from the other sections (meaning that indexing
+      starts at one and *not* zero).
+      For example:
+          `f 16/92/11` is saying to
+            - take the 16th element from the [v] vertex array
+            - take the 92nd element from the [vt] texture array
+            - take the 11th element from the [vn] normal array
+          and together they make a unique vertex.
+      Using all 3+ unique Vertices from the face line will produce a polygon.
+      Now, you could just go through the OBJ file and create a new vertex for
+      each face line and WebGL will draw what appears to be the same model.
+      However, vertices will be overlapped and duplicated all over the place.
+      Consider a cube in 3D space centered about the origin and each side is
+      2 units long. The front face (with the positive Z-axis pointing towards
+      you) would have a Top Right vertex (looking orthogonal to its normal)
+      mapped at (1,1,1) The right face would have a Top Left vertex (looking
+      orthogonal to its normal) at (1,1,1) and the top face would have a Bottom
+      Right vertex (looking orthogonal to its normal) at (1,1,1). Each face
+      has a vertex at the same coordinates, however, three distinct vertices
+      will be drawn at the same spot.
+      To solve the issue of duplicate Vertices (the `(vertex, [texture], normal)`
+      groups), while iterating through the face lines, when a group is encountered
+      the whole group string ('16/92/11') is checked to see if it exists in the
+      packed.hashindices object, and if it doesn't, the indices it specifies
+      are used to look up each attribute in the corresponding attribute arrays
+      already created. The values are then copied to the corresponding unpacked
+      array (flattened to play nice with WebGL's ELEMENT_ARRAY_BUFFER indexing),
+      the group string is added to the hashindices set and the current unpacked
+      index is used as this hashindices value so that the group of elements can
+      be reused. The unpacked index is incremented. If the group string already
+      exists in the hashindices object, its corresponding value is the index of
+      that group and is appended to the unpacked indices array.
+      */
+    var verts = [],
+      vertNormals = [],
+      textures = [],
+      unpacked = {};
+    // unpacking stuff
+    unpacked.verts = [];
+    unpacked.norms = [];
+    unpacked.textures = [];
+    unpacked.hashindices = {};
+    unpacked.indices = [];
+    unpacked.index = 0;
+    // array of lines separated by the newline
+    var lines = objectData.split('\n');
+
+    // update swap orientation
+    if (inputArg.swap[0] !== null) {
+      swap(inputArg.swap[0], inputArg.swap[1], initOrientation);
+    }
+    var VERTEX_RE = /^v\s/;
+    var NORMAL_RE = /^vn\s/;
+    var TEXTURE_RE = /^vt\s/;
+    var FACE_RE = /^f\s/;
+    var WHITESPACE_RE = /\s+/;
+    for (var i = 0; i < lines.length; i++) {
+      var line = lines[i].trim();
+      var elements = line.split(WHITESPACE_RE);
+      elements.shift();
+      if (VERTEX_RE.test(line)) {
+        // if this is a vertex
+        verts.push.apply(verts, elements);
+      } else if (NORMAL_RE.test(line)) {
+        // if this is a vertex normal
+        vertNormals.push.apply(vertNormals, elements);
+      } else if (TEXTURE_RE.test(line)) {
+        // if this is a texture
+        textures.push.apply(textures, elements);
+      } else if (FACE_RE.test(line)) {
+        // if this is a face
+        /*
+          split this face into an array of vertex groups
+          for example:
+            f 16/92/11 14/101/22 1/69/1
+          becomes:
+            ['16/92/11', '14/101/22', '1/69/1'];
+          */
+        var quad = false;
+        for (var j = 0, eleLen = elements.length; j < eleLen; j++) {
+          // Triangulating quads
+          // quad: 'f v0/t0/vn0 v1/t1/vn1 v2/t2/vn2 v3/t3/vn3/'
+          // corresponding triangles:
+          //      'f v0/t0/vn0 v1/t1/vn1 v2/t2/vn2'
+          //      'f v2/t2/vn2 v3/t3/vn3 v0/t0/vn0'
+          if (j === 3 && !quad) {
+            // add v2/t2/vn2 in again before continuing to 3
+            j = 2;
+            quad = true;
+          }
+          if (elements[j] in unpacked.hashindices) {
+            unpacked.indices.push(unpacked.hashindices[elements[j]]);
+          } else {
+            /*
+                  Each element of the face line array is a vertex which has its
+                  attributes delimited by a forward slash. This will separate
+                  each attribute into another array:
+                      '19/92/11'
+                  becomes:
+                      vertex = ['19', '92', '11'];
+                  where
+                      vertex[0] is the vertex index
+                      vertex[1] is the texture index
+                      vertex[2] is the normal index
+                  Think of faces having Vertices which are comprised of the
+                  attributes location (v), texture (vt), and normal (vn).
+                  */
+            var vertex = elements[j].split('/');
+            /*
+                  The verts, textures, and vertNormals arrays each contain a
+                  flattend array of coordinates.
+                  Because it gets confusing by referring to vertex and then
+                  vertex (both are different in my descriptions) I will explain
+                  what's going on using the vertexNormals array:
+                  vertex[2] will contain the one-based index of the vertexNormals
+                  section (vn). One is subtracted from this index number to play
+                  nice with javascript's zero-based array indexing.
+                  Because vertexNormal is a flattened array of x, y, z values,
+                  simple pointer arithmetic is used to skip to the start of the
+                  vertexNormal, then the offset is added to get the correct
+                  component: +0 is x, +1 is y, +2 is z.
+                  This same process is repeated for verts and textures.
+                  */
+            // vertex position
+            unpacked.verts.push(+verts[(vertex[0] - 1) * 3 + initOrientation[0]] * inputArg.scale);
+            unpacked.verts.push(+verts[(vertex[0] - 1) * 3 + initOrientation[1]] * inputArg.scale);
+            unpacked.verts.push(+verts[(vertex[0] - 1) * 3 + initOrientation[2]] * inputArg.scale);
+
+            // vertex textures
+            if (textures.length) {
+              unpacked.textures.push(+textures[(vertex[1] - 1) * 2 + 0]);
+              unpacked.textures.push(+textures[(vertex[1] - 1) * 2 + 1]);
+            }
+            // vertex normals
+            unpacked.norms.push(+vertNormals[(vertex[2] - 1) * 3 + 0]);
+            unpacked.norms.push(+vertNormals[(vertex[2] - 1) * 3 + 1]);
+            unpacked.norms.push(+vertNormals[(vertex[2] - 1) * 3 + 2]);
+            // add the newly created vertex to the list of indices
+            unpacked.hashindices[elements[j]] = unpacked.index;
+            unpacked.indices.push(unpacked.index);
+            // increment the counter
+            unpacked.index += 1;
+          }
+          if (j === 3 && quad) {
+            // add v0/t0/vn0 onto the second triangle
+            unpacked.indices.push(unpacked.hashindices[elements[0]]);
+          }
+        }
+      }
+    }
+    this.vertices = unpacked.verts;
+    this.vertexNormals = unpacked.norms;
+    this.textures = unpacked.textures;
+    this.indices = unpacked.indices;
+    callback();
+    return this;
+  };
+}
+exports.constructMesh = constructMesh;
+var Ajax = function () {
+  // this is just a helper class to ease ajax calls
+  var _this = this;
+  this.xmlhttp = new XMLHttpRequest();
+  this.get = function (url, callback) {
+    _this.xmlhttp.onreadystatechange = function () {
+      if (_this.xmlhttp.readyState === 4) {
+        callback(_this.xmlhttp.responseText, _this.xmlhttp.status);
+      }
+    };
+    _this.xmlhttp.open('GET', url, true);
+    _this.xmlhttp.send();
+  };
+};
+
+/**
+ * Takes in an object of `mesh_name`, `'/url/to/OBJ/file'` pairs and a callback
+ * function. Each OBJ file will be ajaxed in and automatically converted to
+ * an OBJ.Mesh. When all files have successfully downloaded the callback
+ * function provided will be called and passed in an object containing
+ * the newly created meshes.
+ *
+ * **Note:** In order to use this function as a way to download meshes, a
+ * webserver of some sort must be used.
+ *
+ * @param {Object} nameAndURLs an object where the key is the name of the mesh and the value is the url to that mesh's OBJ file
+ *
+ * @param {Function} completionCallback should contain a function that will take one parameter: an object array where the keys will be the unique object name and the value will be a Mesh object
+ *
+ * @param {Object} meshes In case other meshes are loaded separately or if a previously declared variable is desired to be used, pass in a (possibly empty) json object of the pattern: { '<mesh_name>': OBJ.Mesh }
+ *
+ */
+var downloadMeshes = function (nameAndURLs, completionCallback, inputArg) {
+  // the total number of meshes. this is used to implement "blocking"
+  var semaphore = Object.keys(nameAndURLs).length;
+  // if error is true, an alert will given
+  var error = false;
+  // this is used to check if all meshes have been downloaded
+  // if meshes is supplied, then it will be populated, otherwise
+  // a new object is created. this will be passed into the completionCallback
+  if (typeof inputArg === 'undefined') {
+    var inputArg = {
+      scale: 1,
+      swap: [null]
+    };
+  }
+  if (typeof inputArg.scale === 'undefined') inputArg.scale = 0.1;
+  if (typeof inputArg.swap === 'undefined') inputArg.swap = [null];
+  var meshes = {};
+
+  // loop over the mesh_name,url key,value pairs
+  for (var mesh_name in nameAndURLs) {
+    if (nameAndURLs.hasOwnProperty(mesh_name)) {
+      new Ajax().get(nameAndURLs[mesh_name], function (name) {
+        return function (data, status) {
+          if (status === 200) {
+            meshes[name] = new constructMesh(data, inputArg);
+          } else {
+            error = true;
+            console.error('An error has occurred and the mesh "' + name + '" could not be downloaded.');
+          }
+          // the request has finished, decrement the counter
+          semaphore--;
+          if (semaphore === 0) {
+            if (error) {
+              // if an error has occurred, the user is notified here and the
+              // callback is not called
+              console.error('An error has occurred and one or meshes has not been ' + 'downloaded. The execution of the script has terminated.');
+              throw '';
+            }
+            // there haven't been any errors in retrieving the meshes
+            // call the callback
+            completionCallback(meshes);
+          }
+        };
+      }(mesh_name));
+    }
+  }
+};
+
+/**
+ * Takes in the WebGL context and a Mesh, then creates and appends the buffers
+ * to the mesh object as attributes.
+ *
+ * @param {WebGLRenderingContext} gl the `canvas.getContext('webgl')` context instance
+ * @param {Mesh} mesh a single `OBJ.Mesh` instance
+ *
+ * The newly created mesh attributes are:
+ *
+ * Attrbute | Description
+ * :--- | ---
+ * **normalBuffer**       |contains the model&#39;s Vertex Normals
+ * normalBuffer.itemSize  |set to 3 items
+ * normalBuffer.numItems  |the total number of vertex normals
+ * |
+ * **textureBuffer**      |contains the model&#39;s Texture Coordinates
+ * textureBuffer.itemSize |set to 2 items
+ * textureBuffer.numItems |the number of texture coordinates
+ * |
+ * **vertexBuffer**       |contains the model&#39;s Vertex Position Coordinates (does not include w)
+ * vertexBuffer.itemSize  |set to 3 items
+ * vertexBuffer.numItems  |the total number of vertices
+ * |
+ * **indexBuffer**        |contains the indices of the faces
+ * indexBuffer.itemSize   |is set to 1
+ * indexBuffer.numItems   |the total number of indices
+ *
+ * A simple example (a lot of steps are missing, so don't copy and paste):
+ *
+ *     var gl   = canvas.getContext('webgl'),
+ *         mesh = OBJ.Mesh(obj_file_data);
+ *     // compile the shaders and create a shader program
+ *     var shaderProgram = gl.createProgram();
+ *     // compilation stuff here
+ *     ...
+ *     // make sure you have vertex, vertex normal, and texture coordinate
+ *     // attributes located in your shaders and attach them to the shader program
+ *     shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
+ *     gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+ *
+ *     shaderProgram.vertexNormalAttribute = gl.getAttribLocation(shaderProgram, "aVertexNormal");
+ *     gl.enableVertexAttribArray(shaderProgram.vertexNormalAttribute);
+ *
+ *     shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
+ *     gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
+ *
+ *     // create and initialize the vertex, vertex normal, and texture coordinate buffers
+ *     // and save on to the mesh object
+ *     OBJ.initMeshBuffers(gl, mesh);
+ *
+ *     // now to render the mesh
+ *     gl.bindBuffer(gl.ARRAY_BUFFER, mesh.vertexBuffer);
+ *     gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, mesh.vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
+ *     // it's possible that the mesh doesn't contain
+ *     // any texture coordinates (e.g. suzanne.obj in the development branch).
+ *     // in this case, the texture vertexAttribArray will need to be disabled
+ *     // before the call to drawElements
+ *     if(!mesh.textures.length){
+ *       gl.disableVertexAttribArray(shaderProgram.textureCoordAttribute);
+ *     }
+ *     else{
+ *       // if the texture vertexAttribArray has been previously
+ *       // disabled, then it needs to be re-enabled
+ *       gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
+ *       gl.bindBuffer(gl.ARRAY_BUFFER, mesh.textureBuffer);
+ *       gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, mesh.textureBuffer.itemSize, gl.FLOAT, false, 0, 0);
+ *     }
+ *
+ *     gl.bindBuffer(gl.ARRAY_BUFFER, mesh.normalBuffer);
+ *     gl.vertexAttribPointer(shaderProgram.vertexNormalAttribute, mesh.normalBuffer.itemSize, gl.FLOAT, false, 0, 0);
+ *
+ *     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, model.mesh.indexBuffer);
+ *     gl.drawElements(gl.TRIANGLES, model.mesh.indexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
+ */
+exports.downloadMeshes = downloadMeshes;
+var initMeshBuffers = function (gl, mesh) {
+  // mesh.vertexNormals
+  // mesh.textures
+  // mesh.vertices
+  // mesh.indices
+};
+
+/**
+ * @description
+ * Construct sequence list argument for downloadMeshes.
+ * This is adaptation for blender obj animation export.
+ * For example:
+ *    matrixEngine.objLoader.downloadMeshes(
+      matrixEngine.objLoader.makeObjSeqArg(
+        {
+          id: objName,
+          joinMultiPahts: [
+            {
+              path: "res/bvh-skeletal-base/swat-guy/seq-walk/low/swat",
+              id: objName,
+              from: 1, to: 34
+            },
+            {
+              path: "res/bvh-skeletal-base/swat-guy/seq-walk-pistol/low/swat-walk-pistol",
+              id: objName,
+              from: 35, to: 54
+            }
+          ]
+        }),
+      onLoadObj
+    );
+ */
+exports.initMeshBuffers = initMeshBuffers;
+const makeObjSeqArg = arg => {
+  // Adaptation for blender (animation) obj exporter.
+  var local = {};
+  function localCalc(arg, noInitial = false) {
+    var zeros = '00000';
+    var l = {};
+    var helper = arg.from;
+    for (let j = arg.from, z = 1; j <= arg.to; j++) {
+      if (z > 9 && z < 99) {
+        zeros = '0000';
+      } else if (z > 99 && z < 999) {
+        zeros = '000';
+      } // no need more then 999
+
+      if (helper == arg.from && noInitial === false) {
+        l[arg.id] = arg.path + '_' + zeros + z + '.obj';
+      } else {
+        l[arg.id + (helper - 1)] = arg.path + '_' + zeros + z + '.obj';
+      }
+      helper++;
+      z++;
+    }
+    return l;
+  }
+  if (typeof arg.path === 'string') {
+    local = localCalc(arg);
+  } else if (typeof arg.path === 'undefined') {
+    if (typeof arg.joinMultiPahts !== 'undefined') {
+      console.log("ITS joinMultiPahts!");
+      var localFinal = {};
+      arg.joinMultiPahts.forEach((arg, index) => {
+        if (index === 0) {
+          localFinal = Object.assign(local, localCalc(arg));
+        } else {
+          localFinal = Object.assign(local, localCalc(arg, true));
+        }
+      });
+      console.log("joinMultiPahts LOCAL => ", localFinal);
+      return localFinal;
+    }
+  }
+  return local;
+};
+
+/**
+ * @description
+ * Switching obj seq animations frames range.
+ */
+exports.makeObjSeqArg = makeObjSeqArg;
+function play(nameAni) {
+  this.animation.anims.active = nameAni;
+  this.animation.currentAni = this.animation.anims[this.animation.anims.active].from;
+}
+
+},{}],7:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Rotation = exports.Position = void 0;
+var _utils = require("./utils");
 // Sub classes for matrix-wgpu
-
 /**
  * @description Base class
  * Position { x, y, z }
@@ -6344,7 +7327,7 @@ class Rotation {
   }
   getRotX() {
     if (this.rotationSpeed.x == 0) {
-      return this.x;
+      return (0, _utils.degToRad)(this.x);
     } else {
       this.x = this.x + this.rotationSpeed.x * 0.001;
       return this.x;
@@ -6352,7 +7335,7 @@ class Rotation {
   }
   getRotY() {
     if (this.rotationSpeed.y == 0) {
-      return this.y;
+      return (0, _utils.degToRad)(this.y);
     } else {
       this.y = this.y + this.rotationSpeed.y * 0.001;
       return this.y;
@@ -6360,7 +7343,7 @@ class Rotation {
   }
   getRotZ() {
     if (this.rotationSpeed.z == 0) {
-      return this.z;
+      return (0, _utils.degToRad)(this.z);
     } else {
       this.z = this.z + this.rotationSpeed.z * 0.001;
       return this.z;
@@ -6369,48 +7352,1492 @@ class Rotation {
 }
 exports.Rotation = Rotation;
 
-},{}],6:[function(require,module,exports){
+},{"./utils":10}],8:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _ball = _interopRequireDefault(require("./engine/ball.js"));
-var _cube = _interopRequireDefault(require("./engine/cube.js"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-class MatrixEngineWGPU {
-  mainRenderBundle = [];
-  rbContainer = [];
-  frame = () => {};
-  entityArgPass = {
-    loadOp: 'clear',
-    storeOp: 'store',
-    depthLoadOp: 'clear',
-    depthStoreOp: 'store'
-  };
-  constructor(options, callback) {
-    console.log('typeof options ', typeof options);
-    console.log('typeof options ', options);
-    if (typeof options == 'undefined' || typeof options == "function") {
-      this.options = {
-        useSingleRenderPass: true
-      };
-      callback = options;
-    }
-    this.options = options;
-    var canvas = document.createElement('canvas');
-    canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight;
-    document.body.append(canvas);
-    this.init({
-      canvas,
-      callback
-    });
-  }
-  init = async ({
-    canvas,
-    callback
+var _wgpuMatrix = require("wgpu-matrix");
+var _matrixClass = require("./matrix-class");
+var _engine = require("./engine");
+var _vertexShadow = require("../shaders/vertexShadow.wgsl");
+var _fragment = require("../shaders/fragment.wgsl");
+var _vertex = require("../shaders/vertex.wgsl");
+class MEMeshObj {
+  constructor(canvas, device, context, o) {
+    this.done = false;
+    this.device = device;
+    this.context = context;
+    this.entityArgPass = o.entityArgPass;
+
+    // Mesh stuff
+    this.mesh = o.mesh;
+    this.mesh.uvs = this.mesh.textures;
+    console.log('mesh obj: ', this.mesh);
+    this.inputHandler = (0, _engine.createInputHandler)(window, canvas);
+    this.cameras = o.cameras;
+    this.cameraParams = {
+      type: o.mainCameraParams.type,
+      responseCoef: o.mainCameraParams.responseCoef
+    };
+    this.lastFrameMS = 0;
+    this.texturesPaths = [];
+    o.texturesPaths.forEach(t => {
+      this.texturesPaths.push(t);
+    });
+    this.presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+    this.position = new _matrixClass.Position(o.position.x, o.position.y, o.position.z);
+    this.rotation = new _matrixClass.Rotation(o.rotation.x, o.rotation.y, o.rotation.z);
+    this.rotation.rotationSpeed.x = o.rotationSpeed.x;
+    this.rotation.rotationSpeed.y = o.rotationSpeed.y;
+    this.rotation.rotationSpeed.z = o.rotationSpeed.z;
+    this.scale = o.scale;
+    this.runProgram = () => {
+      return new Promise(async resolve => {
+        this.shadowDepthTextureSize = 1024;
+        const aspect = canvas.width / canvas.height;
+        this.projectionMatrix = _wgpuMatrix.mat4.perspective(2 * Math.PI / 5, aspect, 1, 2000.0);
+        this.modelViewProjectionMatrix = _wgpuMatrix.mat4.create();
+        // console.log('cube added texturesPaths: ', this.texturesPaths)
+        this.loadTex0(this.texturesPaths, device).then(() => {
+          console.log('loaded tex buffer for mesh:', this.texture0);
+          resolve();
+        });
+      });
+    };
+    this.runProgram().then(() => {
+      const aspect = canvas.width / canvas.height;
+      const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+      this.context.configure({
+        device: this.device,
+        format: presentationFormat,
+        alphaMode: 'premultiplied'
+      });
+
+      // Create the model vertex buffer.
+      this.vertexBuffer = this.device.createBuffer({
+        size: this.mesh.vertices.length * Float32Array.BYTES_PER_ELEMENT,
+        usage: GPUBufferUsage.VERTEX,
+        mappedAtCreation: true
+      });
+      {
+        // const mapping = new Float32Array(this.vertexBuffer.getMappedRange());
+        // // for(let i = 0;i < this.mesh.vertices.length;++i) {
+        // //   mapping.set(this.mesh.vertices[i], 6 * i);
+        // //   mapping.set(this.mesh.normals[i], 6 * i + 3);
+        // // }
+        // this.vertexBuffer.unmap();
+        new Float32Array(this.vertexBuffer.getMappedRange()).set(this.mesh.vertices);
+        this.vertexBuffer.unmap();
+      }
+
+      // NIDZA TEST SECOUND BUFFER
+      // Create the model vertex buffer.
+      this.vertexNormalsBuffer = this.device.createBuffer({
+        size: this.mesh.vertexNormals.length * Float32Array.BYTES_PER_ELEMENT,
+        usage: GPUBufferUsage.VERTEX,
+        mappedAtCreation: true
+      });
+      {
+        new Float32Array(this.vertexNormalsBuffer.getMappedRange()).set(this.mesh.vertexNormals);
+        this.vertexNormalsBuffer.unmap();
+      }
+      this.vertexTexCoordsBuffer = this.device.createBuffer({
+        size: this.mesh.textures.length * Float32Array.BYTES_PER_ELEMENT,
+        usage: GPUBufferUsage.VERTEX,
+        mappedAtCreation: true
+      });
+      {
+        new Float32Array(this.vertexTexCoordsBuffer.getMappedRange()).set(this.mesh.textures);
+        this.vertexTexCoordsBuffer.unmap();
+      }
+
+      // Create the model index buffer.
+      this.indexCount = this.mesh.indices.length;
+      this.indexBuffer = this.device.createBuffer({
+        size: this.indexCount * Uint16Array.BYTES_PER_ELEMENT,
+        usage: GPUBufferUsage.INDEX,
+        mappedAtCreation: true
+      });
+      {
+        // const mapping = new Uint16Array(this.indexBuffer.getMappedRange());
+        // for(let i = 0;i < this.mesh.indices.length;++i) {
+        //   mapping.set(this.mesh.indices[i], i);
+        // }
+        new Uint16Array(this.indexBuffer.getMappedRange()).set(this.mesh.indices);
+        this.indexBuffer.unmap();
+      }
+
+      // Create the depth texture for rendering/sampling the shadow map.
+      this.shadowDepthTexture = this.device.createTexture({
+        size: [this.shadowDepthTextureSize, this.shadowDepthTextureSize, 1],
+        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+        format: 'depth32float'
+      });
+      this.shadowDepthTextureView = this.shadowDepthTexture.createView();
+
+      // Create some common descriptors used for both the shadow pipeline
+      // and the color rendering pipeline.
+      this.vertexBuffers = [{
+        arrayStride: Float32Array.BYTES_PER_ELEMENT * 3,
+        attributes: [{
+          // position
+          shaderLocation: 0,
+          offset: 0,
+          format: "float32x3"
+        }]
+      }, {
+        arrayStride: Float32Array.BYTES_PER_ELEMENT * 3,
+        attributes: [{
+          // normal
+          shaderLocation: 1,
+          offset: 0,
+          format: "float32x3"
+        }]
+      }, {
+        arrayStride: Float32Array.BYTES_PER_ELEMENT * 2,
+        attributes: [{
+          // uvs
+          shaderLocation: 2,
+          offset: 0,
+          format: "float32x2"
+        }]
+      }];
+      const primitive = {
+        topology: 'triangle-list',
+        cullMode: 'back'
+      };
+      this.uniformBufferBindGroupLayout = this.device.createBindGroupLayout({
+        entries: [{
+          binding: 0,
+          visibility: GPUShaderStage.VERTEX,
+          buffer: {
+            type: 'uniform'
+          }
+        }]
+      });
+      this.shadowPipeline = this.device.createRenderPipeline({
+        layout: this.device.createPipelineLayout({
+          bindGroupLayouts: [this.uniformBufferBindGroupLayout, this.uniformBufferBindGroupLayout]
+        }),
+        vertex: {
+          module: this.device.createShaderModule({
+            code: _vertexShadow.vertexShadowWGSL
+          }),
+          buffers: this.vertexBuffers
+        },
+        depthStencil: {
+          depthWriteEnabled: true,
+          depthCompare: 'less',
+          format: 'depth32float'
+        },
+        primitive
+      });
+
+      // Create a bind group layout which holds the scene uniforms and
+      // the texture+sampler for depth. We create it manually because the WebPU
+      // implementation doesn't infer this from the shader (yet).
+      this.bglForRender = this.device.createBindGroupLayout({
+        entries: [{
+          binding: 0,
+          visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+          buffer: {
+            type: 'uniform'
+          }
+        }, {
+          binding: 1,
+          visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+          texture: {
+            sampleType: 'depth'
+          }
+        }, {
+          binding: 2,
+          visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+          sampler: {
+            type: 'comparison'
+          }
+        }, {
+          binding: 3,
+          visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+          texture: {
+            sampleType: 'float'
+          }
+        }, {
+          binding: 4,
+          visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+          sampler: {
+            type: 'filtering'
+          }
+        }]
+      });
+      this.pipeline = this.device.createRenderPipeline({
+        layout: this.device.createPipelineLayout({
+          bindGroupLayouts: [this.bglForRender, this.uniformBufferBindGroupLayout]
+        }),
+        vertex: {
+          module: this.device.createShaderModule({
+            code: _vertex.vertexWGSL
+          }),
+          buffers: this.vertexBuffers
+        },
+        fragment: {
+          module: this.device.createShaderModule({
+            code: _fragment.fragmentWGSL
+          }),
+          targets: [{
+            format: presentationFormat
+          }],
+          constants: {
+            shadowDepthTextureSize: this.shadowDepthTextureSize
+          }
+        },
+        depthStencil: {
+          depthWriteEnabled: true,
+          depthCompare: 'less',
+          format: 'depth24plus-stencil8'
+        },
+        primitive
+      });
+      const depthTexture = this.device.createTexture({
+        size: [canvas.width, canvas.height],
+        format: 'depth24plus-stencil8',
+        usage: GPUTextureUsage.RENDER_ATTACHMENT
+      });
+      this.renderPassDescriptor = {
+        colorAttachments: [{
+          // view is acquired and set in render loop.
+          view: undefined,
+          clearValue: {
+            r: 0.5,
+            g: 0.5,
+            b: 0.5,
+            a: 1.0
+          },
+          loadOp: 'load',
+          storeOp: 'store'
+        }],
+        depthStencilAttachment: {
+          view: depthTexture.createView(),
+          depthClearValue: 1.0,
+          depthLoadOp: 'clear',
+          depthStoreOp: 'store',
+          stencilClearValue: 0,
+          stencilLoadOp: 'clear',
+          stencilStoreOp: 'store'
+        }
+      };
+      this.modelUniformBuffer = this.device.createBuffer({
+        size: 4 * 16,
+        // 4x4 matrix
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+      });
+      this.sceneUniformBuffer = this.device.createBuffer({
+        // Two 4x4 viewProj matrices,
+        // one for the camera and one for the light.
+        // Then a vec3 for the light position.
+        // Rounded to the nearest multiple of 16.
+        size: 2 * 4 * 16 + 4 * 4,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+      });
+      this.sceneBindGroupForShadow = this.device.createBindGroup({
+        layout: this.uniformBufferBindGroupLayout,
+        entries: [{
+          binding: 0,
+          resource: {
+            buffer: this.sceneUniformBuffer
+          }
+        }]
+      });
+      this.sceneBindGroupForRender = this.device.createBindGroup({
+        layout: this.bglForRender,
+        entries: [{
+          binding: 0,
+          resource: {
+            buffer: this.sceneUniformBuffer
+          }
+        }, {
+          binding: 1,
+          resource: this.shadowDepthTextureView
+        }, {
+          binding: 2,
+          resource: this.device.createSampler({
+            compare: 'less'
+          })
+        }, {
+          binding: 3,
+          resource: this.texture0.createView()
+        }, {
+          binding: 4,
+          resource: this.sampler
+        }]
+      });
+      this.modelBindGroup = this.device.createBindGroup({
+        layout: this.uniformBufferBindGroupLayout,
+        entries: [{
+          binding: 0,
+          resource: {
+            buffer: this.modelUniformBuffer
+          }
+        }]
+      });
+
+      // Rotates the camera around the origin based on time.
+      this.getTransformationMatrix = pos => {
+        const now = Date.now();
+        const deltaTime = (now - this.lastFrameMS) / this.cameraParams.responseCoef;
+        this.lastFrameMS = now;
+
+        // const this.viewMatrix = mat4.identity()
+        const camera = this.cameras[this.cameraParams.type];
+        this.viewMatrix = camera.update(deltaTime, this.inputHandler());
+        _wgpuMatrix.mat4.translate(this.viewMatrix, _wgpuMatrix.vec3.fromValues(pos.x, pos.y, pos.z), this.viewMatrix);
+        _wgpuMatrix.mat4.rotateX(this.viewMatrix, Math.PI * this.rotation.getRotX(), this.viewMatrix);
+        _wgpuMatrix.mat4.rotateY(this.viewMatrix, Math.PI * this.rotation.getRotY(), this.viewMatrix);
+        _wgpuMatrix.mat4.rotateZ(this.viewMatrix, Math.PI * this.rotation.getRotZ(), this.viewMatrix);
+        _wgpuMatrix.mat4.multiply(this.projectionMatrix, this.viewMatrix, this.modelViewProjectionMatrix);
+        return this.modelViewProjectionMatrix;
+      };
+      this.upVector = _wgpuMatrix.vec3.fromValues(0, 1, 0);
+      this.origin = _wgpuMatrix.vec3.fromValues(0, 0, 0);
+      const lightPosition = _wgpuMatrix.vec3.fromValues(50, 100, -100);
+      const lightViewMatrix = _wgpuMatrix.mat4.lookAt(lightPosition, this.origin, this.upVector);
+      const lightProjectionMatrix = _wgpuMatrix.mat4.create();
+      {
+        const left = -80;
+        const right = 80;
+        const bottom = -80;
+        const top = 80;
+        const near = -200;
+        const far = 300;
+        _wgpuMatrix.mat4.ortho(left, right, bottom, top, near, far, lightProjectionMatrix);
+      }
+      const lightViewProjMatrix = _wgpuMatrix.mat4.multiply(lightProjectionMatrix, lightViewMatrix);
+
+      // looks like affect on transformations for now const 0
+      const modelMatrix = _wgpuMatrix.mat4.translation([0, 0, 0]);
+      // The camera/light aren't moving, so write them into buffers now.
+      {
+        const lightMatrixData = lightViewProjMatrix; // as Float32Array;
+        this.device.queue.writeBuffer(this.sceneUniformBuffer, 0, lightMatrixData.buffer, lightMatrixData.byteOffset, lightMatrixData.byteLength);
+        const lightData = lightPosition;
+        this.device.queue.writeBuffer(this.sceneUniformBuffer, 128, lightData.buffer, lightData.byteOffset, lightData.byteLength);
+        const modelData = modelMatrix;
+        this.device.queue.writeBuffer(this.modelUniformBuffer, 0, modelData.buffer, modelData.byteOffset, modelData.byteLength);
+      }
+      this.shadowPassDescriptor = {
+        colorAttachments: [],
+        depthStencilAttachment: {
+          view: this.shadowDepthTextureView,
+          depthClearValue: 1.0,
+          depthLoadOp: 'clear',
+          depthStoreOp: 'store'
+        }
+      };
+      this.done = true;
+    });
+  }
+  async loadTex0(texturesPaths, device) {
+    this.sampler = device.createSampler({
+      magFilter: 'linear',
+      minFilter: 'linear'
+    });
+    return new Promise(async resolve => {
+      const response = await fetch(texturesPaths[0]);
+      const imageBitmap = await createImageBitmap(await response.blob());
+      this.texture0 = device.createTexture({
+        size: [imageBitmap.width, imageBitmap.height, 1],
+        format: 'rgba8unorm',
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+      });
+      device.queue.copyExternalImageToTexture({
+        source: imageBitmap
+      }, {
+        texture: this.texture0
+      }, [imageBitmap.width, imageBitmap.height]);
+      resolve();
+    });
+  }
+  draw = commandEncoder => {
+    if (this.done == false) return;
+    const transformationMatrix = this.getTransformationMatrix(this.position);
+    this.device.queue.writeBuffer(this.sceneUniformBuffer, 64, transformationMatrix.buffer, transformationMatrix.byteOffset, transformationMatrix.byteLength);
+    this.renderPassDescriptor.colorAttachments[0].view = this.context.getCurrentTexture().createView();
+    {
+      const shadowPass = commandEncoder.beginRenderPass(this.shadowPassDescriptor);
+      shadowPass.setPipeline(this.shadowPipeline);
+      shadowPass.setBindGroup(0, this.sceneBindGroupForShadow);
+      shadowPass.setBindGroup(1, this.modelBindGroup);
+      shadowPass.setVertexBuffer(0, this.vertexBuffer);
+      shadowPass.setVertexBuffer(1, this.vertexNormalsBuffer);
+      shadowPass.setVertexBuffer(2, this.vertexTexCoordsBuffer);
+      shadowPass.setIndexBuffer(this.indexBuffer, 'uint16');
+      shadowPass.drawIndexed(this.indexCount);
+      shadowPass.end();
+    }
+    {
+      const renderPass = commandEncoder.beginRenderPass(this.renderPassDescriptor);
+      renderPass.setPipeline(this.pipeline);
+      renderPass.setBindGroup(0, this.sceneBindGroupForRender);
+      renderPass.setBindGroup(1, this.modelBindGroup);
+      renderPass.setVertexBuffer(0, this.vertexBuffer);
+      renderPass.setVertexBuffer(1, this.vertexNormalsBuffer);
+      renderPass.setVertexBuffer(2, this.vertexTexCoordsBuffer);
+      renderPass.setIndexBuffer(this.indexBuffer, 'uint16');
+      renderPass.drawIndexed(this.indexCount);
+      renderPass.end();
+    }
+  };
+}
+exports.default = MEMeshObj;
+
+},{"../shaders/fragment.wgsl":11,"../shaders/vertex.wgsl":13,"../shaders/vertexShadow.wgsl":14,"./engine":5,"./matrix-class":7,"wgpu-matrix":2}],9:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _wgpuMatrix = require("wgpu-matrix");
+var _matrixClass = require("./matrix-class");
+var _engine = require("./engine");
+var _vertexShadow = require("../shaders/vertexShadow.wgsl");
+var _fragment = require("../shaders/fragment.wgsl");
+var _vertex = require("../shaders/vertex.wgsl");
+var _loaderObj = require("./loader-obj");
+class MEMesh {
+  constructor(canvas, device, context, o) {
+    this.done = false;
+    this.device = device;
+    this.context = context;
+    this.entityArgPass = o.entityArgPass;
+    this.mesh = o.mesh;
+    this.inputHandler = (0, _engine.createInputHandler)(window, canvas);
+    this.cameras = o.cameras;
+    console.log('passed : o.mainCameraParams.responseCoef ', o.mainCameraParams.responseCoef);
+    this.cameraParams = {
+      type: o.mainCameraParams.type,
+      responseCoef: o.mainCameraParams.responseCoef
+    };
+    this.lastFrameMS = 0;
+    this.texturesPaths = [];
+    o.texturesPaths.forEach(t => {
+      this.texturesPaths.push(t);
+    });
+    this.presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+    this.position = new _matrixClass.Position(o.position.x, o.position.y, o.position.z);
+    console.log('cube added on pos : ', this.position);
+    this.rotation = new _matrixClass.Rotation(o.rotation.x, o.rotation.y, o.rotation.z);
+    this.rotation.rotationSpeed.x = o.rotationSpeed.x;
+    this.rotation.rotationSpeed.y = o.rotationSpeed.y;
+    this.rotation.rotationSpeed.z = o.rotationSpeed.z;
+    this.scale = o.scale;
+
+    // new
+    this.runProgram = () => {
+      return new Promise(async resolve => {
+        this.shadowDepthTextureSize = 1024;
+        const aspect = canvas.width / canvas.height;
+        this.projectionMatrix = _wgpuMatrix.mat4.perspective(2 * Math.PI / 5, aspect, 1, 2000.0);
+        this.modelViewProjectionMatrix = _wgpuMatrix.mat4.create();
+        this.loadTex0(this.texturesPaths, device).then(() => {
+          resolve();
+          console.log('load tex for mesh', this.texture0);
+        });
+      });
+    };
+    this.runProgram().then(() => {
+      const aspect = canvas.width / canvas.height;
+      const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+      this.context.configure({
+        device: this.device,
+        format: presentationFormat,
+        alphaMode: 'premultiplied'
+      });
+
+      // Create the model vertex buffer.
+      this.vertexBuffer = this.device.createBuffer({
+        size: this.mesh.positions.length * 3 * 2 * Float32Array.BYTES_PER_ELEMENT,
+        usage: GPUBufferUsage.VERTEX,
+        mappedAtCreation: true
+      });
+      {
+        const mapping = new Float32Array(this.vertexBuffer.getMappedRange());
+        for (let i = 0; i < this.mesh.positions.length; ++i) {
+          mapping.set(this.mesh.positions[i], 6 * i);
+          mapping.set(this.mesh.normals[i], 6 * i + 3);
+        }
+        this.vertexBuffer.unmap();
+      }
+
+      // Create the model index buffer.
+      this.indexCount = this.mesh.triangles.length * 3;
+      this.indexBuffer = this.device.createBuffer({
+        size: this.indexCount * Uint16Array.BYTES_PER_ELEMENT,
+        usage: GPUBufferUsage.INDEX,
+        mappedAtCreation: true
+      });
+      {
+        const mapping = new Uint16Array(this.indexBuffer.getMappedRange());
+        for (let i = 0; i < this.mesh.triangles.length; ++i) {
+          mapping.set(this.mesh.triangles[i], 3 * i);
+        }
+        this.indexBuffer.unmap();
+      }
+
+      // Create the depth texture for rendering/sampling the shadow map.
+      this.shadowDepthTexture = this.device.createTexture({
+        size: [this.shadowDepthTextureSize, this.shadowDepthTextureSize, 1],
+        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+        format: 'depth32float'
+      });
+      this.shadowDepthTextureView = this.shadowDepthTexture.createView();
+
+      // Create some common descriptors used for both the shadow pipeline
+      // and the color rendering pipeline.
+      this.vertexBuffers = [{
+        arrayStride: Float32Array.BYTES_PER_ELEMENT * 6,
+        attributes: [{
+          // position
+          shaderLocation: 0,
+          offset: 0,
+          format: 'float32x3'
+        }, {
+          // normal
+          shaderLocation: 1,
+          offset: Float32Array.BYTES_PER_ELEMENT * 3,
+          format: 'float32x3'
+        }]
+      }];
+      const primitive = {
+        topology: 'triangle-list',
+        cullMode: 'back'
+      };
+      this.uniformBufferBindGroupLayout = this.device.createBindGroupLayout({
+        entries: [{
+          binding: 0,
+          visibility: GPUShaderStage.VERTEX,
+          buffer: {
+            type: 'uniform'
+          }
+        }]
+      });
+      this.shadowPipeline = this.device.createRenderPipeline({
+        layout: this.device.createPipelineLayout({
+          bindGroupLayouts: [this.uniformBufferBindGroupLayout, this.uniformBufferBindGroupLayout]
+        }),
+        vertex: {
+          module: this.device.createShaderModule({
+            code: _vertexShadow.vertexShadowWGSL
+          }),
+          buffers: this.vertexBuffers
+        },
+        depthStencil: {
+          depthWriteEnabled: true,
+          depthCompare: 'less',
+          format: 'depth32float'
+        },
+        primitive
+      });
+
+      // Create a bind group layout which holds the scene uniforms and
+      // the texture+sampler for depth. We create it manually because the WebPU
+      // implementation doesn't infer this from the shader (yet).
+      this.bglForRender = this.device.createBindGroupLayout({
+        entries: [{
+          binding: 0,
+          visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+          buffer: {
+            type: 'uniform'
+          }
+        }, {
+          binding: 1,
+          visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+          texture: {
+            sampleType: 'depth'
+          }
+        }, {
+          binding: 2,
+          visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+          sampler: {
+            type: 'comparison'
+          }
+        }, {
+          binding: 3,
+          visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+          texture: {
+            sampleType: 'float'
+          }
+        }, {
+          binding: 4,
+          visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+          sampler: {
+            type: 'filtering'
+          }
+        }]
+      });
+      this.pipeline = this.device.createRenderPipeline({
+        layout: this.device.createPipelineLayout({
+          bindGroupLayouts: [this.bglForRender, this.uniformBufferBindGroupLayout]
+        }),
+        vertex: {
+          module: this.device.createShaderModule({
+            code: _vertex.vertexWGSL
+          }),
+          buffers: this.vertexBuffers
+        },
+        fragment: {
+          module: this.device.createShaderModule({
+            code: _fragment.fragmentWGSL
+          }),
+          targets: [{
+            format: presentationFormat
+          }],
+          constants: {
+            shadowDepthTextureSize: this.shadowDepthTextureSize
+          }
+        },
+        depthStencil: {
+          depthWriteEnabled: true,
+          depthCompare: 'less',
+          format: 'depth24plus-stencil8'
+        },
+        primitive
+      });
+      const depthTexture = this.device.createTexture({
+        size: [canvas.width, canvas.height],
+        format: 'depth24plus-stencil8',
+        usage: GPUTextureUsage.RENDER_ATTACHMENT
+      });
+      this.renderPassDescriptor = {
+        colorAttachments: [{
+          // view is acquired and set in render loop.
+          view: undefined,
+          clearValue: {
+            r: 0.5,
+            g: 0.5,
+            b: 0.5,
+            a: 1.0
+          },
+          loadOp: 'load',
+          storeOp: 'store'
+        }],
+        depthStencilAttachment: {
+          view: depthTexture.createView(),
+          depthClearValue: 1.0,
+          depthLoadOp: 'clear',
+          depthStoreOp: 'store',
+          stencilClearValue: 0,
+          stencilLoadOp: 'clear',
+          stencilStoreOp: 'store'
+        }
+      };
+      this.modelUniformBuffer = this.device.createBuffer({
+        size: 4 * 16,
+        // 4x4 matrix
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+      });
+      this.sceneUniformBuffer = this.device.createBuffer({
+        // Two 4x4 viewProj matrices,
+        // one for the camera and one for the light.
+        // Then a vec3 for the light position.
+        // Rounded to the nearest multiple of 16.
+        size: 2 * 4 * 16 + 4 * 4,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+      });
+      this.sceneBindGroupForShadow = this.device.createBindGroup({
+        layout: this.uniformBufferBindGroupLayout,
+        entries: [{
+          binding: 0,
+          resource: {
+            buffer: this.sceneUniformBuffer
+          }
+        }]
+      });
+      this.sceneBindGroupForRender = this.device.createBindGroup({
+        layout: this.bglForRender,
+        entries: [{
+          binding: 0,
+          resource: {
+            buffer: this.sceneUniformBuffer
+          }
+        }, {
+          binding: 1,
+          resource: this.shadowDepthTextureView
+        }, {
+          binding: 2,
+          resource: this.device.createSampler({
+            compare: 'less'
+          })
+        }, {
+          binding: 3,
+          resource: this.texture0.createView()
+        }, {
+          binding: 4,
+          resource: this.sampler
+        }]
+      });
+      this.modelBindGroup = this.device.createBindGroup({
+        layout: this.uniformBufferBindGroupLayout,
+        entries: [{
+          binding: 0,
+          resource: {
+            buffer: this.modelUniformBuffer
+          }
+        }]
+      });
+
+      // Rotates the camera around the origin based on time.
+      this.getTransformationMatrix = pos => {
+        const now = Date.now();
+        const deltaTime = (now - this.lastFrameMS) / this.cameraParams.responseCoef;
+        this.lastFrameMS = now;
+        const camera = this.cameras[this.cameraParams.type];
+        this.viewMatrix = camera.update(deltaTime, this.inputHandler());
+        _wgpuMatrix.mat4.translate(this.viewMatrix, _wgpuMatrix.vec3.fromValues(pos.x, pos.y, pos.z), this.viewMatrix);
+        _wgpuMatrix.mat4.rotateX(this.viewMatrix, Math.PI * this.rotation.getRotX(), this.viewMatrix);
+        _wgpuMatrix.mat4.rotateY(this.viewMatrix, Math.PI * this.rotation.getRotY(), this.viewMatrix);
+        _wgpuMatrix.mat4.rotateZ(this.viewMatrix, Math.PI * this.rotation.getRotZ(), this.viewMatrix);
+        _wgpuMatrix.mat4.multiply(this.projectionMatrix, this.viewMatrix, this.modelViewProjectionMatrix);
+        return this.modelViewProjectionMatrix;
+      };
+      this.upVector = _wgpuMatrix.vec3.fromValues(0, 1, 0);
+      this.origin = _wgpuMatrix.vec3.fromValues(0, 0, 0);
+      const lightPosition = _wgpuMatrix.vec3.fromValues(50, 100, -100);
+      const lightViewMatrix = _wgpuMatrix.mat4.lookAt(lightPosition, this.origin, this.upVector);
+      const lightProjectionMatrix = _wgpuMatrix.mat4.create();
+      {
+        const left = -80;
+        const right = 80;
+        const bottom = -80;
+        const top = 80;
+        const near = -200;
+        const far = 300;
+        _wgpuMatrix.mat4.ortho(left, right, bottom, top, near, far, lightProjectionMatrix);
+      }
+      const lightViewProjMatrix = _wgpuMatrix.mat4.multiply(lightProjectionMatrix, lightViewMatrix);
+
+      // looks like affect on transformations for now const 0
+      const modelMatrix = _wgpuMatrix.mat4.translation([0, 0, 0]);
+      // The camera/light aren't moving, so write them into buffers now.
+      {
+        const lightMatrixData = lightViewProjMatrix; // as Float32Array;
+        this.device.queue.writeBuffer(this.sceneUniformBuffer, 0, lightMatrixData.buffer, lightMatrixData.byteOffset, lightMatrixData.byteLength);
+        const lightData = lightPosition;
+        this.device.queue.writeBuffer(this.sceneUniformBuffer, 128, lightData.buffer, lightData.byteOffset, lightData.byteLength);
+        const modelData = modelMatrix;
+        this.device.queue.writeBuffer(this.modelUniformBuffer, 0, modelData.buffer, modelData.byteOffset, modelData.byteLength);
+      }
+      this.shadowPassDescriptor = {
+        colorAttachments: [],
+        depthStencilAttachment: {
+          view: this.shadowDepthTextureView,
+          depthClearValue: 1.0,
+          depthLoadOp: 'clear',
+          depthStoreOp: 'store'
+        }
+      };
+      this.done = true;
+    });
+  }
+  async loadTex0(texturesPaths, device) {
+    this.sampler = device.createSampler({
+      magFilter: 'linear',
+      minFilter: 'linear'
+    });
+    return new Promise(async resolve => {
+      const response = await fetch(texturesPaths[0]);
+      const imageBitmap = await createImageBitmap(await response.blob());
+      this.texture0 = device.createTexture({
+        size: [imageBitmap.width, imageBitmap.height, 1],
+        format: 'rgba8unorm',
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+      });
+      device.queue.copyExternalImageToTexture({
+        source: imageBitmap
+      }, {
+        texture: this.texture0
+      }, [imageBitmap.width, imageBitmap.height]);
+      resolve();
+    });
+  }
+  draw = commandEncoder => {
+    if (this.done == false) return;
+    const transformationMatrix = this.getTransformationMatrix(this.position);
+    this.device.queue.writeBuffer(this.sceneUniformBuffer, 64, transformationMatrix.buffer, transformationMatrix.byteOffset, transformationMatrix.byteLength);
+    this.renderPassDescriptor.colorAttachments[0].view = this.context.getCurrentTexture().createView();
+    {
+      const shadowPass = commandEncoder.beginRenderPass(this.shadowPassDescriptor);
+      shadowPass.setPipeline(this.shadowPipeline);
+      shadowPass.setBindGroup(0, this.sceneBindGroupForShadow);
+      shadowPass.setBindGroup(1, this.modelBindGroup);
+      shadowPass.setVertexBuffer(0, this.vertexBuffer);
+      shadowPass.setIndexBuffer(this.indexBuffer, 'uint16');
+      shadowPass.drawIndexed(this.indexCount);
+      shadowPass.end();
+    }
+    {
+      const renderPass = commandEncoder.beginRenderPass(this.renderPassDescriptor);
+      renderPass.setPipeline(this.pipeline);
+      renderPass.setBindGroup(0, this.sceneBindGroupForRender);
+      renderPass.setBindGroup(1, this.modelBindGroup);
+      renderPass.setVertexBuffer(0, this.vertexBuffer);
+      renderPass.setIndexBuffer(this.indexBuffer, 'uint16');
+      renderPass.drawIndexed(this.indexCount);
+      renderPass.end();
+    }
+  };
+}
+exports.default = MEMesh;
+
+},{"../shaders/fragment.wgsl":11,"../shaders/vertex.wgsl":13,"../shaders/vertexShadow.wgsl":14,"./engine":5,"./loader-obj":6,"./matrix-class":7,"wgpu-matrix":2}],10:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.degToRad = degToRad;
+exports.vec3 = exports.mat4 = void 0;
+const vec3 = exports.vec3 = {
+  cross(a, b, dst) {
+    dst = dst || new Float32Array(3);
+    const t0 = a[1] * b[2] - a[2] * b[1];
+    const t1 = a[2] * b[0] - a[0] * b[2];
+    const t2 = a[0] * b[1] - a[1] * b[0];
+    dst[0] = t0;
+    dst[1] = t1;
+    dst[2] = t2;
+    return dst;
+  },
+  subtract(a, b, dst) {
+    dst = dst || new Float32Array(3);
+    dst[0] = a[0] - b[0];
+    dst[1] = a[1] - b[1];
+    dst[2] = a[2] - b[2];
+    return dst;
+  },
+  normalize(v, dst) {
+    dst = dst || new Float32Array(3);
+    const length = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
+    // make sure we don't divide by 0.
+    if (length > 0.00001) {
+      dst[0] = v[0] / length;
+      dst[1] = v[1] / length;
+      dst[2] = v[2] / length;
+    } else {
+      dst[0] = 0;
+      dst[1] = 0;
+      dst[2] = 0;
+    }
+    return dst;
+  }
+};
+const mat4 = exports.mat4 = {
+  projection(width, height, depth, dst) {
+    // Note: This matrix flips the Y axis so that 0 is at the top.
+    return mat4.ortho(0, width, height, 0, depth, -depth, dst);
+  },
+  perspective(fieldOfViewYInRadians, aspect, zNear, zFar, dst) {
+    dst = dst || new Float32Array(16);
+    const f = Math.tan(Math.PI * 0.5 - 0.5 * fieldOfViewYInRadians);
+    const rangeInv = 1 / (zNear - zFar);
+    dst[0] = f / aspect;
+    dst[1] = 0;
+    dst[2] = 0;
+    dst[3] = 0;
+    dst[4] = 0;
+    dst[5] = f;
+    dst[6] = 0;
+    dst[7] = 0;
+    dst[8] = 0;
+    dst[9] = 0;
+    dst[10] = zFar * rangeInv;
+    dst[11] = -1;
+    dst[12] = 0;
+    dst[13] = 0;
+    dst[14] = zNear * zFar * rangeInv;
+    dst[15] = 0;
+    return dst;
+  },
+  ortho(left, right, bottom, top, near, far, dst) {
+    dst = dst || new Float32Array(16);
+    dst[0] = 2 / (right - left);
+    dst[1] = 0;
+    dst[2] = 0;
+    dst[3] = 0;
+    dst[4] = 0;
+    dst[5] = 2 / (top - bottom);
+    dst[6] = 0;
+    dst[7] = 0;
+    dst[8] = 0;
+    dst[9] = 0;
+    dst[10] = 1 / (near - far);
+    dst[11] = 0;
+    dst[12] = (right + left) / (left - right);
+    dst[13] = (top + bottom) / (bottom - top);
+    dst[14] = near / (near - far);
+    dst[15] = 1;
+    return dst;
+  },
+  identity(dst) {
+    dst = dst || new Float32Array(16);
+    dst[0] = 1;
+    dst[1] = 0;
+    dst[2] = 0;
+    dst[3] = 0;
+    dst[4] = 0;
+    dst[5] = 1;
+    dst[6] = 0;
+    dst[7] = 0;
+    dst[8] = 0;
+    dst[9] = 0;
+    dst[10] = 1;
+    dst[11] = 0;
+    dst[12] = 0;
+    dst[13] = 0;
+    dst[14] = 0;
+    dst[15] = 1;
+    return dst;
+  },
+  multiply(a, b, dst) {
+    dst = dst || new Float32Array(16);
+    const b00 = b[0 * 4 + 0];
+    const b01 = b[0 * 4 + 1];
+    const b02 = b[0 * 4 + 2];
+    const b03 = b[0 * 4 + 3];
+    const b10 = b[1 * 4 + 0];
+    const b11 = b[1 * 4 + 1];
+    const b12 = b[1 * 4 + 2];
+    const b13 = b[1 * 4 + 3];
+    const b20 = b[2 * 4 + 0];
+    const b21 = b[2 * 4 + 1];
+    const b22 = b[2 * 4 + 2];
+    const b23 = b[2 * 4 + 3];
+    const b30 = b[3 * 4 + 0];
+    const b31 = b[3 * 4 + 1];
+    const b32 = b[3 * 4 + 2];
+    const b33 = b[3 * 4 + 3];
+    const a00 = a[0 * 4 + 0];
+    const a01 = a[0 * 4 + 1];
+    const a02 = a[0 * 4 + 2];
+    const a03 = a[0 * 4 + 3];
+    const a10 = a[1 * 4 + 0];
+    const a11 = a[1 * 4 + 1];
+    const a12 = a[1 * 4 + 2];
+    const a13 = a[1 * 4 + 3];
+    const a20 = a[2 * 4 + 0];
+    const a21 = a[2 * 4 + 1];
+    const a22 = a[2 * 4 + 2];
+    const a23 = a[2 * 4 + 3];
+    const a30 = a[3 * 4 + 0];
+    const a31 = a[3 * 4 + 1];
+    const a32 = a[3 * 4 + 2];
+    const a33 = a[3 * 4 + 3];
+    dst[0] = b00 * a00 + b01 * a10 + b02 * a20 + b03 * a30;
+    dst[1] = b00 * a01 + b01 * a11 + b02 * a21 + b03 * a31;
+    dst[2] = b00 * a02 + b01 * a12 + b02 * a22 + b03 * a32;
+    dst[3] = b00 * a03 + b01 * a13 + b02 * a23 + b03 * a33;
+    dst[4] = b10 * a00 + b11 * a10 + b12 * a20 + b13 * a30;
+    dst[5] = b10 * a01 + b11 * a11 + b12 * a21 + b13 * a31;
+    dst[6] = b10 * a02 + b11 * a12 + b12 * a22 + b13 * a32;
+    dst[7] = b10 * a03 + b11 * a13 + b12 * a23 + b13 * a33;
+    dst[8] = b20 * a00 + b21 * a10 + b22 * a20 + b23 * a30;
+    dst[9] = b20 * a01 + b21 * a11 + b22 * a21 + b23 * a31;
+    dst[10] = b20 * a02 + b21 * a12 + b22 * a22 + b23 * a32;
+    dst[11] = b20 * a03 + b21 * a13 + b22 * a23 + b23 * a33;
+    dst[12] = b30 * a00 + b31 * a10 + b32 * a20 + b33 * a30;
+    dst[13] = b30 * a01 + b31 * a11 + b32 * a21 + b33 * a31;
+    dst[14] = b30 * a02 + b31 * a12 + b32 * a22 + b33 * a32;
+    dst[15] = b30 * a03 + b31 * a13 + b32 * a23 + b33 * a33;
+    return dst;
+  },
+  cameraAim(eye, target, up, dst) {
+    dst = dst || new Float32Array(16);
+    const zAxis = vec3.normalize(vec3.subtract(eye, target));
+    const xAxis = vec3.normalize(vec3.cross(up, zAxis));
+    const yAxis = vec3.normalize(vec3.cross(zAxis, xAxis));
+    dst[0] = xAxis[0];
+    dst[1] = xAxis[1];
+    dst[2] = xAxis[2];
+    dst[3] = 0;
+    dst[4] = yAxis[0];
+    dst[5] = yAxis[1];
+    dst[6] = yAxis[2];
+    dst[7] = 0;
+    dst[8] = zAxis[0];
+    dst[9] = zAxis[1];
+    dst[10] = zAxis[2];
+    dst[11] = 0;
+    dst[12] = eye[0];
+    dst[13] = eye[1];
+    dst[14] = eye[2];
+    dst[15] = 1;
+    return dst;
+  },
+  inverse(m, dst) {
+    dst = dst || new Float32Array(16);
+    const m00 = m[0 * 4 + 0];
+    const m01 = m[0 * 4 + 1];
+    const m02 = m[0 * 4 + 2];
+    const m03 = m[0 * 4 + 3];
+    const m10 = m[1 * 4 + 0];
+    const m11 = m[1 * 4 + 1];
+    const m12 = m[1 * 4 + 2];
+    const m13 = m[1 * 4 + 3];
+    const m20 = m[2 * 4 + 0];
+    const m21 = m[2 * 4 + 1];
+    const m22 = m[2 * 4 + 2];
+    const m23 = m[2 * 4 + 3];
+    const m30 = m[3 * 4 + 0];
+    const m31 = m[3 * 4 + 1];
+    const m32 = m[3 * 4 + 2];
+    const m33 = m[3 * 4 + 3];
+    const tmp0 = m22 * m33;
+    const tmp1 = m32 * m23;
+    const tmp2 = m12 * m33;
+    const tmp3 = m32 * m13;
+    const tmp4 = m12 * m23;
+    const tmp5 = m22 * m13;
+    const tmp6 = m02 * m33;
+    const tmp7 = m32 * m03;
+    const tmp8 = m02 * m23;
+    const tmp9 = m22 * m03;
+    const tmp10 = m02 * m13;
+    const tmp11 = m12 * m03;
+    const tmp12 = m20 * m31;
+    const tmp13 = m30 * m21;
+    const tmp14 = m10 * m31;
+    const tmp15 = m30 * m11;
+    const tmp16 = m10 * m21;
+    const tmp17 = m20 * m11;
+    const tmp18 = m00 * m31;
+    const tmp19 = m30 * m01;
+    const tmp20 = m00 * m21;
+    const tmp21 = m20 * m01;
+    const tmp22 = m00 * m11;
+    const tmp23 = m10 * m01;
+    const t0 = tmp0 * m11 + tmp3 * m21 + tmp4 * m31 - (tmp1 * m11 + tmp2 * m21 + tmp5 * m31);
+    const t1 = tmp1 * m01 + tmp6 * m21 + tmp9 * m31 - (tmp0 * m01 + tmp7 * m21 + tmp8 * m31);
+    const t2 = tmp2 * m01 + tmp7 * m11 + tmp10 * m31 - (tmp3 * m01 + tmp6 * m11 + tmp11 * m31);
+    const t3 = tmp5 * m01 + tmp8 * m11 + tmp11 * m21 - (tmp4 * m01 + tmp9 * m11 + tmp10 * m21);
+    const d = 1 / (m00 * t0 + m10 * t1 + m20 * t2 + m30 * t3);
+    dst[0] = d * t0;
+    dst[1] = d * t1;
+    dst[2] = d * t2;
+    dst[3] = d * t3;
+    dst[4] = d * (tmp1 * m10 + tmp2 * m20 + tmp5 * m30 - (tmp0 * m10 + tmp3 * m20 + tmp4 * m30));
+    dst[5] = d * (tmp0 * m00 + tmp7 * m20 + tmp8 * m30 - (tmp1 * m00 + tmp6 * m20 + tmp9 * m30));
+    dst[6] = d * (tmp3 * m00 + tmp6 * m10 + tmp11 * m30 - (tmp2 * m00 + tmp7 * m10 + tmp10 * m30));
+    dst[7] = d * (tmp4 * m00 + tmp9 * m10 + tmp10 * m20 - (tmp5 * m00 + tmp8 * m10 + tmp11 * m20));
+    dst[8] = d * (tmp12 * m13 + tmp15 * m23 + tmp16 * m33 - (tmp13 * m13 + tmp14 * m23 + tmp17 * m33));
+    dst[9] = d * (tmp13 * m03 + tmp18 * m23 + tmp21 * m33 - (tmp12 * m03 + tmp19 * m23 + tmp20 * m33));
+    dst[10] = d * (tmp14 * m03 + tmp19 * m13 + tmp22 * m33 - (tmp15 * m03 + tmp18 * m13 + tmp23 * m33));
+    dst[11] = d * (tmp17 * m03 + tmp20 * m13 + tmp23 * m23 - (tmp16 * m03 + tmp21 * m13 + tmp22 * m23));
+    dst[12] = d * (tmp14 * m22 + tmp17 * m32 + tmp13 * m12 - (tmp16 * m32 + tmp12 * m12 + tmp15 * m22));
+    dst[13] = d * (tmp20 * m32 + tmp12 * m02 + tmp19 * m22 - (tmp18 * m22 + tmp21 * m32 + tmp13 * m02));
+    dst[14] = d * (tmp18 * m12 + tmp23 * m32 + tmp15 * m02 - (tmp22 * m32 + tmp14 * m02 + tmp19 * m12));
+    dst[15] = d * (tmp22 * m22 + tmp16 * m02 + tmp21 * m12 - (tmp20 * m12 + tmp23 * m22 + tmp17 * m02));
+    return dst;
+  },
+  lookAt(eye, target, up, dst) {
+    return mat4.inverse(mat4.cameraAim(eye, target, up, dst), dst);
+  },
+  translation([tx, ty, tz], dst) {
+    dst = dst || new Float32Array(16);
+    dst[0] = 1;
+    dst[1] = 0;
+    dst[2] = 0;
+    dst[3] = 0;
+    dst[4] = 0;
+    dst[5] = 1;
+    dst[6] = 0;
+    dst[7] = 0;
+    dst[8] = 0;
+    dst[9] = 0;
+    dst[10] = 1;
+    dst[11] = 0;
+    dst[12] = tx;
+    dst[13] = ty;
+    dst[14] = tz;
+    dst[15] = 1;
+    return dst;
+  },
+  rotationX(angleInRadians, dst) {
+    const c = Math.cos(angleInRadians);
+    const s = Math.sin(angleInRadians);
+    dst = dst || new Float32Array(16);
+    dst[0] = 1;
+    dst[1] = 0;
+    dst[2] = 0;
+    dst[3] = 0;
+    dst[4] = 0;
+    dst[5] = c;
+    dst[6] = s;
+    dst[7] = 0;
+    dst[8] = 0;
+    dst[9] = -s;
+    dst[10] = c;
+    dst[11] = 0;
+    dst[12] = 0;
+    dst[13] = 0;
+    dst[14] = 0;
+    dst[15] = 1;
+    return dst;
+  },
+  rotationY(angleInRadians, dst) {
+    const c = Math.cos(angleInRadians);
+    const s = Math.sin(angleInRadians);
+    dst = dst || new Float32Array(16);
+    dst[0] = c;
+    dst[1] = 0;
+    dst[2] = -s;
+    dst[3] = 0;
+    dst[4] = 0;
+    dst[5] = 1;
+    dst[6] = 0;
+    dst[7] = 0;
+    dst[8] = s;
+    dst[9] = 0;
+    dst[10] = c;
+    dst[11] = 0;
+    dst[12] = 0;
+    dst[13] = 0;
+    dst[14] = 0;
+    dst[15] = 1;
+    return dst;
+  },
+  rotationZ(angleInRadians, dst) {
+    const c = Math.cos(angleInRadians);
+    const s = Math.sin(angleInRadians);
+    dst = dst || new Float32Array(16);
+    dst[0] = c;
+    dst[1] = s;
+    dst[2] = 0;
+    dst[3] = 0;
+    dst[4] = -s;
+    dst[5] = c;
+    dst[6] = 0;
+    dst[7] = 0;
+    dst[8] = 0;
+    dst[9] = 0;
+    dst[10] = 1;
+    dst[11] = 0;
+    dst[12] = 0;
+    dst[13] = 0;
+    dst[14] = 0;
+    dst[15] = 1;
+    return dst;
+  },
+  scaling([sx, sy, sz], dst) {
+    dst = dst || new Float32Array(16);
+    dst[0] = sx;
+    dst[1] = 0;
+    dst[2] = 0;
+    dst[3] = 0;
+    dst[4] = 0;
+    dst[5] = sy;
+    dst[6] = 0;
+    dst[7] = 0;
+    dst[8] = 0;
+    dst[9] = 0;
+    dst[10] = sz;
+    dst[11] = 0;
+    dst[12] = 0;
+    dst[13] = 0;
+    dst[14] = 0;
+    dst[15] = 1;
+    return dst;
+  },
+  translate(m, translation, dst) {
+    return mat4.multiply(m, mat4.translation(translation), dst);
+  },
+  rotateX(m, angleInRadians, dst) {
+    return mat4.multiply(m, mat4.rotationX(angleInRadians), dst);
+  },
+  rotateY(m, angleInRadians, dst) {
+    return mat4.multiply(m, mat4.rotationY(angleInRadians), dst);
+  },
+  rotateZ(m, angleInRadians, dst) {
+    return mat4.multiply(m, mat4.rotationZ(angleInRadians), dst);
+  },
+  scale(m, scale, dst) {
+    return mat4.multiply(m, mat4.scaling(scale), dst);
+  }
+};
+function degToRad(degrees) {
+  return degrees * Math.PI / 180;
+}
+;
+
+},{}],11:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fragmentWGSL = void 0;
+let fragmentWGSL = exports.fragmentWGSL = `override shadowDepthTextureSize: f32 = 1024.0;
+
+struct Scene {
+  lightViewProjMatrix : mat4x4f,
+  cameraViewProjMatrix : mat4x4f,
+  lightPos : vec3f,
+}
+
+@group(0) @binding(0) var<uniform> scene : Scene;
+@group(0) @binding(1) var shadowMap: texture_depth_2d;
+@group(0) @binding(2) var shadowSampler: sampler_comparison;
+@group(0) @binding(3) var meshTexture: texture_2d<f32>;
+@group(0) @binding(4) var meshSampler: sampler;
+
+struct FragmentInput {
+  @location(0) shadowPos : vec3f,
+  @location(1) fragPos : vec3f,
+  @location(2) fragNorm : vec3f,
+  @location(3) uv : vec2f,
+}
+
+const albedo = vec3f(0.9);
+const ambientFactor = 0.2;
+
+@fragment
+fn main(input : FragmentInput) -> @location(0) vec4f {
+  // Percentage-closer filtering. Sample texels in the region
+  // to smooth the result.
+  var visibility = 0.0;
+  let oneOverShadowDepthTextureSize = 1.0 / shadowDepthTextureSize;
+  for (var y = -1; y <= 1; y++) {
+    for (var x = -1; x <= 1; x++) {
+      let offset = vec2f(vec2(x, y)) * oneOverShadowDepthTextureSize;
+
+      visibility += textureSampleCompare(
+        shadowMap, shadowSampler,
+        input.shadowPos.xy + offset, input.shadowPos.z - 0.007
+      );
+    }
+  }
+  visibility /= 9.0;
+
+  let lambertFactor = max(dot(normalize(scene.lightPos - input.fragPos), normalize(input.fragNorm)), 0.0);
+  let lightingFactor = min(ambientFactor + visibility * lambertFactor, 1.0);
+  let textureColor = textureSample(meshTexture, meshSampler, input.uv);
+
+  return vec4(textureColor.rgb * lightingFactor * albedo, 1.0);
+}`;
+
+},{}],12:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UNLIT_SHADER = void 0;
+/**
+ * @description
+ * UNIT Texures -
+ * Good for performance
+ */
+const UNLIT_SHADER = exports.UNLIT_SHADER = `struct Uniforms {
+  viewProjectionMatrix : mat4x4f
+}
+@group(0) @binding(0) var<uniform> uniforms : Uniforms;
+
+@group(1) @binding(0) var<uniform> modelMatrix : mat4x4f;
+
+struct VertexInput {
+  @location(0) position : vec4f,
+  @location(1) normal : vec3f,
+  @location(2) uv : vec2f
+}
+
+struct VertexOutput {
+  @builtin(position) position : vec4f,
+  @location(0) normal: vec3f,
+  @location(1) uv : vec2f,
+}
+
+@vertex
+fn vertexMain(input: VertexInput) -> VertexOutput {
+  var output : VertexOutput;
+  output.position = uniforms.viewProjectionMatrix * modelMatrix * input.position;
+  output.normal = normalize((modelMatrix * vec4(input.normal, 0)).xyz);
+  output.uv = input.uv;
+  return output;
+}
+
+@group(1) @binding(1) var meshSampler: sampler;
+@group(1) @binding(2) var meshTexture: texture_2d<f32>;
+
+// Static directional lighting
+const lightDir = vec3f(1, 1, 1);
+const dirColor = vec3(1);
+const ambientColor = vec3f(0.05);
+
+@fragment
+fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
+  let textureColor = textureSample(meshTexture, meshSampler, input.uv);
+
+  // Very simplified lighting algorithm.
+  let lightColor = saturate(ambientColor + max(dot(input.normal, lightDir), 0.0) * dirColor);
+
+  return vec4f(textureColor.rgb * lightColor, textureColor.a);
+}`;
+
+},{}],13:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.vertexWGSL = void 0;
+let vertexWGSL = exports.vertexWGSL = `struct Scene {
+  lightViewProjMatrix: mat4x4f,
+  cameraViewProjMatrix: mat4x4f,
+  lightPos: vec3f,
+}
+
+struct Model {
+  modelMatrix: mat4x4f,
+}
+
+@group(0) @binding(0) var<uniform> scene : Scene;
+@group(1) @binding(0) var<uniform> model : Model;
+
+struct VertexOutput {
+  @location(0) shadowPos: vec3f,
+  @location(1) fragPos: vec3f,
+  @location(2) fragNorm: vec3f,
+  @location(3) uv : vec2f,
+  
+  @builtin(position) Position: vec4f,
+}
+
+@vertex
+fn main(
+  @location(0) position: vec3f,
+  @location(1) normal: vec3f,
+  @location(2) uv : vec2f
+) -> VertexOutput {
+  var output : VertexOutput;
+
+  // XY is in (-1, 1) space, Z is in (0, 1) space
+  let posFromLight = scene.lightViewProjMatrix * model.modelMatrix * vec4(position, 1.0);
+
+  // Convert XY to (0, 1)
+  // Y is flipped because texture coords are Y-down.
+  output.shadowPos = vec3(
+    posFromLight.xy * vec2(0.5, -0.5) + vec2(0.5),
+    posFromLight.z
+  );
+
+  output.Position = scene.cameraViewProjMatrix * model.modelMatrix * vec4(position, 1.0);
+  output.fragPos = output.Position.xyz;
+  output.fragNorm = normal;
+  // nidza
+  output.uv = uv;
+
+  return output;
+}
+`;
+
+},{}],14:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.vertexShadowWGSL = void 0;
+let vertexShadowWGSL = exports.vertexShadowWGSL = `struct Scene {
+  lightViewProjMatrix: mat4x4f,
+  cameraViewProjMatrix: mat4x4f,
+  lightPos: vec3f,
+}
+
+struct Model {
+  modelMatrix: mat4x4f,
+}
+
+@group(0) @binding(0) var<uniform> scene : Scene;
+@group(1) @binding(0) var<uniform> model : Model;
+
+@vertex
+fn main(
+  @location(0) position: vec3f
+) -> @builtin(position) vec4f {
+  return scene.lightViewProjMatrix * model.modelMatrix * vec4(position, 1.0);
+}
+`;
+
+},{}],15:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _wgpuMatrix = require("wgpu-matrix");
+var _ball = _interopRequireDefault(require("./engine/ball.js"));
+var _cube = _interopRequireDefault(require("./engine/cube.js"));
+var _engine = require("./engine/engine.js");
+var _mesh = _interopRequireDefault(require("./engine/mesh.js"));
+var _meshObj = _interopRequireDefault(require("./engine/mesh-obj.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+class MatrixEngineWGPU {
+  mainRenderBundle = [];
+  rbContainer = [];
+  frame = () => {};
+  entityHolder = [];
+  entityArgPass = {
+    loadOp: 'clear',
+    storeOp: 'store',
+    depthLoadOp: 'clear',
+    depthStoreOp: 'store'
+  };
+
+  // The input handler
+  constructor(options, callback) {
+    // console.log('typeof options ', typeof options )
+    if (typeof options == 'undefined' || typeof options == "function") {
+      this.options = {
+        useSingleRenderPass: true,
+        canvasSize: 'fullscreen'
+      };
+      callback = options;
+    }
+    this.options = options;
+    var canvas = document.createElement('canvas');
+    if (this.options.canvasSize == 'fullscreen') {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    } else {
+      canvas.width = this.options.canvasSize.w;
+      canvas.height = this.options.canvasSize.h;
+    }
+    document.body.append(canvas);
+
+    // The camera types
+    const initialCameraPosition = _wgpuMatrix.vec3.create(0, 0, 0);
+    this.mainCameraParams = {
+      type: 'WASD',
+      responseCoef: 2000
+    };
+    this.cameras = {
+      arcball: new _engine.ArcballCamera({
+        position: initialCameraPosition
+      }),
+      WASD: new _engine.WASDCamera({
+        position: initialCameraPosition
+      })
+    };
+    this.init({
+      canvas,
+      callback
+    });
+  }
+  init = async ({
+    canvas,
+    callback
   }) => {
     this.canvas = canvas;
     this.adapter = await navigator.gpu.requestAdapter();
@@ -6463,6 +8890,7 @@ class MatrixEngineWGPU {
   addCube = o => {
     if (typeof o === 'undefined') {
       var o = {
+        scale: 1,
         position: {
           x: 0,
           y: 0,
@@ -6479,7 +8907,9 @@ class MatrixEngineWGPU {
           y: 0,
           z: 0
         },
-        entityArgPass: this.entityArgPass
+        entityArgPass: this.entityArgPass,
+        cameras: this.cameras,
+        mainCameraParams: this.mainCameraParams
       };
     } else {
       if (typeof o.position === 'undefined') {
@@ -6506,7 +8936,14 @@ class MatrixEngineWGPU {
       if (typeof o.texturesPaths === 'undefined') {
         o.texturesPaths = ['./res/textures/default.png'];
       }
+      if (typeof o.scale === 'undefined') {
+        o.scale = 1;
+      }
+      if (typeof o.mainCameraParams === 'undefined') {
+        o.mainCameraParams = this.mainCameraParams;
+      }
       o.entityArgPass = this.entityArgPass;
+      o.cameras = this.cameras;
     }
     let myCube1 = new _cube.default(this.canvas, this.device, this.context, o);
     this.mainRenderBundle.push(myCube1);
@@ -6514,6 +8951,7 @@ class MatrixEngineWGPU {
   addBall = o => {
     if (typeof o === 'undefined') {
       var o = {
+        scale: 1,
         position: {
           x: 0,
           y: 0,
@@ -6530,7 +8968,9 @@ class MatrixEngineWGPU {
           y: 0,
           z: 0
         },
-        entityArgPass: this.entityArgPass
+        entityArgPass: this.entityArgPass,
+        cameras: this.cameras,
+        mainCameraParams: this.mainCameraParams
       };
     } else {
       if (typeof o.position === 'undefined') {
@@ -6557,47 +8997,150 @@ class MatrixEngineWGPU {
       if (typeof o.texturesPaths === 'undefined') {
         o.texturesPaths = ['./res/textures/default.png'];
       }
+      if (typeof o.mainCameraParams === 'undefined') {
+        o.mainCameraParams = this.mainCameraParams;
+      }
+      if (typeof o.scale === 'undefined') {
+        o.scale = 1;
+      }
       o.entityArgPass = this.entityArgPass;
+      o.cameras = this.cameras;
     }
     let myBall1 = new _ball.default(this.canvas, this.device, this.context, o);
     this.mainRenderBundle.push(myBall1);
   };
+  addMesh = o => {
+    if (typeof o.position === 'undefined') {
+      o.position = {
+        x: 0,
+        y: 0,
+        z: -4
+      };
+    }
+    if (typeof o.rotation === 'undefined') {
+      o.rotation = {
+        x: 0,
+        y: 0,
+        z: 0
+      };
+    }
+    if (typeof o.rotationSpeed === 'undefined') {
+      o.rotationSpeed = {
+        x: 0,
+        y: 0,
+        z: 0
+      };
+    }
+    if (typeof o.texturesPaths === 'undefined') {
+      o.texturesPaths = ['./res/textures/default.png'];
+    }
+    if (typeof o.mainCameraParams === 'undefined') {
+      o.mainCameraParams = this.mainCameraParams;
+    }
+    if (typeof o.scale === 'undefined') {
+      o.scale = 1;
+    }
+    o.entityArgPass = this.entityArgPass;
+    o.cameras = this.cameras;
+    if (typeof o.name === 'undefined') {
+      o.name = 'random' + Math.random();
+    }
+    if (typeof o.mesh === 'undefined') {
+      throw console.error('arg mesh is empty...');
+      return;
+    }
+    console.log('Mesh procedure', o);
+    let myMesh1 = new _mesh.default(this.canvas, this.device, this.context, o);
+    this.mainRenderBundle.push(myMesh1);
+  };
+  addMeshObj = o => {
+    if (typeof o.position === 'undefined') {
+      o.position = {
+        x: 0,
+        y: 0,
+        z: -4
+      };
+    }
+    if (typeof o.rotation === 'undefined') {
+      o.rotation = {
+        x: 0,
+        y: 0,
+        z: 0
+      };
+    }
+    if (typeof o.rotationSpeed === 'undefined') {
+      o.rotationSpeed = {
+        x: 0,
+        y: 0,
+        z: 0
+      };
+    }
+    if (typeof o.texturesPaths === 'undefined') {
+      o.texturesPaths = ['./res/textures/default.png'];
+    }
+    if (typeof o.mainCameraParams === 'undefined') {
+      o.mainCameraParams = this.mainCameraParams;
+    }
+    if (typeof o.scale === 'undefined') {
+      o.scale = 1;
+    }
+    o.entityArgPass = this.entityArgPass;
+    o.cameras = this.cameras;
+    if (typeof o.name === 'undefined') {
+      o.name = 'random' + Math.random();
+    }
+    if (typeof o.mesh === 'undefined') {
+      throw console.error('arg mesh is empty...');
+      return;
+    }
+    console.log('Mesh procedure', o);
+    let myMesh1 = new _meshObj.default(this.canvas, this.device, this.context, o);
+    this.mainRenderBundle.push(myMesh1);
+  };
   run(callback) {
     setTimeout(() => {
       requestAnimationFrame(this.frame);
-    }, 1000);
+    }, 500);
     setTimeout(() => {
       callback();
-    }, 10);
+    }, 20);
   }
   frameSinglePass = () => {
-    console.log('single');
-    let commandEncoder = this.device.createCommandEncoder();
-    this.rbContainer = [];
     let passEncoder;
-    this.mainRenderBundle.forEach((meItem, index) => {
-      meItem.draw();
-      this.rbContainer.push(meItem.renderBundle);
-      // if(index == 0) passEncoder = commandEncoder.beginRenderPass(meItem.renderPassDescriptor);
+    let commandEncoder = this.device.createCommandEncoder();
+    if (typeof this.mainRenderBundle != 'undefined') this.mainRenderBundle.forEach((meItem, index) => {
+      meItem.position.update();
+      meItem.draw(commandEncoder);
+
+      // 
+      if (typeof meItem.done == 'undefined') {
+        this.rbContainer.push(meItem.renderBundle);
+        this.renderPassDescriptor.colorAttachments[0].view = this.context.getCurrentTexture().createView();
+        //  console.log('prolazi ')
+        passEncoder = commandEncoder.beginRenderPass(this.renderPassDescriptor);
+        passEncoder.executeBundles(this.rbContainer);
+        passEncoder.end();
+        // this.device.queue.submit([commandEncoder.finish()]);
+      }
     });
-    this.renderPassDescriptor.colorAttachments[0].view = this.context.getCurrentTexture().createView();
-    passEncoder = commandEncoder.beginRenderPass(this.renderPassDescriptor);
-    passEncoder.executeBundles(this.rbContainer);
-    passEncoder.end();
     this.device.queue.submit([commandEncoder.finish()]);
     requestAnimationFrame(this.frame);
   };
   framePassPerObject = () => {
-    console.log('framePassPerObject');
+    // console.log('framePassPerObject')
     let commandEncoder = this.device.createCommandEncoder();
     this.rbContainer = [];
     let passEncoder;
     this.mainRenderBundle.forEach((meItem, index) => {
-      meItem.draw();
-      this.rbContainer.push(meItem.renderBundle);
-      passEncoder = commandEncoder.beginRenderPass(meItem.renderPassDescriptor);
-      passEncoder.executeBundles(this.rbContainer);
-      passEncoder.end();
+      meItem.draw(commandEncoder);
+      if (meItem.renderBundle) {
+        this.rbContainer.push(meItem.renderBundle);
+        passEncoder = commandEncoder.beginRenderPass(meItem.renderPassDescriptor);
+        passEncoder.executeBundles(this.rbContainer);
+        passEncoder.end();
+      } else {
+        meItem.draw(commandEncoder);
+      }
     });
     this.device.queue.submit([commandEncoder.finish()]);
     requestAnimationFrame(this.frame);
@@ -6605,179 +9148,4 @@ class MatrixEngineWGPU {
 }
 exports.default = MatrixEngineWGPU;
 
-},{"./engine/ball.js":3,"./engine/cube.js":4}],7:[function(require,module,exports){
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.vertexPositionColorWGSL = exports.shaderSrc = exports.cubeTexShader = exports.basicVertWGSL = exports.basicFragWGSL = exports.BALL_SHADER = void 0;
-/**
- * @description
- * For microdraw pixel cube texture
- */
-const shaderSrc = exports.shaderSrc = `struct VSUniforms {
-  worldViewProjection: mat4x4f,
-  worldInverseTranspose: mat4x4f,
-};
-@group(0) @binding(0) var<uniform> vsUniforms: VSUniforms;
-
-struct MyVSInput {
-    @location(0) position: vec4f,
-    @location(1) normal: vec3f,
-    @location(2) texcoord: vec2f,
-};
-
-struct MyVSOutput {
-  @builtin(position) position: vec4f,
-  @location(0) normal: vec3f,
-  @location(1) texcoord: vec2f,
-};
-
-@vertex
-fn myVSMain(v: MyVSInput) -> MyVSOutput {
-  var vsOut: MyVSOutput;
-  vsOut.position = vsUniforms.worldViewProjection * v.position;
-  vsOut.normal = (vsUniforms.worldInverseTranspose * vec4f(v.normal, 0.0)).xyz;
-  vsOut.texcoord = v.texcoord;
-  return vsOut;
-}
-
-struct FSUniforms {
-  lightDirection: vec3f,
-};
-
-@group(0) @binding(1) var<uniform> fsUniforms: FSUniforms;
-@group(0) @binding(2) var diffuseSampler: sampler;
-@group(0) @binding(3) var diffuseTexture: texture_2d<f32>;
-
-@fragment
-fn myFSMain(v: MyVSOutput) -> @location(0) vec4f {
-  var diffuseColor = textureSample(diffuseTexture, diffuseSampler, v.texcoord);
-  var a_normal = normalize(v.normal);
-  var l = dot(a_normal, fsUniforms.lightDirection) * 0.5 + 0.5;
-  return vec4f(diffuseColor.rgb * l, diffuseColor.a);
-}
-`;
-
-/**
- * @description
- * For Cube with images
- */
-const cubeTexShader = exports.cubeTexShader = `struct Uniforms {
-      matrix: mat4x4f,
-    };
-
-    struct Vertex {
-      @location(0) position: vec4f,
-      @location(1) texcoord: vec2f,
-    };
-
-    struct VSOutput {
-      @builtin(position) position: vec4f,
-      @location(0) texcoord: vec2f,
-    };
-
-    @group(0) @binding(0) var<uniform> uni: Uniforms;
-    @group(0) @binding(1) var ourSampler: sampler;
-    @group(0) @binding(2) var ourTexture: texture_2d<f32>;
-
-    @vertex fn vs(vert: Vertex) -> VSOutput {
-      var vsOut: VSOutput;
-      vsOut.position = uni.matrix * vert.position;
-      vsOut.texcoord = vert.texcoord;
-      return vsOut;
-    }
-
-    @fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f {
-      return textureSample(ourTexture, ourSampler, vsOut.texcoord);
-    }
-`;
-const basicVertWGSL = exports.basicVertWGSL = `struct Uniforms {
-  modelViewProjectionMatrix : mat4x4<f32>,
-}
-@binding(0) @group(0) var<uniform> uniforms : Uniforms;
-
-struct VertexOutput {
-  @builtin(position) Position : vec4<f32>,
-  @location(0) fragUV : vec2<f32>,
-  @location(1) fragPosition: vec4<f32>,
-}
-
-@vertex
-fn main(
-  @location(0) position : vec4<f32>,
-  @location(1) uv : vec2<f32>
-) -> VertexOutput {
-  var output : VertexOutput;
-  output.Position = uniforms.modelViewProjectionMatrix * position;
-  output.fragUV = uv;
-  output.fragPosition = 0.5 * (position + vec4(1.0, 1.0, 1.0, 1.0));
-  return output;
-}
-`;
-const basicFragWGSL = exports.basicFragWGSL = `@group(0) @binding(1) var mySampler: sampler;
-@group(0) @binding(2) var myTexture: texture_2d<f32>;
-
-@fragment
-fn main(
-  @location(0) fragUV: vec2<f32>,
-  @location(1) fragPosition: vec4<f32>
-) -> @location(0) vec4<f32> {
-  return textureSample(myTexture, mySampler, fragUV) * fragPosition;
-}
-`;
-const vertexPositionColorWGSL = exports.vertexPositionColorWGSL = `@fragment
-fn main(
-  @location(0) fragUV: vec2<f32>,
-  @location(1) fragPosition: vec4<f32>
-) -> @location(0) vec4<f32> {
-  return fragPosition;
-}`;
-const BALL_SHADER = exports.BALL_SHADER = `struct Uniforms {
-  viewProjectionMatrix : mat4x4f
-}
-@group(0) @binding(0) var<uniform> uniforms : Uniforms;
-
-@group(1) @binding(0) var<uniform> modelMatrix : mat4x4f;
-
-struct VertexInput {
-  @location(0) position : vec4f,
-  @location(1) normal : vec3f,
-  @location(2) uv : vec2f
-}
-
-struct VertexOutput {
-  @builtin(position) position : vec4f,
-  @location(0) normal: vec3f,
-  @location(1) uv : vec2f,
-}
-
-@vertex
-fn vertexMain(input: VertexInput) -> VertexOutput {
-  var output : VertexOutput;
-  output.position = uniforms.viewProjectionMatrix * modelMatrix * input.position;
-  output.normal = normalize((modelMatrix * vec4(input.normal, 0)).xyz);
-  output.uv = input.uv;
-  return output;
-}
-
-@group(1) @binding(1) var meshSampler: sampler;
-@group(1) @binding(2) var meshTexture: texture_2d<f32>;
-
-// Static directional lighting
-const lightDir = vec3f(1, 1, 1);
-const dirColor = vec3(1);
-const ambientColor = vec3f(0.05);
-
-@fragment
-fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
-  let textureColor = textureSample(meshTexture, meshSampler, input.uv);
-
-  // Very simplified lighting algorithm.
-  let lightColor = saturate(ambientColor + max(dot(input.normal, lightDir), 0.0) * dirColor);
-
-  return vec4f(textureColor.rgb * lightColor, textureColor.a);
-}`;
-
-},{}]},{},[1]);
+},{"./engine/ball.js":3,"./engine/cube.js":4,"./engine/engine.js":5,"./engine/mesh-obj.js":8,"./engine/mesh.js":9,"wgpu-matrix":2}]},{},[1]);