Home Original page

Avoid unnecessary texture copies and fix flipped webcams in WebGL by davepagurek · Pull Request #8572 · processing/p5.js

Resolves #8571

Changes

  • Now only calls _ensureCanvas in WebGL when dealing with a flipped createCapture, regular videos do not need this
  • When using a flipped createCapture, it now actually uses the .canvas property (which is flipped) instead of the .elt property (which is not)
  • For all other media elements, there is a new _checkIfTextureNeedsUpdate method that gets called instead, which does only the necessary parts of _ensureCanvas for WebGL: marking the texture as needing updating if the time has changed and the video feed needs an update.

Screenshots of the change

Live: https://editor.p5js.org/davepagurek/sketches/IaCx_pKPE

The test sketch has a flag to toggle between testing webcam feeds and video files. There's an additional flag to toggle between drawing the textures to the canvas and showing them as HTML elements. I've manually tested all combinations of these for perf and correctness.

Note that the flipped webcam feed still has slightly worse perf due to it requiring the extra canvas draw.

PR Checklist