1

I'm developing for the OculusRift using the OculusRiftEffect from https://github.com/mrdoob/three.js/blob/master/examples/js/effects/OculusRiftEffect.js and am using Sprites. The problem is the sprites don't appear in the correct position in each eye as in the screenshot.screenshot You can see the house sprite is in different positions in each eye and causes a 'double vision' effect in the oculus. While playing around with the code (have a demo plunker here) you can notice that near the edges of the screen the positioning is more accurate but I need it nearer the center of the screen where the positioning is off. I assume this has something to do with the shading/rendering in OculusRiftEffect but don't know enough about it to break it down, any direction would be appreciated, thanks!

Sample code:

var _scene, _camera, _renderer, _effect, _sprite;

function init() {
  _scene = new THREE.Scene();
  _camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, .1, 100000);
  _camera.lookAt(new THREE.Vector3());
  _renderer = new THREE.WebGLRenderer({
        antialias: true,
      canvas: document.getElementById('legit')
    });

  _renderer.setSize(window.innerWidth, window.innerHeight);

  _effect = new THREE.OculusRiftEffect(_renderer, {
    worldScale: 1000
  });
  _effect.setSize(window.innerWidth, window.innerHeight);

  THREE.ImageUtils.crossOrigin = 'anonymous';

  _sprite = new THREE.Sprite(
    new THREE.SpriteMaterial({
        map: new THREE.Texture(document.getElementById('icon')),
        color: 0xff0000
    })
  );

  _sprite.scale.set(200, 200, 1);
  _sprite.position.set(500, 800, 1);
  _scene.add(_sprite);

  _scene.add(new THREE.Mesh(
    new THREE.SphereGeometry(3000, 64, 32),
    new THREE.MeshBasicMaterial({
      color: 0xffffff,
      wireframe: true,
      side: THREE.DoubleSide
    })
  ));

  animate();
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
    _renderer.render(_scene, _camera);
    _effect.render(_scene, _camera);
}

document.addEventListener('DOMContentLoaded', init);
4

3 回答 3

0

正如 pailhead 和 Jherico 提到的，这在 Oculus 插件中是不可能的。我发现一种有效的解决方法是简单地使用 PlaneGeometry 并将其设置为相机的子项。将其设置为查看相机的位置，它会像精灵一样工作，并为 OculusRiftEffect 正确渲染。基本示例（假设相机和场景）：

var sprite = new THREE.Mesh(
    new THREE.PlaneGeometry(100, 100),
    new THREE.MeshBasicMaterial({color: 0xffffff})
);
//assuming camera is at (0,0,0) we need to offset it
sprite.position.set(20, 20, -100);
sprite.lookAt(camera.position);

camera.add(sprite);

//normally camera doesnt need to be added
//but if it has child meshes it is necessary
scene.add(camera);

由于平面是相机的子对象，因此一旦正确定位其偏移量，它将跟随相机无论走到哪里。需要注意的是，它的功能与 Sprite 的功能不同，因为您无法在场景中独立移动它，但它是我找到的最接近的解决方案。

于 2014-06-14T16:52:29.687 回答
0

我对 Three.js sprites 的阅读表明它们是使用屏幕坐标定位的，而不是场景中的几何图形。因此，他们忽略了施加在场景上的每眼投影矩阵偏移。我不相信它们会因此与 Oculus Rift 失真效果一起正常工作。

于 2014-05-27T18:09:47.947 回答
0

我对 Oculus 插件不是很熟悉，但我认为您对精灵如何工作的理解是错误的。

Sprite 是一种渲染技术——一种可渲染的光栅化表面……它仍然可以在空间中的任何地方，而空间是一个相对术语。

您的房子是否知道它是 HUD 的一部分，而不是远处某个粒子系统的一部分？

实现您想要的一种方法是在与代表每只眼睛中心的两个点等距离处覆盖副本，所有这些都在屏幕空间中。我认为这会产生您正在寻找的效果。

就定位而言。方向明智，我不确定它们是否真的在您上面的图像中正确对齐，但鱼眼效果正在发挥作用。

于 2014-05-23T18:40:00.807 回答