three.js

Question

当 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 模式且立体观看处于活动状态时停止更新。

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

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

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

因为设置了WEBVR_FORCE_DISTORTION标志，所以进入VR模式后镜像会崩溃。这导致 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;

   ...

}

Answer 2

此答案基于您的实际示例中的代码，而不是您 post 中的代码。

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

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

verticalMirror.render();

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

effect.render( scene, camera );

three.js r.72

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

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

javascript

webvr