matrix-engine-wgpu 1.3.19 → 1.4.1

package/public/examples.js

@@ -95,6 +95,7 @@ var loadCameraTexture = function () {
       a: 1
     }
   }, () => {
+    cameraTexture.addLight();
     addEventListener('AmmoReady', () => {
       (0, _loaderObj.downloadMeshes)({
         welcomeText: "./res/meshes/blender/piramyd.obj",
@@ -158,8 +159,9 @@ 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");
-var _raycast = require("../src/engine/raycast.js");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// import {addRaycastsAABBListener} from "../src/engine/raycast.js";
+
 var loadObjFile = function () {
   let loadObjFile = new _world.default({
     useSingleRenderPass: true,
@@ -175,8 +177,6 @@ var loadObjFile = function () {
       a: 1
     }
   }, () => {
-    // loadObjFile.addLight()
-
     addEventListener('AmmoReady', () => {
       (0, _loaderObj.downloadMeshes)({
         ball: "./res/meshes/blender/sphere.obj",
@@ -187,7 +187,7 @@ var loadObjFile = function () {
       (0, _loaderObj.downloadMeshes)({
         cube: "./res/meshes/blender/cube.obj"
       }, onGround, {
-        scale: [25, 0.1, 25]
+        scale: [20, 1, 20]
       });
 
       // loadObjFile.addLight();
@@ -223,13 +223,13 @@ var loadObjFile = function () {
     function onLoadObj(m) {
       loadObjFile.myLoadedMeshes = m;
       for (var key in m) {
-        console.log(`%c Loaded objs: ${key} `, _utils.LOG_MATRIX);
+        // console.log(`%c Loaded objs: ${key} `, LOG_MATRIX);
       }
       loadObjFile.addMeshObj({
         position: {
           x: 0,
           y: 2,
-          z: -10
+          z: -20
         },
         rotation: {
           x: 0,
@@ -245,16 +245,16 @@ var loadObjFile = function () {
         name: 'cube1',
         mesh: m.cube,
         physics: {
-          enabled: true,
+          enabled: false,
           geometry: "Cube"
         }
         // raycast: { enabled: true , radius: 2 }
       });
       loadObjFile.addMeshObj({
         position: {
-          x: 3,
-          y: 2,
-          z: -15
+          x: 0,
+          y: -1,
+          z: -20
         },
         rotation: {
           x: 0,
@@ -270,7 +270,7 @@ var loadObjFile = function () {
         name: 'ball1',
         mesh: m.ball,
         physics: {
-          enabled: true,
+          enabled: false,
           geometry: "Sphere"
         }
         // raycast: { enabled: true , radius: 2 }
@@ -278,6 +278,7 @@ var loadObjFile = function () {
       var TEST = loadObjFile.getSceneObjectByName('cube2');
       console.log(`%c Test access scene ${TEST} object.`, _utils.LOG_MATRIX);
       loadObjFile.addLight();
+      // loadObjFile.addLight();
     }
   });
   // just for dev
@@ -285,7 +286,7 @@ var loadObjFile = function () {
 };
 exports.loadObjFile = loadObjFile;
 
-},{"../src/engine/loader-obj.js":12,"../src/engine/raycast.js":16,"../src/engine/utils.js":17,"../src/world.js":26}],4:[function(require,module,exports){
+},{"../src/engine/loader-obj.js":12,"../src/engine/utils.js":17,"../src/world.js":26}],4:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -306,6 +307,12 @@ var loadObjsSequence = function () {
     }
   }, () => {
     addEventListener('AmmoReady', () => {
+      // requied now
+      loadObjFile.addLight();
+
+      // adapt
+      app.lightContainer[0].position[2] = -5;
+      app.lightContainer[0].position[1] = 22;
       (0, _loaderObj.downloadMeshes)((0, _loaderObj.makeObjSeqArg)({
         id: "swat-walk-pistol",
         path: "res/meshes/objs-sequence/swat-walk-pistol",
@@ -442,6 +449,7 @@ var _loaderObj = require("../src/engine/loader-obj.js");
 var _utils = require("../src/engine/utils.js");
 var _raycast = require("../src/engine/raycast.js");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// @group(0) @binding(5) var<uniform> postFXMode: u32;
 var loadVideoTexture = function () {
   let videoTexture = new _world.default({
     useSingleRenderPass: true,
@@ -457,6 +465,10 @@ var loadVideoTexture = function () {
       a: 1
     }
   }, () => {
+    // For now one light perscene must be added.
+    // if you dont wanna light just use intesity = 0
+    // videoTexture is app main instance
+    videoTexture.addLight();
     addEventListener('AmmoReady', () => {
       (0, _loaderObj.downloadMeshes)({
         welcomeText: "./res/meshes/blender/piramyd.obj",
@@ -498,13 +510,11 @@ var loadVideoTexture = function () {
         // raycast: { enabled: true , radius: 2 }
       });
       var TEST = videoTexture.getSceneObjectByName('MyVideoTex');
-      setTimeout(() => {
-        console.log(`%c Test video-texture...`, _utils.LOG_MATRIX);
-        TEST.loadVideoTexture({
-          type: 'video',
-          src: 'res/videos/tunel.mp4'
-        });
-      }, 4000);
+      console.log(`%c Test video-texture...`, _utils.LOG_MATRIX);
+      TEST.loadVideoTexture({
+        type: 'video',
+        src: 'res/videos/tunel.mp4'
+      });
     }
   });
   window.app = videoTexture;
@@ -6733,7 +6743,7 @@ class CameraBase {
   set matrix(mat) {
     _wgpuMatrix.mat4.copy(mat, this.matrix_);
   }
-  setProjection(fov = 2 * Math.PI / 5, aspect = 1, near = 1, far = 1000) {
+  setProjection(fov = 2 * Math.PI / 5, aspect = 1, near = 0.5, far = 1000) {
     this.projectionMatrix = _wgpuMatrix.mat4.perspective(fov, aspect, near, far);
   }
 
@@ -7119,12 +7129,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SpotLight = void 0;
 var _wgpuMatrix = require("wgpu-matrix");
+var _vertexShadow = require("../shaders/vertexShadow.wgsl");
+/**
+ * @description
+ * Spot light with shodow cast.
+ * @author Nikola Lukic
+ * @email zlatnaspirala@gmail.com
+ */
 class SpotLight {
-  // injected
   camera;
   inputHandler;
-
-  // Light
   position;
   target;
   up;
@@ -7139,15 +7153,29 @@ class SpotLight {
   innerCutoff;
   outerCutoff;
   spotlightUniformBuffer;
-  constructor(camera, inputHandler, position = _wgpuMatrix.vec3.create(0, 5, -10), target = _wgpuMatrix.vec3.create(0, 0, 0), fov = 45, aspect = 1.0, near = 0.1, far = 200) {
+  constructor(camera, inputHandler, device, position = _wgpuMatrix.vec3.create(0, 10, -20), target = _wgpuMatrix.vec3.create(0, 0, -20), fov = 45, aspect = 1.0, near = 0.1, far = 200) {
+    this.fov = fov;
+    this.aspect = aspect;
+    this.near = near;
+    this.far = far;
     this.camera = camera;
     this.inputHandler = inputHandler;
     this.position = position;
     this.target = target;
-    this.up = _wgpuMatrix.vec3.create(0, 1, 0);
+    this.up = _wgpuMatrix.vec3.create(0, 0, -1);
     this.direction = _wgpuMatrix.vec3.normalize(_wgpuMatrix.vec3.subtract(target, position));
+    this.intensity = 1.0;
+    this.color = _wgpuMatrix.vec3.create(1.0, 1.0, 1.0); // white
+
     this.viewMatrix = _wgpuMatrix.mat4.lookAt(position, target, this.up);
-    this.projectionMatrix = _wgpuMatrix.mat4.perspective(fov * Math.PI / 180, aspect, near, far);
+    this.projectionMatrix = _wgpuMatrix.mat4.perspective(this.fov * Math.PI / 180, this.aspect, this.near, this.far);
+    this.setProjection = function (fov = 45, aspect = 1.0, near = 0.1, far = 200) {
+      this.projectionMatrix = _wgpuMatrix.mat4.perspective(fov, aspect, near, far);
+    };
+    this.updateProjection = function () {
+      this.projectionMatrix = _wgpuMatrix.mat4.perspective(this.fov, this.aspect, this.near, this.far);
+    };
+    this.device = device;
     this.viewProjMatrix = _wgpuMatrix.mat4.multiply(this.projectionMatrix, this.viewMatrix);
     this.fov = fov;
     this.aspect = aspect;
@@ -7155,77 +7183,145 @@ class SpotLight {
     this.far = far;
     this.innerCutoff = Math.cos(Math.PI / 180 * 12.5);
     this.outerCutoff = Math.cos(Math.PI / 180 * 17.5);
+    this.ambientFactor = 0.5;
+    this.range = 20.0;
+    this.shadowBias = 0.01;
+    this.SHADOW_RES = 1024;
+    this.primitive = {
+      topology: 'triangle-list',
+      cullMode: 'back',
+      // for front interest border drawen shadows !
+      frontFace: 'ccw'
+    };
+    this.shadowTexture = this.device.createTexture({
+      label: 'shadowTexture[light]',
+      size: [this.SHADOW_RES, this.SHADOW_RES, 1],
+      format: "depth32float",
+      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+    });
+    this.shadowSampler = device.createSampler({
+      label: 'shadowSampler[light]',
+      compare: 'less',
+      magFilter: 'linear',
+      minFilter: 'linear'
+    });
+    this.renderPassDescriptor = {
+      label: "renderPassDescriptor shadowPass [per SpotLigth]",
+      colorAttachments: [],
+      depthStencilAttachment: {
+        view: this.shadowTexture.createView(),
+        depthClearValue: 1.0,
+        depthLoadOp: "clear",
+        depthStoreOp: "store"
+      }
+    };
+    this.uniformBufferBindGroupLayout = this.device.createBindGroupLayout({
+      label: 'modelBindGroup in light',
+      entries: [{
+        binding: 0,
+        visibility: GPUShaderStage.VERTEX,
+        buffer: {
+          type: 'uniform'
+        }
+      }]
+    });
+    this.shadowBindGroupContainer = [];
+    this.getShadowBindGroup = (mesh, index) => {
+      if (this.shadowBindGroupContainer[index]) {
+        return this.shadowBindGroupContainer[index];
+      }
+      this.shadowBindGroupContainer[index] = this.device.createBindGroup({
+        label: 'sceneBindGroupForShadow in light',
+        layout: this.uniformBufferBindGroupLayout,
+        entries: [{
+          binding: 0,
+          resource: {
+            buffer: mesh.sceneUniformBuffer
+          }
+        }]
+      });
+      return this.shadowBindGroupContainer[index];
+    };
+    this.modelBindGroupLayout = this.device.createBindGroupLayout({
+      entries: [{
+        binding: 0,
+        visibility: GPUShaderStage.VERTEX,
+        buffer: {
+          type: 'uniform'
+        }
+      }]
+    });
+    this.shadowPipeline = this.device.createRenderPipeline({
+      label: 'shadowPipeline per light',
+      layout: this.device.createPipelineLayout({
+        label: 'createPipelineLayout - uniformBufferBindGroupLayout',
+        bindGroupLayouts: [this.uniformBufferBindGroupLayout, this.modelBindGroupLayout]
+      }),
+      vertex: {
+        module: this.device.createShaderModule({
+          code: _vertexShadow.vertexShadowWGSL
+        }),
+        buffers: [{
+          arrayStride: 12,
+          // 3 * 4 bytes (vec3f)
+          attributes: [{
+            shaderLocation: 0,
+            // must match @location(0) in vertex shader
+            offset: 0,
+            format: "float32x3"
+          }]
+        }]
+      },
+      depthStencil: {
+        depthWriteEnabled: true,
+        depthCompare: 'less',
+        format: 'depth32float'
+      },
+      primitive: this.primitive
+    });
+    this.getMainPassBindGroup = function (mesh) {
+      // You can cache it per mesh to avoid recreating each frame
+      if (!this.mainPassBindGroupContainer) this.mainPassBindGroupContainer = [];
+      const index = mesh._lightBindGroupIndex || 0; // assign unique per mesh if needed
+      if (this.mainPassBindGroupContainer[index]) {
+        return this.mainPassBindGroupContainer[index];
+      }
+      this.mainPassBindGroupContainer[index] = this.device.createBindGroup({
+        label: `mainPassBindGroup for mesh`,
+        layout: mesh.mainPassBindGroupLayout,
+        // this should match the pipeline
+        entries: [{
+          binding: 0,
+          // must match @binding in shader for shadow texture
+          resource: this.shadowTexture.createView()
+        }, {
+          binding: 1,
+          // must match @binding in shader for shadow sampler
+          resource: this.shadowSampler
+        }]
+      });
+      return this.mainPassBindGroupContainer[index];
+    };
   }
   update() {
-    // this.direction = vec3.normalize(vec3.subtract(this.target, this.position));
-    // this.viewMatrix = mat4.lookAt(this.position, this.target, this.up);
-    // this.viewProjMatrix = mat4.multiply(this.projectionMatrix, this.viewMatrix);
-    // console.log('test light update this.target : ', this.target)
-    // Use the existing direction
+    //  this.target = vec3.create(x, y, z);              // new target
+    this.direction = _wgpuMatrix.vec3.normalize(_wgpuMatrix.vec3.subtract(this.target, this.position));
     const target = _wgpuMatrix.vec3.add(this.position, this.direction);
     this.viewMatrix = _wgpuMatrix.mat4.lookAt(this.position, target, this.up);
     this.viewProjMatrix = _wgpuMatrix.mat4.multiply(this.projectionMatrix, this.viewMatrix);
   }
-  updateSceneUniforms(mainRenderBundle) {
-    const now = Date.now();
-    // First frame safety
-    let dt = (now - this.lastFrameMS) / 1000;
-    if (!this.lastFrameMS) {
-      dt = 16;
-    }
-    this.lastFrameMS = now;
-    // engine, once per frame
-    this.camera.update(dt, this.inputHandler());
-    const camVP = _wgpuMatrix.mat4.multiply(this.camera.projectionMatrix, this.camera.view); // P * V
-
-    for (const mesh of mainRenderBundle) {
-      // scene buffer layout = 0..63 lightVP, 64..127 camVP, 128..143 lightPos(+pad)
-      this.device.queue.writeBuffer(mesh.sceneUniformBuffer, 64,
-      // cameraViewProjMatrix offset
-      camVP.buffer, camVP.byteOffset, camVP.byteLength);
-    }
-    // const camVP = mat4.multiply(camera.projectionMatrix, camera.view);
-    // const sceneData = new Float32Array(36); // 16 + 16 + 4
-    // sceneData.set(this.viewProjMatrix, 0);
-    // sceneData.set(camVP, 16);
-    // sceneData.set(this.position, 32);
-    // if(!this.device) {
-    //   console.warn("Device not set for SpotLight");
-    //   return;
-    // }
-    // this.device.queue.writeBuffer(
-    //   sceneUniformBuffer,
-    //   // this.spotlightUniformBuffer,
-    //   0,
-    //   sceneData.buffer,
-    //   sceneData.byteOffset,
-    //   sceneData.byteLength
-    // );
-  }
-  prepareBuffer(device) {
-    if (!this.device) this.device = device;
-    this.spotlightUniformBuffer = this.device.createBuffer({
-      size: 16 * 4,
-      // 64 bytes
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-    });
-    const spotlightData = this.getLightDataBuffer();
-    this.device.queue.writeBuffer(this.spotlightUniformBuffer, 0, spotlightData.buffer, spotlightData.byteOffset, spotlightData.byteLength);
-  }
-  updateLightBuffer() {
-    if (!this.device || !this.spotlightUniformBuffer) {
-      return;
-    }
-    const spotlightData = this.getLightDataBuffer();
-    this.device.queue.writeBuffer(this.spotlightUniformBuffer, 0, spotlightData.buffer, spotlightData.byteOffset, spotlightData.byteLength);
-  }
   getLightDataBuffer() {
-    return new Float32Array([...this.position, 0.0, ...this.direction, 0.0, this.innerCutoff, this.outerCutoff, 0.0, 0.0]);
+    const m = this.viewProjMatrix;
+    return new Float32Array([...this.position, 0.0, ...this.direction, 0.0, this.innerCutoff, this.outerCutoff, this.intensity, 0.0, ...this.color, 0.0, this.range, this.ambientFactor, this.shadowBias,
+    // <<--- use shadowBias
+    0.0,
+    // keep padding
+    ...m]);
   }
 }
 exports.SpotLight = SpotLight;
 
-},{"wgpu-matrix":7}],12:[function(require,module,exports){
+},{"../shaders/vertexShadow.wgsl":24,"wgpu-matrix":7}],12:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -7712,8 +7808,17 @@ class Materials {
   constructor(device) {
     this.device = device;
     this.isVideo = false;
+    this.videoIsReady = 'NONE';
+    // this.compareSampler = this.device.createSampler({compare: 'less'});
     this.compareSampler = this.device.createSampler({
-      compare: 'less'
+      compare: 'less-equal',
+      // safer for shadow comparison
+      addressModeU: 'clamp-to-edge',
+      // prevents UV leaking outside
+      addressModeV: 'clamp-to-edge',
+      magFilter: 'linear',
+      // smooth PCF
+      minFilter: 'linear'
     });
     // For image textures (standard sampler)
     this.imageSampler = this.device.createSampler({
@@ -7735,7 +7840,7 @@ class Materials {
 
     // Dymmy buffer
     this.dummySpotlightUniformBuffer = this.device.createBuffer({
-      size: 64,
+      size: 80,
       // Must match size in shader
       usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
     });
@@ -7768,7 +7873,8 @@ class Materials {
     });
   }
   async loadVideoTexture(arg) {
-    this.isVideo = true;
+    // this.isVideo = true;
+    this.videoIsReady = 'MAYBE';
     if (arg.type === 'video') {
       this.video = document.createElement('video');
       this.video.src = arg.src || 'res/videos/tunel.mp4';
@@ -7777,7 +7883,11 @@ class Materials {
       this.video.loop = true;
       document.body.append(this.video);
       this.video.style.display = 'none';
+      this.video.style.position = 'absolute';
+      this.video.style.top = '50px';
+      this.video.style.left = '50px';
       await this.video.play();
+      this.isVideo = true;
     } else if (arg.type === 'videoElement') {
       this.video = arg.el;
       await this.video.play();
@@ -7802,6 +7912,7 @@ class Materials {
         });
         this.video.srcObject = stream;
         await this.video.play();
+        this.isVideo = true;
       } catch (err) {
         console.error("❌ Failed to access camera:", err);
         return;
@@ -7821,6 +7932,7 @@ class Materials {
       }
       this.video.srcObject = stream;
       await this.video.play();
+      this.isVideo = true;
     } else if (arg.type === 'canvas2d-inline') {
       // Miniature inline-drawn canvas created dynamically
       const canvas = document.createElement('canvas');
@@ -7841,6 +7953,7 @@ class Materials {
       this.video.playsInline = true;
       this.video.style.display = 'none';
       document.body.append(this.video);
+      this.isVideo = true;
       const stream = canvas.captureStream?.() || canvas.mozCaptureStream?.();
       if (!stream) {
         console.error('❌ Cannot capture stream from inline canvas');
@@ -7854,27 +7967,37 @@ class Materials {
       minFilter: 'linear'
     });
 
-    // ✅ Now
+    // ✅ Now - maybe noT
     this.createLayoutForRender();
-    this.setupPipeline();
-    setTimeout(() => this.createBindGroupForRender(), 1500);
   }
   updateVideoTexture() {
     if (!this.video || this.video.readyState < 2) return;
-    this.externalTexture = this.device.importExternalTexture({
-      source: this.video
-    });
-    this.createBindGroupForRender();
+    if (!this.externalTexture) {
+      // create it once
+      this.externalTexture = this.device.importExternalTexture({
+        source: this.video
+      });
+      this.createBindGroupForRender();
+      this.videoIsReady = 'YES';
+      console.log("✅ video bind group created [createBindGroupForRender()]");
+    } else {
+      this.externalTexture = this.device.importExternalTexture({
+        source: this.video
+      });
+      this.createBindGroupForRender();
+    }
   }
   createBindGroupForRender() {
-    const textureResource = this.isVideo ? this.externalTexture // must be set via updateVideoTexture
-    : this.texture0.createView();
-    if (!textureResource || !this.sceneUniformBuffer || !this.shadowDepthTextureView || !this.sampler) {
-      console.warn("❗Missing res skipping...");
+    const textureResource = this.isVideo ? this.externalTexture : this.texture0.createView();
+    if (!textureResource || !this.sceneUniformBuffer || !this.shadowDepthTextureView) {
+      if (!textureResource) console.warn("❗Missing res texture: ", textureResource);
+      if (!this.sceneUniformBuffer) console.warn("❗Missing res: this.sceneUniformBuffer: ", this.sceneUniformBuffer);
+      if (!this.shadowDepthTextureView) console.warn("❗Missing res: this.shadowDepthTextureView: ", this.shadowDepthTextureView);
+      if (typeof textureResource === 'undefined') this.updateVideoTexture();
       return;
-    }
-    // console.log('what is  this.lightContainer.length ',  this.lightContainer.length)
+    } else {}
     if (this.isVideo == true) {
+      console.info("✅ video sceneBindGroupForRender ");
       this.sceneBindGroupForRender = this.device.createBindGroup({
         layout: this.bglForRender,
         entries: [{
@@ -7901,6 +8024,10 @@ class Materials {
           }
         }]
       });
+
+      // special case for video meybe better solution exist 
+      // this.setupPipeline();
+      this.video.play();
     } else {
       this.sceneBindGroupForRender = this.device.createBindGroup({
         layout: this.bglForRender,
@@ -7924,73 +8051,94 @@ class Materials {
         }, {
           binding: 5,
           resource: {
-            buffer: this.lightContainer.length == 0 ? this.dummySpotlightUniformBuffer : this.lightContainer[0].spotlightUniformBuffer
+            buffer: !this.spotlightUniformBuffer ? this.dummySpotlightUniformBuffer : this.spotlightUniformBuffer
           }
         }]
       });
     }
   }
   createLayoutForRender() {
+    if (this.isVideo == true) {
+      console.info("✅ createLayoutForRender video [bglForRender]");
+    } else {
+      console.info("✅ normal createLayoutForRender [bglForRender]");
+    }
+    let e = [{
+      binding: 0,
+      visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+      buffer: {
+        type: 'uniform'
+      }
+    }, ...(this.isVideo == false ? [{
+      binding: 1,
+      visibility: GPUShaderStage.FRAGMENT,
+      texture: {
+        sampleType: "depth",
+        viewDimension: "2d-array",
+        // <- must match shadowMapArray
+        multisampled: false
+      }
+    }] : [{
+      binding: 1,
+      visibility: GPUShaderStage.FRAGMENT,
+      texture: {
+        sampleType: "depth",
+        viewDimension: "2d"
+      }
+    }]), {
+      binding: 2,
+      visibility: GPUShaderStage.FRAGMENT,
+      sampler: {
+        type: 'comparison'
+      }
+    }, ...(this.isVideo ? [
+    // VIDEO
+    {
+      binding: 3,
+      visibility: GPUShaderStage.FRAGMENT,
+      externalTexture: {}
+    }, {
+      binding: 4,
+      visibility: GPUShaderStage.FRAGMENT,
+      sampler: {
+        type: 'filtering'
+      } // for video sampling
+    }, {
+      binding: 5,
+      visibility: GPUShaderStage.FRAGMENT,
+      buffer: {
+        type: 'uniform'
+      }
+    }] : [
+    // IMAGE
+    {
+      binding: 3,
+      visibility: GPUShaderStage.FRAGMENT,
+      texture: {
+        sampleType: 'float',
+        viewDimension: '2d'
+      }
+    }, {
+      binding: 4,
+      visibility: GPUShaderStage.FRAGMENT,
+      sampler: {
+        type: 'filtering'
+      }
+    }, {
+      binding: 5,
+      visibility: GPUShaderStage.FRAGMENT,
+      buffer: {
+        type: 'uniform'
+      }
+    }])];
+    console.log("BG E : ", e);
     this.bglForRender = this.device.createBindGroupLayout({
-      entries: [{
-        binding: 0,
-        visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-        buffer: {
-          type: 'uniform'
-        }
-      }, {
-        binding: 1,
-        visibility: GPUShaderStage.FRAGMENT,
-        texture: {
-          sampleType: 'depth'
-        }
-      }, {
-        binding: 2,
-        visibility: GPUShaderStage.FRAGMENT,
-        sampler: {
-          type: 'comparison'
-        }
-      }, ...(this.isVideo ? [
-      // VIDEO
-      {
-        binding: 3,
-        visibility: GPUShaderStage.FRAGMENT,
-        externalTexture: {}
-      }, {
-        binding: 4,
-        visibility: GPUShaderStage.FRAGMENT,
-        sampler: {
-          type: 'filtering'
-        } // for video sampling
-      }, {
-        binding: 5,
-        visibility: GPUShaderStage.FRAGMENT,
-        buffer: {
-          type: 'uniform'
-        }
-      }] : [
-      // IMAGE
-      {
-        binding: 3,
-        visibility: GPUShaderStage.FRAGMENT,
-        texture: {
-          sampleType: 'float',
-          viewDimension: '2d'
-        }
-      }, {
-        binding: 4,
-        visibility: GPUShaderStage.FRAGMENT,
-        sampler: {
-          type: 'filtering'
-        }
-      }, {
-        binding: 5,
-        visibility: GPUShaderStage.FRAGMENT,
-        buffer: {
-          type: 'uniform'
-        }
-      }])]
+      label: 'bglForRender',
+      entries: e
     });
+    if (this.isVideo == true) {
+      this.createBindGroupForRender();
+    }
   }
 }
 exports.default = Materials;
@@ -8248,9 +8396,9 @@ var _materials = _interopRequireDefault(require("./materials"));
 var _fragmentVideo = require("../shaders/fragment.video.wgsl");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 class MEMeshObj extends _materials.default {
-  constructor(canvas, device, context, o, sceneUniformBuffer) {
+  constructor(canvas, device, context, o, inputHandler) {
     super(device);
-    if (typeof o.name === 'undefined') o.name = (0, _utils.genName)(9);
+    if (typeof o.name === 'undefined') o.name = (0, _utils.genName)(3);
     if (typeof o.raycast === 'undefined') {
       this.raycast = {
         enabled: false,
@@ -8266,6 +8414,7 @@ class MEMeshObj extends _materials.default {
     this.entityArgPass = o.entityArgPass;
     this.clearColor = "red";
     this.video = null;
+    this.FINISH_VIDIO_INIT = false;
 
     // Mesh stuff - for single mesh or t-posed (fiktive-first in loading order)
     this.mesh = o.mesh;
@@ -8281,7 +8430,7 @@ class MEMeshObj extends _materials.default {
       console.log(`%c Mesh objAnim exist: ${o.objAnim}`, _utils.LOG_FUNNY_SMALL);
       this.drawElements = this.drawElementsAnim;
     }
-    this.inputHandler = null;
+    this.inputHandler = inputHandler;
     this.cameras = o.cameras;
     this.mainCameraParams = {
       type: o.mainCameraParams.type,
@@ -8302,7 +8451,6 @@ class MEMeshObj extends _materials.default {
     this.runProgram = () => {
       return new Promise(async resolve => {
         this.shadowDepthTextureSize = 1024;
-        // const aspect = canvas.width / canvas.height;
         this.modelViewProjectionMatrix = _wgpuMatrix.mat4.create();
         this.loadTex0(this.texturesPaths).then(() => {
           resolve();
@@ -8310,7 +8458,6 @@ class MEMeshObj extends _materials.default {
       });
     };
     this.runProgram().then(() => {
-      // const aspect = canvas.width / canvas.height;
       this.context.configure({
         device: this.device,
         format: this.presentationFormat,
@@ -8367,14 +8514,6 @@ class MEMeshObj extends _materials.default {
       this.indexBuffer.unmap();
       this.indexCount = indexCount;
 
-      // 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 = [{
@@ -8404,91 +8543,37 @@ class MEMeshObj extends _materials.default {
       }];
       this.primitive = {
         topology: 'triangle-list',
-        // cullMode: 'back',
-        cullMode: 'none'
+        cullMode: 'back',
+        // typical for shadow passes
+        frontFace: 'ccw'
       };
-      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: this.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.createLayoutForRender();
-      this.setupPipeline();
-      const depthTexture = this.device.createTexture({
-        size: [canvas.width, canvas.height],
-        // format: 'depth24plus-stencil8',
-        format: 'depth24plus',
-        usage: GPUTextureUsage.RENDER_ATTACHMENT
-      });
-      this.renderPassDescriptor = {
-        colorAttachments: [{
-          // view is acquired and set in render loop.
-          view: undefined,
-          clearValue: this.clearColor,
-          loadOp: 'clear',
-          // load -> clear = fix for FF
-          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,
+        label: 'sceneUniformBuffer per mesh',
+        size: 160,
         usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
       });
-      console.log('test buffer sceneUniformBuffer ', this.sceneUniformBuffer);
-      this.sceneBindGroupForShadow = this.device.createBindGroup({
-        layout: this.uniformBufferBindGroupLayout,
+      this.uniformBufferBindGroupLayout = this.device.createBindGroupLayout({
+        label: 'uniformBufferBindGroupLayout in mesh',
         entries: [{
           binding: 0,
-          resource: {
-            buffer: this.sceneUniformBuffer
+          visibility: GPUShaderStage.VERTEX,
+          buffer: {
+            type: 'uniform'
           }
         }]
       });
-      this.createBindGroupForRender();
       this.modelBindGroup = this.device.createBindGroup({
+        label: 'modelBindGroup in mesh',
         layout: this.uniformBufferBindGroupLayout,
         entries: [{
           binding: 0,
@@ -8497,49 +8582,49 @@ class MEMeshObj extends _materials.default {
           }
         }]
       });
+      this.mainPassBindGroupLayout = this.device.createBindGroupLayout({
+        entries: [{
+          binding: 0,
+          visibility: GPUShaderStage.FRAGMENT,
+          texture: {
+            sampleType: 'depth'
+          }
+        }, {
+          binding: 1,
+          visibility: GPUShaderStage.FRAGMENT,
+          sampler: {
+            type: 'comparison'
+          }
+        }]
+      });
 
       // Rotates the camera around the origin based on time.
-      this.getTransformationMatrix = pos => {
+      this.getTransformationMatrix = (mainRenderBundle, spotLight) => {
         const now = Date.now();
-        const deltaTime = (now - this.lastFrameMS) / this.mainCameraParams.responseCoef;
+        const dt = (now - this.lastFrameMS) / this.mainCameraParams.responseCoef;
         this.lastFrameMS = now;
-        // const this.viewMatrix = mat4.identity()
         const camera = this.cameras[this.mainCameraParams.type];
-
-        // engine frame
         camera.update(dt, inputHandler());
         const camVP = _wgpuMatrix.mat4.multiply(camera.projectionMatrix, camera.view);
         for (const mesh of mainRenderBundle) {
-          // Light’s viewProj should come from your SpotLight
-          // If you have multiple lights, you’ll need an array UBO or multiple passes.
-          const sceneData = new Float32Array(16 + 16 + 4); // lightVP, camVP, lightPos(+pad)
+          // Flattened buffer: lightVP(16) + camVP(16) + cameraPos(3+pad) + lightPos(3+pad)
+          const sceneData = new Float32Array(16 + 16 + 4 + 4); // 16+16+4+4 = 40 floats
+
+          // Light ViewProj
           sceneData.set(spotLight.viewProjMatrix, 0);
+
+          // Camera VP
           sceneData.set(camVP, 16);
-          sceneData.set(spotLight.position, 32);
+
+          // Camera position + padding
+          sceneData.set([camera.position.x, camera.position.y, camera.position.z, 0.0], 32);
+
+          // Light position + padding
+          sceneData.set([spotLight.position[0], spotLight.position[1], spotLight.position[2], 0.0], 36);
           device.queue.writeBuffer(mesh.sceneUniformBuffer,
-          // or a shared one if/when you centralize it
+          // or shared buffer
           0, sceneData.buffer, sceneData.byteOffset, sceneData.byteLength);
         }
-        // this.viewMatrix = camera.update(deltaTime, this.inputHandler());
-        // const scaleVec = [1, 1, 1]; // your desired scale OPTION 1
-        // const scaleMatrix = mat4.scaling(scaleVec);
-        // // Apply scaling
-        // mat4.multiply(scaleMatrix, this.viewMatrix, this.viewMatrix);
-        // mat4.translate(this.viewMatrix, vec3.fromValues(pos.x, pos.y, pos.z), this.viewMatrix);
-
-        // if(this.itIsPhysicsBody == true) {
-        //   mat4.rotate(
-        //     this.viewMatrix,
-        //     vec3.fromValues(this.rotation.axis.x, this.rotation.axis.y, this.rotation.axis.z),
-        //     degToRad(this.rotation.angle), this.viewMatrix)
-        // } else {
-        //   mat4.rotateX(this.viewMatrix, Math.PI * this.rotation.getRotX(), this.viewMatrix);
-        //   mat4.rotateY(this.viewMatrix, Math.PI * this.rotation.getRotY(), this.viewMatrix);
-        //   mat4.rotateZ(this.viewMatrix, Math.PI * this.rotation.getRotZ(), this.viewMatrix);
-        //   // console.info('NOT PHYSICS angle: ', this.rotation.angle, ' axis ', this.rotation.axis.x, ' , ', this.rotation.axis.y, ' , ', this.rotation.axis.z)
-        // }
-        // mat4.multiply(camera.projectionMatrix, this.viewMatrix, this.modelViewProjectionMatrix);
-        // return this.modelViewProjectionMatrix;
       };
       this.getModelMatrix = pos => {
         let modelMatrix = _wgpuMatrix.mat4.identity();
@@ -8560,32 +8645,29 @@ class MEMeshObj extends _materials.default {
       const modelMatrix = _wgpuMatrix.mat4.translation([0, 0, 0]);
       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;
+      try {
+        this.setupPipeline();
+      } catch (err) {
+        console.log('err in create pipeline in init ', err);
+      }
     }).then(() => {
       if (typeof this.objAnim !== 'undefined' && this.objAnim !== null) {
-        console.log('after all load configutr mesh list buffers');
+        console.log('after all updateMeshListBuffers...');
         this.updateMeshListBuffers();
       }
     });
   }
   setupPipeline = () => {
-    console.log('test >>>>>>>>>>>>>>>>>>>FORMAT>✅' + this.presentationFormat);
+    this.createBindGroupForRender();
     this.pipeline = this.device.createRenderPipeline({
+      label: 'Mesh Pipeline ✅',
       layout: this.device.createPipelineLayout({
+        label: 'createPipelineLayout Mesh',
         bindGroupLayouts: [this.bglForRender, this.uniformBufferBindGroupLayout]
       }),
       vertex: {
         entryPoint: 'main',
-        // ✅ Add this
         module: this.device.createShaderModule({
           code: _vertex.vertexWGSL
         }),
@@ -8593,7 +8675,6 @@ class MEMeshObj extends _materials.default {
       },
       fragment: {
         entryPoint: 'main',
-        // ✅ Add this
         module: this.device.createShaderModule({
           code: this.isVideo == true ? _fragmentVideo.fragmentVideoWGSL : _fragment.fragmentWGSL
         }),
@@ -8607,42 +8688,17 @@ class MEMeshObj extends _materials.default {
       depthStencil: {
         depthWriteEnabled: true,
         depthCompare: 'less',
-        // format: 'depth24plus-stencil8',
         format: 'depth24plus'
       },
       primitive: this.primitive
     });
+    console.log('✅Set Pipeline done');
   };
-  draw = () => {
-    // This code -> light follow camera. can be used like options later!
-    // 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();
-
-    // test 
+  updateModelUniformBuffer = () => {
     if (this.done == false) return;
-
     // Per-object model matrix only
     const modelMatrix = this.getModelMatrix(this.position);
     this.device.queue.writeBuffer(this.modelUniformBuffer, 0, modelMatrix.buffer, modelMatrix.byteOffset, modelMatrix.byteLength);
-
-    // Acquire swapchain view for the pass
-    this.renderPassDescriptor.colorAttachments[0].view = this.context.getCurrentTexture().createView();
-  };
-  drawElements = renderPass => {
-    if (this.isVideo) {
-      this.updateVideoTexture();
-    }
-    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);
   };
   createGPUBuffer(dataArray, usage) {
     if (!dataArray || typeof dataArray.length !== 'number') {
@@ -8680,7 +8736,6 @@ class MEMeshObj extends _materials.default {
       });
       new Float32Array(mesh.vertexNormalsBuffer.getMappedRange()).set(mesh.vertexNormals);
       mesh.vertexNormalsBuffer.unmap();
-
       // UVs
       mesh.vertexTexCoordsBuffer = this.device.createBuffer({
         size: mesh.textures.length * Float32Array.BYTES_PER_ELEMENT,
@@ -8689,7 +8744,6 @@ class MEMeshObj extends _materials.default {
       });
       new Float32Array(mesh.vertexTexCoordsBuffer.getMappedRange()).set(mesh.textures);
       mesh.vertexTexCoordsBuffer.unmap();
-
       // Indices
       const indexCount = mesh.indices.length;
       const indexSize = Math.ceil(indexCount * Uint16Array.BYTES_PER_ELEMENT / 4) * 4;
@@ -8703,7 +8757,35 @@ class MEMeshObj extends _materials.default {
       mesh.indexCount = indexCount;
     }
   }
+  drawElements = (pass, lightContainer) => {
+    if (this.isVideo) {
+      this.updateVideoTexture();
+    }
+    // Bind per-mesh uniforms
+    pass.setBindGroup(0, this.sceneBindGroupForRender); // camera/light UBOs
+    pass.setBindGroup(1, this.modelBindGroup); // mesh transforms/textures
+    // Bind each light’s shadow texture & sampler
+    if (this.isVideo == false) {
+      let bindIndex = 2; // start after UBO & model
+      for (const light of lightContainer) {
+        pass.setBindGroup(bindIndex++, light.getMainPassBindGroup(this));
+      }
+    }
+    pass.setVertexBuffer(0, this.vertexBuffer);
+    pass.setVertexBuffer(1, this.vertexNormalsBuffer);
+    pass.setVertexBuffer(2, this.vertexTexCoordsBuffer);
+    pass.setIndexBuffer(this.indexBuffer, 'uint16');
+    pass.drawIndexed(this.indexCount);
+  };
   drawElementsAnim = renderPass => {
+    if (!this.sceneBindGroupForRender || !this.modelBindGroup) {
+      console.log(' NULL 1');
+      return;
+    }
+    if (!this.objAnim.meshList[this.objAnim.id + this.objAnim.currentAni]) {
+      console.log(' NULL 2');
+      return;
+    }
     renderPass.setBindGroup(0, this.sceneBindGroupForRender);
     renderPass.setBindGroup(1, this.modelBindGroup);
     const mesh = this.objAnim.meshList[this.objAnim.id + this.objAnim.currentAni];
@@ -8724,9 +8806,7 @@ class MEMeshObj extends _materials.default {
       }
     }
   };
-  drawShadows = shadowPass => {
-    shadowPass.setBindGroup(0, this.sceneBindGroupForShadow);
-    shadowPass.setBindGroup(1, this.modelBindGroup);
+  drawShadows = (shadowPass, light) => {
     shadowPass.setVertexBuffer(0, this.vertexBuffer);
     shadowPass.setVertexBuffer(1, this.vertexNormalsBuffer);
     shadowPass.setVertexBuffer(2, this.vertexTexCoordsBuffer);
@@ -9946,7 +10026,6 @@ class MatrixAmmo {
       CF_KINEMATIC_OBJECT: 2
     };
     let Ammo = this.Ammo;
-    console.log(pOptions.radius + "<<pOptions.radius");
     var colShape = new Ammo.btSphereShape(Array.isArray(pOptions.radius) ? pOptions.radius[0] : pOptions.radius),
       startTransform = new Ammo.btTransform();
     startTransform.setIdentity();
@@ -10106,46 +10185,11 @@ class MatrixAmmo {
       //   if(item.kB == contactManifold.getBody0().kB) {
       //     // console.log('Detected body0 =', item.name)
       //   }
-      //   if(item.kB == contactManifold.getBody1().kB) {
-      //     // console.log('Detected body1 =', item.name)
-      //   }
-      // })
-
       if (this.ground.kB == contactManifold.getBody0().kB && this.getNameByBody(contactManifold.getBody1()) == 'CubePhysics1') {
         // console.log(this.ground ,'GROUND IS IN CONTACT WHO IS BODY1 ', contactManifold.getBody1())
         // console.log('GROUND IS IN CONTACT WHO IS BODY1 getNameByBody  ', this.getNameByBody(contactManifold.getBody1()))
         // CHECK ROTATION
         var testR = contactManifold.getBody1().getWorldTransform().getRotation();
-        if (Math.abs(testR.y()) < 0.00001) {
-          this.lastRoll += " 4 +";
-          this.presentScore += 4;
-          dispatchEvent(new CustomEvent('dice-1', {}));
-        }
-        if (Math.abs(testR.x()) < 0.00001) {
-          this.lastRoll += " 3 +";
-          this.presentScore += 3;
-          dispatchEvent(new CustomEvent('dice-4', {}));
-        }
-        if (testR.x().toString().substring(0, 5) == testR.y().toString().substring(1, 6)) {
-          this.lastRoll += " 2 +";
-          this.presentScore += 2;
-          dispatchEvent(new CustomEvent('dice-6', {}));
-        }
-        if (testR.x().toString().substring(0, 5) == testR.y().toString().substring(0, 5)) {
-          this.lastRoll += " 1 +";
-          this.presentScore += 1;
-          dispatchEvent(new CustomEvent('dice-2', {}));
-        }
-        if (testR.z().toString().substring(0, 5) == testR.y().toString().substring(1, 6)) {
-          this.lastRoll += " 6 +";
-          this.presentScore += 6;
-          dispatchEvent(new CustomEvent('dice-5', {}));
-        }
-        if (testR.z().toString().substring(0, 5) == testR.y().toString().substring(0, 5)) {
-          this.lastRoll += " 5 +";
-          this.presentScore += 5;
-          dispatchEvent(new CustomEvent('dice-3', {}));
-        }
         console.log('this.lastRoll = ', this.lastRoll, ' presentScore = ', this.presentScore);
       }
     }
@@ -10217,18 +10261,19 @@ struct Scene {
 @group(0) @binding(2) var shadowSampler: sampler_comparison;
 @group(0) @binding(3) var meshTexture: texture_external;
 @group(0) @binding(4) var meshSampler: sampler;
-
 @group(0) @binding(5) var<uniform> postFXMode: u32;
 
 // ❌ No binding(4) here!
 
 struct FragmentInput {
-  @location(0) shadowPos : vec3f,
+  @location(0) shadowPos : vec4f,
   @location(1) fragPos : vec3f,
   @location(2) fragNorm : vec3f,
   @location(3) uv : vec2f,
 }
 
+ 
+
 const albedo = vec3f(0.9);
 const ambientFactor = 0.7;
 
@@ -10297,79 +10342,141 @@ Object.defineProperty(exports, "__esModule", {
 exports.fragmentWGSL = void 0;
 let fragmentWGSL = exports.fragmentWGSL = `override shadowDepthTextureSize: f32 = 1024.0;
 
+// Created by Nikola Lukic with chatgtp assist.
+
 struct Scene {
-  lightViewProjMatrix : mat4x4f,
-  cameraViewProjMatrix : mat4x4f,
-  lightPos : vec3f,
-  padding : f32, // Required for alignment
-}
+    lightViewProjMatrix  : mat4x4f,
+    cameraViewProjMatrix : mat4x4f,
+    cameraPos            : vec3f,
+    padding2             : f32,   // align to 16 bytes
+    lightPos             : vec3f,
+    padding              : f32,   // align to 16 bytes
+};
 
 struct SpotLight {
-  position: vec3f,
-  _pad1: f32,
-  direction: vec3f,
-  _pad2: f32,
-  innerCutoff: f32,
-  outerCutoff: f32,
-  _pad3: vec2f,
-}
+    position      : vec3f,
+    _pad1         : f32,
+
+    direction     : vec3f,
+    _pad2         : f32,
+
+    innerCutoff   : f32,
+    outerCutoff   : f32,
+    intensity     : f32,
+    _pad3         : f32,
+
+    color         : vec3f,
+    _pad4         : f32,
+
+    range         : f32,
+    ambientFactor : f32,
+    shadowBias    : f32,
+    _pad5         : f32,
+
+    lightViewProj : mat4x4<f32>,
+};
+
+const MAX_SPOTLIGHTS = 20u;
 
 @group(0) @binding(0) var<uniform> scene : Scene;
-@group(0) @binding(1) var shadowMap: texture_depth_2d;
+@group(0) @binding(1) var shadowMapArray: texture_depth_2d_array;
 @group(0) @binding(2) var shadowSampler: sampler_comparison;
 @group(0) @binding(3) var meshTexture: texture_2d<f32>;
 @group(0) @binding(4) var meshSampler: sampler;
-@group(0) @binding(5) var<uniform> spotlight: SpotLight;
+@group(0) @binding(5) var<uniform> spotlights: array<SpotLight, MAX_SPOTLIGHTS>;
 
 struct FragmentInput {
-  @location(0) shadowPos : vec3f,
-  @location(1) fragPos : vec3f,
-  @location(2) fragNorm : vec3f,
-  @location(3) uv : vec2f,
+    @location(0) shadowPos : vec4f,
+    @location(1) fragPos   : vec3f,
+    @location(2) fragNorm  : vec3f,
+    @location(3) uv        : vec2f,
 }
 
 const albedo = vec3f(0.9);
-const ambientFactor = 0.7;
 
 fn calculateSpotlightFactor(light: SpotLight, fragPos: vec3f) -> f32 {
-  let L = normalize(light.position - fragPos);
-  let theta = dot(L, normalize(-light.direction));
-  let epsilon = light.innerCutoff - light.outerCutoff;
-  let intensity = clamp((theta - light.outerCutoff) / epsilon, 0.0, 1.0);
-  return intensity;
+    let L = normalize(light.position - fragPos);
+    let theta = dot(L, normalize(-light.direction));
+    let epsilon = light.innerCutoff - light.outerCutoff;
+    return clamp((theta - light.outerCutoff) / epsilon, 0.0, 1.0);
 }
 
-@fragment
-fn main(input : FragmentInput) -> @location(0) vec4f {
-  // Shadow PFC
-  var visibility = 0.0;
-  let oneOverSize = 1.0 / shadowDepthTextureSize;
-  for (var y = -1; y <= 1; y++) {
-    for (var x = -1; x <= 1; x++) {
-      let offset = vec2f(vec2(x, y)) * oneOverSize;
-      visibility += textureSampleCompare(
-        shadowMap, shadowSampler,
-        input.shadowPos.xy + offset, input.shadowPos.z - 0.007
-      );
-    }
-  }
-  visibility /= 9.0;
+fn computeSpotLight(light: SpotLight, normal: vec3f, fragPos: vec3f, viewDir: vec3f) -> vec3f {
+    let L = light.position - fragPos;
+    let distance = length(L);
+    let lightDir = normalize(L);
 
-  // Lambert
-  let norm = normalize(input.fragNorm);
-  let lightDir = normalize(scene.lightPos - input.fragPos);
-  let lambert = max(dot(norm, lightDir), 0.0);
+    let spotFactor = calculateSpotlightFactor(light, fragPos);
+    let atten = clamp(1.0 - (distance / light.range), 0.0, 1.0);
 
-  // Spotlight effect
-  let spotlightFactor = calculateSpotlightFactor(spotlight, input.fragPos);
+    let diff = max(dot(normal, lightDir), 0.0);
+    let halfwayDir = normalize(lightDir + viewDir);
+    let spec = pow(max(dot(normal, halfwayDir), 0.0), 32.0);
 
-  // Combine
-  let lightIntensity = ambientFactor + lambert * visibility * spotlightFactor;
-  let texColor = textureSample(meshTexture, meshSampler, input.uv);
+    let diffuse  = diff * light.color * light.intensity * atten;
+    let specular = spec * light.color * light.intensity * atten;
 
-  return vec4f(texColor.rgb * lightIntensity * albedo, 1.0);
+    return (diffuse + specular) * spotFactor;
 }
-`;
+
+// Corrected PCF for texture_depth_2d_array
+fn sampleShadow(shadowUV: vec2f, layer: i32, depthRef: f32, normal: vec3f, lightDir: vec3f) -> f32 {
+    var visibility: f32 = 0.0;
+    let biasConstant: f32 = 0.001;
+    // Slope bias: avoid self-shadowing on steep angles
+    // let slopeBias: f32 = max(0.002 * (1.0 - dot(normal, lightDir)), 0.0);
+    let bias = biasConstant;//  + slopeBias;
+
+    let oneOverSize = 1.0 / (shadowDepthTextureSize  * 0.5);
+
+    // 3x3 PCF kernel
+    let offsets: array<vec2f, 9> = array<vec2f, 9>(
+        vec2(-1.0, -1.0), vec2(0.0, -1.0), vec2(1.0, -1.0),
+        vec2(-1.0,  0.0), vec2(0.0,  0.0), vec2(1.0,  0.0),
+        vec2(-1.0,  1.0), vec2(0.0,  1.0), vec2(1.0,  1.0)
+    );
+
+    for(var i: u32 = 0u; i < 9u; i = i + 1u) {
+        visibility += textureSampleCompare(
+            shadowMapArray,
+            shadowSampler,
+            shadowUV + offsets[i] * oneOverSize,
+            layer,
+            depthRef //+ bias
+        );
+    }
+    return visibility / 9.0;
+}
+
+@fragment
+fn main(input: FragmentInput) -> @location(0) vec4f {
+    let norm = normalize(input.fragNorm);
+
+    let viewDir = normalize(scene.cameraPos - input.fragPos);
+    // let viewDir = normalize(scene.cameraViewProjMatrix[3].xyz - input.fragPos);
+
+    var lightContribution = vec3f(0.0);
+    var ambient = vec3f(0.0);
+
+    for (var i: u32 = 0u; i < MAX_SPOTLIGHTS; i = i + 1u) {
+        let sc = spotlights[i].lightViewProj * vec4<f32>(input.fragPos, 1.0);
+        let p  = sc.xyz / sc.w;
+        let uv = clamp(p.xy * 0.5 + vec2<f32>(0.5), vec2<f32>(0.0), vec2<f32>(1.0));
+        let depthRef = p.z * 0.5 + 0.5;
+        let lightDir = normalize(spotlights[i].position - input.fragPos);
+        let angleFactor = 1.0 - dot(norm, lightDir);
+        let slopeBias = 0.01 * (1.0 - dot(norm, lightDir));
+        let bias = spotlights[i].shadowBias + slopeBias;
+        let visibility = sampleShadow(uv, i32(i), depthRef - bias, norm, lightDir);
+        let contrib = computeSpotLight(spotlights[i], norm, input.fragPos, viewDir);
+        lightContribution += contrib * visibility;
+        ambient += spotlights[i].ambientFactor * spotlights[i].color;
+    }
+
+    let texColor = textureSample(meshTexture, meshSampler, input.uv);
+    let finalColor = texColor.rgb * (ambient + lightContribution); // * albedo;
+    return vec4f(finalColor, 1.0);
+}`;
 
 },{}],22:[function(require,module,exports){
 "use strict";
@@ -10450,11 +10557,10 @@ struct Model {
 @group(1) @binding(0) var<uniform> model : Model;
 
 struct VertexOutput {
-  @location(0) shadowPos: vec3f,
+  @location(0) shadowPos: vec4f,  // now vec4
   @location(1) fragPos: vec3f,
   @location(2) fragNorm: vec3f,
-  @location(3) uv : vec2f,
-
+  @location(3) uv: vec2f,
   @builtin(position) Position: vec4f,
 }
 
@@ -10462,34 +10568,21 @@ struct VertexOutput {
 fn main(
   @location(0) position: vec3f,
   @location(1) normal: vec3f,
-  @location(2) uv : vec2f
+  @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
-  );
-
-  // follewed camera code
-  // output.Position = scene.cameraViewProjMatrix * model.modelMatrix * vec4(position, 1.0);
-  // output.fragPos = output.Position.xyz;
-  // output.fragNorm = normal;
+  output.shadowPos = posFromLight; // pass full vec4 for perspective divide
 
   let worldPos = model.modelMatrix * vec4(position, 1.0);
   output.Position = scene.cameraViewProjMatrix * worldPos;
-  output.fragPos = worldPos.xyz;          // ✅ world space
+  output.fragPos = worldPos.xyz;
 
   output.fragNorm = normalize((model.modelMatrix * vec4(normal, 0.0)).xyz);
   output.uv = uv;
   return output;
-}
-`;
+}`;
 
 },{}],24:[function(require,module,exports){
 "use strict";
@@ -10608,6 +10701,14 @@ var _sounds = require("./sounds/sounds.js");
 var _loaderObj = require("./engine/loader-obj.js");
 var _lights = require("./engine/lights.js");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * @description
+ * Main engine root class.
+ * @author Nikola Lukic 2025
+ * @email zlatnaspirala@gmail.com
+ * @web https://maximumroulette.com
+ * @github zlatnaspirala
+ */
 class MatrixEngineWGPU {
   mainRenderBundle = [];
   lightContainer = [];
@@ -10621,10 +10722,7 @@ class MatrixEngineWGPU {
   };
   matrixAmmo = new _matrixAmmo.default();
   matrixSounds = new _sounds.MatrixSounds();
-
-  // The input handler
   constructor(options, callback) {
-    // console.log('typeof options ', typeof options )
     if (typeof options == 'undefined' || typeof options == "function") {
       this.options = {
         useSingleRenderPass: true,
@@ -10676,7 +10774,6 @@ 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: this.options.mainCameraParams.type,
       responseCoef: this.options.mainCameraParams.responseCoef
@@ -10713,14 +10810,6 @@ class MatrixEngineWGPU {
     this.device = await this.adapter.requestDevice({
       extensions: ["ray_tracing"]
     });
-
-    // Maybe works in ssl with webworkers...
-    // const adapterInfo = await this.adapter.requestAdapterInfo();
-    // var test = this.adapter.features()
-    // console.log(adapterInfo.vendor);
-    // console.log('test' + test);
-    // console.log("FEATURES : " + this.adapter.features)
-
     this.context = canvas.getContext('webgpu');
     const devicePixelRatio = window.devicePixelRatio;
     canvas.width = canvas.clientWidth * devicePixelRatio;
@@ -10736,20 +10825,87 @@ class MatrixEngineWGPU {
     } else {
       this.frame = this.framePassPerObject;
     }
-
-    // Global SCENE BUFFER Good idea for future
-    // 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.MAX_SPOTLIGHTS = 20;
     this.inputHandler = (0, _engine.createInputHandler)(window, canvas);
+    this.createGlobalStuff();
     this.run(callback);
   };
+  createGlobalStuff() {
+    this.spotlightUniformBuffer = this.device.createBuffer({
+      label: 'spotlightUniformBufferGLOBAL',
+      size: this.MAX_SPOTLIGHTS * 144,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    this.SHADOW_RES = 1024;
+    this.createTexArrayForShadows();
+    this.mainDepthTexture = this.device.createTexture({
+      size: [this.canvas.width, this.canvas.height],
+      format: 'depth24plus',
+      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+    });
+    this.mainDepthView = this.mainDepthTexture.createView();
+    this.mainRenderPassDesc = {
+      label: 'mainRenderPassDesc',
+      colorAttachments: [{
+        view: undefined,
+        // set each frame
+        loadOp: 'clear',
+        storeOp: 'store',
+        clearValue: [0.02, 0.02, 0.02, 1]
+      }],
+      depthStencilAttachment: {
+        view: this.mainDepthView,
+        // fixed
+        depthLoadOp: 'clear',
+        depthStoreOp: 'store',
+        depthClearValue: 1.0
+      }
+    };
+  }
+  createTexArrayForShadows() {
+    let numberOfLights = this.lightContainer.length;
+    if (this.lightContainer.length == 0) {
+      // console.warn('Wait for init light instance')
+      setTimeout(() => {
+        // console.info('Test light again...')
+        this.createMe();
+      }, 800);
+    }
+    this.createMe = () => {
+      Math.max(1, this.lightContainer.length);
+      if (this.lightContainer.length == 0) {
+        setTimeout(() => {
+          console.warn('Create now test...');
+          this.createMe();
+        }, 800);
+        return;
+      }
+      console.warn('Create this.shadowTextureArray...');
+      this.shadowTextureArray = this.device.createTexture({
+        label: `shadowTextureArray[GLOBAL] num of light ${numberOfLights}`,
+        size: {
+          width: 1024,
+          height: 1024,
+          depthOrArrayLayers: numberOfLights // at least 1
+        },
+        dimension: '2d',
+        format: 'depth32float',
+        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+      });
+      this.shadowArrayView = this.shadowTextureArray.createView({
+        dimension: '2d-array'
+      });
+      this.shadowVideoTexture = this.device.createTexture({
+        size: [1024, 1024],
+        format: "depth32float",
+        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+      });
+      this.shadowVideoView = this.shadowVideoTexture.createView({
+        dimension: "2d"
+      });
+    };
+    this.createMe();
+  }
   getSceneObjectByName(name) {
     return this.mainRenderBundle.find(sceneObject => sceneObject.name === name);
   }
@@ -10954,12 +11110,11 @@ class MatrixEngineWGPU {
     this.mainRenderBundle.push(myBall1);
   };
   addLight(o) {
-    // test light global; entity
     const camera = this.cameras[this.mainCameraParams.type];
-    let newLight = new _lights.SpotLight(camera, this.inputHandler);
-    newLight.prepareBuffer(this.device);
+    let newLight = new _lights.SpotLight(camera, this.inputHandler, this.device);
     this.lightContainer.push(newLight);
-    console.log('Add light : ', newLight);
+    this.createTexArrayForShadows();
+    console.log(`%cAdd light: ${newLight}`, _utils.LOG_FUNNY_SMALL);
   }
   addMeshObj = (o, clearColor = this.options.clearColor) => {
     if (typeof o.name === 'undefined') {
@@ -11036,12 +11191,9 @@ class MatrixEngineWGPU {
       o.physics.rotation = o.rotation;
     }
     o.physics.position = o.position;
-    //  console.log('Mesh procedure', o)
-    // TEST OBJS SEQ ANIMS 
     if (typeof o.objAnim == 'undefined' || typeof o.objAnim == null) {
       o.objAnim = null;
     } else {
-      // console.log('o.anim', o.objAnim)
       if (typeof o.objAnim.animations !== 'undefined') {
         o.objAnim.play = _loaderObj.play;
       }
@@ -11054,14 +11206,13 @@ class MatrixEngineWGPU {
       // scale for all second option!
       o.objAnim.scaleAll = function (s) {
         for (var k in this.meshList) {
-          console.log('SCALE');
+          console.log('SCALE meshList');
           this.meshList[k].setScale(s);
         }
       };
     }
-    let myMesh1 = new _meshObj.default(this.canvas, this.device, this.context, o);
-    myMesh1.lightContainer = this.lightContainer;
-    myMesh1.inputHandler = this.inputHandler;
+    let myMesh1 = new _meshObj.default(this.canvas, this.device, this.context, o, this.inputHandler);
+    myMesh1.spotlightUniformBuffer = this.spotlightUniformBuffer;
     myMesh1.clearColor = clearColor;
     if (o.physics.enabled == true) {
       this.matrixAmmo.addPhysics(myMesh1, o.physics);
@@ -11080,49 +11231,19 @@ class MatrixEngineWGPU {
     this.mainRenderBundle = [];
     this.canvas.remove();
   };
-  test = () => {
-    const now = Date.now();
-    // First frame safety
-    let dt = (now - this.lastFrameMS) / this.mainCameraParams.responseCoef;
-    if (!this.lastFrameMS) {
-      dt = 16;
+  updateLights() {
+    const floatsPerLight = 36; // not 20 anymore
+    const data = new Float32Array(this.MAX_SPOTLIGHTS * floatsPerLight);
+    for (let i = 0; i < this.MAX_SPOTLIGHTS; i++) {
+      if (i < this.lightContainer.length) {
+        const buf = this.lightContainer[i].getLightDataBuffer();
+        data.set(buf, i * floatsPerLight);
+      } else {
+        data.set(new Float32Array(floatsPerLight), i * floatsPerLight);
+      }
     }
-    this.lastFrameMS = now;
-    const camera = this.cameras[this.mainCameraParams.type];
-
-    // engine, once per frame
-    // const camera = this.cameras[this.mainCameraParams.type];
-    camera.update(dt, this.inputHandler());
-    const camVP = _wgpuMatrix.mat4.multiply(camera.projectionMatrix, camera.view); // P * V
-
-    for (const mesh of this.mainRenderBundle) {
-      // scene buffer layout = 0..63 lightVP, 64..127 camVP, 128..143 lightPos(+pad)
-      this.device.queue.writeBuffer(mesh.sceneUniformBuffer, 64,
-      // cameraViewProjMatrix offset
-      camVP.buffer, camVP.byteOffset, camVP.byteLength);
-    }
-    // engine frame
-    // camera.update(dt, this.inputHandler());
-    // const camVP = mat4.multiply(camera.projectionMatrix, camera.view);
-
-    // for(const mesh of this.mainRenderBundle) {
-    //   // Light’s viewProj should come from your SpotLight
-    //   // If you have multiple lights, you’ll need an array UBO or multiple passes.
-    //   const sceneData = new Float32Array(16 + 16 + 4); // lightVP, camVP, lightPos(+pad)
-    //   sceneData.set(this.lightContainer[0].viewProjMatrix, 0);
-    //   sceneData.set(camVP, 16);
-    //   sceneData.set(this.lightContainer[0].position, 32);
-
-    //   // sceneUniformBuffer
-    //   this.device.queue.writeBuffer(
-    //     mesh.sceneUniformBuffer,  // or a shared one if/when you centralize it
-    //     0,
-    //     sceneData.buffer,
-    //     sceneData.byteOffset,
-    //     sceneData.byteLength
-    //   );
-    // }
-  };
+    this.device.queue.writeBuffer(this.spotlightUniformBuffer, 0, data.buffer);
+  }
   frameSinglePass = () => {
     if (typeof this.mainRenderBundle == 'undefined' || this.mainRenderBundle.length == 0) {
       setTimeout(() => {
@@ -11130,66 +11251,109 @@ class MatrixEngineWGPU {
       }, 200);
       return;
     }
+    let noPass = false;
+    this.mainRenderBundle.forEach((meItem, index) => {
+      if (meItem.isVideo == true) {
+        if (!meItem.externalTexture || meItem.video.readyState < 2) {
+          console.log('no rendere for video not ready');
+          //  this.externalTexture = this.device.importExternalTexture({source: this.video});
+          noPass = true;
+          setTimeout(() => requestAnimationFrame(this.frame), 1500);
+          return;
+        }
+      }
+    });
+    if (noPass == true) {
+      console.log('no rendere for video not ready !!!!');
+      return;
+    }
+
+    // let pass;
+    // let commandEncoder;
     try {
-      let shadowPass = null;
-      let renderPass;
       let commandEncoder = this.device.createCommandEncoder();
-      this.test();
+      this.updateLights();
       // 1️⃣ Update light data (position, direction, uniforms)
       for (const light of this.lightContainer) {
-        light.updateLightBuffer();
+        light.update();
+        // light.updateSceneUniforms(this.mainRenderBundle, this.cameras.WASD);
         this.mainRenderBundle.forEach((meItem, index) => {
-          light.updateSceneUniforms(this.mainRenderBundle, this.cameras.WASD);
+          meItem.position.update();
+          meItem.updateModelUniformBuffer();
+          // if(meItem.isVideo != true) {
+          meItem.getTransformationMatrix(this.mainRenderBundle, light);
+          // }
         });
       }
-      this.mainRenderBundle.forEach((meItem, index) => {
-        meItem.position.update();
-      });
       if (this.matrixAmmo) this.matrixAmmo.updatePhysics();
-
-      // no cast WORKING
-      // this.mainRenderBundle.forEach((meItem, index) => {
-      //   meItem.draw(commandEncoder);
-
-      //   shadowPass = commandEncoder.beginRenderPass(meItem.shadowPassDescriptor);
-      //   shadowPass.setPipeline(meItem.shadowPipeline);
-      //   meItem.drawShadows(shadowPass);
-      //   shadowPass.end();
-      // })
-
-      // cast!
-      const firstItem = this.mainRenderBundle[0];
-      shadowPass = commandEncoder.beginRenderPass(firstItem.shadowPassDescriptor);
-      shadowPass.setPipeline(firstItem.shadowPipeline);
-      for (const meItem of this.mainRenderBundle) {
-        // meItem.draw(commandEncoder);
-        meItem.drawShadows(shadowPass); // Draw ALL objects
+      for (let i = 0; i < this.lightContainer.length; i++) {
+        const light = this.lightContainer[i];
+        let ViewPerLightRenderShadowPass = this.shadowTextureArray.createView({
+          dimension: '2d',
+          baseArrayLayer: i,
+          arrayLayerCount: 1,
+          // must be > 0
+          baseMipLevel: 0,
+          mipLevelCount: 1
+        });
+        const shadowPass = commandEncoder.beginRenderPass({
+          label: "shadowPass",
+          colorAttachments: [],
+          depthStencilAttachment: {
+            view: ViewPerLightRenderShadowPass,
+            depthLoadOp: 'clear',
+            depthStoreOp: 'store',
+            depthClearValue: 1.0
+          }
+        });
+        shadowPass.setPipeline(light.shadowPipeline);
+        for (const [meshIndex, mesh] of this.mainRenderBundle.entries()) {
+          if (mesh.videoIsReady == 'NONE') {
+            shadowPass.setBindGroup(0, light.getShadowBindGroup(mesh, meshIndex));
+            shadowPass.setBindGroup(1, mesh.modelBindGroup);
+            mesh.drawShadows(shadowPass, light);
+          }
+        }
+        shadowPass.end();
       }
-      shadowPass.end();
-      this.mainRenderBundle.forEach((meItem, index) => {
-        if (index == 0) {
-          meItem.draw(commandEncoder);
-          meItem.renderPassDescriptor.colorAttachments[0].view = this.context.getCurrentTexture().createView();
-          renderPass = commandEncoder.beginRenderPass(meItem.renderPassDescriptor);
-          renderPass.setPipeline(meItem.pipeline);
-        } else {
-          meItem.draw(commandEncoder);
+      const currentTextureView = this.context.getCurrentTexture().createView();
+      this.mainRenderPassDesc.colorAttachments[0].view = currentTextureView;
+      let pass = commandEncoder.beginRenderPass(this.mainRenderPassDesc);
+      // Loop over each mesh
+      for (const mesh of this.mainRenderBundle) {
+        pass.setPipeline(mesh.pipeline);
+        if (!mesh.sceneBindGroupForRender || mesh.FINISH_VIDIO_INIT == false && mesh.isVideo == true) {
+          for (const m of this.mainRenderBundle) {
+            if (m.isVideo == true) {
+              console.log('✅✅✅ set shadowVideoView', this.shadowVideoView);
+              m.shadowDepthTextureView = this.shadowVideoView;
+              m.FINISH_VIDIO_INIT = true;
+              m.setupPipeline();
+            } else {
+              console.log('✅ NORMAL shadowArrayView');
+              m.shadowDepthTextureView = this.shadowArrayView;
+            }
+          }
         }
-      });
-      this.mainRenderBundle.forEach((meItem, index) => {
-        meItem.drawElements(renderPass);
-      });
-      if (renderPass) renderPass.end();
+        mesh.drawElements(pass, this.lightContainer);
+      }
+
+      // End render pass
+      pass.end();
       this.device.queue.submit([commandEncoder.finish()]);
       requestAnimationFrame(this.frame);
     } catch (err) {
-      console.log('%cDraw func (err):' + err, _utils.LOG_WARN);
+      console.log('%cLoop(err):' + err, _utils.LOG_WARN);
+      // if(pass) pass.end();
+      // this.device.queue.submit([commandEncoder.finish()]);
       requestAnimationFrame(this.frame);
+    } finally {
+      //requestAnimationFrame(this.frame);
     }
   };
   framePassPerObject = () => {
     let commandEncoder = this.device.createCommandEncoder();
-    this.matrixAmmo.updatePhysics();
+    if (this.matrixAmmo.rigidBodies.length > 0) this.matrixAmmo.updatePhysics();
     this.mainRenderBundle.forEach((meItem, index) => {
       if (index === 0) {
         if (meItem.renderPassDescriptor) meItem.renderPassDescriptor.colorAttachments[0].loadOp = 'clear';
@@ -11197,7 +11361,7 @@ class MatrixEngineWGPU {
         if (meItem.renderPassDescriptor) meItem.renderPassDescriptor.colorAttachments[0].loadOp = 'load';
       }
       // Update transforms, physics, etc. (optional)
-      meItem.draw(commandEncoder); // optional: if this does per-frame updates
+      meItem.draw(commandEncoder);
       if (meItem.renderBundle) {
         // Set up view per object
         meItem.renderPassDescriptor.colorAttachments[0].view = this.context.getCurrentTexture().createView();
@@ -11205,7 +11369,7 @@ class MatrixEngineWGPU {
         passEncoder.executeBundles([meItem.renderBundle]); // ✅ Use only this bundle
         passEncoder.end();
       } else {
-        meItem.draw(commandEncoder); // fallback if no renderBundle
+        meItem.draw(commandEncoder);
       }
     });
     this.device.queue.submit([commandEncoder.finish()]);