javascript - THREE.js 自定义 VR/纸板效果

Question

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

• 2 个场景，
• 2 种 Material 和网格(为左眼和右眼加载不同的图像)，
• 带有剪刀的渲染器(2 个透视相机)。

结果如下所示:

一切对我来说看起来都很好，但我想为两个摄像头添加某种“黑色 VR 纸板框架”。我不太确定这种效果是如何调用的，但这里有一些例子:

你能给我一些建议吗？

Answer 1

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

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

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