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