Mozilla工程师展示如何将WebGL应用移植到WebVR

　　在数个月前，我将一款Pathfinder演示应用程序移植到WebVR。那是一次有趣的经历，而我感觉自己在将WebGL应用移植到WebVR的过程中学到了一推事情。我认为这些经验教训应该会对大家有所帮助，尤其是缺乏Web编程经验的WebVR新人。
　　Pathfinder是一款用Rust语言编写的基于GPU的字体光栅化器，它包含一个在服务器端运行Rust代码的演示应用程序，但都在TypeScript网站的WebGL中完成所有的GPU工作。
　　我们有一个展示MozillaMonument的3D演示作品，将其作为演示3D文本光栅化的一种方式。我希望做的事情是将其转换为WebVR应用程序，支持你通过移动头部来浏览纪念碑，而非使用键盘的方向键。
　　我在着手研究这个问题的时候相当熟悉OpenGL和WebGL，但对VR或WebVR几乎没有任何知识背景。三年前我编写了一个AndroidCardboard应用程序，但也就仅此而已。
　　我希望这篇文章能够为类似的开发者提供帮助。
　　1。什么是WebVR
　　WebVR是一组用于在Web上编写VR应用程序的API。它允许我们请求跳转到VR模式，这时我们就可以直接将影像渲染到VR显示器，而不是渲染到平面浏览器。当用户使用Cardboard或Daydream等设备时，用户需要将智能手机塞进头显之中。
　　WebVRAPI有助于切换至或离开VR模式，获取姿态信息，在VR中渲染，以及处理设备输入。新的WebXRDeviceAPI规范正在对一系列的事项进行优化。
　　2。我需要什么设备来支持WebVR吗？
　　理想情况下，一款优秀的VR设备可以更容易地测试你的工作，但根据你需要的分辨率，Daydream或Cardboard已经足够。你甚至可以在没有头显的情况下进行测试，不过画面看起来会很怪异和出现扭曲。
　　对于本地测试，Chrome提供了一个非常有用的WebVRAPI模拟扩展。你可以使用其中的开发者工具面板来调整姿态，而且你可以获得无扭曲的显示。
　　火狐支持WebVR，而在启动一定的flag情况下，ChromeCanary同样予以支持。这个polyfill应该能兼容更多的浏览器。
　　3。工作原理
　　我认为在我开始的时候，不理解这部分内容是我产生许多困惑和错误的根源。API的核心基本上是“将某些内容渲染到画布，然后再变出魔术”，而我当时无法确定魔法是如何产生。
　　基本上，有一些我们应该做的事情，然后浏览器（或polyfill）同样有一些额外的工作需要完成。
　　一旦我们进入VR模式，只要设备请求帧，就会触发回调。在这个回调中，我们可以访问姿态信息。利用姿态信息，我们可以确定每只眼睛应该看到的内容，并以某种形式将其提供给WebVRAPI。
　　WebVRAPI期望的事情是，我们将每个眼睛的视图渲染至画布，水平分割（当我们初始化它时，这个画布将传递给API）。这是我们这一边要做的事情，然后浏览器（或polyfill）完成剩下的工作。它将使用我们渲染的画布作为纹理，并且对于每只眼睛，它会扭曲渲染的一半以适当地使用设备中的透镜。例如，Daydream和Cardboard的扭曲遵循这个polyfill中的代码。
　　值得注意的是，作为应用程序开发者，我们不必担心这一点，因为WebVRAPI将会为我们处理它。我们只需要将每只眼睛的未扭曲视图渲染至画布，左边视图到左半边，右边视图到右半边，而浏览器将处理其余的视图。
　　4。移植WebGL应用
　　webvr。info和MDN提供了一些很好的资源。webvr。info有一堆简洁的样本，如果你像我一样，捣鼓它们能够帮助你更好地学习。
　　4。1进入VR模式
　　首先，我们需要访问VR显示器并进入VR模式：
　　进入VR本身：
　　现在我们已经进入VR，下一步是什么？在上面的代码片段中，我们有一个render（）调用，它正在完成大部分的艰苦工作。由于我们从一个现有的WebGL应用程序开始，我们已经有了这样的功能：
　　这看起来很好，但请注意我们是为双眼渲染相同的影像，而且根本没有处理头部运动。为了实现这一点，我们需要使用WebVR从VRFrameData对象提供的透视图和视图矩阵。
　　VRFrameData对象包含一个姿态构件，其中包含所有头部姿态信息（位置，方向，甚至是速度和加速度）。但为了在渲染时正确定位camera，VRFrameData提供了我们可以直接使用的投影和视图矩阵。我们可以这样做：
　　在图形中，我们经常发现我们需要处理模型，视图和投影矩阵。模型矩阵定义了我们希望在空间坐标中渲染的对象位置，视图矩阵定义了camera空间和世界空间之间的变换，而投影矩阵则处理剪辑空间和camera空间之间的变换。有时候我们会处理其中一些组合，比如“模型视图”矩阵。
　　你可以在webvr。info的立体渲染示例中看到立方体群代码使用这些矩阵。
　　我们的应用程序很可能已经具备模型视图投影矩阵的概念。如果没有，我们可以在顶点着色器中使用视图矩阵预乘我们的位置。我们的代码看起来将是这样：
　　这应该能解决问题。现在移动头部应该能触发场景中的移动。你可以通过这个演示应用程序看到代码的应用，它是利用本文提及的技术来将一个旋转三角形WebGL应用程序转换为WebVR兼容的三角形浏览应用程序。
　　如果我们有进一步的输入，我们可能需要使用GamepadAPI来设计一个适用于典型VR控制器的VR界面，但这超出了本文的范围。
　　来源：87870