微信小程序实现人脸识别(戴面具效果)

节前准备:文档: xr-frame 模型链接 (注明：来源于微信开放文档)

基础要点:

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

ar-system 表示ar系统，camera表示相机(默认为后置Back，前置为Front)
modes 表示模式,目前支持平面识别Plane、2DMarker识别Marker、OSD识别OSD、人脸识别Face、肢体识别body和手部识别Hand2.

2. <xr-assets type="xx">资源加载器模型、材质、纹理、都可在这里加载,type表示加载类型:gltf,texture等

tips:<xr-assets-xx asset-id="xx"> 用到的时候只需要绑定asset-id,mode="asset-id"模型material="asset-id"材质

3.<xr-ar-tracker src="" mode="">为其指定了模式mode和识别对象地址src，然后在其子级添加了一个glTF模型

4.mode=Face特征点定义如下：（本文用到的点为43）

微信小程序实现人脸识别(戴面具效果)-LMLPHP

图片来源于微信开放文档

重点代码：

1. 场景设置为ar 模式为Face

<xr-scene ar-system="modes:Face;camera:Front" bind:ready="handleReady" bind:ar-ready="handleARReady" />

2. 加载用到的资源，本文用到的是一个面具(来源于:微信开放文档)

 <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
    <xr-asset-load type="gltf" asset-id="gltf-glass" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/jokers_mask_persona5.glb" />
  </xr-assets>

3.添加追踪器(属性auto-sync，这是一个数字数组，表示将识别出的面部特征点和对应顺序的子节点绑定并自动同步)

 <xr-ar-tracker id='tracker' mode="Face" auto-sync="43">
      <xr-node name="nose" >
        <xr-gltf node-id="gltf-glass" position="0 0.02 -0.05" rotation="0 180 0" scale="0.5 0.5 0.5" model="gltf-glass"></xr-gltf>
      </xr-node>
    </xr-ar-tracker>

4.整体代码 (注明：来源于微信开放文档)

wxml

<xr-scene ar-system="modes:Face;camera:Front" bind:ready="handleReady" bind:ar-ready="handleARReady">
  <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
    <xr-asset-load type="gltf" asset-id="gltf-glass" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/jokers_mask_persona5.glb" />
  </xr-assets>
  <xr-env env-data="xr-frame-team-workspace-day" />
  <xr-node wx:if="{{arReady}}">
    <xr-ar-tracker id='tracker' mode="Face" auto-sync="43">
      <xr-node name="nose" >
        <xr-gltf node-id="gltf-glass" position="0 0.02 -0.05" rotation="0 180 0" scale="0.5 0.5 0.5" model="gltf-glass"></xr-gltf>
      </xr-node>
    </xr-ar-tracker>
    <xr-camera
      id="camera" node-id="camera" clear-color="0.925 0.925 0.925 1"
      background="ar" is-ar-camera near="0.01"
    ></xr-camera>
  </xr-node>
  <xr-node node-id="lights">
    <xr-light type="ambient" color="1 1 1" intensity="0.2" />
    <xr-light type="directional" rotation="180 0 0" color="1 1 1" intensity="1" />
  </xr-node>
</xr-scene>

js部分

Component({
  data: {
    loaded: false,
    arReady: false,
  },
  methods: {
    handleReady({detail}) {
      const xrScene = this.scene = detail.value;
      xrScene.event.add('tick', this.handleTick.bind(this));
      console.log('xr-scene', xrScene);
    },
    handleAssetsProgress: function ({detail}) {
      console.log('assets progress', detail.value);
    },
    handleAssetsLoaded: function ({detail}) {
      console.log('assets loaded', detail.value);
      this.setData({loaded: true});
    },
    handleARReady: function ({detail}) {
      console.log('arReady');
      this.setData({arReady: true});
    },
    handleTick: function () {
      const xrSystem = wx.getXrFrameSystem();
      const trackerEl = this.scene.getElementById('tracker');
      if (!trackerEl) {
        return;
      }

      const tracker = trackerEl.getComponent(xrSystem.ARTracker);
      if (!tracker.arActive) {
        return
      }

      // 这里只是例子，实际上用的是`ARTracker`的`autoSync`属性。
      // 但也是一个更高自由度的选项。
      // 视情况需要自己同步`tracker`的`scale`和`rotation`特定节点。
      // 第一个参数是特征点编好，第二个是可选的复用结果，第三个是可选的是否相对于`ARTracker`。
      // 为`false`为世界空间的位置，需要配合`scale`自己使用
      const position = tracker.getPosition(98, new xrSystem.Vector3(), false);
      
    }
  }
})

效果链接 (注明：来源于微信开放文档)

行者-风

微信小程序实现人脸识别(戴面具效果)