基于xr-frame实现微信小程序的人脸识别3D模型叠加AR功能（含源码）

前言

xr-frame是一套小程序官方提供的XR/3D应用解决方案，基于混合方案实现，性能逼近原生、效果好、易用、强扩展、渐进式、遵循小程序开发标准。xr-frame在基础库v2.32.0开始基本稳定，发布为正式版，但仍有一些功能还在开发，目前（2024.08.24）有一些限制如下：

1最低要求客户端iOS8.0.29、安卓8.0.30及以上，推荐稳定版在iOS8.0.36、安卓8.0.35及以上。
2基础库最低2.27.1及以上，推荐2.32.0及以上。
3开发工具需要最新版本，建议Nightly版本。
4小程序全局同一时刻只能存在一个xr-frame组件，否则可能会发生异常。
5同一个xr-frame组件只能存在一个xr-scene，并且必须为顶层。
6目前不支持和小程序传统标签比如混写。
7目前不支持wxml自动补全，真机调试需要特别注意，见真机调试文档。

后续的展望：

1 XR-FRAME内置特色的UI组件，让开发者可以在XR-FRAME组件中写UI，来实现一套酷炫的UI系统。
2 AR/VR能力持续增强，支持眼睛设备。
3 交互手段进一步强化，物理碰撞、触发等功能（已完成，待发布）。
4 工具能力强化，包括标签属性自动补全等。

本文以该解决方案的官方demo为参考开发微信小程序的图片识别并叠加模型动作的功能，具体使用的是Face识别模式，去识别出摄像头画面中的会通过图像算法识别出人面部的特征点，然后变换到3D空间，继而进行追踪，可用于一些脸部换装（眼镜、面具和口罩等）应用等场景。这里以面部识别的鼻梁位置上添加一个面罩模型，同时，在下巴和两眼眉毛位置添加一个带动作的蝴蝶模型。此外，在屏幕的画面上增加了案例中的全屏后处理效果。

效果

识别中:

模型叠加：

硬广

自制3D版三维搭建俄罗斯方块WX小游戏，走过路过可以扫描支持。

三维的消除，地狱难度：

实现功能

该功能基本是使用官方的微信小程序xr-frame系统的示例集中的“人脸识别案例”(/pages/ar/scene-ar-face-3d)修改而来，组件使用了components/xr-ar-face-3d,基本的代码都是沿用的，只不过修改了识别的展示，将云上的模型资源用本地的素材替换，并使用javascript工程代替了微信小程序 案例的typescript 。

素材准备

本demo较为简单计划只有两个界面，一个主界面和一个人脸识别界面，主要就是一个主页背景（AI生成）、一个全局后期效果的动画和识别叠加的模型（蝴蝶、人脸面具等），资源如下：

主页搭建

主页的设计较为简单，一个背景图，附加一个标题，一个“AR识脸”的按钮，点击后进入人脸识别页面。

<!--pages/home/index.wxml-->
<view class="home-container">
  <image class="home-bg" src="../../assets/bgimg.png"/>
  <view class="title">畅游AR世界</view>
  <view class="btns">
  <navigator class="btn-nav" url="/pages/facear/index">
    <button class="btn green">AR识脸</button>  
  </navigator>
  </view>
</view>

识别组件

由于“目前不支持和小程序传统标签比如混写”的限制，所以识别的功能需要制作成组件放入到页面，识别的组件参考的是components/xr-ar-face-3d。

首先人脸识别需要使用模型为Face和手机的前置摄像头，需要修改xr-scene的 ar-system属性：

 ar-system="modes:Face;camera:Front"

这里我们将ar-system的modes改为了Face，并且新增设置了camera属性为Front，表示开启前置相机（注意前置相机在客户端8.0.31后才支持）。

Json文件设定组件，并指定渲染为xr-frame渲染：

{
   
  "component": true,