matrix-engine-wgpu 1.3.9 → 1.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-engine-wgpu",
-  "version": "1.3.9",
+  "version": "1.3.12",
   "description": "obj sequence anim +HOTFIX raycast, webGPU powered pwa application. Crazy fast rendering with AmmoJS physics support. Simple raycaster hit object added.",
   "main": "index.js",
   "files": [

package/readme.md

@@ -27,10 +27,10 @@ Published on npm as: **`matrix-engine-wgpu`**
 
 ## Goals
 
-* ✔️ Support for 3D objects and scene transformations
-* 🎯 Replicate matrix-engine (WebGL) features
-* 📦 Based on the `shadowMapping` sample from [webgpu-samples](https://webgpu.github.io/webgpu-samples/?sample=shadowMapping)
-* ✔️ Ammo.js physics integration (basic cube)
+- ✔️ Support for 3D objects and scene transformations
+- 🎯 Replicate matrix-engine (WebGL) features
+- 📦 Based on the `shadowMapping` sample from [webgpu-samples](https://webgpu.github.io/webgpu-samples/?sample=shadowMapping)
+- ✔️ Ammo.js physics integration (basic cube)
 
 ---
 
@@ -38,17 +38,21 @@ Published on npm as: **`matrix-engine-wgpu`**
 
 ### Scene Management
 
-* Canvas is dynamically created in JavaScript—no `<canvas>` element needed in HTML.
+- Canvas is dynamically created in JavaScript—no `<canvas>` element needed in HTML.
 
-* Access the main scene objects:
+- Access the main scene objects:
 
   ```js
   app.mainRenderBundle[0];
   ```
+ or
+  ```js
+  app.getSceneObjectByName("Sphere1");
+  ```
 
-* Add meshes with `.addMeshObj()`, supporting `.obj` loading, unlit textures, cubes, spheres, etc.
+- Add meshes with `.addMeshObj()`, supporting `.obj` loading, unlit textures, cubes, spheres, etc.
 
-* Cleanly destroy the scene:
+- Cleanly destroy the scene:
 
   ```js
   app.destroyProgram();
@@ -72,8 +76,8 @@ mainCameraParams: {
 ### Object Position
 
 Best way for access physics body object:
- app.matrixAmmo.getBodyByName(name)
- also app.matrixAmmo.getNameByBody
+app.matrixAmmo.getBodyByName(name)
+also app.matrixAmmo.getNameByBody
 
 Control object position:
 
@@ -128,7 +132,7 @@ app.mainRenderBundle[0].rotation.rotationSpeed.y = 0;
 
 ---
 
-### Camera Example
+### 3D Camera Example
 
 Manipulate WASD camera:
 
@@ -152,14 +156,21 @@ The raycast returns:
 Manual raycast example:
 
 ```js
-window.addEventListener('click', (event) => {
-  let canvas = document.querySelector('canvas');
+window.addEventListener("click", event => {
+  let canvas = document.querySelector("canvas");
   let camera = app.cameras.WASD;
-  const { rayOrigin, rayDirection } = getRayFromMouse(event, canvas, camera);
+  const {rayOrigin, rayDirection} = getRayFromMouse(event, canvas, camera);
 
   for (const object of app.mainRenderBundle) {
-    if (rayIntersectsSphere(rayOrigin, rayDirection, object.position, object.raycast.radius)) {
-      console.log('Object clicked:', object.name);
+    if (
+      rayIntersectsSphere(
+        rayOrigin,
+        rayDirection,
+        object.position,
+        object.raycast.radius
+      )
+    ) {
+      console.log("Object clicked:", object.name);
     }
   }
 });
@@ -168,80 +179,88 @@ window.addEventListener('click', (event) => {
 Automatic raycast listener:
 
 ```js
-addRaycastListener(); 
+addRaycastListener();
 
-window.addEventListener('ray.hit.event', (event) => {
-  console.log('Ray hit:', event.detail.hitObject);
+window.addEventListener("ray.hit.event", event => {
+  console.log("Ray hit:", event.detail.hitObject);
 });
 ```
+
 Engine also exports (box):
- - addRaycastsAABBListener 
- - rayIntersectsAABB,
- - computeAABB,
- - computeWorldVertsAndAABB,
+
+- addRaycastsAABBListener
+- rayIntersectsAABB,
+- computeAABB,
+- computeWorldVertsAndAABB,
+
 ---
 
 ### How to Load `.obj` Models
 
 ```js
 import MatrixEngineWGPU from "./src/world.js";
-import { downloadMeshes } from './src/engine/loader-obj.js';
-
-export let application = new MatrixEngineWGPU({
-  useSingleRenderPass: true,
-  canvasSize: 'fullscreen',
-  mainCameraParams: {
-    type: 'WASD',
-    responseCoef: 1000
-  }
-}, () => {
-  addEventListener('AmmoReady', () => {
-    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(meshes) {
-    application.myLoadedMeshes = meshes;
-    for (const key in meshes) {
-      console.log(`%c Loaded obj: ${key} `, LOG_MATRIX);
-    }
+import {downloadMeshes} from "./src/engine/loader-obj.js";
 
-    application.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: meshes.cube,
-      physics: {
-        enabled: true,
-        geometry: "Cube"
-      }
+export let application = new MatrixEngineWGPU(
+  {
+    useSingleRenderPass: true,
+    canvasSize: "fullscreen",
+    mainCameraParams: {
+      type: "WASD",
+      responseCoef: 1000,
+    },
+  },
+  () => {
+    addEventListener("AmmoReady", () => {
+      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
+      );
     });
 
-    application.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: meshes.sphere,
-      physics: {
-        enabled: true,
-        geometry: "Sphere"
+    function onLoadObj(meshes) {
+      application.myLoadedMeshes = meshes;
+      for (const key in meshes) {
+        console.log(`%c Loaded obj: ${key} `, LOG_MATRIX);
       }
-    });
+
+      application.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: meshes.cube,
+        physics: {
+          enabled: true,
+          geometry: "Cube",
+        },
+      });
+
+      application.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: meshes.sphere,
+        physics: {
+          enabled: true,
+          geometry: "Sphere",
+        },
+      });
+    }
   }
-});
+);
 
 window.app = application;
 ```
 
-
 ### 🔁 Load OBJ Sequence Animation
 
 This example shows how to load and animate a sequence of .obj files to simulate mesh-based animation (e.g. walking character).
@@ -308,22 +327,38 @@ export var loadObjsSequence = function () {
 
   window.app = loadObjFile;
 };
+```
+
+### 📽️ Video textures
+
+```js
+TEST.loadVideoTexture({
+  type: 'video', // video , camera  //not tested yet canvas2d , canvas2dinline
+  src: 'res/videos/tunel.mp4'
+});
+```
 
-### 📽️ Preview
+<pre>
+| Scenario                       | Best Approach                      |
+| ------------------------------ | ---------------------------------- |
+| Dynamic 2D canvas animation    | `canvas.captureStream()` → `video` |
+| Static canvas snapshot         | `createImageBitmap(canvas)`        |
+| Replaying real video or webcam | Direct `video` element             |
+</pre>
 
-## @Note
+### Note
 If this happen less then 15 times (Loading procces) then it is ok probably...
-```warn
+
+```json
 Draw func (err):TypeError: Failed to execute 'beginRenderPass' on 'GPUCommandEncoder': The provided value is not of type 'GPURenderPassDescriptor'.
 ```
 
-## @Note
-I act according to the fact that there is only one canvas element on the page.
-
 ## About URLParams
+
 Buildin Url Param check for multiLang.
+
 ```js
-    urlQuery.lang
+urlQuery.lang;
 ```
 
 ---
@@ -367,12 +402,12 @@ This is static file storage.
 
 ## Live Demos & Dev Links
 
-* [Jamb WebGPU Demo (WIP)](https://maximumroulette.com/apps/webgpu/)
-* [CodePen Demo](https://codepen.io/zlatnaspirala/pen/VwNKMar?editors=0011)
+- [Jamb WebGPU Demo (WIP)](https://maximumroulette.com/apps/webgpu/)
+- [CodePen Demo](https://codepen.io/zlatnaspirala/pen/VwNKMar?editors=0011)
   → Uses `empty.js` build from:
   [https://maximumroulette.com/apps/megpu/empty.js](https://maximumroulette.com/apps/megpu/empty.js)
-* [CodeSandbox Implementation](https://codesandbox.io/p/github/zlatnaspirala/matrix-engine-wgpu/main?file=%2Fpackage.json%3A14%2C16)
-* 📘 Learning Resource: [WebGPU Ray Tracing](https://maierfelix.github.io/2020-01-13-webgpu-ray-tracing/)
+- [CodeSandbox Implementation](https://codesandbox.io/p/github/zlatnaspirala/matrix-engine-wgpu/main?file=%2Fpackage.json%3A14%2C16)
+- 📘 Learning Resource: [WebGPU Ray Tracing](https://maierfelix.github.io/2020-01-13-webgpu-ray-tracing/)
 
 ---
 
@@ -386,13 +421,13 @@ You may use, modify, and sell projects based on this code — just keep this not
 
 ### Attribution & Credits
 
-* Engine design and scene structure inspired by:
+- Engine design and scene structure inspired by:
   [WebGPU Samples](https://webgpu.github.io/webgpu-samples/?sample=shadowMapping)
-* OBJ Loader adapted from:
+- OBJ Loader adapted from:
   [http://math.hws.edu/graphicsbook/source/webgl/cube-camera.html](http://math.hws.edu/graphicsbook/source/webgl/cube-camera.html)
-* Dice roll sound `roll1.wav` sourced from:
+- Dice roll sound `roll1.wav` sourced from:
   [https://wavbvkery.com/dice-rolling-sound/](https://wavbvkery.com/dice-rolling-sound/)
-* Raycasting logic assisted by ChatGPT
+- Raycasting logic assisted by ChatGPT
 
 ---
 

package/src/engine/engine.js

@@ -60,6 +60,7 @@ class CameraBase {
   get right() {
     return this.right_;
   }
+
   // Assigns `vec` to the first 3 elements of column vector 0 of the camera matrix
   set right(vec) {
     vec3.copy(vec, this.right_);
@@ -69,6 +70,7 @@ class CameraBase {
   get up() {
     return this.up_;
   }
+
   // Assigns `vec` to the first 3 elements of column vector 1 of the camera matrix \ Vec3
   set up(vec) {
     vec3.copy(vec, this.up_);
@@ -78,6 +80,7 @@ class CameraBase {
   get back() {
     return this.back_;
   }
+
   // Assigns `vec` to the first 3 elements of column vector 2 of the camera matrix
   set back(vec) {
     vec3.copy(vec, this.back_);
@@ -87,6 +90,7 @@ class CameraBase {
   get position() {
     return this.position_;
   }
+
   // Assigns `vec` to the first 3 elements of column vector 3 of the camera matrix
   set position(vec) {
     vec3.copy(vec, this.position_);

package/src/engine/materials.js

@@ -0,0 +1,273 @@
+/**
+ * @description
+ * Created for matrix-engine-wgpu project.
+ * MeshObj class estends Materials.
+ * @author Nikola Lukic
+ * @email zlatnaspirala@gmail.com
+ */
+
+export default class Materials {
+  constructor(device) {
+    this.device = device;
+    this.isVideo = false;
+    // For shadow comparison
+    this.compareSampler = this.device.createSampler({compare: 'less'});
+    // For image textures (standard sampler)
+    this.imageSampler = this.device.createSampler({
+      magFilter: 'linear',
+      minFilter: 'linear',
+    });
+    // For external video textures (needs to be filtering sampler too!)
+    this.videoSampler = this.device.createSampler({
+      magFilter: 'linear',
+      minFilter: 'linear',
+    });
+  }
+
+  async loadTex0(texturesPaths) {
+    this.sampler = this.device.createSampler({
+      magFilter: 'linear',
+      minFilter: 'linear',
+    });
+    return new Promise(async (resolve) => {
+      const response = await fetch(texturesPaths[0]);
+      const imageBitmap = await createImageBitmap(await response.blob());
+      this.texture0 = this.device.createTexture({
+        size: [imageBitmap.width, imageBitmap.height, 1], // REMOVED 1
+        format: 'rgba8unorm',
+        usage:
+          GPUTextureUsage.TEXTURE_BINDING |
+          GPUTextureUsage.COPY_DST |
+          GPUTextureUsage.RENDER_ATTACHMENT,
+      });
+      this.device.queue.copyExternalImageToTexture(
+        {source: imageBitmap},
+        {texture: this.texture0},
+        [imageBitmap.width, imageBitmap.height]
+      );
+      resolve()
+    })
+  }
+
+  async loadVideoTexture(arg) {
+    this.isVideo = true;
+    if(arg.type === 'video') {
+      this.video = document.createElement('video');
+      this.video.src = arg.src || 'res/videos/tunel.mp4';
+      this.video.crossOrigin = 'anonymous';
+      this.video.autoplay = true;
+      this.video.loop = true;
+      document.body.append(this.video);
+      this.video.style.display = 'none';
+      await this.video.play();
+    } else if(arg.type === 'videoElement') {
+      this.video = arg.el;
+      await this.video.play();
+    } else if(arg.type === 'camera') {
+      this.video = document.createElement('video');
+      this.video.autoplay = true;
+      this.video.muted = true;
+      this.video.playsInline = true;
+      this.video.style.display = 'none';
+      document.body.append(this.video);
+
+      try {
+        const stream = await (navigator.mediaDevices?.getUserMedia?.({
+          video: {
+            width: {ideal: 1280},
+            height: {ideal: 720},
+          },
+          audio: false
+        }));
+
+        this.video.srcObject = stream;
+        await this.video.play();
+      } catch(err) {
+        console.error("❌ Failed to access camera:", err);
+        return;
+      }
+    } else if(arg.type === 'canvas2d') {
+      // Existing canvas (arg.el) — assume it's actively drawing
+      this.video = document.createElement('video');
+      this.video.autoplay = true;
+      this.video.muted = true;
+      this.video.playsInline = true;
+      this.video.style.display = 'none';
+      document.body.append(this.video);
+
+      // Create stream from existing canvas
+      const stream = arg.el.captureStream?.() || arg.el.mozCaptureStream?.();
+      if(!stream) {
+        console.error('❌ Cannot capture stream from canvas2d');
+        return;
+      }
+
+      this.video.srcObject = stream;
+      await this.video.play();
+
+    } else if(arg.type === 'canvas2d-inline') {
+      // Miniature inline-drawn canvas created dynamically
+      const canvas = document.createElement('canvas');
+      canvas.width = arg.width || 256;
+      canvas.height = arg.height || 256;
+      const ctx = canvas.getContext('2d');
+
+      if(typeof arg.canvaInlineProgram === 'function') {
+        // Start drawing loop
+        const drawLoop = () => {
+          arg.canvaInlineProgram(ctx, canvas);
+          requestAnimationFrame(drawLoop);
+        };
+        drawLoop();
+      }
+
+      this.video = document.createElement('video');
+      this.video.autoplay = true;
+      this.video.muted = true;
+      this.video.playsInline = true;
+      this.video.style.display = 'none';
+      document.body.append(this.video);
+
+      const stream = canvas.captureStream?.() || canvas.mozCaptureStream?.();
+      if(!stream) {
+        console.error('❌ Cannot capture stream from inline canvas');
+        return;
+      }
+
+      this.video.srcObject = stream;
+      await this.video.play();
+    }
+
+    this.sampler = this.device.createSampler({
+      magFilter: 'linear',
+      minFilter: 'linear',
+    });
+
+    // ✅ Now
+    // includes externalTexture type
+    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();
+  }
+
+  createBindGroupForRender() {
+    const textureResource = this.isVideo
+      ? this.externalTexture // must be set via updateVideoTexture
+      : this.texture0.createView();
+    // Log all bindings to debug
+    if(!textureResource || !this.sceneUniformBuffer || !this.shadowDepthTextureView || !this.sampler) {
+      console.warn("❗Missing res skipping...");
+      return;
+    }
+
+    if(this.isVideo == true) {
+      this.sceneBindGroupForRender = this.device.createBindGroup({
+        layout: this.bglForRender,
+        entries: [
+          {
+            binding: 0,
+            resource: {buffer: this.sceneUniformBuffer},
+          },
+          {
+            binding: 1,
+            resource: this.shadowDepthTextureView,
+          },
+          {
+            binding: 2,
+            resource: this.compareSampler,
+          },
+          {
+            binding: 3,
+            resource: textureResource,
+          },
+          {
+            binding: 4,
+            resource: this.videoSampler,
+          },
+        ],
+      });
+    } else {
+      this.sceneBindGroupForRender = this.device.createBindGroup({
+        layout: this.bglForRender,
+        entries: [
+          {
+            binding: 0,
+            resource: {buffer: this.sceneUniformBuffer},
+          },
+          {
+            binding: 1,
+            resource: this.shadowDepthTextureView,
+          },
+          {
+            binding: 2,
+            resource: this.compareSampler,
+          },
+          {
+            binding: 3,
+            resource: textureResource,
+          },
+          {
+            binding: 4,
+            resource: this.imageSampler,
+          },
+        ],
+      });
+    }
+  }
+
+  createLayoutForRender() {
+    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
+            },
+          ]
+          : [ // IMAGE
+            {
+              binding: 3,
+              visibility: GPUShaderStage.FRAGMENT,
+              texture: {
+                sampleType: 'float',
+                viewDimension: '2d',
+              },
+            },
+            {
+              binding: 4,
+              visibility: GPUShaderStage.FRAGMENT,
+              sampler: {type: 'filtering'},
+            },
+          ])
+      ],
+    });
+  }
+}

package/src/engine/mesh-obj.js

@@ -5,10 +5,12 @@ import {vertexShadowWGSL} from '../shaders/vertexShadow.wgsl';
 import {fragmentWGSL} from '../shaders/fragment.wgsl';
 import {vertexWGSL} from '../shaders/vertex.wgsl';
 import {degToRad, genName, LOG_FUNNY_SMALL} from './utils';
-// import {checkingProcedure, checkingRay, touchCoordinate} from './raycast';
+import Materials from './materials';
+import {fragmentVideoWGSL} from '../shaders/fragment.video.wgsl';
 
-export default class MEMeshObj {
+export default class MEMeshObj extends Materials {
   constructor(canvas, device, context, o) {
+    super(device);
     if(typeof o.name === 'undefined') o.name = genName(9);
     if(typeof o.raycast === 'undefined') {
       this.raycast = {
@@ -28,6 +30,8 @@ export default class MEMeshObj {
     // comes from engine not from args
     this.clearColor = "red";
 
+    this.video = null;
+
     // Mesh stuff - for single mesh or t-posed (fiktive-first in loading order)
     this.mesh = o.mesh;
     this.mesh.uvs = this.mesh.textures;
@@ -73,7 +77,7 @@ export default class MEMeshObj {
         this.projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 1, 2000.0);
         this.modelViewProjectionMatrix = mat4.create();
         // console.log('cube added texturesPaths: ', this.texturesPaths)
-        this.loadTex0(this.texturesPaths, device).then(() => {
+        this.loadTex0(this.texturesPaths).then(() => {
           // console.log('loaded tex buffer for mesh:', this.texture0)
           resolve()
         })
@@ -82,10 +86,10 @@ export default class MEMeshObj {
 
     this.runProgram().then(() => {
       const aspect = canvas.width / canvas.height;
-      const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+      // const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
       this.context.configure({
         device: this.device,
-        format: presentationFormat,
+        format: this.presentationFormat,
         alphaMode: 'premultiplied',
       });
 
@@ -189,7 +193,7 @@ export default class MEMeshObj {
         },
       ];
 
-      const primitive = {
+      this.primitive = {
         topology: 'triangle-list',
         // cullMode: 'back', // ORI 
         cullMode: 'none', // ORI 
@@ -225,82 +229,45 @@ export default class MEMeshObj {
           depthCompare: 'less',
           format: 'depth32float',
         },
-        primitive,
+        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.bglForRender = this.device.createBindGroupLayout({
-        entries: [
-          {
-            binding: 0,
-            visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-            buffer: {
-              type: 'uniform',
-            },
-          },
-          {
-            binding: 1,
-            visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-            texture: {
-              sampleType: 'depth',
-            },
-          },
-          {
-            binding: 2,
-            visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-            sampler: {
-              type: 'comparison',
-            },
-          },
-          {
-            binding: 3,
-            visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-            texture: {
-              sampleType: 'float',
-            }
-          },
-          {
-            binding: 4,
-            visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-            sampler: {
-              type: 'filtering',
-            }
-          }
-        ]
-      });
-
-      this.pipeline = this.device.createRenderPipeline({
-        layout: this.device.createPipelineLayout({
-          bindGroupLayouts: [this.bglForRender, this.uniformBufferBindGroupLayout],
-        }),
-        vertex: {
-          module: this.device.createShaderModule({
-            code: vertexWGSL,
-          }),
-          buffers: this.vertexBuffers,
-        },
-        fragment: {
-          module: this.device.createShaderModule({
-            code: fragmentWGSL,
-          }),
-          targets: [
-            {
-              format: presentationFormat,
-            },
-          ],
-          constants: {
-            shadowDepthTextureSize: this.shadowDepthTextureSize,
-          },
-        },
-        depthStencil: {
-          depthWriteEnabled: true,
-          depthCompare: 'less',
-          format: 'depth24plus-stencil8',
-        },
-        primitive,
-      });
+      this.createLayoutForRender()
+
+      this.setupPipeline();
+      // this.pipeline = this.device.createRenderPipeline({
+      //   layout: this.device.createPipelineLayout({
+      //     bindGroupLayouts: [this.bglForRender, this.uniformBufferBindGroupLayout],
+      //   }),
+      //   vertex: {
+      //     module: this.device.createShaderModule({
+      //       code: vertexWGSL,
+      //     }),
+      //     buffers: this.vertexBuffers,
+      //   },
+      //   fragment: {
+      //     module: this.device.createShaderModule({
+      //       code: fragmentWGSL,
+      //     }),
+      //     targets: [
+      //       {
+      //         format: presentationFormat,
+      //       },
+      //     ],
+      //     constants: {
+      //       shadowDepthTextureSize: this.shadowDepthTextureSize,
+      //     },
+      //   },
+      //   depthStencil: {
+      //     depthWriteEnabled: true,
+      //     depthCompare: 'less',
+      //     format: 'depth24plus-stencil8',
+      //   },
+      //   primitive,
+      // });
 
       const depthTexture = this.device.createTexture({
         size: [canvas.width, canvas.height],
@@ -355,35 +322,8 @@ export default class MEMeshObj {
         ],
       });
 
-      this.sceneBindGroupForRender = this.device.createBindGroup({
-        layout: this.bglForRender,
-        entries: [
-          {
-            binding: 0,
-            resource: {
-              buffer: this.sceneUniformBuffer,
-            },
-          },
-          {
-            binding: 1,
-            resource: this.shadowDepthTextureView,
-          },
-          {
-            binding: 2,
-            resource: this.device.createSampler({
-              compare: 'less',
-            }),
-          },
-          {
-            binding: 3,
-            resource: this.texture0.createView(),
-          },
-          {
-            binding: 4,
-            resource: this.sampler,
-          },
-        ],
-      });
+      // --------------------------
+      this.createBindGroupForRender();
 
       this.modelBindGroup = this.device.createBindGroup({
         layout: this.uniformBufferBindGroupLayout,
@@ -429,13 +369,13 @@ export default class MEMeshObj {
       }
 
       this.getModelMatrix = (pos) => {
-        let modelMatrix =  mat4.identity();
+        let modelMatrix = mat4.identity();
         mat4.translate(modelMatrix, [pos.x, pos.y, pos.z], modelMatrix);
         if(this.itIsPhysicsBody) {
           mat4.rotate(modelMatrix,
             [this.rotation.axis.x, this.rotation.axis.y, this.rotation.axis.z],
-              degToRad(this.rotation.angle),
-              modelMatrix
+            degToRad(this.rotation.angle),
+            modelMatrix
           );
         } else {
           mat4.rotateX(modelMatrix, this.rotation.getRotX(), modelMatrix);
@@ -589,59 +529,54 @@ export default class MEMeshObj {
     ///////////////////////
   }
 
-  async loadTex0(texturesPaths, device) {
-
-    this.sampler = device.createSampler({
-      magFilter: 'linear',
-      minFilter: 'linear',
+  setupPipeline = () => {
+    this.pipeline = this.device.createRenderPipeline({
+      layout: this.device.createPipelineLayout({
+        bindGroupLayouts: [this.bglForRender, this.uniformBufferBindGroupLayout],
+      }),
+      vertex: {
+        entryPoint: 'main', // ✅ Add this
+        module: this.device.createShaderModule({
+          code: vertexWGSL,
+        }),
+        buffers: this.vertexBuffers,
+      },
+      fragment: {
+        entryPoint: 'main', // ✅ Add this
+        module: this.device.createShaderModule({
+          code: (this.isVideo == true ? fragmentVideoWGSL : fragmentWGSL),
+        }),
+        targets: [
+          {
+            format: this.presentationFormat,
+          },
+        ],
+        constants: {
+          shadowDepthTextureSize: this.shadowDepthTextureSize,
+        },
+      },
+      depthStencil: {
+        depthWriteEnabled: true,
+        depthCompare: 'less',
+        format: 'depth24plus-stencil8',
+      },
+      primitive: this.primitive,
     });
-
-    return new Promise(async (resolve) => {
-      const response = await fetch(texturesPaths[0]);
-
-      // const blob = await response.blob();
-      // if(!blob.type.startsWith('image/')) {
-      //   console.error("Unexpected texture response type:", blob.type);
-      //   return;
-      // }
-
-      // const imageBitmap = await createImageBitmap(blob);
-      const imageBitmap = await createImageBitmap(await response.blob());
-      this.texture0 = device.createTexture({
-        size: [imageBitmap.width, imageBitmap.height, 1], // REMOVED 1
-        format: 'rgba8unorm',
-        usage:
-          GPUTextureUsage.TEXTURE_BINDING |
-          GPUTextureUsage.COPY_DST |
-          GPUTextureUsage.RENDER_ATTACHMENT,
-      });
-
-      device.queue.copyExternalImageToTexture(
-        {source: imageBitmap},
-        {texture: this.texture0},
-        [imageBitmap.width, imageBitmap.height]
-      );
-      resolve()
-    })
   }
 
-  draw = (commandEncoder) => {
+  draw = () => {
     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.device.queue.writeBuffer(this.sceneUniformBuffer, 64, transformationMatrix.buffer, transformationMatrix.byteOffset, transformationMatrix.byteLength);
     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);
@@ -651,7 +586,7 @@ export default class MEMeshObj {
     renderPass.drawIndexed(this.indexCount);
   }
 
-  // test 
+  // test
   createGPUBuffer(dataArray, usage) {
     if(!dataArray || typeof dataArray.length !== 'number') {
       throw new Error('Invalid data array passed to createGPUBuffer');

package/src/shaders/fragment.video.wgsl.js

@@ -0,0 +1,51 @@
+export let fragmentVideoWGSL = `override shadowDepthTextureSize: f32 = 1024.0;
+
+struct Scene {
+  lightViewProjMatrix : mat4x4f,
+  cameraViewProjMatrix : mat4x4f,
+  lightPos : vec3f,
+}
+
+@group(0) @binding(0) var<uniform> scene : Scene;
+@group(0) @binding(1) var shadowMap: texture_depth_2d;
+@group(0) @binding(2) var shadowSampler: sampler_comparison;
+@group(0) @binding(3) var meshTexture: texture_external;
+@group(0) @binding(4) var meshSampler: sampler;
+
+// ❌ No binding(4) here!
+
+struct FragmentInput {
+  @location(0) shadowPos : vec3f,
+  @location(1) fragPos : vec3f,
+  @location(2) fragNorm : vec3f,
+  @location(3) uv : vec2f,
+}
+
+const albedo = vec3f(0.9);
+const ambientFactor = 0.7;
+
+@fragment
+fn main(input : FragmentInput) -> @location(0) vec4f {
+  // Shadow filtering
+  var visibility = 0.0;
+  let oneOverShadowDepthTextureSize = 1.0 / shadowDepthTextureSize;
+  for (var y = -1; y <= 1; y++) {
+    for (var x = -1; x <= 1; x++) {
+      let offset = vec2f(vec2(x, y)) * oneOverShadowDepthTextureSize;
+      visibility += textureSampleCompare(
+        shadowMap, shadowSampler,
+        input.shadowPos.xy + offset, input.shadowPos.z - 0.007
+      );
+    }
+  }
+  visibility /= 9.0;
+
+  let lambertFactor = max(dot(normalize(scene.lightPos - input.fragPos), normalize(input.fragNorm)), 0.0);
+  let lightingFactor = min(ambientFactor + visibility * lambertFactor, 1.0);
+
+  // ✅ Correct way to sample video texture
+  let textureColor = textureSampleBaseClampToEdge(meshTexture, meshSampler, input.uv);
+
+  return vec4(textureColor.rgb * lightingFactor * albedo, 1.0);
+}
+`;

package/src/shaders/vertex.wgsl.js

@@ -16,7 +16,7 @@ struct VertexOutput {
   @location(1) fragPos: vec3f,
   @location(2) fragNorm: vec3f,
   @location(3) uv : vec2f,
-  
+
   @builtin(position) Position: vec4f,
 }
 
@@ -46,4 +46,4 @@ fn main(
 
   return output;
 }
-`
+`;

package/src/world.js

@@ -84,7 +84,6 @@ export default class MatrixEngineWGPU {
       WASD: new WASDCamera({position: initialCameraPosition}),
     };
 
-    //
     this.label = new MultiLang()
     if(urlQuery.lang != null) {
       this.label.loadMultilang(urlQuery.lang).then((r) => {
@@ -135,6 +134,10 @@ export default class MatrixEngineWGPU {
     this.run(callback)
   };
 
+  getSceneObjectByName(name) {
+    return this.mainRenderBundle.find((sceneObject) => sceneObject.name === name )
+  }
+
   // Not in use for now
   addCube = (o) => {
     if(typeof o === 'undefined') {
@@ -322,7 +325,7 @@ export default class MatrixEngineWGPU {
   }
 
   destroyProgram = () => {
-    this.mainRenderBundle = undefined;
+    this.mainRenderBundle = [];
     this.canvas.remove();
   }
 
@@ -337,7 +340,7 @@ export default class MatrixEngineWGPU {
         meItem.position.update();
       })
 
-      this.matrixAmmo.updatePhysics()
+      if (this.matrixAmmo) this.matrixAmmo.updatePhysics();
 
       this.mainRenderBundle.forEach((meItem, index) => {
         meItem.draw(commandEncoder);