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 THR

Answer 1

This answer is based on the code in your live example, not the code in your post.

The problem is that StereoEffect calls renderer.clear(), but it is clearing the mirror's previously-rendered WebGLRenderTarget.

One solution is to do something like the following:

verticalMirror.render();

renderer.setRenderTarget( null ); // add this line

effect.render( scene, camera );

three.js r.72

Answer 2

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;

   ...

}