three.js - THREE.StereoEffect / webVR-boilerplate + THREE.Mirror

Question

I'm trying to get a mirror effect working correctly in a project that is using webvr-boilerplate when VREffect is active.

I tried (using r72dev and r72) to use THREE.Mirror:

    //webVR-boilerplate + Mirror.js

    verticalMirror = new THREE.Mirror( renderer, camera, { clipBias: 0.03, textureWidth: 256, textureHeight: 256, color:0x889999 } );

    verticalMirrorMesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 10, 10 ), verticalMirror.material );

    verticalMirrorMesh.add( verticalMirror );

    scene.add( verticalMirrorMesh );

    // Request animation frame loop function
    function animate( timestamp ) {

          verticalMirror.render();

          // Update VR headset position and apply to camera.
          controls.update();
      
          // Render the scene through the manager.
          manager.render( scene, camera, timestamp );

          requestAnimationFrame( animate );

    }

The render targets stops updating when activating VR Mode and stereo viewing is active.

The mirror is behind the camera and I set a model spinning to observe the mirror behaviour.

Any thoughts of why this happens and possible way to fix it? Am I missing some initialization parameters for the mirror or the stereoeffect?

example

Thanks in advance.

---

EDIT : Seems the problem also not only happens with webvr-boilerplate but ALSO with StereoEffect.js and Mirror.js as I setup a scene using by a mirror to three.js StereoEffect.js example and still same problem..

Stereo http://ruidorey.webfactional.com/stereo.png mirror WITH stereo effect - live example

No Stereo http://ruidorey.webfactional.com/nostereo.png mirror WITHOUT stereo effect - live example

Answer 1

The mirror breaks when you enter VR mode because you have set the WEBVR_FORCE_DISTORTION flag. This causes webvr-boilerplate's WebVRManager to use its own CardboardDistorter shim (as opposed to distortion support in browsers that implement WebVR). This interferes with the mirror rendering.

CardboardDistorter hijacks the renderer and forces it to draw to a render target that belongs to the distorter. This prevents the mirror from using its own render target.

Ideally WebVRManager should be fixed so that it supports mirrors out of the box but you can work around this problem by storing the original render function and using it during the mirror rendering step:

var renderer = new THREE.WebGLRenderer({antialias: true});
// Save the original render function, so that we can use it 
// even after CardboardDistorter hijacks the renderer.
var originalRenderFunc = renderer.render;

...

function animate(timestamp) {

    ...

    // In our animation loop, restore the original render 
    // function for the mirror to use.
    var hijackedRenderFunc = renderer.render;
    renderer.render = originalRenderFunc;

    verticalMirror.render();

    // Set the render function back to the hijacked version
    // so that CardboardDistorter can do its job.
    renderer.render = hijackedRenderFunc;

   ...

}