Merge pull request #8572 from processing/fix/mediaelement-texture-perf

Avoid unnecessary texture copies and fix flipped webcams in WebGL

Author: davepagurek

src/dom/p5.MediaElement.js

@@ -713,6 +713,13 @@ class MediaElement extends Element {
   duration() {
     return this.elt.duration;
   }
+  _checkIfTextureNeedsUpdate() {
+    const needsUpdate = this._frameOnTexture !== this._pInst.frameCount;
+    if (needsUpdate) {
+      this.setModified(true);
+      this._frameOnTexture = this._pInst.frameCount;
+    }
+  }
   _ensureCanvas() {
     if (!this.canvas) {
       this.canvas = document.createElement('canvas');
@@ -1647,13 +1654,13 @@ function media(p5, fn){
       if (domElement.width) {
         videoEl.width = domElement.width;
         videoEl.height = domElement.height;
-        if (flipped) {
-          videoEl.elt.style.transform = 'scaleX(-1)';
-        }
       } else {
         videoEl.width = videoEl.elt.width = domElement.videoWidth;
         videoEl.height = videoEl.elt.height = domElement.videoHeight;
       }
+      if (flipped) {
+        videoEl.elt.style.transform = 'scaleX(-1)';
+      }
       videoEl.loadedmetadata = true;
 
       if (callback) callback(domElement.srcObject);

src/webgl/p5.Texture.js

@@ -102,11 +102,18 @@ class Texture {
       this.isSrcMediaElement ||
       this.isSrcHTMLElement
     ) {
-      // if param is a video HTML element
-      if (this.src._ensureCanvas) {
+      // createCapture elements that are flipped need
+      // to go through a canvas
+      if (this.isSrcMediaElement && this.src.flipped) {
         this.src._ensureCanvas();
+        textureData = this.src.canvas;
+      } else {
+        // if param is a video HTML element
+        if (this.src._checkIfTextureNeedsUpdate) {
+          this.src._checkIfTextureNeedsUpdate();
+        }
+        textureData = this.src.elt;
       }
-      textureData = this.src.elt;
     } else if (this.isSrcP5Graphics || this.isSrcP5Renderer) {
       textureData = this.src.canvas;
     } else if (this.isImageData) {