0

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?

cvolpe
  • 41
  • 6

2 Answers2

0

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

pailhead
  • 5,162
  • 2
  • 25
  • 46
  • That's not a bad idea, but it brings up a whole host of other issues. How can I make it scaled to be the size of the screen? How can I make sure it is behind the objects being rendered? Etc. I am going to keep thinking about this but if I can find a way to just flip the VideoTexture itself, that would be ideal. – cvolpe Feb 07 '19 at 17:52
  • I added to your suggestion and have posted the code that made it work for me. – cvolpe Feb 11 '19 at 23:26
0

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?

cvolpe
  • 41
  • 6