THREE.js定制vr /纸板效果

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。
中完成的
• 将第二个场景渲染到屏幕