matrix-engine-wgpu 1.3.11 → 1.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-engine-wgpu",
-  "version": "1.3.11",
+  "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

@@ -132,7 +132,7 @@ app.mainRenderBundle[0].rotation.rotationSpeed.y = 0;
 
 ---
 
-### Camera Example
+### 3D Camera Example
 
 Manipulate WASD camera:
 
@@ -265,7 +265,7 @@ window.app = application;
 
 This example shows how to load and animate a sequence of .obj files to simulate mesh-based animation (e.g. walking character).
 
-````js
+```js
 import MatrixEngineWGPU from "../src/world.js";
 import { downloadMeshes, makeObjSeqArg } from "../src/engine/loader-obj.js";
 import { LOG_MATRIX } from "../src/engine/utils.js";
@@ -327,18 +327,31 @@ export var loadObjsSequence = function () {
 
   window.app = loadObjFile;
 };
+```
 
-### 📽️ Preview
+### 📽️ Video textures
 
-## @Note
-If this happen less then 15 times (Loading procces) then it is ok probably...
-```warn
-Draw func (err):TypeError: Failed to execute 'beginRenderPass' on 'GPUCommandEncoder': The provided value is not of type 'GPURenderPassDescriptor'.
-````
+```js
+TEST.loadVideoTexture({
+  type: 'video', // video , camera  //not tested yet canvas2d , canvas2dinline
+  src: 'res/videos/tunel.mp4'
+});
+```
+
+<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...
 
-I act according to the fact that there is only one canvas element on the page.
+```json
+Draw func (err):TypeError: Failed to execute 'beginRenderPass' on 'GPUCommandEncoder': The provided value is not of type 'GPURenderPassDescriptor'.
+```
 
 ## About URLParams
 

package/src/engine/materials.js

@@ -63,6 +63,79 @@ export default class Materials {
     } 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({