matrix-engine-wgpu 1.0.5 → 1.1.0

package/public/examples.js

@@ -1,97 +1,304 @@
 (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 _jamb = require("./examples/games/jamb/jamb.js");
 var _loadObjFile = require("./examples/load-obj-file.js");
+var _unlitTextures = require("./examples/unlit-textures.js");
+var _utils = require("./src/engine/utils.js");
 /**
  * @examples
- * Just import curent example/demo
+ * MATRIX_ENGINE_WGPU EXAMPLE WORKSPACE
+ * Nikola Lukic 2024
  */
 
-window.app = _loadObjFile.application;
+// For future
+var examples = {
+  loadJamb: _jamb.loadJamb,
+  loadObjFile: _loadObjFile.loadObjFile,
+  unlitTextures: _unlitTextures.unlitTextures
+};
+(0, _utils.byId)('loadObjFile').addEventListener("click", () => {
+  (0, _utils.byId)('loadObjFile').setAttribute('disabled', true);
+  (0, _utils.byId)('unlitTextures').removeAttribute('disabled');
+  if (typeof app !== "undefined") app.destroyProgram();
+  (0, _loadObjFile.loadObjFile)();
+});
+(0, _utils.byId)('unlitTextures').addEventListener("click", () => {
+  (0, _utils.byId)('unlitTextures').setAttribute('disabled', true);
+  (0, _utils.byId)('loadObjFile').removeAttribute('disabled');
+  if (typeof app !== "undefined") app.destroyProgram();
+  (0, _unlitTextures.unlitTextures)();
+});
+(0, _utils.byId)('jamb').addEventListener("click", () => {
+  (0, _utils.byId)('unlitTextures').setAttribute('disabled', true);
+  (0, _utils.byId)('loadObjFile').setAttribute('disabled', true);
+  (0, _utils.byId)('jamb').removeAttribute('disabled');
+  if (typeof app !== "undefined") app.destroyProgram();
+  (0, _jamb.loadJamb)();
+});
+
+},{"./examples/games/jamb/jamb.js":2,"./examples/load-obj-file.js":3,"./examples/unlit-textures.js":4,"./src/engine/utils.js":13}],2:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loadJamb = void 0;
+var _world = _interopRequireDefault(require("../../../src/world.js"));
+var _loaderObj = require("../../../src/engine/loader-obj.js");
+var _utils = require("../../../src/engine/utils.js");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// import MatrixEngineWGPU from "./src/world.js";
+// import {downloadMeshes} from './src/engine/loader-obj.js';
+
+var loadJamb = function () {
+  let jamb = new _world.default({
+    useSingleRenderPass: true,
+    canvasSize: 'fullscreen',
+    mainCameraParams: {
+      type: 'arcball',
+      responseCoef: 1
+    }
+  }, () => {
+    addEventListener('AmmoReady', () => {
+      (0, _loaderObj.downloadMeshes)({
+        welcomeText: "./res/meshes/blender/piramyd.obj",
+        cube: "./res/meshes/blender/cube.obj"
+      }, onLoadObj);
+    });
+    function onLoadObj(m) {
+      jamb.myLoadedMeshes = m;
+      for (var key in m) {
+        console.log(`%c Loaded objs: ${key} `, _utils.LOG_MATRIX);
+      }
+      jamb.addMeshObj({
+        position: {
+          x: 0,
+          y: 2,
+          z: -15
+        },
+        rotation: {
+          x: 0,
+          y: 0,
+          z: 0
+        },
+        rotationSpeed: {
+          x: 0,
+          y: 0,
+          z: 0
+        },
+        texturesPaths: ['./res/meshes/blender/cube.png'],
+        name: 'CubePhysics',
+        mesh: m.cube,
+        physics: {
+          enabled: true,
+          geometry: "Cube"
+        }
+      });
+      jamb.addMeshObj({
+        position: {
+          x: 0,
+          y: 1,
+          z: -120
+        },
+        rotation: {
+          x: 0,
+          y: 0,
+          z: 0
+        },
+        rotationSpeed: {
+          x: 0,
+          y: 0,
+          z: 0
+        },
+        texturesPaths: ['./res/meshes/blender/cube.png'],
+        name: 'welcomeTextPhysics',
+        mesh: m.welcomeText
+        // physics: {
+        //   enabled: true,
+        //   geometry: "Sphere"
+        // }
+      });
+    }
+  });
+  window.app = loadObjFile;
+};
+exports.loadJamb = loadJamb;
 
-},{"./examples/load-obj-file.js":2}],2:[function(require,module,exports){
+},{"../../../src/engine/loader-obj.js":9,"../../../src/engine/utils.js":13,"../../../src/world.js":19}],3:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.application = void 0;
+exports.loadObjFile = void 0;
 var _world = _interopRequireDefault(require("../src/world.js"));
 var _loaderObj = require("../src/engine/loader-obj.js");
+var _utils = require("../src/engine/utils.js");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-let application = exports.application = new _world.default({
-  useSingleRenderPass: false,
-  canvasSize: 'fullscreen'
-}, () => {
-  let c = {
-    scale: 1,
-    position: {
-      x: -2,
-      y: 2,
-      z: -10
-    },
-    rotation: {
-      x: 0,
-      y: 0,
-      z: 0
-    },
-    rotationSpeed: {
-      x: 0,
-      y: 0,
-      z: 0
-    },
-    texturesPaths: ['./res/textures/rust.jpg']
-  };
-  let o = {
-    scale: 2,
-    position: {
-      x: 2,
-      y: 0,
-      z: -10
-    },
-    rotation: {
-      x: 0,
-      y: 45,
-      z: 0
-    },
-    rotationSpeed: {
-      x: 0,
-      y: 0,
-      z: 0
-    },
-    texturesPaths: ['./res/textures/rust.jpg']
-  };
+// import MatrixEngineWGPU from "./src/world.js";
+// import {downloadMeshes} from './src/engine/loader-obj.js';
+
+var loadObjFile = function () {
+  let loadObjFile = new _world.default({
+    useSingleRenderPass: true,
+    canvasSize: 'fullscreen',
+    mainCameraParams: {
+      type: 'WASD',
+      responseCoef: 1000
+    }
+  }, () => {
+    addEventListener('AmmoReady', () => {
+      (0, _loaderObj.downloadMeshes)({
+        welcomeText: "./res/meshes/blender/piramyd.obj",
+        armor: "./res/meshes/obj/armor.obj",
+        sphere: "./res/meshes/blender/sphere.obj",
+        cube: "./res/meshes/blender/cube.obj"
+      }, onLoadObj);
+    });
+    function onLoadObj(m) {
+      loadObjFile.myLoadedMeshes = m;
+      for (var key in m) {
+        console.log(`%c Loaded objs: ${key} `, _utils.LOG_MATRIX);
+      }
+      loadObjFile.addMeshObj({
+        position: {
+          x: 0,
+          y: 2,
+          z: -10
+        },
+        rotation: {
+          x: 0,
+          y: 0,
+          z: 0
+        },
+        rotationSpeed: {
+          x: 0,
+          y: 0,
+          z: 0
+        },
+        texturesPaths: ['./res/meshes/blender/cube.png'],
+        name: 'CubePhysics',
+        mesh: m.cube,
+        physics: {
+          enabled: true,
+          geometry: "Cube"
+        }
+      });
+      loadObjFile.addMeshObj({
+        position: {
+          x: 0,
+          y: 2,
+          z: -10
+        },
+        rotation: {
+          x: 0,
+          y: 0,
+          z: 0
+        },
+        rotationSpeed: {
+          x: 0,
+          y: 0,
+          z: 0
+        },
+        texturesPaths: ['./res/meshes/blender/cube.png'],
+        name: 'SpherePhysics',
+        mesh: m.sphere,
+        physics: {
+          enabled: true,
+          geometry: "Sphere"
+        }
+      });
+      loadObjFile.addMeshObj({
+        position: {
+          x: 0,
+          y: 2,
+          z: -10
+        },
+        rotation: {
+          x: 0,
+          y: 0,
+          z: 0
+        },
+        rotationSpeed: {
+          x: 0,
+          y: 0,
+          z: 0
+        },
+        texturesPaths: ['./res/meshes/blender/cube.png'],
+        name: 'CubePhysics',
+        mesh: m.welcomeText,
+        physics: {
+          enabled: true,
+          geometry: "Cube"
+        }
+      });
+    }
+  });
+  window.app = loadObjFile;
+};
+exports.loadObjFile = loadObjFile;
 
-  // let mesh = adaptJSON1(stanfordDragonData)
-  // application.addBall(o)
-  // application.addCube(c)
-  application.addCube(o);
-  function onLoadObj(m) {
-    console.log('Loaded obj:', m.armor);
-    // console.log('APP2 ', jsonPiramyd);
-    // jsonPiramyd.vertexNormals = jsonPiramyd.normals;
-    // jsonPiramyd.indices = jsonPiramyd.faces;
-    // jsonPiramyd.textures = jsonPiramyd.uvs;
-    application.addMeshObj({
+},{"../src/engine/loader-obj.js":9,"../src/engine/utils.js":13,"../src/world.js":19}],4:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.unlitTextures = void 0;
+var _world = _interopRequireDefault(require("../src/world.js"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var unlitTextures = function () {
+  let unlitTextures = new _world.default({
+    useSingleRenderPass: false,
+    canvasSize: 'fullscreen'
+  }, () => {
+    let c = {
+      scale: 2,
       position: {
+        x: -3,
+        y: 0,
+        z: -10
+      },
+      rotation: {
         x: 0,
         y: 0,
-        z: -5
+        z: 0
       },
-      texturesPaths: ['./res/meshes/obj/armor.png'],
-      name: 'Armor',
-      mesh: m.armor
-    });
-  }
-
-  // downloadMeshes({armor: "./res/meshes/obj/armor.obj"}, onLoadObj)
-  (0, _loaderObj.downloadMeshes)({
-    armor: "./res/meshes/blender/piramyd.obj"
-  }, onLoadObj);
-});
-window.app = application;
+      rotationSpeed: {
+        x: 10,
+        y: 0,
+        z: 0
+      },
+      texturesPaths: ['./res/textures/rust.jpg']
+    };
+    let o = {
+      scale: 2,
+      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']
+    };
+    unlitTextures.addBall(c);
+    unlitTextures.addCube(o);
+  });
+  window.app = unlitTextures;
+};
+exports.unlitTextures = unlitTextures;
 
-},{"../src/engine/loader-obj.js":7,"../src/world.js":16}],3:[function(require,module,exports){
+},{"../src/world.js":19}],5:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -5438,7 +5645,7 @@ function setDefaultType(ctor) {
   setDefaultType$1(ctor);
 }
 
-},{}],4:[function(require,module,exports){
+},{}],6:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -5459,7 +5666,7 @@ class MEBall {
     this.cameras = o.cameras;
     this.scale = o.scale;
     console.log('passed : o.mainCameraParams.responseCoef ', o.mainCameraParams.responseCoef);
-    this.cameraParams = {
+    this.mainCameraParams = {
       type: o.mainCameraParams.type,
       responseCoef: o.mainCameraParams.responseCoef
     }; // |  WASD 'arcball' };
@@ -5693,11 +5900,11 @@ class MEBall {
   getTransformationMatrix(pos) {
     // const viewMatrix = mat4.identity();
     const now = Date.now();
-    const deltaTime = (now - this.lastFrameMS) / this.cameraParams.responseCoef;
+    const deltaTime = (now - this.lastFrameMS) / this.mainCameraParams.responseCoef;
     this.lastFrameMS = now;
 
     // const viewMatrix = mat4.identity(); ORI
-    const camera = this.cameras[this.cameraParams.type];
+    const camera = this.cameras[this.mainCameraParams.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);
@@ -5845,7 +6052,7 @@ class MEBall {
 }
 exports.default = MEBall;
 
-},{"../shaders/shaders":13,"./engine":6,"./matrix-class":8,"wgpu-matrix":3}],5:[function(require,module,exports){
+},{"../shaders/shaders":16,"./engine":8,"./matrix-class":10,"wgpu-matrix":5}],7:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -5870,7 +6077,7 @@ class MECube {
     this.inputHandler = (0, _engine.createInputHandler)(window, canvas);
     this.cameras = o.cameras;
     console.log('passed : o.mainCameraParams.responseCoef ', o.mainCameraParams.responseCoef);
-    this.cameraParams = {
+    this.mainCameraParams = {
       type: o.mainCameraParams.type,
       responseCoef: o.mainCameraParams.responseCoef
     }; // |  WASD 'arcball' };
@@ -5880,6 +6087,9 @@ class MECube {
       code: _shaders.UNLIT_SHADER
     });
     this.texturesPaths = [];
+
+    // useUVShema4x2 pass this from top !
+
     o.texturesPaths.forEach(t => {
       this.texturesPaths.push(t);
     });
@@ -5967,8 +6177,6 @@ class MECube {
         });
         this.transform = _wgpuMatrix.mat4.create();
         _wgpuMatrix.mat4.identity(this.transform);
-
-        // Create one large central planet surrounded by a large ring of asteroids
         this.planet = this.createGeometry({
           scale: this.scale,
           useUVShema4x2: false
@@ -6107,11 +6315,11 @@ class MECube {
   }
   getTransformationMatrix(pos) {
     const now = Date.now();
-    const deltaTime = (now - this.lastFrameMS) / this.cameraParams.responseCoef;
+    const deltaTime = (now - this.lastFrameMS) / this.mainCameraParams.responseCoef;
     this.lastFrameMS = now;
 
     // const viewMatrix = mat4.identity(); ORI
-    const camera = this.cameras[this.cameraParams.type];
+    const camera = this.cameras[this.mainCameraParams.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);
@@ -6254,7 +6462,7 @@ class MECube {
 }
 exports.default = MECube;
 
-},{"../shaders/shaders":13,"./engine":6,"./matrix-class":8,"wgpu-matrix":3}],6:[function(require,module,exports){
+},{"../shaders/shaders":16,"./engine":8,"./matrix-class":10,"wgpu-matrix":5}],8:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -6263,6 +6471,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.WASDCamera = exports.ArcballCamera = void 0;
 exports.createInputHandler = createInputHandler;
 var _wgpuMatrix = require("wgpu-matrix");
+var _utils = require("./utils");
 // 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.
@@ -6385,8 +6594,6 @@ class WASDCamera extends CameraBase {
   set velocity(vec) {
     _wgpuMatrix.vec3.copy(vec, this.velocity_);
   }
-
-  // Construtor
   constructor(options) {
     super();
     if (options && (options.position || options.target)) {
@@ -6395,7 +6602,7 @@ class WASDCamera extends CameraBase {
       const forward = _wgpuMatrix.vec3.normalize(_wgpuMatrix.vec3.sub(target, position));
       this.recalculateAngles(forward);
       this.position = position;
-      console.log('camera postion:', position);
+      // console.log(`%cCamera pos: ${position}`, LOG_INFO);
     }
   }
 
@@ -6593,9 +6800,7 @@ function lerp(a, b, s) {
   return _wgpuMatrix.vec3.addScaled(a, _wgpuMatrix.vec3.sub(b, a), s);
 }
 
-// IMPUT 
-
-// // Input holds as snapshot of input state
+// Input holds as snapshot of input state
 // export default interface Input {
 //   // Digital input (e.g keyboard state)
 //   readonly digital: {
@@ -6614,10 +6819,8 @@ function lerp(a, b, s) {
 //     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 = {
@@ -6717,7 +6920,7 @@ function createInputHandler(window, canvas) {
   };
 }
 
-},{"wgpu-matrix":3}],7:[function(require,module,exports){
+},{"./utils":13,"wgpu-matrix":5}],9:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -7181,7 +7384,7 @@ function play(nameAni) {
   this.animation.currentAni = this.animation.anims[this.animation.anims.active].from;
 }
 
-},{}],8:[function(require,module,exports){
+},{}],10:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -7189,14 +7392,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Rotation = exports.Position = void 0;
 var _utils = require("./utils");
-// Sub classes for matrix-wgpu
 /**
- * @description Base class
+ * @description 
+ * Sub classes for matrix-wgpu
+ * Base class
  * Position { x, y, z }
  */
 
 class Position {
   constructor(x, y, z) {
+    console.log('TEST TYTPOF ', x);
     // Not in use for nwo this is from matrix-engine project [nameUniq]
     this.nameUniq = null;
     if (typeof x == 'undefined') x = 0;
@@ -7353,13 +7558,21 @@ class Rotation {
       y: 0,
       z: 0
     };
+    this.angle = 0;
+    this.axis = {
+      x: 0,
+      y: 0,
+      z: 0
+    };
+    // not in use good for exstend logic
+    this.matrixRotation = null;
   }
   getRotX() {
     if (this.rotationSpeed.x == 0) {
       return (0, _utils.degToRad)(this.x);
     } else {
       this.x = this.x + this.rotationSpeed.x * 0.001;
-      return this.x;
+      return (0, _utils.degToRad)(this.x);
     }
   }
   getRotY() {
@@ -7367,7 +7580,7 @@ class Rotation {
       return (0, _utils.degToRad)(this.y);
     } else {
       this.y = this.y + this.rotationSpeed.y * 0.001;
-      return this.y;
+      return (0, _utils.degToRad)(this.y);
     }
   }
   getRotZ() {
@@ -7375,13 +7588,13 @@ class Rotation {
       return (0, _utils.degToRad)(this.z);
     } else {
       this.z = this.z + this.rotationSpeed.z * 0.001;
-      return this.z;
+      return (0, _utils.degToRad)(this.z);
     }
   }
 }
 exports.Rotation = Rotation;
 
-},{"./utils":11}],9:[function(require,module,exports){
+},{"./utils":13}],11:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -7394,6 +7607,7 @@ var _engine = require("./engine");
 var _vertexShadow = require("../shaders/vertexShadow.wgsl");
 var _fragment = require("../shaders/fragment.wgsl");
 var _vertex = require("../shaders/vertex.wgsl");
+var _utils = require("./utils");
 class MEMeshObj {
   constructor(canvas, device, context, o) {
     this.done = false;
@@ -7404,10 +7618,10 @@ class MEMeshObj {
     // Mesh stuff
     this.mesh = o.mesh;
     this.mesh.uvs = this.mesh.textures;
-    console.log('mesh obj: ', this.mesh);
+    console.log(`%c Mesh loaded: ${o.name}`, _utils.LOG_INFO);
     this.inputHandler = (0, _engine.createInputHandler)(window, canvas);
     this.cameras = o.cameras;
-    this.cameraParams = {
+    this.mainCameraParams = {
       type: o.mainCameraParams.type,
       responseCoef: o.mainCameraParams.responseCoef
     };
@@ -7431,7 +7645,7 @@ class MEMeshObj {
         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);
+          // console.log('loaded tex buffer for mesh:', this.texture0)
           resolve();
         });
       });
@@ -7715,23 +7929,23 @@ class MEMeshObj {
       // Rotates the camera around the origin based on time.
       this.getTransformationMatrix = pos => {
         const now = Date.now();
-        const deltaTime = (now - this.lastFrameMS) / this.cameraParams.responseCoef;
+        const deltaTime = (now - this.lastFrameMS) / this.mainCameraParams.responseCoef;
         this.lastFrameMS = now;
-
         // const this.viewMatrix = mat4.identity()
-        const camera = this.cameras[this.cameraParams.type];
+        const camera = this.cameras[this.mainCameraParams.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.rotate(this.viewMatrix, _wgpuMatrix.vec3.fromValues(this.rotation.axis.x, this.rotation.axis.y, this.rotation.axis.z), (0, _utils.degToRad)(this.rotation.angle), this.viewMatrix);
+        // mat4.rotateX(this.viewMatrix, this.rotation.getRotX(), this.viewMatrix);
+        // mat4.rotateY(this.viewMatrix, this.rotation.getRotY(), this.viewMatrix);
+        // mat4.rotateZ(this.viewMatrix, 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);
+      this.lightPosition = _wgpuMatrix.vec3.fromValues(0, 10, -2);
+      this.lightViewMatrix = _wgpuMatrix.mat4.lookAt(this.lightPosition, this.origin, this.upVector);
       const lightProjectionMatrix = _wgpuMatrix.mat4.create();
       {
         const left = -80;
@@ -7742,15 +7956,15 @@ class MEMeshObj {
         const far = 300;
         _wgpuMatrix.mat4.ortho(left, right, bottom, top, near, far, lightProjectionMatrix);
       }
-      const lightViewProjMatrix = _wgpuMatrix.mat4.multiply(lightProjectionMatrix, lightViewMatrix);
+      this.lightViewProjMatrix = _wgpuMatrix.mat4.multiply(lightProjectionMatrix, this.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;
+        const lightMatrixData = this.lightViewProjMatrix; // as Float32Array;
         this.device.queue.writeBuffer(this.sceneUniformBuffer, 0, lightMatrixData.buffer, lightMatrixData.byteOffset, lightMatrixData.byteLength);
-        const lightData = lightPosition;
+        const lightData = this.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);
@@ -7767,6 +7981,46 @@ class MEMeshObj {
       this.done = true;
     });
   }
+  updateLightsTest = position => {
+    console.log('test !');
+    ////////////////////////
+    this.lightPosition = _wgpuMatrix.vec3.fromValues(position[0], position[1], position[2]);
+    this.lightViewMatrix = _wgpuMatrix.mat4.lookAt(this.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);
+    }
+    this.lightViewProjMatrix = _wgpuMatrix.mat4.multiply(lightProjectionMatrix, this.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 = this.lightViewProjMatrix; // as Float32Array;
+      this.device.queue.writeBuffer(this.sceneUniformBuffer, 0, lightMatrixData.buffer, lightMatrixData.byteOffset, lightMatrixData.byteLength);
+      const lightData = this.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'
+      }
+    };
+
+    ///////////////////////
+  };
   async loadTex0(texturesPaths, device) {
     this.sampler = device.createSampler({
       magFilter: 'linear',
@@ -7793,35 +8047,29 @@ class MEMeshObj {
     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();
-    }
+  };
+  drawElements = renderPass => {
+    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);
+  };
+  drawShadows = shadowPass => {
+    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);
   };
 }
 exports.default = MEMeshObj;
 
-},{"../shaders/fragment.wgsl":12,"../shaders/vertex.wgsl":14,"../shaders/vertexShadow.wgsl":15,"./engine":6,"./matrix-class":8,"wgpu-matrix":3}],10:[function(require,module,exports){
+},{"../shaders/fragment.wgsl":15,"../shaders/vertex.wgsl":17,"../shaders/vertexShadow.wgsl":18,"./engine":8,"./matrix-class":10,"./utils":13,"wgpu-matrix":5}],12:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -7844,8 +8092,7 @@ class MEMesh {
     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 = {
+    this.mainCameraParams = {
       type: o.mainCameraParams.type,
       responseCoef: o.mainCameraParams.responseCoef
     };
@@ -7856,7 +8103,7 @@ class MEMesh {
     });
     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);
+    // 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;
@@ -8120,9 +8367,9 @@ class MEMesh {
       // Rotates the camera around the origin based on time.
       this.getTransformationMatrix = pos => {
         const now = Date.now();
-        const deltaTime = (now - this.lastFrameMS) / this.cameraParams.responseCoef;
+        const deltaTime = (now - this.lastFrameMS) / this.mainCameraParams.responseCoef;
         this.lastFrameMS = now;
-        const camera = this.cameras[this.cameraParams.type];
+        const camera = this.cameras[this.mainCameraParams.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);
@@ -8220,14 +8467,30 @@ class MEMesh {
 }
 exports.default = MEMesh;
 
-},{"../shaders/fragment.wgsl":12,"../shaders/vertex.wgsl":14,"../shaders/vertexShadow.wgsl":15,"./engine":6,"./loader-obj":7,"./matrix-class":8,"wgpu-matrix":3}],11:[function(require,module,exports){
+},{"../shaders/fragment.wgsl":15,"../shaders/vertex.wgsl":17,"../shaders/vertexShadow.wgsl":18,"./engine":8,"./loader-obj":9,"./matrix-class":10,"wgpu-matrix":5}],13:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.LOG_WARN = exports.LOG_MATRIX = exports.LOG_INFO = exports.LOG_FUNNY = void 0;
+exports.ORBIT = ORBIT;
+exports.ORBIT_FROM_ARRAY = ORBIT_FROM_ARRAY;
+exports.OSCILLATOR = OSCILLATOR;
+exports.QueryString = void 0;
+exports.SWITCHER = SWITCHER;
+exports.byId = void 0;
+exports.createAppEvent = createAppEvent;
 exports.degToRad = degToRad;
-exports.vec3 = exports.mat4 = void 0;
+exports.getAxisRot = getAxisRot;
+exports.getAxisRot2 = getAxisRot2;
+exports.getAxisRot3 = getAxisRot3;
+exports.mat4 = void 0;
+exports.quaternion_rotation_matrix = quaternion_rotation_matrix;
+exports.radToDeg = radToDeg;
+exports.randomFloatFromTo = randomFloatFromTo;
+exports.randomIntFromTo = randomIntFromTo;
+exports.vec3 = exports.scriptManager = void 0;
 const vec3 = exports.vec3 = {
   cross(a, b, dst) {
     dst = dst || new Float32Array(3);
@@ -8598,8 +8861,451 @@ function degToRad(degrees) {
   return degrees * Math.PI / 180;
 }
 ;
+function radToDeg(r) {
+  var pi = Math.PI;
+  return r * (180 / pi);
+}
+;
+function createAppEvent(name, myDetails) {
+  return new CustomEvent(name, {
+    detail: {
+      eventName: name,
+      data: myDetails
+    },
+    bubbles: true
+  });
+}
+
+/**
+ * @description
+ * Load script in runtime.
+ */
+var scriptManager = exports.scriptManager = {
+  SCRIPT_ID: 0,
+  LOAD: function addScript(src, id, type, parent, callback) {
+    var s = document.createElement('script');
+    s.onload = function () {
+      // console.log('Script id loaded [src]: ' + this.src);
+      if (typeof callback != 'undefined') callback();
+    };
+    if (typeof type !== 'undefined') {
+      s.setAttribute('type', type);
+      s.innerHTML = src;
+    } else {
+      s.setAttribute('src', src);
+    }
+    if (typeof id !== 'undefined') {
+      s.setAttribute('id', id);
+    }
+    if (typeof parent !== 'undefined') {
+      document.getElementById(parent).appendChild(s);
+      if (typeof callback != 'undefined') callback();
+    } else {
+      document.body.appendChild(s);
+    }
+  },
+  loadModule: function addScript(src, id, type, parent) {
+    console.log('Script id load called ');
+    var s = document.createElement('script');
+    s.onload = function () {
+      scriptManager.SCRIPT_ID++;
+    };
+    if (typeof type === 'undefined') {
+      s.setAttribute('type', 'module');
+      s.setAttribute('src', src);
+    } else {
+      s.setAttribute('type', type);
+      s.innerHTML = src;
+    }
+    s.setAttribute('src', src);
+    if (typeof id !== 'undefined') {
+      s.setAttribute('id', id);
+    }
+    if (typeof parent !== 'undefined') {
+      document.getElementById(parent).appendChild(s);
+    } else {
+      document.body.appendChild(s);
+    }
+  },
+  loadGLSL: function (src) {
+    return new Promise(resolve => {
+      fetch(src).then(data => {
+        resolve(data.text());
+      });
+    });
+  }
+};
 
-},{}],12:[function(require,module,exports){
+// GET PULSE VALUES IN REAL TIME
+function OSCILLATOR(min, max, step) {
+  if ((typeof min === 'string' || typeof min === 'number') && (typeof max === 'string' || typeof max === 'number') && (typeof step === 'string' || typeof step === 'number')) {
+    var ROOT = this;
+    this.min = parseFloat(min);
+    this.max = parseFloat(max);
+    this.step = parseFloat(step);
+    this.value_ = parseFloat(min);
+    this.status = 0;
+    this.on_maximum_value = function () {};
+    this.on_minimum_value = function () {};
+    this.UPDATE = function (STATUS_) {
+      if (STATUS_ === undefined) {
+        if (this.status == 0 && this.value_ < this.max) {
+          this.value_ = this.value_ + this.step;
+          if (this.value_ >= this.max) {
+            this.value_ = this.max;
+            this.status = 1;
+            ROOT.on_maximum_value();
+          }
+          return this.value_;
+        } else if (this.status == 1 && this.value_ > this.min) {
+          this.value_ = this.value_ - this.step;
+          if (this.value_ <= this.min) {
+            this.value_ = this.min;
+            this.status = 0;
+            ROOT.on_minimum_value();
+          }
+          return this.value_;
+        }
+      } else {
+        return this.value_;
+      }
+    };
+  } else {
+    console.log("SYS : warning for procedure 'SYS.MATH.OSCILLATOR' Desciption : Replace object with string or number, min >> " + typeof min + ' and max >>' + typeof max + ' and step >>' + typeof step + ' << must be string or number.');
+  }
+}
+
+// this is class not func ecma5
+function SWITCHER() {
+  var ROOT = this;
+  ROOT.VALUE = 1;
+  ROOT.GET = function () {
+    ROOT.VALUE = ROOT.VALUE * -1;
+    return ROOT.VALUE;
+  };
+}
+function ORBIT(cx, cy, angle, p) {
+  var s = Math.sin(angle);
+  var c = Math.cos(angle);
+  p.x -= cx;
+  p.y -= cy;
+  var xnew = p.x * c - p.y * s;
+  var ynew = p.x * s + p.y * c;
+  p.x = xnew + cx;
+  p.y = ynew + cy;
+  return p;
+}
+function ORBIT_FROM_ARRAY(cx, cy, angle, p, byIndexs) {
+  var s = Math.sin(angle);
+  var c = Math.cos(angle);
+  p[byIndexs[0]] -= cx;
+  p[byIndexs[1]] -= cy;
+  var xnew = p[byIndexs[0]] * c - p[byIndexs[1]] * s;
+  var ynew = p[byIndexs[0]] * s + p[byIndexs[1]] * c;
+  p[byIndexs[0]] = xnew + cx;
+  p[byIndexs[1]] = ynew + cy;
+  return p;
+}
+var byId = function (id) {
+  return document.getElementById(id);
+};
+exports.byId = byId;
+function randomFloatFromTo(min, max) {
+  return Math.random() * (max - min) + min;
+}
+function randomIntFromTo(min, max) {
+  if (typeof min === 'object' || typeof max === 'object') {
+    console.log("SYS : warning Desciption : Replace object with string , this >> " + typeof min + ' and ' + typeof min + ' << must be string or number.');
+  } else if (typeof min === 'undefined' || typeof max === 'undefined') {
+    console.log("SYS : warning Desciption : arguments (min, max) cant be undefined , this >> " + typeof min + ' and ' + typeof min + ' << must be string or number.');
+  } else {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+  }
+}
+var QueryString = exports.QueryString = function () {
+  var query_string = {};
+  var query = window.location.search.substring(1);
+  var vars = query.split('&');
+  for (var i = 0; i < vars.length; i++) {
+    var pair = vars[i].split('=');
+    if (typeof query_string[pair[0]] === 'undefined') {
+      query_string[pair[0]] = decodeURIComponent(pair[1]);
+    } else if (typeof query_string[pair[0]] === 'string') {
+      var arr = [query_string[pair[0]], decodeURIComponent(pair[1])];
+      query_string[pair[0]] = arr;
+    } else {
+      query_string[pair[0]].push(decodeURIComponent(pair[1]));
+    }
+  }
+  return query_string;
+}();
+function getAxisRot(q1) {
+  var x, y, z;
+
+  // if w>1 acos and sqrt will produce errors, this cant happen if quaternion is normalised
+  if (q1.w > 1) q1.normalise();
+  var angle = 2 * Math.acos(q1.w);
+  // assuming quaternion normalised then w is less than 1, so term always positive.
+  var s = Math.sqrt(1 - q1.w * q1.w);
+  // test to avoid divide by zero, s is always positive due to sqrt
+  if (s < 0.001) {
+    // if s close to zero then direction of axis not important
+    // if it is important that axis is normalised then replace with x=1; y=z=0;
+
+    x = q1.x;
+    y = q1.y;
+    z = q1.z;
+  } else {
+    x = q1.x / s; // normalise axis
+    y = q1.y / s;
+    z = q1.z / s;
+  }
+  return [radToDeg(x), radToDeg(y), radToDeg(z)];
+}
+function getAxisRot2(targetAxis, Q) {
+  Q.normalize(); // if w>1 acos and sqrt will produce errors, this cant happen if quaternion is normalised
+  var angle = 2 * Math.acos(Q.w());
+  var s = Math.sqrt(1 - Q.w() * Q.w()); // assuming quaternion normalised then w is less than 1, so term always positive.
+  if (s < 0.001) {
+    // test to avoid divide by zero, s is always positive due to sqrt
+    // if s close to zero then direction of axis not important
+    // if it is important that axis is normalised then replace with x=1; y=z=0;
+    // targetAxis.x = 1;
+    // targetAxis.y = 0;
+    // targetAxis.z = 0;
+    targetAxis.x = Q.x();
+    targetAxis.y = Q.y();
+    targetAxis.z = Q.z();
+  } else {
+    targetAxis.x = Q.x() / s; // normalise axis
+    targetAxis.y = Q.y() / s;
+    targetAxis.z = Q.z() / s;
+  }
+  return [targetAxis, angle];
+}
+function getAxisRot3(Q) {
+  var angle = Math.acos(Q.w) * 2;
+  var axis = {};
+  if (Math.sin(Math.acos(angle)) > 0) {
+    axis.x = Q.x / Math.sin(Math.acos(angle / 2));
+    axis.y = Q.y / Math.sin(Math.acos(angle / 2));
+    axis.z = Q.z / Math.sin(Math.acos(angle / 2));
+  } else {
+    axis.x = 0;
+    axis.y = 0;
+    axis.z = 0;
+  }
+  return axis;
+}
+
+// NTO TESTED
+function quaternion_rotation_matrix(Q) {
+  // Covert a quaternion into a full three-dimensional rotation matrix.
+
+  // Input
+  // :param Q: A 4 element array representing the quaternion (q0,q1,q2,q3) 
+
+  // Output
+  // :return: A 3x3 element matrix representing the full 3D rotation matrix. 
+  //          This rotation matrix converts a point in the local reference 
+  //          frame to a point in the global reference frame.
+  // """
+  // # Extract the values from Q
+  var q0 = Q[0];
+  var q1 = Q[1];
+  var q2 = Q[2];
+  var q3 = Q[3];
+
+  // # First row of the rotation matrix
+  var r00 = 2 * (q0 * q0 + q1 * q1) - 1;
+  var r01 = 2 * (q1 * q2 - q0 * q3);
+  var r02 = 2 * (q1 * q3 + q0 * q2);
+
+  // # Second row of the rotation matrix
+  var r10 = 2 * (q1 * q2 + q0 * q3);
+  var r11 = 2 * (q0 * q0 + q2 * q2) - 1;
+  var r12 = 2 * (q2 * q3 - q0 * q1);
+
+  // # Third row of the rotation matrix
+  var r20 = 2 * (q1 * q3 - q0 * q2);
+  var r21 = 2 * (q2 * q3 + q0 * q1);
+  var r22 = 2 * (q0 * q0 + q3 * q3) - 1;
+
+  // # 3x3 rotation matrix
+  var rot_matrix = [[r00, r01, r02], [r10, r11, r12], [r20, r21, r22]];
+  return rot_matrix;
+}
+
+// copnsole log graphics
+const LOG_WARN = exports.LOG_WARN = 'background: gray; color: yellow; font-size:10px';
+const LOG_INFO = exports.LOG_INFO = 'background: green; color: white; font-size:11px';
+const LOG_MATRIX = exports.LOG_MATRIX = "font-family: verdana;color: #lime; font-size:11px;text-shadow: 2px 2px 4px orangered;background: black;";
+const LOG_FUNNY = exports.LOG_FUNNY = "font-family: stormfaze;color: #f1f033; font-size:14px;text-shadow: 2px 2px 4px #f335f4, 4px 4px 4px #d64444, 2px 2px 4px #c160a6, 6px 2px 0px #123de3;background: black;";
+
+},{}],14:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _wgpuMatrix = require("wgpu-matrix");
+var _utils = require("../engine/utils");
+class MatrixAmmo {
+  constructor() {
+    // THIS PATH IS PATH FROM PUBLIC FINAL FOLDER
+    _utils.scriptManager.LOAD("./ammojs/ammo.js", "ammojs", undefined, undefined, this.init);
+  }
+  init = () => {
+    console.log('pre ammo');
+    Ammo().then(Ammo => {
+      // Physics variables
+      this.dynamicsWorld = null;
+      this.rigidBodies = [];
+      this.Ammo = Ammo;
+      this.lastUpdate = 0;
+      console.log("%c Ammo core loaded.", _utils.LOG_FUNNY);
+      this.initPhysics();
+      // simulate async
+      setTimeout(() => dispatchEvent(new CustomEvent('AmmoReady', {})), 100);
+    });
+  };
+  initPhysics() {
+    let Ammo = this.Ammo;
+
+    // Physics configuration
+    var collisionConfiguration = new Ammo.btDefaultCollisionConfiguration(),
+      dispatcher = new Ammo.btCollisionDispatcher(collisionConfiguration),
+      overlappingPairCache = new Ammo.btDbvtBroadphase(),
+      solver = new Ammo.btSequentialImpulseConstraintSolver();
+    this.dynamicsWorld = new Ammo.btDiscreteDynamicsWorld(dispatcher, overlappingPairCache, solver, collisionConfiguration);
+    this.dynamicsWorld.setGravity(new Ammo.btVector3(0, -10, 0));
+    var groundShape = new Ammo.btBoxShape(new Ammo.btVector3(50, 0.5, 50)),
+      groundTransform = new Ammo.btTransform();
+    groundTransform.setIdentity();
+    groundTransform.setOrigin(new Ammo.btVector3(0, -1, 0));
+    var mass = 0,
+      isDynamic = mass !== 0,
+      localInertia = new Ammo.btVector3(0, 0, 0);
+    if (isDynamic) groundShape.calculateLocalInertia(mass, localInertia);
+    var myMotionState = new Ammo.btDefaultMotionState(groundTransform),
+      rbInfo = new Ammo.btRigidBodyConstructionInfo(mass, myMotionState, groundShape, localInertia),
+      body = new Ammo.btRigidBody(rbInfo);
+    this.dynamicsWorld.addRigidBody(body);
+    // this.rigidBodies.push(body);
+  }
+  addPhysics(MEObject, pOptions) {
+    if (pOptions.geometry == "Sphere") {
+      this.addPhysicsSphere(MEObject, pOptions);
+    } else if (pOptions.geometry == "Cube") {
+      this.addPhysicsBox(MEObject, pOptions);
+    }
+  }
+  addPhysicsSphere(MEObject, pOptions) {
+    let Ammo = this.Ammo;
+    var colShape = new Ammo.btSphereShape(pOptions.radius),
+      startTransform = new Ammo.btTransform();
+    startTransform.setIdentity();
+    var mass = 1;
+    var localInertia = new Ammo.btVector3(0, 0, 0);
+    colShape.calculateLocalInertia(mass, localInertia);
+    startTransform.setOrigin(new Ammo.btVector3(pOptions.position.x, pOptions.position.y, pOptions.position.z));
+    var myMotionState = new Ammo.btDefaultMotionState(startTransform),
+      rbInfo = new Ammo.btRigidBodyConstructionInfo(mass, myMotionState, colShape, localInertia),
+      body = new Ammo.btRigidBody(rbInfo);
+    body.MEObject = MEObject;
+    this.dynamicsWorld.addRigidBody(body);
+    this.rigidBodies.push(body);
+    return body;
+  }
+  addPhysicsBox(MEObject, pOptions) {
+    const FLAGS = {
+      CF_KINEMATIC_OBJECT: 2
+    };
+    let Ammo = this.Ammo;
+    var colShape = new Ammo.btBoxShape(new Ammo.btVector3(1, 1, 1)),
+      startTransform = new Ammo.btTransform();
+    startTransform.setIdentity();
+    var mass = pOptions.mass;
+    var localInertia = new Ammo.btVector3(0, 0, 0);
+    colShape.calculateLocalInertia(mass, localInertia);
+    startTransform.setOrigin(new Ammo.btVector3(pOptions.position.x, pOptions.position.y, pOptions.position.z));
+    var myMotionState = new Ammo.btDefaultMotionState(startTransform),
+      rbInfo = new Ammo.btRigidBodyConstructionInfo(mass, myMotionState, colShape, localInertia),
+      body = new Ammo.btRigidBody(rbInfo);
+    if (pOptions.mass == 0 && typeof pOptions.state == 'undefined') {
+      body.setActivationState(2);
+      body.setCollisionFlags(FLAGS.CF_KINEMATIC_OBJECT);
+      console.log('what is pOptions.mass and state is 2 ....', pOptions.mass);
+    } else {
+      body.setActivationState(4);
+    }
+    body.MEObject = MEObject;
+    this.dynamicsWorld.addRigidBody(body);
+    this.rigidBodies.push(body);
+    return body;
+  }
+  setBodyVelocity(body, x, y, z) {
+    var tbv30 = new Ammo.btVector3();
+    tbv30.setValue(x, y, z);
+    body.setLinearVelocity(tbv30);
+  }
+  setKinematicTransform(body, x, y, z) {
+    let pos = new Ammo.btVector3();
+    let quat = new Ammo.btQuaternion();
+    pos = body.getWorldTransform().getOrigin();
+    let localRot = pos = body.getWorldTransform().getRotation();
+    pos.setX(pos.x() + x);
+    pos.setY(pos.y() + y);
+    pos.setZ(pos.z() + z);
+    console.log('position kinematic move : ', pos);
+    console.log('position localRot  : ', localRot);
+
+    // body.getWorldQuaternion(quat);
+    // let physicsBody = kObject.userData.physicsBody;
+    let physicsBody = body;
+    let ms = physicsBody.getMotionState();
+    if (ms) {
+      var tmpTrans = new Ammo.btTransform();
+      console.log('TEST pos  x:', pos.x(), " y : ", pos.y(), " z:", pos.z());
+      // quat.setValue(quat.x(), quat.y(), quat.z(), quat.w());
+      tmpTrans.setIdentity();
+      tmpTrans.setOrigin(pos);
+      // tmpTrans.setRotation(quat);
+      ms.setWorldTransform(tmpTrans);
+    }
+    console.log('body, ', body);
+  }
+  updatePhysics() {
+    // Step world
+    this.dynamicsWorld.stepSimulation(1 / 60, 10);
+    // Update rigid bodies
+    var trans = new Ammo.btTransform();
+    this.rigidBodies.forEach(function (body) {
+      if (body.getMotionState()) {
+        body.getMotionState().getWorldTransform(trans);
+        var _x = trans.getOrigin().x().toFixed(2);
+        var _y = trans.getOrigin().y().toFixed(2);
+        var _z = trans.getOrigin().z().toFixed(2);
+        body.MEObject.position.setPosition(_x, _y, _z);
+        var test = trans.getRotation();
+        var testAxis = test.getAxis();
+        test.normalize();
+        body.MEObject.rotation.axis.x = testAxis.x();
+        body.MEObject.rotation.axis.y = testAxis.y();
+        body.MEObject.rotation.axis.z = testAxis.z();
+        // var tx = radToDeg(parseFloat(test.getAngle().toFixed(2)) * testAxis.x().toFixed(2))
+        // var ty = radToDeg(parseFloat(test.getAngle().toFixed(2)) * testAxis.y().toFixed(2))
+        // var tz = radToDeg(parseFloat(test.getAngle().toFixed(2)) * testAxis.z().toFixed(2))
+        body.MEObject.rotation.matrixRotation = (0, _utils.quaternion_rotation_matrix)(test);
+        body.MEObject.rotation.angle = (0, _utils.radToDeg)(parseFloat(test.getAngle().toFixed(2)));
+      }
+    });
+  }
+}
+exports.default = MatrixAmmo;
+
+},{"../engine/utils":13,"wgpu-matrix":5}],15:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -8655,7 +9361,7 @@ fn main(input : FragmentInput) -> @location(0) vec4f {
   return vec4(textureColor.rgb * lightingFactor * albedo, 1.0);
 }`;
 
-},{}],13:[function(require,module,exports){
+},{}],16:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -8713,7 +9419,7 @@ fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
   return vec4f(textureColor.rgb * lightColor, textureColor.a);
 }`;
 
-},{}],14:[function(require,module,exports){
+},{}],17:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -8770,7 +9476,7 @@ fn main(
 }
 `;
 
-},{}],15:[function(require,module,exports){
+},{}],18:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -8798,7 +9504,7 @@ fn main(
 }
 `;
 
-},{}],16:[function(require,module,exports){
+},{}],19:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -8811,6 +9517,8 @@ 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"));
+var _matrixAmmo = _interopRequireDefault(require("./physics/matrix-ammo.js"));
+var _utils = require("./engine/utils.js");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 class MatrixEngineWGPU {
   mainRenderBundle = [];
@@ -8823,6 +9531,7 @@ class MatrixEngineWGPU {
     depthLoadOp: 'clear',
     depthStoreOp: 'store'
   };
+  matrixAmmo = new _matrixAmmo.default();
 
   // The input handler
   constructor(options, callback) {
@@ -8830,11 +9539,22 @@ class MatrixEngineWGPU {
     if (typeof options == 'undefined' || typeof options == "function") {
       this.options = {
         useSingleRenderPass: true,
-        canvasSize: 'fullscreen'
+        canvasSize: 'fullscreen',
+        mainCameraParams: {
+          type: 'WASD',
+          responseCoef: 2000
+        }
       };
       callback = options;
     }
+    if (typeof options.mainCameraParams === 'undefined') {
+      options.mainCameraParams = {
+        type: 'WASD',
+        responseCoef: 2000
+      };
+    }
     this.options = options;
+    this.mainCameraParams = options.mainCameraParams;
     var canvas = document.createElement('canvas');
     if (this.options.canvasSize == 'fullscreen') {
       canvas.width = window.innerWidth;
@@ -8847,9 +9567,10 @@ class MatrixEngineWGPU {
 
     // The camera types
     const initialCameraPosition = _wgpuMatrix.vec3.create(0, 0, 0);
+    // console.log('passed : o.mainCameraParams.responseCoef ', o.mainCameraParams.responseCoef)
     this.mainCameraParams = {
-      type: 'WASD',
-      responseCoef: 2000
+      type: this.options.mainCameraParams.type,
+      responseCoef: this.options.mainCameraParams.responseCoef
     };
     this.cameras = {
       arcball: new _engine.ArcballCamera({
@@ -8882,40 +9603,14 @@ class MatrixEngineWGPU {
       alphaMode: 'premultiplied'
     });
     if (this.options.useSingleRenderPass == true) {
-      this.makeDefaultRenderPassDescriptor();
       this.frame = this.frameSinglePass;
     } else {
-      // must be
       this.frame = this.framePassPerObject;
     }
     this.run(callback);
   };
-  makeDefaultRenderPassDescriptor = () => {
-    this.depthTexture = this.device.createTexture({
-      size: [this.canvas.width, this.canvas.height],
-      format: 'depth24plus',
-      usage: GPUTextureUsage.RENDER_ATTACHMENT
-    });
-    this.renderPassDescriptor = {
-      colorAttachments: [{
-        view: undefined,
-        clearValue: {
-          r: 0.0,
-          g: 0.0,
-          b: 0.0,
-          a: 1.0
-        },
-        loadOp: 'clear',
-        storeOp: 'store'
-      }],
-      depthStencilAttachment: {
-        view: this.depthTexture.createView(),
-        depthClearValue: 1.0,
-        depthLoadOp: 'clear',
-        depthStoreOp: 'store'
-      }
-    };
-  };
+
+  // Not in use for now
   addCube = o => {
     if (typeof o === 'undefined') {
       var o = {
@@ -8977,6 +9672,8 @@ class MatrixEngineWGPU {
     let myCube1 = new _cube.default(this.canvas, this.device, this.context, o);
     this.mainRenderBundle.push(myCube1);
   };
+
+  // Not in use for now
   addBall = o => {
     if (typeof o === 'undefined') {
       var o = {
@@ -9038,6 +9735,8 @@ class MatrixEngineWGPU {
     let myBall1 = new _ball.default(this.canvas, this.device, this.context, o);
     this.mainRenderBundle.push(myBall1);
   };
+
+  // Not in use for now
   addMesh = o => {
     if (typeof o.position === 'undefined') {
       o.position = {
@@ -9122,8 +9821,34 @@ class MatrixEngineWGPU {
       throw console.error('arg mesh is empty...');
       return;
     }
-    console.log('Mesh procedure', o);
+    if (typeof o.physics === 'undefined') {
+      o.physics = {
+        enabled: false,
+        geometry: "Sphere",
+        radius: o.scale
+      };
+    }
+    if (typeof o.physics.enabled === 'undefined') {
+      o.physics.enabled = false;
+    }
+    if (typeof o.physics.geometry === 'undefined') {
+      o.physics.geometry = "Sphere";
+    }
+    if (typeof o.physics.radius === 'undefined') {
+      o.physics.radius = o.scale;
+    }
+    if (typeof o.physics.mass === 'undefined') {
+      o.physics.mass = 1;
+    }
+
+    // send same pos
+    o.physics.position = o.position;
+
+    // console.log('Mesh procedure', o)
     let myMesh1 = new _meshObj.default(this.canvas, this.device, this.context, o);
+    if (o.physics.enabled == true) {
+      this.matrixAmmo.addPhysics(myMesh1, o.physics);
+    }
     this.mainRenderBundle.push(myMesh1);
   };
   run(callback) {
@@ -9131,32 +9856,49 @@ class MatrixEngineWGPU {
       requestAnimationFrame(this.frame);
     }, 500);
     setTimeout(() => {
-      callback();
+      callback(this);
     }, 20);
   }
+  destroyProgram = () => {
+    this.mainRenderBundle = undefined;
+    this.canvas.remove();
+  };
   frameSinglePass = () => {
-    let passEncoder;
-    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.device.queue.submit([commandEncoder.finish()]);
-    requestAnimationFrame(this.frame);
+    if (typeof this.mainRenderBundle == 'undefined') return;
+    try {
+      let shadowPass = null;
+      let renderPass;
+      let commandEncoder = this.device.createCommandEncoder();
+      this.mainRenderBundle.forEach((meItem, index) => {
+        meItem.position.update();
+      });
+      this.matrixAmmo.updatePhysics();
+      this.mainRenderBundle.forEach((meItem, index) => {
+        meItem.draw(commandEncoder);
+        shadowPass = commandEncoder.beginRenderPass(meItem.shadowPassDescriptor);
+        shadowPass.setPipeline(meItem.shadowPipeline);
+        meItem.drawShadows(shadowPass);
+        shadowPass.end();
+      });
+      this.mainRenderBundle.forEach((meItem, index) => {
+        if (index == 0) {
+          renderPass = commandEncoder.beginRenderPass(meItem.renderPassDescriptor);
+          renderPass.setPipeline(meItem.pipeline);
+        }
+      });
+      this.mainRenderBundle.forEach((meItem, index) => {
+        meItem.drawElements(renderPass);
+      });
+      if (renderPass) renderPass.end();
+      this.device.queue.submit([commandEncoder.finish()]);
+      requestAnimationFrame(this.frame);
+    } catch (err) {
+      console.log('%cDraw func (err):' + err, _utils.LOG_WARN);
+      requestAnimationFrame(this.frame);
+    }
   };
   framePassPerObject = () => {
-    // console.log('framePassPerObject')
+    console.log('framePassPerObject');
     let commandEncoder = this.device.createCommandEncoder();
     this.rbContainer = [];
     let passEncoder;
@@ -9177,4 +9919,4 @@ class MatrixEngineWGPU {
 }
 exports.default = MatrixEngineWGPU;
 
-},{"./engine/ball.js":4,"./engine/cube.js":5,"./engine/engine.js":6,"./engine/mesh-obj.js":9,"./engine/mesh.js":10,"wgpu-matrix":3}]},{},[1]);
+},{"./engine/ball.js":6,"./engine/cube.js":7,"./engine/engine.js":8,"./engine/mesh-obj.js":11,"./engine/mesh.js":12,"./engine/utils.js":13,"./physics/matrix-ammo.js":14,"wgpu-matrix":5}]},{},[1]);