【元宇宙】iOS16将支持WebXR！一起来撸个WebVR华容道吧
【元宇宙】iOS16将支持WebXR！一起来撸个WebVR华容道吧
1. 背景：浏览器的革命WebXR
6月7日凌晨，苹果举行了2022年的WWDC全球开发者大会，在iOS16-Beta开发者预览版中，Safari已支持WebXR标准api。早在2018年，Chrome79 和 Firefox Reality 就已支持 WebXR 标准，而苹果可能是出于对自家 App Store 的保护，迟迟未跟进，被业内人士指责"拖累WebXR技术发展的最大障碍"。
那什么是WebXR呢？说到VR大家一定不会陌生，前几年短暂火爆后一度遇冷，很大程度上是由于高昂的硬件成本限制了技术的普及。从去年 Facebook 改名 Meta，元宇宙概念将 VR 推向了新的高度，再加上近两年硬件设备价格的不断下探，从过去的动辄上万到现在的 6 Dof 设备才不到2000，字节旗下初露头角的pico今年甚至定下了180w台的销售目标，我们不难发现，VR正在迅速普及。
再说回WebXR的概念，可以简单理解为 WebXR = Web + VR + AR + ?R，由W3C发布于2019年。与传统VR技术不同，WebXR 技术不需要下载任何应用程序或插件，将VR体验搬到浏览器中。伴随着 5G网络 和 HMD头显价格下探 以及 平台应用生态的成熟，我们有理由相信，一场交互的革命要来了，我们搬砖人也有了更好的动力来学习 WebXR 技术。
在端午节期间，我收到了因上海疫情延误的520礼物，pico-neo3-256G，拿到手后迫不及待地摸索了一阵。本文将和大家一起在 pico 中从零开发一个VR版华容道，敲开元宇宙的大门。
2. 方案设计：兼容多终端降低获客门槛
WebXR 的定义最早可以追溯到 2014 年，前Mozilla工程总监 Vladimir Vukicevic 构思了 WebVR API 的概念，这是一个 JavaScript API，特点是 兼容PC、移动设备、VR等各种设备，无需下载和安装即可在浏览器运行 3D VR 内容。
兼容是WebXR的一大亮点，通过降级体验，能够扩大用户群体：
- 对于少数的VR一体机用户：可以支持6Dof+手柄的身临其境的完美体验
- 对于部分cardboard盒子用户：可以降级支持3Dof+基于凝视(gaze)的交互体验，能够胜任一些相对轻松的场景
- 对于广大的PC/手机设备用户：可以支持基础的裸眼3D效果+鼠标/触摸操作，交互效果也远胜普通的2D场景
说回本文的WebVR华容道，华容道游戏来源于三国故事《诸葛亮智算华容，关云长义释曹操》，玩家在一个5×4的棋盘上布置蜀国五虎上将和四卒围困曹操，共计10个棋子，通过滑动棋子帮助曹操移动到出口位置逃走。
虽然华容道玩起来没那么容易，但其整体交互相对简单，作为第一个入门元宇宙的demo再合适不过了，整体开发过程大致分为下面5个步骤：场景搭建、棋盘渲染、棋子拖动交互、触发奖励开宝箱、自动求解算法。
分析一下，不难看出，涉及到的交互只有两处：棋子拖动 和 点击按钮自动求解。为了兼容更多的终端设备，在VR设备中，用户是通过手柄的扳机键抓取(triggerdown)动作实现棋子的移动、按钮的点击，在cardboard中通过凝视(gaze)来选择并触发棋子选择移动和按钮的点击，而PC/移动端设备中需要通过click/touch操作来交互。由于两种降级方案之前已经摸索过，加上刚拿到设备，所以趁着兴奋劲先把VR设备端的手柄交互实现。
在浏览器中打开时，默认是裸眼3D模式，而如果要将手机插入到cardboard设备中，可以通过点击页面右下脚的 VR 按钮，如下图所示：
点击后进入双目VR模式。
3. 技术概览：使用世界上最好的语言开发WebXR
众所周知，JavaScript 是世界上最好的语言。很幸运，WebXR就是使用的这最好的语言来进行开发的，而且开发门槛也足够低，并不需要使用复杂的WebGL，一次编码即可在多个主流VR平台上运行，因此，WebVR一度被认为具有推动VR应用规模的潜力。
3.1 浏览器现状
市面上的几个主流浏览器中，Chrome从2018年的79版本就开始全面支持WebXR，Mozilla在2014年成立Mixed Reality团队，在2018年还发布了AR/VR头显专用浏览器Firefox Reality。从目前的兼容性来看，最大的阻碍还是iOS的safari，随着 ios16的普及，WebXR的兼容性将不再是个问题。
3.2 框架选择
WebXR 领域相关的前端技术主要包括：WebGL、canvas、Three.js、A-Frame，他们之间的关系大致如下图所示：
- WebGL：涉及3D就不得不提 WebGL，WebGL 是 OpenGL ES 在浏览器端的实现，可以理解其为 OpenGL 的子集，其功能非常强大，甚至可以操作前端的每一个像素点，且支持 GPU 调用，但写起来异常复杂，学习成本很高
- Three.js：作为前端最著名的 3D 库，将繁琐的 WebGL API 进行了封装和优化，方便调用
- A-Frame：这是本文的主角，是 Mozilla 团队在 2015 年开源的一款做 WebVR 的框架，使用各种组件用很少的代码构建出丰富的3D世界。
其他的框架，如 Pixi.js、Babylon.js 等各有适合的场景，对于 WebVR 初学者来说，用好 A-Frame 和 Three.js 就足够啦。
3.3 A-Frame框架介绍
接下来隆重介绍下 A-Frame 框架，A-Frame 是一个构建VR/AR应用的网页开发框架，场景绘制使用 HTML 写法使其上手十分简单，其核心思想是基于 Three.js 提供一个声明式、可扩展、组件化的编程结构。A-Frame 使用的是 ECS 架构，即 entity-component-system(实体-组件-系统) 架构，遵循 组合模式好于继承和层次结构 的设计原则，灵活性很强，详情可以参考文档：链接。
3.3.1 ECS 实体-组件-系统 架构简述
实体：对应一个物体，也可以看作是若干组件的集合，在 A-Frame 中使用 <a-entity> 标签表示一个实体。
<!-- 空实体 -->
<a-entity />
<!-- 给实体添加"几何模型"和"材料"两个组件，使其具有形状和外观-->
<a-entity geometry="primitive: box;" material="color: red;" />组件：对应一个可重用的功能模块，以 html 标签属性的形式插入实体中，如上面的 geometry 和 material。除框架提供的组件外，开发者需要开发自定义组件，如华容道中触发宝箱动画的动画控制组件。
<script>
// VR华容道触发宝箱动画控制组件
AFRAME.registerComponent('animation-control', {
schema: {
target: { type: 'selector', default: '' }, // 执行模型目标
clip: { type: 'string', default: '' }, // 选择动画集
duration: { type: 'string', default: '3' }, // 持续时间
loop: { type: 'string', default: 'once' }, // 循环方式
},
init() {
const { target, clip, duration, loop } = this.data;
const model = target;
this.el.addEventListener('click', () => {
model.removeAttribute("animation-mixer");
model.setAttribute("animation-mixer", AFRAME.utils.styleParser.stringify({clip, duration, loop}));
});
}
});
</script>
<a-entity animation-control></a-entity>系统：为组件提供全局服务和管理，如公共方法和属性
3.3.2 架构优势
ECS 架构在 3D 和 VR 游戏开发领域更具优势，大名鼎鼎的 Unity 游戏引擎就是采用 ECS 架构，相比 OOP(面向对象)，最大的区别在于 使用组合而非继承的方式 构建复杂类，这种使用最小耦合来集成复杂功能的方式更适合游戏项目的开发。
除了ECS，A-Frame使用 HTML 标记语言来构建3D场景，相比于其他游戏引擎，不仅上手简单，还巧妙地利用了浏览器web环境得天独厚的优势，如丰富的dom的操作api、强大的css选择器、完善的 npm 生态、typescript，甚至是 MVVM 框架如 vue、react 的使用，都能极大地简化编码操作。
4. 调试方案实践：打造沉浸式debug体验
工欲善其事，必先利其器。对于场景搭建、基础的js调试，浏览器配合模拟器已经足够了，但是涉及到复杂的手柄交互，浏览器就力不从心了，这里介绍几个本人搭建开发环境中总结的经验。
4.1 工程搭建
不用多说，npm + webpack + ts 已经是前端标配，使用 devServer 在本地 4096 端口启动服务，然后浏览器访问 http://localhost:4096/index.html 即可。
4.2 使用浏览器插件模拟VR设备交互
对于简单的交互，用 WebXR-emulator-extension 浏览器插件即可轻松搞定，后续的配置主要是针对真机调试的。
4.3 配置localhost的https证书
在本地编辑器中编写代码并实时在VR设备中生效是不是听起来很棒？不难想到开发机和VR设备连接在同一个路由器上，VR浏览器通过IP+端口访问开发机，如 http://192.168.31.88:4096/index.html，但是对 WebXR api 来说，https 是前置必须项，因此需要为 localhost 本地环境配置 https 证书。
关于 https 的介绍与原理，网上详尽的介绍有很多，最后都要落地为两个文件：cert-file 和 key-file，而常用的 Let's Encrypt 却无法为 localhost 申请证书，这里推荐使用 go 编写的 mkcert 工具简化 openssl 晦涩难懂的命令行操作：
$ brew install mkcert
# 为本地环境安装 CA
$ mkcert -install
$ mkcert local.csxiaoyao.test根据命令行提示，将生成的两个文件拷贝到项目根目录下，并修改 webpack 的 devServer 配置。
devServer: {
port: 4096,
hot: true,
// https
allowedHosts: [
'*',
'localhost',
'local.csxiaoyao.test',
],
https: {
key: fs.readFileSync('./local.csxiaoyao.test-key.pem'),
cert: fs.readFileSync('./local.csxiaoyao.test.pem'),
},
},4.4 关闭防火墙、配置静态IP和路由器host
配置完本地证书，就得用域名访问了，https://local.csxiaoyao.test:4096，在这之前还得配置下 host，让 DNS 能找到开发机，应该是可以在VR设备中安装安卓 host 修改工具来配置，此处偷个懒，直接修改家中路由器 host，添加一条记录：192.168.31.88 local.csxiaoyao.test。为了避免开发机动态IP发生变化，可以顺手为开发机分配一个静态IP，如 192.168.31.88，如果发现开发机访问不通，可以检查下防火墙配置。
4.5 VR头显访问本地工程并支持热更新
至此，试试VR设备浏览器访问 https://local.csxiaoyao.test:4096，并且 webpack 的 websocket 连接会主动热更新，nice!
4.6 错误日志输出
对于错误日志的收集，建议写一个 debug 组件用于输出，当然也可以用 vConsole，缺点是VR模式下看不到，得退出来查看。
4.7 投屏画面避免频繁穿戴设备
在实际开发中发现，每次修改代码后穿戴设备切换有些麻烦，而且脱下时间久了设备会强制重新定位，我的方法是将VR设备投屏，并遮住面部传感器，插上电源，让VR设备一直工作。写完代码，操作手柄调试，观看投屏，Perfect!
5. 场景搭建：从建模到动画
5.1 使用 A-Frame编辑器可视化搭建
由于本人美术能力有限，所以整体看起来比较丑，望谅解
A-Frame 自带一个功能强大的场景编辑器，在任意引入了 A-Frame 的页面中使用 ctrl + alt + i 快捷键即可打开。可以在编辑器中搭建地面、四面墙壁、房顶、棋盘盒，并导出参数到 html 源码中。
5.2 布光
本案例的华容道棋盘放置在一个 10m x 10m 的密闭房间内，框架会默认添加 ambient(环境光) / directional(平行光) 两个光源，由于密闭空间内默认灯光并不适用，所以将灯光重置为一个 ambient(环境光) 和一个头顶正上方的point(点光源)。
5.3 模型&材质
VR的世界里离不开各种模型，作为第一个demo，本案例导入的模型较少，包括：7个棋子模型、1个宝箱模型、1个古装人物模型，其中，宝箱、古装人物模型包含动画序列。
模型的格式有很多种，目前 A-Frame 支持比较好的模型格式为 gltf(glb) 和 obj，更推荐使用 gltf 或 glb 格式的模型，因为它包含的信息种类丰富，但是冗余很少，所以体积容量小，就像是模型界的 JPG，非常适合在 WebXR 这类 web 场景中使用。
关于建模工具，市面上有很多，本人最熟悉的还是 C4D，用它来 展 UV、贴图 非常顺手！
本案例中的棋子模型是从零开始开发的，而其余的两个复杂模型都是从 sketchfab.com 上下载，因为载入 C4D 后有一些兼容问题，所以做了一些面的修补。而导入后的模型默认是素模，还需要新建材质来贴图。关于模型、材质和贴图，有很多门道，本人也不够专业，这里就不展开讨论了。
5.4 动画
gltf 模型支持关键帧动画，可以C4D中制作并导出，宝箱的开箱动画如下所示。而 A-Frame 动画的播放则需要借助 animation-mixer 组件实现，详情可以参考组件文档。
6. 棋盘绘制
棋盘的渲染其实是和棋局算法紧密相关的，本案例中棋盘使用一个二维数组来描述，-1 表示哨兵，用于界定边界，0 表示空格，1-10 对应了武将数组中的索引+1。在 A-Frame 中，将棋盘的坐标原点设定到左上角位置，由于每个棋子实例都会存储 type、top、left 信息，因此可以很方便地计算出每个棋子的坐标值，通过修改棋子实体的 position 组件属性，完成棋盘绘制。
7. 棋子拖动交互
在华容道中，棋子的拖动是受限的，只能是上下左右四个方向，并且必须整个棋子拖入值全为 0 的格子中，而棋子移动的触发在不同终端也是不同的。普通的PC/移动端，用户的操作是二维的，通过 mousedown/touchstart 和 mouseup/touchend 即可完成棋子的移动；而在VR设备中，用户的操作是三维的，控制棋子移动需要借助手柄，也就是激光发射器，通过监听激光与棋盘格的相交事件，以及用户触发的扳机 triggerdown / triggerup 事件，计算 Vector3 移动距离三维向量，触发棋子的移动动画。
8. 触发奖励开宝箱
每次在执行棋子移动后，都会判断曹操的位置是否到达棋盘最底部中间的位置，若到达该位置，游戏结束，并为宝箱模型实体添加 animation-mixer 组件来播放开箱动画，当看到这个古装人物模型的奖励，本文的WebVR华容道游戏就算结束了！(话说，我为了解开自己设置的这个默认关卡，挪棋子挪到手酸)
9. 自动求解算法
目前，网络上的华容道求解算法的讲解有很多，目前还没有数学方法来直接解决，只能依靠计算机穷举，利用 广度优先搜索 算法，获得最优解。华容道整体的计算量并不大，最复杂的图案需要127步完成，因为游戏一共有4类共10个棋子分布在 5x4 的棋盘上，全部的可能状态只有 65880 种，而且棋子的移动有空间限制并不灵活，导致图的规模进一步缩小。
游戏的求解过程就是棋局的搜索过程，每移动一个棋子就会生成一个新的棋局，对每一个棋局都要生成其所有的后续棋局，直到判断结果为解或后续棋局为空(死局)，则结束。棋局的搜索空间是一个树状关系空间，广度优先搜索能够首先找到最优解，因为首先找到的解深度是最浅的。
为了进一步提高性能，需要把构造好的棋局缓存，本文采用的是 Zobrist 哈希算法来计算棋局的 key 值的。这是一种适用于棋类游戏的棋局编码方式，通过建立一个特殊的转换表，对棋盘上每一个位置的所有可能状态赋予一个绝不重复的随机编码，通过对不同位置上的随机编码进行异或计算，将复杂的棋局编码为一个整数类型哈希值，冲突率极低，可忽略不计，而且棋局变化时，不必对整个棋局重新计算哈希值，只需要计算发生变化的最小单元的状态变化即可。
在本案例中，玩家按下 resolve 按钮后，系统将立即算出最优解，并在棋盘中将棋子自动移动演化，直到曹操逃脱游戏结束。
10. 展望：营销，VR First!
目前，WebXR 无论在 Web 开发还是 VR 开发领域都是参与人数较少的一片蓝海。相关的资料，尤其是 A-Frame 框架除了官方文档外资料很少，网上搜到的大部分也是官方文档的搬运。WebVR华容道是本人业余时间正式接触VR半年来的第一个demo，如有不当之处欢迎指正交流。
WebVR的关键优势之一就是能够在网络、移动设备和 VR 平台上覆盖大量用户，其兴起更是为网络营销是创造了机遇，从前只能通过app使用的VR/AR功能，现在通过手机浏览器就能轻松开启，极大地降低了分享和使用门槛，前景十分广阔。
就像移动互联网时代终结PC时代，VR 是否能像移动应用一样成为主流，开辟一片新的天地？当用户厌倦了千篇一律的传统网页营销模式，或许行业里蹦出的一句"VR First"将彻底颠覆当前的营销活动设计和开发模式，那必将是激动人心的一刻。
11. 相关链接
WebXR模拟器浏览器插件
https://github.com/MozillaReality/WebXR-emulator-extension
A-Frame官方文档
A-Frame实体组件系统架构介绍
https://aframe.io/docs/1.3.0/introduction/entity-component-system.html
A-Frame更多优质组件
https://aframe.io/aframe-registry/
WebXR示例
https://immersive-web.github.io/webxr-samples/
3D模型资源
