THREE.js 自定义 vr/cardboard 效果
THREE.js custom vr/cardboard effect
我正在尝试使用 THREE.js 创建自定义 VR 全景查看器。
我已成功创建：
- 2个场景，
- 2 种材质和网格（为左眼和右眼加载不同的图像），
- 带剪刀的渲染器（2 个透视相机）。
结果如下所示：
我觉得一切都很好，但我想为两台相机添加某种 "black vr cardboard frame"。
我不太确定这种效果是如何调用的，但这里有一些例子：
你能给我一些提示吗？
您要查找的词是 "barrel distortion". You can see a working implementation of this in the WebVR-polyfill here。取决于您对原始 webgl 的理解程度，这可能有点难以阅读。
下面是使用两个渲染通道的非常通用的方法的基本步骤：
- 您已经拥有的分割图像被渲染到帧缓冲区（例如 see here）而不是渲染到屏幕。该帧缓冲区将用作第二个渲染过程中的纹理。
- 为第二个渲染通道设置另一个场景和另一个相机。相机应该是 x 轴上从 -1 到 1 的正交相机（like this）。
- 为两个视口设置两个网格（基于
PlaneBufferGeometry）并分配 UV 坐标，这样左侧网格将使用帧缓冲区的左半部分作为其纹理，右侧网格将使用右半边。
- 将网格添加到第二个场景实例，将它们并排放置。
- 将桶形变形应用于网格的顶点。这基本上就是 code from the WebVRPolyfill.
中所做的
- 将第二个场景渲染到屏幕
我正在尝试使用 THREE.js 创建自定义 VR 全景查看器。 我已成功创建：
- 2个场景，
- 2 种材质和网格（为左眼和右眼加载不同的图像），
- 带剪刀的渲染器（2 个透视相机）。
结果如下所示：
我觉得一切都很好，但我想为两台相机添加某种 "black vr cardboard frame"。 我不太确定这种效果是如何调用的，但这里有一些例子：
你能给我一些提示吗？
您要查找的词是 "barrel distortion". You can see a working implementation of this in the WebVR-polyfill here。取决于您对原始 webgl 的理解程度，这可能有点难以阅读。
下面是使用两个渲染通道的非常通用的方法的基本步骤：
- 您已经拥有的分割图像被渲染到帧缓冲区（例如 see here）而不是渲染到屏幕。该帧缓冲区将用作第二个渲染过程中的纹理。
- 为第二个渲染通道设置另一个场景和另一个相机。相机应该是 x 轴上从 -1 到 1 的正交相机（like this）。
- 为两个视口设置两个网格（基于
PlaneBufferGeometry）并分配 UV 坐标，这样左侧网格将使用帧缓冲区的左半部分作为其纹理，右侧网格将使用右半边。 - 将网格添加到第二个场景实例，将它们并排放置。
- 将桶形变形应用于网格的顶点。这基本上就是 code from the WebVRPolyfill. 中所做的
- 将第二个场景渲染到屏幕