Texture supports continuous update from HTMLVideoElement (#1418)

docs/api-reference/webgl/texture.md

@@ -176,6 +176,11 @@ Note: does not allocate storage
 See also [gl.compressedTexSubImage2D](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/compressedTexSubImage2D), [gl.texSubImage2D](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texSubImage2D), [gl.bindTexture](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bindTexture), [gl.bindBuffer](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bindBuffer)
 
 
+### update()
+
+Update this texture if `HTMLVideoElement` is used as the data source. This method is automatically called before every draw call if this texture is bound to a uniform.
+
+
 ### getActiveUnit()
 
 Returns number of active textures.
@@ -205,7 +210,7 @@ WebGL allows textures to be created from a number of different data sources.
 | `typed array`                      | Bytes will be interpreted according to format/type parameters and pixel store parameters. |
 | `Buffer` or `WebGLBuffer` (`WebGL 2`) | Bytes will be interpreted according to format/type parameters and pixel store parameters. |
 | `Image` (`HTMLImageElement`)       | image will be used to fill the texture. width and height will be deduced. |
-| `Video` (`HTMLVideoElement`)       | video will be played, continously updating the texture. width and height will be deduced. |
+| `Video` (`HTMLVideoElement`)       | video will be used to continously update the texture. width and height will be deduced. |
 | `Canvas` (`HTMLCanvasElement`)     | canvas will be used to fill the texture. width and height will be deduced. |
 | `ImageData`                        | `canvas.getImageData()` - Used to fill the texture. width and height will be deduced. |
 

docs/whats-new.md

@@ -1,5 +1,13 @@
 # What's New
 
+## Version 8.4
+
+Date: TBD
+
+### Texture
+
+Supports continuous update from HTMLVideoElement
+
 ## Version 8.3
 
 Date: Oct 12, 2020

modules/webgl/src/classes/program.js

@@ -70,7 +70,6 @@ export default class Program extends Resource {
     this.uniforms = {};
 
     this._textureUniforms = {};
-    this._texturesRenderable = true;
 
     // Setup varyings if supplied
     if (varyings && varyings.length > 0) {
@@ -227,10 +226,6 @@ export default class Program extends Resource {
             texture.bind(textureIndex);
             value = textureIndex;
 
-            if (!texture.loaded) {
-              this._texturesRenderable = false;
-            }
-
             this._textureUniforms[uniformName] = texture;
           } else {
             value = uniformSetter.textureIndex;
@@ -253,20 +248,18 @@ export default class Program extends Resource {
   // PRIVATE METHODS
 
   // Checks if all texture-values uniforms are renderable (i.e. loaded)
+  // Update a texture if needed (e.g. from video)
   // Note: This is currently done before every draw call
   _areTexturesRenderable() {
-    if (this._texturesRenderable) {
-      return true;
-    }
-
-    this._texturesRenderable = true;
+    let texturesRenderable = true;
 
     for (const uniformName in this._textureUniforms) {
       const texture = this._textureUniforms[uniformName];
-      this._texturesRenderable = this._texturesRenderable && texture.loaded;
+      texture.update();
+      texturesRenderable = texturesRenderable && texture.loaded;
     }
 
-    return this._texturesRenderable;
+    return texturesRenderable;
   }
 
   // Binds textures

modules/webgl/src/classes/texture.js

@@ -90,6 +90,11 @@ export default class Texture extends Resource {
       );
       return this;
     }
+    const isVideo = typeof HTMLVideoElement !== 'undefined' && data instanceof HTMLVideoElement;
+    if (isVideo && data.readyState < HTMLVideoElement.HAVE_METADATA) {
+      data.addEventListener('loadedmetadata', () => this.initialize(props));
+      return this;
+    }
 
     const {
       pixels = null,
@@ -173,10 +178,34 @@ export default class Texture extends Resource {
     if (recreate) {
       this.data = data;
     }
+    if (isVideo) {
+      this._video = {
+        video: data,
+        parameters,
+        lastTime: data.readyState >= HTMLVideoElement.HAVE_CURRENT_DATA ? data.currentTime : -1
+      };
+    }
 
     return this;
   }
 
+  update() {
+    if (this._video) {
+      const {video, parameters, lastTime} = this._video;
+      if (lastTime === video.currentTime || video.readyState < HTMLVideoElement.HAVE_CURRENT_DATA) {
+        return;
+      }
+      this.setSubImageData({
+        data: video,
+        parameters
+      });
+      if (this.mipmaps) {
+        this.generateMipmap();
+      }
+      this._video.lastTime = video.currentTime;
+    }
+  }
+
   // If size has changed, reinitializes with current format
   // note clears image and mipmaps
   resize({height, width, mipmaps = false}) {