javascriptmatrixthree.jsorientationstereo-3d

Three.js - how to create mirror image for the entire scene


so I'm building an AR headset that uses stereo rendering to create 3d images. The only problem is that when the image reflects off the headset's reflectors it creates a flipped (mirror) image. I need to take account for that in my Three.js code so I was wondering if there are 2 options:

  1. Flip every 3d object in the scene
  2. Or flip the camera to simulate an optically inverted (mirror image) camera

I'll post the basics of my code here:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

const stereo = new THREE.StereoCamera();

function render() {

   //stereo rendering code 
   camera.updateWorldMatrix();
   stereo.update(camera);

   const size = new THREE.Vector2();
   renderer.getSize(size);
   renderer.setScissorTest(true);
   renderer.setScissor(0, 0, size.width / 2, size.height);
   renderer.setViewport(0, 0, size.width / 2, size.height);
   renderer.render(scene, stereo.cameraL);

   renderer.setScissor(size.width / 2, 0, size.width / 2, size.height);
   renderer.setViewport(size.width / 2, 0, size.width / 2, size.height);
   renderer.render(scene, stereo.cameraR);

   renderer.setScissorTest(false);
 }

  requestAnimationFrame(render);

I've also attached some images to explain what my goal is: This is currently what is being rendered with the code above

enter image description here

It might be easy to just flip the cube using a matrix but what if dozens of more 3d objects get added to the scene? Ideally, I'd like it if the entire camera could be flipped to simulate a mirrored image for the entire scene with respect to the stereo camera (if possible).

I would appreciate any help. It's also worth noting that I've tried manually flipping the display through Window's display settings but that did not have the outcome I was looking for.


Solution

  • Could you just use CSS to flip the element you're using to render the scene?

    <style>
      canvas {
        transform: scaleX(-1);
      }
    </style>