javascript - three.js - THREE.StereoEffect/webVR-样板 + THREE.Mirror

Question

我正试图在使用 webvr-boilerplate 的项目中使镜像效果正常工作当 VREffect 处于事件状态时。

我尝试(使用 r72dev 和 r72)使用 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 );

    }

当激活 VR 模式并且立体观看处于事件状态时，渲染目标停止更新。

镜子在相机后面，我设置了一个旋转的模型来观察镜子的行为。

有没有想过为什么会发生这种情况以及可能的解决方法？我是否遗漏了一些镜像或立体效果的初始化参数？

example

提前致谢。

---

编辑:似乎问题不仅发生在 webvr-boilerplate 上，而且也发生在 StereoEffect.js 和 Mirror.js 上，因为我使用镜像设置场景到 three.js StereoEffect.js example还是一样的问题..

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

当您进入 VR 模式时，镜像会中断，因为您设置了 WEBVR_FORCE_DISTORTION 标志。这导致 webvr-boilerplate 的 WebVRManager 使用它自己的 CardboardDistorter shim(与实现 WebVR 的浏览器中的失真支持相反)。这会干扰镜像渲染。

CardboardDistorter 劫持渲染器并强制它绘制到属于扭曲器的渲染目标。这可以防止镜像使用它自己的渲染目标。

理想情况下，WebVRManager 应该得到修复，以便它支持开箱即用的镜像，但您可以通过存储原始渲染函数并在镜像渲染步骤中使用它来解决此问题:

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;

   ...

}