fix(videoTexture): force video refresh at rendering frameRate

packages/media-extention/VideoTexture.ts

@@ -55,18 +55,22 @@ export class VideoTexture extends Texture {
     protected updateGPUTexture() {}
 
     private videoTexture: GPUExternalTexture;
+
     public getGPUView() {
         this.samplerBindingLayout = null;
+        // force video refresh at renderring frameRate
+        this.media.pause()
+        this.media.play()
+        // import video current frame
         this.videoTexture = webGPUContext.device.importExternalTexture(this._des)
         this.noticeChange()
         return this.videoTexture
     }
 
     protected noticeChange() {
-        this.gpuSampler = webGPUContext.device.createSampler(this);
-        this._stateChangeRef.forEach((v, k) => {
-            v();
-        });
+        if(!this.gpuSampler)
+            this.gpuSampler = webGPUContext.device.createSampler(this);
+        this._stateChangeRef.forEach(v=>v());
     }
 
     private createVideo() {

packages/media-extention/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orillusion/media-extention",
-    "version": "0.2.0",
+    "version": "0.2.1",
     "author": "Orillusion",
     "description": "Orillusion Media Material Extention",
     "main": "./dist/media.umd.js",

samples/material/Sample_VideoMaterial.ts

@@ -0,0 +1,37 @@
+import {Engine3D, Vector3, Scene3D, Object3D, Camera3D, View3D, MeshRenderer, HoverCameraController, PlaneGeometry, AtmosphericComponent, BoxGeometry } from "@orillusion/core";
+import { VideoTexture,VideoMaterial } from "@orillusion/media-extention"
+
+async function demo() {
+    await Engine3D.init();
+    let scene = new Scene3D();
+    scene.addComponent(AtmosphericComponent);
+
+    let camera = new Object3D();
+    scene.addChild(camera)
+    let mainCamera = camera.addComponent(Camera3D);
+    mainCamera.perspective(60, Engine3D.aspect, 0.1, 10000.0);
+    let hc = camera.addComponent(HoverCameraController);
+    hc.setCamera(0, 0, 5);
+
+    // Create VideoTexture
+    let videoTexture = new VideoTexture();
+    await videoTexture.load('https://cdn.orillusion.com/videos/bunny.mp4')
+    // Create VideoMaterial
+    let mat = new VideoMaterial();
+    mat.baseMap = videoTexture;
+
+    // Create a cube to play video
+    let planeObj = new Object3D();
+    let mr = planeObj.addComponent(MeshRenderer);
+    mr.geometry = new BoxGeometry(2, 2, 2);
+    mr.material = mat;
+    scene.addChild(planeObj);
+
+    let view = new View3D();
+    view.scene = scene;
+    view.camera = mainCamera;
+    // start render
+    Engine3D.startRenderView(view);
+}
+
+demo();