三.js 自定义 vr/cardboard 效果

Question

我正在尝试使用 THREE.js 创建自定义 VR 全景查看器。 我已经成功创建：

• 2 个场景，
• 2 种材质和网格（为左眼和右眼加载不同的图像），
• 用剪刀渲染器（2 个透视相机）。

结果如下所示：

对我来说一切都很好，但我想在两台相机上添加某种“黑色 vr 纸板框架”。 我不确定这个效果是如何被调用的，但这里有一些例子：

你能给我一些建议吗？

Answer 1

您要查找的单词是"barrel distortion"。你可以在 WebVR-polyfill here 中看到它的工作实现。取决于您对可能有点难以阅读的原始 webgl 的理解程度。

以下是使用两个渲染通道的通用方法的基本步骤：

• 您已经拥有的分割图像被渲染到帧缓冲区（例如see here）而不是渲染到屏幕。该帧缓冲区将用作第二个渲染过程中的纹理。
• 为第二个渲染通道设置另一个场景和另一个摄像机。相机应该是一个正交相机，范围从 x 轴上的 -1 到 1（like this）。
• 为两个视口设置两个网格（基于 PlaneBufferGeometry）并指定 UV 坐标，以便左侧网格将使用帧缓冲区的左半部分作为其纹理，而右侧网格将使用右半部分。
• 将网格添加到第二个场景实例中，将它们彼此相邻放置。
• 将桶形扭曲应用于网格的顶点。这基本上就是在code from the WebVRPolyfill 中所做的。
• 将第二个场景渲染到屏幕