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

文章相关引用及参考:mozilla

本文来自Manish Goregaokar

映维网 2018年09月14日)在数个月前,我将一款Pathfinder演示应用程序移植到WebVR。那是一次有趣的经历,而我感觉自己在将WebGL应用移植到WebVR的过程中学到了一推事情。我认为这些经验教训应该会对大家有所帮助,尤其是缺乏Web编程经验的WebVR新人。

Pathfinder是一款用Rust语言编写的基于GPU的字体光栅化器,它包含一个在服务器端运行Rust代码的演示应用程序,但都在TypeScript网站的WebGL中完成所有的GPU工作。

我们有一个展示Mozilla Monument的3D演示作品,将其作为演示3D文本光栅化的一种方式。我希望做的事情是将其转换为WebVR应用程序,支持你通过移动头部来浏览纪念碑,而非使用键盘的方向键。

我在着手研究这个问题的时候相当熟悉OpenGL和WebGL,但对VR或WebVR几乎没有任何知识背景。三年前我编写了一个Android Cardboard应用程序,但也就仅此而已。

我希望这篇文章能够为类似的开发者提供帮助。

1. 什么是WebVR

WebVR是一组用于在Web上编写VR应用程序的API。它允许我们请求跳转到VR模式,这时我们就可以直接将影像渲染到VR显示器,而不是渲染到平面浏览器。当用户使用Cardboard或Daydream等设备时,用户需要将智能手机塞进头显之中。

WebVR API有助于切换至或离开VR模式,获取姿态信息,在VR中渲染,以及处理设备输入。新的WebXR Device API规范正在对一系列的事项进行优化。

2. 我需要什么设备来支持WebVR吗?

理想情况下,一款优秀的VR设备可以更容易地测试你的工作,但根据你需要的分辨率,Daydream或Cardboard已经足够。你甚至可以在没有头显的情况下进行测试,不过画面看起来会很怪异和出现扭曲。

对于本地测试,Chrome提供了一个非常有用的WebVR API模拟扩展。你可以使用其中的开发者工具面板来调整姿态,而且你可以获得无扭曲的显示。

火狐支持WebVR,而在启动一定的flag情况下,Chrome Canary同样予以支持。这个polyfill应该能兼容更多的浏览器。

3. 工作原理

我认为在我开始的时候,不理解这部分内容是我产生许多困惑和错误的根源。API的核心基本上是“将某些内容渲染到画布,然后再变出魔术”,而我当时无法确定魔法是如何产生。

基本上,有一些我们应该做的事情,然后浏览器(或polyfill)同样有一些额外的工作需要完成。

一旦我们进入VR模式,只要设备请求帧,就会触发回调。在这个回调中,我们可以访问姿态信息。利用姿态信息,我们可以确定每只眼睛应该看到的内容,并以某种形式将其提供给WebVR API。

WebVR API期望的事情是,我们将每个眼睛的视图渲染至画布,水平分割(当我们初始化它时,这个画布将传递给API)。这是我们这一边要做的事情,然后浏览器(或polyfill)完成剩下的工作。它将使用我们渲染的画布作为纹理,并且对于每只眼睛,它会扭曲渲染的一半以适当地使用设备中的透镜。例如,Daydream和Cardboard的扭曲遵循这个polyfill中的代码

值得注意的是,作为应用程序开发者,我们不必担心这一点,因为WebVR API将会为我们处理它。我们只需要将每只眼睛的未扭曲视图渲染至画布,左边视图到左半边,右边视图到右半边,而浏览器将处理其余的视图。

4. 移植WebGL应用

webvr.infoMDN提供了一些很好的资源。webvr.info有一堆简洁的样本,如果你像我一样,捣鼓它们能够帮助你更好地学习。

4.1 进入VR模式

首先,我们需要访问VR显示器并进入VR模式:

我们需要添加一个Event Handler,用于进入/退出VR:

进入VR本身:

4.2 在VR中渲染

现在我们已经进入VR,下一步是什么?在上面的代码片段中,我们有一个render()调用,它正在完成大部分的艰苦工作。由于我们从一个现有的WebGL应用程序开始,我们已经有了这样的功能:

所以,我们首先要进一步处理两只眼睛的渲染:

这看起来很好,但请注意我们是为双眼渲染相同的影像,而且根本没有处理头部运动。为了实现这一点,我们需要使用WebVR从VRFrameData对象提供的透视图和视图矩阵。

VRFrameData对象包含一个姿态构件,其中包含所有头部姿态信息(位置,方向,甚至是速度和加速度)。但为了在渲染时正确定位camera,VRFrameData提供了我们可以直接使用的投影和视图矩阵。我们可以这样做:

在图形中,我们经常发现我们需要处理模型,视图和投影矩阵。模型矩阵定义了我们希望在空间坐标中渲染的对象位置,视图矩阵定义了camera空间和世界空间之间的变换,而投影矩阵则处理剪辑空间和camera空间之间的变换。有时候我们会处理其中一些组合,比如“模型-视图”矩阵。

你可以在webvr.info的立体渲染示例中看到立方体群代码使用这些矩阵。

我们的应用程序很可能已经具备模型/视图/投影矩阵的概念。如果没有,我们可以在顶点着色器中使用视图矩阵预乘我们的位置。我们的代码看起来将是这样:

这应该能解决问题。现在移动头部应该能触发场景中的移动。你可以通过这个演示应用程序看到代码的应用,它是利用本文提及的技术来将一个旋转三角形WebGL应用程序转换为WebVR兼容的三角形浏览应用程序。

如果我们有进一步的输入,我们可能需要使用Gamepad API来设计一个适用于典型VR控制器的VR界面,但这超出了本文的范围。

原文链接https://yivian.com/news/50324.html
转载须知:转载摘编需注明来源映维网并保留本文链接
微信/QQ群加入映维网微信/QQ群

Yivian 猜您还喜欢...

发表评论

资讯