How can I flip a Three.js VideoTexture horizontally?

Question

We are using the front camera feed as a VideoTexture for the background of the Three.js Scene. This video is flipped compared to the way the front-facing camera normally works. Is there a way to flip the video / VideoTexture so that it will work as we expect?

I have tried the method shown in this other question. This doesn't work, I think, because the video feed isn't a power of 2.

I have looked through the Three.js docs for VideoTexture and Texture but there only seems to be a way to flip vertically. This is also mentioned in the previous question, because "There is no WebGL flag for gl.UNPACK_FLIP_X_WEBGL..."

Is there anyway to flip the video horizontally?

Answer 1

Adding on to what @pailhead suggested and talking with a coworker, I came up with a solution. The only thing that is by guess is the '14' as shown below.

function scaleBG(workCam, scaleObj) {
  var aspectRatio = window.innerWidth / window.innerHeight;

  var alpha = ((workCam.fov / 2.0) * Math.PI / 180);
  var beta = (90.0 * Math.PI / 180.0); 
  var gamma = ((180.0 - alpha - beta) * Math.PI / 180.0);

  var c = workCam.far - camZOffset - 1.0;
  var a = c * Math.sin(alpha) / Math.sin(gamma);
  var b = c * Math.sin(beta) / Math.sin(gamma);
  var width = a * 2 / (window.innerWidth / 14);

  scaleObj.scale.set(-width, width / aspectRatio, 1);
  scaleObj.position.set(camXOffset,0,-c);
}

The scale change by '14' feels good but I am not sure if there is a better way to calculate that value. However, for now this works for me quite well.

Edit 1

Looks like the width value works for mobile but is small on desktop. May need to do some math based on the ppi?

Answer 2

You can render a quad behind the scene and rotate it or scale it negatively (instead of using .background).