videothree.jsflipvideotexture

How can I flip a Three.js VideoTexture horizontally?


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?


Solution

  • 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?