我们可以看到，我们在a-scene里面引入了mindar-face属性的方式来调用Mind-AR的库。因为用到摄像头，我 们增加一个a-camera实体。 头部遮挡器模型 在代码中我们发现一个奇怪的东西，我们引入了一个不知道有什么作用的gltf model. ​ 这是初涉AR都会遇到的问题。就是我们从摄像头中获取了足够的人脸的信息，但是我们还需要对人头进行3D模型 的重建，这样才能跟眼镜的模型一起计算遮挡关系。 在Mind-AR中，通过mindar-face-occluder属性来实现这个遮挡器的模型，如上面的代码所示。 另外，我们是如何将确定在人脸的什么位置呢？ 这需要深度学习人脸识别的模型给我们提供帮助。我们使用Tensorflow.js的Face Landmarks Detection模型，它 会将人脸识别为468个关键点。 ​ ​ 如果看不清的话，我们将头顶部分局部放大一下： ​ ​ 从中我们可以看到，头顶最中央的位置的锚点编号是10，我们的眼镜定位就是选这个点做定位的。 ​ 我们当然也可以用两眼中间的168号点作为眼镜定位的点，实际上我们看到，我们的头模型正是以这个168点为锚进 行定位的： ​ 事件处理 光有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 ( ); } export default App; ​ 小结 ​ 总结Web AR技术，我们主要做三件事： ​ 1.图像识别与物体跟踪：这是一门比较成熟的基于深度学习的技术。实践中，我们主要使用tensorflow.js的模型来 实现 2.建模：就像我们给头进行建模所做的事情一样，要让我们识别出来的视频变成3D模型 3.合成：在建模的基础上，将其他的对象一起绘制上去。这方面主要就是结合Three.js,Babylon.js以及VR的 A-frame等框架 ​ 我们要在手机上落地，还需要对tf.js这样的深度学习引擎，物体识别的算法，还有3D绘图技术进行深度的优化。 此外，3D建模只是模仿外形，我们还没有触及物体的灵魂。后面我们还需要结合数字孪生等技术，让物体数据驱 动、智能化，提升交互的效率，更好地服务于业务。 ​ ​