WebVR 技术栈个人理解

说明：了解WebXR的过程中，遇到相关的知识点，因此需要对这些知识点也进行了解，下面按顺序进行描述。

1. webGL:

”WebGL是一套为Web设计的基于立即模型绘制3D的API。” 它来源于OpenGL ES2.0，提供了相似的3D绘图功能，只不过它运行在HTML网页中，简单上来理解， 你可以把它看成OpenGLES 2.0的JavaScript绑定，网页的开发者可以利用它来在网页中显示3D图形。WebGL定义的是一个被HTML Canvas元素创建的用来3D渲染的上下文接口。

个人理解：WebGL在网页开发过程中对应一个canvas标签的一个上下文；该上下文存在一些方法（可被js代码调用），使得可以通过硬件完成3D图形的绘制。具体实现可见下面的链接，涉及到chrome 的cc渲染模块。

出处： https://blog.csdn.net/milado_nju/article/details/7293065

2. three.js

WebGL 可以看成是浏览器给我们提供的接口，在 javascript 中可以直接用这些 API 进行 3D 图形的绘制；而 Three.js 就是在这些接口上又帮我们封装得更好用一些。

出处：https://www.jianshu.com/p/f8353420ef2b

3. A-Frame

a-frame 是一个用来构建虚拟现实（VR）应用的网页开发框架，它基于 HTML 之上，使其上手十分简单。但是 a-frame不仅仅是一个3D场景渲染引擎或者一个标记语言，其核心思想是基于 Three.js 来提供一个声明式、可扩展以及组件化的编程结构

出处：https://blog.csdn.net/KlausLily/article/details/123124067

个人理解：A-Frame是对three.js的进一步封装，three.js需使用js代码来完成3D场景的渲染，A-Frame则提供了一组标签（参考element ui提供的标签）来完成3D场景的渲染

出处：

https://blog.csdn.net/ruangong1203/article/details/53036324

“提供一个声明式、可扩展以及组件化的编程结构”这句话如何理解呢？

声明式：即以标签的形式，例如上图中的<a-scene>

扩展及组件化编程结构：可搜索 实体-组件-系统（Entity-Component-System）进行了解

4. A-Frame 与webXR的关系

webXR是浏览器提供的接口；A-Frame是HTML上的一个框架（与element UI类似）,因此A-Frame是在webXR之上的。A-Frame支持webXR，是指A-Frame增加了新的标签，或者为已有标签增加了属性或者方法，这些增加的内容，其内部封装了对webXR api的调用。

5. webXR与webGL的关系

从前面的知识点可以看到A-Frame即封装了webXR又封装了webGL，那webXR与webGL间是什么关系呢？

WebXR是一种用于web内容和应用程序的API，用于与集成增强现实功能的VR头盔和眼镜等混合现实硬件进行接口。这包括管理模拟3D体验所需的视图的渲染过程，以及感知耳机(或其他动作感应设备)的运动的能力，并提供所需的数据来更新向用户显示的图像。

WebXR还支持接受来自手持VR控制器或专用混合现实手柄等控制设备的输入。

WebXR不是一种渲染技术，也不提供管理3D数据或将其渲染到显示器上的功能。这是要记住的一个重要事实。虽然WebXR在绘制场景时管理时间、调度和各种相关的观点，但它不知道如何加载和管理模型，也不知道如何渲染和纹理，等等。这部分完全取决于你。幸运的是，WebGL和各种基于WebGL的框架和库的出现使得处理这些问题变得更加容易。

出处：

https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API/Fundamentals

上面一段话有矛盾的地方，最开始的红色描述了包括视图渲染过程，后面又说webXR不负责渲染，渲染可以依赖webGL。到底是怎么回事呢？看了一些示例后，大概得到的理解如下：

基于webXR和three.js(webGL)进行VR开发时：

1. 首先3D场景的渲染是three.js(webGL)完成的，例如一个正方体
2. 但在VR中，例如用户带了一个VR眼镜，左右眼对应的两个显示器上，各需要显示一个正方体，这两个正方体是有一定差异的，这样才能让观看者看到立体的效果；另外随着观看者脸的摆动，两个显示器上的正方体的位置和性状也是需要改变的，如何做到改变呢，这就是webXR 的作用，webXR与VR眼镜的驱动建立了联系，可以获取到左右眼的信息以及运动信息，例如脸转动的角速度等
3. 最后将第2）步获取到的信息与第1）步中正方体的矩阵进行矩阵变换，动态计算出物体的MVP复合矩阵，最后通过three.js(webGL)完成渲染。

上面是基于webVR和three.js(webGL)进行开发时的一个关系描述；如果使用A-Frame等框架进行开发时，这些过程很可能被封装在框架内部了。

6. webXR 依赖ARCore（后改为：Google Play Services for AR），ARCore提供了哪些功能呢

先来看看AR是什么：

1. AR是将一些虚拟物品放到真实的场景中。那么这个真实的场景从哪里来呢？当然是从手机的 Camera上获取；
2. 只不过不是简单的放置，而是需要经过大量的计算，找到视频中的平面位置再放置，例如找到现实中一个桌子的平面，在上面放一个虚拟的花盆
3. 此外，还应该能对虚拟物品进行跟踪，例如手拿着手机围着桌子转一圈，可以从不同角度观察虚拟的花盆

ARCore提供了哪些功能呢？

出处：WebXR 与 ARCore 的比较  |  Google Developers

还有另一种功能描述：

运动跟踪 (motion tracking)

环境理解 (environmental understanding)

光估测 (light estimation)

用户交互 (user interaction)

定向点 (oriented points)

锚点和可跟踪对象 (anchor and trackables)

可以看到，ARCore的功能主要是图像算法，通过分析图像而理解图像所展示的自然世界。

ARCore的存在形式：

ARCore是一个可安装的apk，但没有运行界面。可以推测ARCore安装后，在系统中以SO的形式存在；也可能是SO+后端服务的形式存在。

7. ARCore对硬件有什么依赖，需要手机平台厂家对接吗？

ARCore项目的前身是Tango，Tango要求专用的设备，这使其最终没有发展起来；后苹果推出了ARKit，不用增加硬件也能支持AR；最终google也推出了ARCore，同ARKit类似，不增加硬件，而能让用户体验AR。

ARCore依赖手机的摄像头和IMU（陀螺仪）以及高性能的CPU，GPU即可；按说这个硬件很多手机都能满足，怎么又会出现只有很少款的手机支持ARCore呢？结合网上的信息大概理解如下：

ARCore需要摄像头和陀螺仪提供更多的信息（标定）才能满足理解真实世界的需求，这就对硬件的规格提出了要求（精度，某些属性）；同时手机厂家要能按ARCore的标准与ARCore对接，例如能被ARCore识别，能响应ARCore对某个信息的查询请求。

以上理解的参考源：https://segmentfault.com/a/1190000014956669

8．大概理解的关系图

10. 推荐链接

一位腾讯工程师的个人博客，webVR几篇博客都写得不错

Y.one - 知乎   

webVR+three.js的一个开发教程

Three.js与webVR - yswenli - 博客园

webXR的示例：

https://immersive-web.github.io/webxr-samples/