一、背景
自从2021年，Roblox上市，提出来Meterverse这样一个概念，才让图形学这个领域逐渐被更多的人关注。因为元宇宙必然面对一个的问题就是怎样把现实的世界数字化，而这里面必不可少的条件就是图形学知识。
新一代互联网的媒介形式，将会是AR、VR、虚实共生的空间体验，一种三维空间互联网
二、Web3D动画
1、3D技术发展
我们熟知的Unity和Unreal就是典型的Native技术栈下的3D渲染引擎产品， 而Web端也有大名鼎鼎的Three.js，Barbylon.js, Cesium.js 和 Playcanvas等等。
真正的Web 3D的技术标准的出现，是WebGL。Khronos在2009年启动WebGL标准的讨论和制定工作。WebGL思路很简单，就是依靠浏览器的内核，对OpenGL ES版本做打包和封装。
2014年，Native侧已经出了三大现代图形API了: DX12, Vulkan, Metal。在2017年的时候，W3C就提出在Web侧发展下一代图形学的技术标准,即WebGPU。跟WebGL一样，WebGPU的思路就是对三个现代图形API直接打包，然后在实现跨平台的同时，让浏览器里面直接可以调用这三个现代图形API能力，实现高质量的渲染效果，调用GPU的强大计算能力。
WebGL 与现代 GPU 的设计不匹配，导致 CPU 性能和 GPU 性能问题。
WebGPU最大的优势在于能够更好的利用前端设备的硬件资源，从而使得浏览器在3D以及计算方面的能力得到大大增强。
WebGPU 支持情况参考：caniuse.com/webgpu
2、Web3D开发库介绍
3、WebGL的工作原理
查看Canvas的绘图API，我们会发现它能画直线、矩形、圆、弧线、贝塞尔曲线。 于是，我们看了看WebGL绘图API，发现：
4、Three.js程序结构
三、WebAR介绍
1、VR、AR、MR介绍
如果环境都是虚拟的，那就是VR； 如果展现出来的虚拟信息只是与虚拟事物的简单叠加，那则是AR。 MR和AR的区别，简单而言：AR只管叠加虚拟环境却不需理会现实，但MR能通过一个摄像头让你看到裸眼都看不到的现实。 MR技术的虚拟与现实的交互反馈能够使人们在相距很远的情况下进行交流，极具操作性，如在5G网络的加持下，相隔两地的医生能同步进行手术和指导，在医学领域极富意义。
目前AR展现形式有2种，AR眼镜，手机AR
AR眼镜主要分为四大模块：摄像头、CPU处理中心、光学模组、架托；
2、原生ARSDK
大多数AR引擎都是基于ARCore和ARKit，分别用于支持Android设备和IOS设备，并在基础上再次封装扩展开发。少部分AR引擎有自行研发核心功能，用于适配更多手机型号或增强功能
3、开源webar库
主流AR 框架：目前维护和使用比较多的是 AR.js，另外还有一些其他的：
three.ar.js：github.com/google-ar/t... ARToolKit：www.hitl.washington.edu/artoolkit/ JSARToolKit：github.com/kig/JSARToo... argon.js：www.argonjs.io/ awe.js：awe.media/#main tracking.js：github.com/eduardolund...
4、商业webar库
8thwall官网：www.8thwall.com/ zapworks官网：zap.works/ XR+官网：xr.plus/ awe.js官网：awe.media/ vectary官网：www.vectary.com/
成立于2016年的8th Wall是一家AR开发平台公司，为微软、耐克、Netflix、迪奥、环球影业以及百事可乐等大型公司提供服务。目前支持iOS和Android系统，涉及全球数十亿台设备，其中包括手机、电脑以及耳机等。除此之外，8th Wall率先推出了基于Web的增强现实功能(WebAR)，给开发人员和公司带来极大便利。
2022年3 月 11 日《宝可梦GO》的开发商 Niantic 宣布它已经收购了基于网络的增强现实开发商 8th Wall。
5、AR内容制作
免费3D模型网站：zhuanlan.zhihu.com/p/65997533 全民皆可创作AR作品的工具:zhuanlan.zhihu.com/p/399312900
6、AR.js
AR.js中提供了图像跟踪（Image Tracking）、基于定位（Location Based）、基于标记（Marker Based） 三种模式。其中图像跟踪模式是通过设备摄像头，扫描图片、绘画、照片等内容，从而定位场景的模式。
图像跟踪模式，是用 自然特征点跟踪（Nature Feature Tracking、NFT） 技术，将图片中的特征点进行提取。然后通过识别影像中是否存在这些特征点，来确定图像的位置和方向，构建场景，进一步加载或者渲染期望的模型。厉害的是，生成特征时用的是图片，但检测的时候可以是实物。
主要是封装了： WebRTC：获取视频流（最关键的 API 方法是 getUserMedia() ，实时获取摄像头的视频流） JSARToolKit：主要提供了识别和追踪 marker 的功能。（1999 年发布，一直更新至今） Three.js、A-Frame（这几个都是基于 WebGL 的渲染库）
