三.js - THREE.StereoEffect/webVR-boilerplate + THREE.Mirror [英] three.js - THREE.StereoEffect / webVR-boilerplate + THREE.Mirror

问题描述

我正在尝试在使用 webvr-boilerplate 当 VREffect 处于活动状态时.

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

我尝试(使用 r72dev 和 r72)使用 THREE.Mirror:

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 );

    }

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

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?

示例

提前致谢.

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

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..

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

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

推荐答案

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

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 劫持渲染器并强制它绘制到属于扭曲器的渲染目标.这可以防止镜像使用自己的渲染目标.

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.

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

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;

   ...

}

这篇关于三.js - THREE.StereoEffect/webVR-boilerplate + THREE.Mirror的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！