带你读《2022技术人的百宝黑皮书》——进入 WebXR 的世界（2）-阿里云开发者社区

带你读《2022技术人的百宝黑皮书》——进入 WebXR 的世界（2）

2023-06-28 179

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 带你读《2022技术人的百宝黑皮书》——进入 WebXR 的世界

带你读《2022技术人的百宝黑皮书》——进入 WebXR 的世界（1）

https://developer.aliyun.com/article/1262254?spm=a2c6h.13148508.setting.14.69d84f0eIRNX5Z

AR的第一步

把眼镜戴到人脸上 A-frame主要用来处理VR，但是它也是AR的基础。要实现AR，我们再加一个支持AR的库就好了，比如MindAR. 我们下面就把上面加载的小眼镜戴到脑袋上：

我们来看看源代码：

<!DOCTYPE html>
<html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-face.prod.js"></script>
 <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/-mind-ar-js@1.1.4/dist/mindar-face-aframe.prod.js"></script>
<style>
 body {
 margin: 0;
 }
 .example-container {
 overflow: hidden;
 position: absolute;
 width: 100%;
 height: 100%;
  }
 </style>
 </head>
 <body> 
<a-scene mindar-face embedded color-space="sRGB" renderer="colorManagement: true, physi-
callyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-assets>
<a-asset-item id="headModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/exam-
ples/face-tracking/assets/sparkar/headOccluder.glb"></a-asset-item>
<a-asset-item id="glassModel" src="./model.glb"></a-asset-item>
 </a-assets>
 <a-camera active="false" position="0 0 0"></a-camera>
 <a-entity mindar-face-target="anchorIndex: 168">
 <a-gltf-model mindar-face-occluder position="0 -0.3 0.15" rotation="0 0 0" scale="0.06 0.06 0.06"
src="#headModel"></a-gltf-model>
 </a-entity>
 <a-entity mindar-face-target="anchorIndex: 10">
 <a-gltf-model rotation="0 -0 0" position="0 -0.5 -0.6" scale="5.8 5.8 5.8" src="#glassModel"
visible="true"></a-gltf-model>
 </a-entity>
 </div>
 </body>
 </html>

我们可以看到，我们在a-scene里面引入了mindar-face属性的方式来调用Mind-AR的库。因为用到摄像头，我们增加一个a-camera实体。

头部遮挡器模型

在代码中我们发现一个奇怪的东西，我们引入了一个不知道有什么作用的gltf model.

<a-gltf-model mindar-face-occluder position="0 -0.3 0.15" rotation="0 0 0" scale="0.06 0.06 0.06" src="#headModel"></a-gltf-model>

这是初涉AR都会遇到的问题。就是我们从摄像头中获取了足够的人脸的信息，但是我们还需要对人头进行3D模型的重建，这样才能跟眼镜的模型一起计算遮挡关系。

在Mind-AR中，通过mindar-face-occluder属性来实现这个遮挡器的模型，如上面的代码所示。另外，我们是如何将确定在人脸的什么位置呢？

这需要深度学习人脸识别的模型给我们提供帮助。我们使用Tensorflow.js的Face Landmarks Detection模型，它会将人脸识别为468个关键点。

如果看不清的话，我们将头顶部分局部放大一下：

从中我们可以看到，头顶最中央的位置的锚点编号是10，我们的眼镜定位就是选这个点做定位的。

<a-entity mindar-face-target="anchorIndex: 10">
 <a-gltf-model rotation="0 -0 0" position="0 -0.5 -0.6" scale="5.8 5.8 5.8" src="#glassModel" visible="true"></a-gltf-model>
 </a-entity>

我们当然也可以用两眼中间的168号点作为眼镜定位的点，实际上我们看到，我们的头模型正是以这个168点为锚进行定位的：

<a-entity mindar-face-target="anchorIndex: 168">
 <a-gltf-model mindar-face-occluder position="0 -0.3 0.15" rotation="0 0 0" scale="0.06 0.06 0.06" src="#head-Model"></a-gltf-model>
 </a-entity>

事件处理

光有AR代码还不行，我们还得加上事件处理来处理各种玩法。

比如我们想判断AR系统什么时候就绪，可以去监听arReady事件

document.addEventListener("DOMContentLoaded", () => {
 const scene = document.querySelector('a-scene');
 const arSystem = scene.systems['mindar-face-system'];
 scene.addEventListener("arReady", (event)=>{
 alert('AR系统加载成功！');
 })
 });

除此之外，arSystem还支持下面的事件：

arError: 错误处理

targetFound: 人脸识别成功

targetLost: 人脸丢失

Mind-AR背后的技术

我们打开控制台，可以看到Mind-AR背后的几个技术：

wasm

simd

webgl2

要支持这种级别的计算，wasm+simd加上webgl2/WebGPU是标配。还没有学习相关技术的同学，敬请关注我的相关系列文章。

另外，前面我们展示的是人脸识别的能力。我们采用其它的深度学习网络，就可以实现其它的锚点功能。比如，我们可以用coco keypoints模型，使用17个点来定位人的姿态。

如果觉得17个点太粗糙，还想针对手和脚做更精确一点的定位，我们可以换成blazepose的32点的模型：

更多的tfjs的模型，还有其它兄弟框架的模型，都可以集成进来一起为我们工作。

比如可以翻翻tfjs的模型库：https://github.com/tensorflow/tfjs-models

用React写Mind-AR

如果不习惯HTML格式的话，Mind-AR也支持React的写法：

import React, { useState } from 'react';
import 'mind-ar/dist/mindar-image.prod.js';
import 'aframe';
import 'mind-ar/dist/mindar-image-aframe.prod.js';
import './App.css';
import MindARViewer from './mindar-viewer';
function App
 const [started, setStarted] = useState(false);
 return (
 <div className="App">
<h1>Example React component with <a href="https://github.com/hiukim/mind-ar-js"target="_blank">MindAR</a></h1>
<div>
{!started && <button onClick={() => {setStarted(true)}}>Start</button>}
 {started && <button onClick={() => {setStarted(false)}}>Stop</button>}
 </div>
 {started && (
 <div className="container">
 <MindARViewer/>
 <video></video>
 </div>
 )}
 </div>
 );
}
export default App;