随着2021年10月Facebook将自己正式更名为Meta，又一个科幻界的冷门名词走进了大众的目光。无疑，元宇宙现在不光是一个商业上的概念，同时也是科技界密切关注的一种技术趋势，其背后的驱动力来自于游戏和电影工业的蓬勃发展、来自于VR/AR硬件设备的逐渐普及、来自于数字货币及区块链技术的日趋成熟，更来自于芯片技术在摩尔定律上的稳定发挥。但作为前端开发者，我们关注更多的是高效的开发框架、更快更全面的工具链、能跨更多平台的动态化技术，在此之余，前端又能为可预见的未来做些什么呢？
在探讨这个问题之前，先要做一件不可能完成的事：定义元宇宙（Metaverse）
尽管众说纷纭，大家比较有共识的几个元宇宙基本特征是：
- 社交属性：能够与他人共享一片虚拟空间，并有接近于真实的沉浸感
- 硬件中立：可以从不同的媒介访问虚拟世界，无论是VR/AR设备，还是手机手表
- 平台中立：虚拟世界不为任何个人、组织或国家所独占
- 用户驱动：用户即是虚拟世界的消费者，也是其创造者
- 平行持久：与现实世界共存，且持续存在
- 经济体系：有自洽的经济规则，支持买、卖、投资和所有权
- 连结世界：用户能在多个虚拟世界间穿梭，并能与现实世界互动
其实这不就是Web吗！
Web的立足点就是一个开放中立的巨型元宇宙，它不被某一个人或平台独占，它不依赖于某种特定的硬件，且由诸多巨型经济体和亿万网民共建完善。其中琳琅满目的聊天室、论坛、电商平台就是长久与现实世界共存的虚拟空间。人们通过简单的链接和点击操作就可以在不同的世界间来去自如，通过一串串文字和图片就可以构建出世界中的资产和经济秩序。而简单的几个网址就是从现实世界前往虚拟世界的门票。
那前端还缺什么呢？
- 对Web友好的时代
- 接近真实的沉浸感
- 对物理世界的感知能力
友好的时代
3D市场（尤其是AR市场）整体处于极速增长期
ARtillerry Intelligence和Bloomberg等智库有不少这方面的研究统计。从ARtillerry Intelligence的最新报告来看，2022年 和 2018 年相比，AR市场的总收入至少有10倍的增长，且趋势会持续下去
图：全球AR总收入（按收入来源分类，数据来源：ARtillerry Intelligence）
基于WebAR的应用（即H5）有最大的上升空间
因为其易取性（无需安装、随时部署、即用即走），基于Web的混合现实应用能触及最广的用户和设备。但受限于之前混合现实领域对软硬件的苛刻要求，当前的实际用户又是最少的。 如果能有效降低Web端内容创作成本，同时逼近当前定制客户端应用的体验，将会在轻应用场景上赢得巨大的市场。
图：AR能力各平台渗透情况和实际用户使用比例
WebAR的发展长期处于蛰伏状态，但充满希望
下面是WebAR的一些核心技术产生的时间节点：
- 1999年：华盛顿大学HIT实验室发布ARToolKit。
- 2009年：AR技术通过FLARToolKit在Web端的Adobe Flash插件中得以首次正式应用。
- 2011年：浏览器开始支持WebGL，Web应用具备硬件加速的3D渲染能力。
- 2012年：浏览器开始支持WebRTC，Web应用具备实时处理手机音视频数据能力。
- 2017年到2018年：苹果和谷歌先后发布ARKit和ARCore，为移动端的MR应用奠定基础。
- 2017到今天：
- 各浏览器开始逐渐实现WebXR Device API，WebAR 的基础能力开始标准化
- WASM和基于机器学习的新一代图像识别工具使Web端高性能实时环境感知和对象识别成为可能。
不难看出WebAR的发展在2017年以前就长期处于能力匮乏的状态。从Flash的诞生将Web3D和AR能力推上前台，到Flash的陨落，移动化浪潮的冲击，再到H5时代的能力逐渐补完，Web端AR发展的整个历程不可谓不波折。
幸运的是目前国外已有不少专注于WebAR领域的厂商。其中很大一部份诞生于2010年之后，2017年之前（苹果和谷歌推出ARKit/ARCore之前）。这说明Web端AR能力的商业化需求早在VR设备热潮和元宇宙热潮之前就存在。长期的缓慢发展主要由于早期的基础能力欠缺，以及后来的移动化趋势导致的市场需求变化。近年越来越多的创业公司开始加入到AR领域，其中一部分主要专注于WebAR领域。这个和基于WebGL的3D渲染技术在各浏览器上的逐渐成熟，以及各Web标准，例如WebRTC、WebXR（早前的WebVR）、WASM，在浏览器上的逐渐实现有直接关系。
前端的沉浸感（WebGL/WebGPU）
上古时期的前端表现力
长久以来，前端的表现力主要来自三剑客（HTML，CSS，JavaScript）。受限于诞生的时代，HTML和CSS的设计初衷是把纸质印刷品的体验复刻到虚拟空间，而JavaScript的设计初衷则只是增强网站局部的互动性，实现表单的部分校验。前端这时期的表现力更多在如何动态化地还原一个文档上。
前端的现状
随着移动化浪潮到来，传感器越来越丰富，平台也越来越碎片化。新的需求驱动前端必须能够适应不同的设备，能够调用不同硬件平台赋予的能力。前端由此慢慢演变成了一个任人打扮的小姑娘，表现力上不再拘泥于文档的形式，而是要变成宿主平台需要它变成的模样。活在各家超级应用里，就是小程序；活在chromebook里就成了原生应用；活在动态化框架中，就成了逻辑层；被包了chromium的皮，就成了桌面应用；网站下载下来了，就成了App/PWA。正因如此，div成了那个万能的狗皮膏药，传统的语义化不再那么有意义，适配宿主才是首要目标。
前端的未来
一说到沉浸感，最先想到的就是游戏。因为每个游戏本身是一套自洽的体验，不必像文档，也不必像宿主内的其他应用，但必要时，又能融入宿主环境。究其根本，这种自由度来自于应用中所见的一切都是自己画出来的。而前端未来要做到真正的沉浸感，技术层面借鉴游戏的思想应该是必然的。早在Flutter将Skia通过WASM+WebGL的方式应用到Web端之前，游戏引擎（比如Unity）的Web导出版就是这么实现界面以及内容的了。随着交互的复杂度增加，前端的组件思想和架构设计也一定会受到冲击，诞生出类似ECS式的设计。因为类游戏体验中的交互和物体能力是没有约束的。传感器可能既不是手柄也不是键盘，而是形态各异的人体工学设计。可交互的物体也不再只是约束和界限明确的UI控件，而可能是会飞的奶牛和安装了火箭的自行车。
其实过去十年来，前端一直有这么一套平行于HTML和CSS的表现力体系，这就是WebGPU/WebGL以及更早的Flash。经过10年的耕耘，前端至少有一些相对成熟的框架和工具可以选择了。而且这些框架都已经在不同程度上开始引入WebXR支持。
前端的感知能力（WebXR）
永远滞后的平台支持
从2017年到2018年，苹果和谷歌先后发布ARKit和ARCore开始，客户端就有较完整的AR支持了。但对于Web端而言，则远没有这么乐观。Web端的空间感知能力目前还是受制于浏览器的原生能力以及操作系统。谷歌主导的WebXR Device API还只能在较新的Chrome浏览器+特定的有ARCore支持的操作系统上才能使用。别的浏览器提供方何时能实现WebXR Spec就更不可预测了。
尴尬的现状
在没有SLAM、没有平面检测、没有深度检测、没有对象跟踪等能力的加持情况下，前端的感知能力其实处于一个非常尴尬的位置。这也是为什么当前绝大部份前端的AR体验都需要依赖特定图片Marker进行标记，作为3D场景的触发条件。虽然实时渲染不再是瓶颈了，但是实时的物体跟踪和SLAM仍然难以达到流畅体验所需的帧率。
突破限制
8th Wall无疑是这个领域的标杆，有意思的是8th Wall并没有选择依赖移动端的原生能力，而是选择投入大量精力到自研SLAM算法上，借助于WASM，将自研的SLAM算法移植到Web端并进行深度性能优化。这样做的直接收益就是真正稳定且高性能的跨平台体验，一些很老的手机都能有流畅的WebXR体验。所以应该不是偶然，Niantic（Pokemon GO的开发商）在2022年3月收购了8th Wall。
8th Wall的成功应该不是个例，而是反映了一种趋势：即前端的能力突破离不开几个关键技术的融合
WebRTC：通过获取视频流，实时感知世界的能力
WASM：将非JS写的算法应用到JS的能力，无论是渲染引擎、物理引擎还是SLAM
WebGL/WebGPU：提供一条通往GPU加速的捷径，无论是用于渲染，还是前端的机器学习加速
所以也不是偶然，MediaPipe这类基于机器学习的识别库最终也可以在前端得到不错的应用。其背后也是WebGL和WASM作为后台+TensorFlow.js作为机器学习部署平台+WebRTC作为视觉感知渠道的组合，带来实时的前端手势识别，面部关键点识别，身体分割，对象跟踪等功能。
属于前端的元宇宙
天生的跨平台属性、相对低廉的开发成本、极易传播等特性是前端得天独厚的优势，但受制于浏览器在性能、资源和能力上的诸多限制，很难有很强的表现力。但可以确定的是，Web本身就是一个再适合不过的meta（此处作形容词）平台，只要能解锁它一点潜力，对世界都会产生巨大改变。
