2

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

我尝试（使用 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 模式且立体查看处于活动状态时，渲染目标停止更新。

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

关于为什么会发生这种情况以及解决它的可能方法的任何想法？我是否缺少镜像或立体效果的一些初始化参数？

例子

提前致谢。

编辑：似乎问题不仅发生在 webvr-boilerplate 上，而且还发生在 StereoEffect.js 和 Mirror.js 上，因为我使用镜像设置了一个场景到three.js StereoEffect.js 示例，但仍然存在同样的问题..

Stereo http://ruidorey.webfactional.com/stereo.png 具有立体效果的镜子 - 现场示例

没有立体声 http://ruidorey.webfactional.com/nostereo.png 没有立体声效果的镜子 - 现场示例

4

2 回答 2

4

当您进入 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;

   ...

}
于 2015-09-13T12:41:48.963 回答
2

此答案基于您的实时示例中的代码，而不是您帖子中的代码。

问题是StereoEffect调用renderer.clear()，但它正在清除镜像先前渲染的WebGLRenderTarget.

一种解决方案是执行以下操作：

verticalMirror.render();

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

effect.render( scene, camera );

三.js r.72

于 2015-09-17T05:08:08.140 回答