使用 WebXR 的立体照片 VR 幻灯片

Posted 2023-03-23

【中文标题】使用 WebXR 的立体照片 VR 幻灯片

【英文标题】：VR slideshow of stereoscopic photos using WebXR

【发布时间】：2021-11-16 07:18:15

【问题描述】：

我有一个庞大且不断增长的 JPS 和 MPO 格式的立体（不是 360 度）照片库，我想通过网站以 VR 耳机的某种立体幻灯片形式分享这些照片。

A-Frame 看起来很有希望，但到目前为止，我还没有找到有关如何并排显示或其他立体图像格式的示例。

如果我只是错过了这样一个例子，如果有人能指出我，我将不胜感激。

如果没有，很高兴了解我将如何使用 A-Frame 或其他方式为立体图像创建幻灯片。

【问题讨论】：

像this (a-frame has a tutorial on creating it) 这样的画廊？

@PiotrAdamMilewski 谢谢，我看过这个，但它似乎是用于 360 全景图像，而不是 stereoscopic images such as this

抱歉，我太早下结论了。我不记得看过这样的画廊，但它会是this direction（手机上的虚拟现实模式）中的东西吗？

谢谢，好像是我要找的那种东西，我去看看

【参考方案1】：

这样做的一种方法是

将立体图像分割成两个图像，这将对应于原始图像的两半。

使用stereo component为对应的眼睛渲染每一半

这需要两架飞机：

<a-plane material="src: #img; repeat:0.5 1" stereo="eye:left"></a-plane>
<a-plane material="src: #img; repeat:0.5 1; offset: 0.5 0" stereo="eye: right"></a-plane> 

和设置

repeat 到 0.5 1 只渲染一半图像，并且 右眼偏移0.5 0

this glitch 中的简单 wxample 或使用光标在 vr 模式下交换图像here

【讨论】：

我使用这种方法创建了一个stereoscopic-slideshow PoC - 你可以view it here。我遇到的唯一问题是 VR 浏览器的内存不足 outlined here 但我会问这个问题