微信小程序开发 – 第 36 页 – 微信小程序开发指南

Hand

从基础库2.28.1开始支持。

手部识别模式，会通过图像算法识别出人手部的特征点，然后变换到3D空间，可用于一些手势等场景。与Face模式用法一致，但多出了两个参数：

// 获取手势姿态
const gesture = tracker.gesture;
// 获取总体置信度
const score = tracker.score;

特征点定义如下：

手势姿态（0~18，-1为无效）：

Body

从基础库2.28.1开始支持。

肢体识别模式，会通过图像算法识别出人躯干的特征点，然后变换到3D空间，可用于一些换装、游戏等场景，与Face模式用法一致：

特征点定义如下：

Face

从基础库2.28.1开始支持。
前置相机依赖于客户端版本8.0.31

人脸识别模式，会通过图像算法识别出人面部的特征点，然后变换到3D空间，可用于一些换装应用等场景，比起上面几种模式，它多出了一个参数和一些方法：

<xr-ar-tracker mode="Face" auto-sync="-1 105 104 45 98">
  <xr-mesh name="face" geometry="cube" scale="0.7 0.8 0.1" uniforms="u_baseColorFactor:1 1 1 0.5" states="renderQueue:2500,alphaMode:BLEND"/>
  <xr-mesh name="eyeL" geometry="cube" scale="0.1 0.1 0.1" uniforms="u_baseColorFactor:0 1 0 1" />
  <xr-mesh name="eyeR" geometry="cube" scale="0.1 0.1 0.1" uniforms="u_baseColorFactor:0 1 0 1" />
  <xr-mesh name="nose" geometry="cube" scale="0.1 0.1 0.1" uniforms="u_baseColorFactor:0 0 1 1" />
  <xr-mesh name="mouth" geometry="cube" scale="0.1 0.1 0.1" uniforms="u_baseColorFactor:1 0 0 1" />
</xr-ar-tracker>

auto-sync属性是一个数字数组，用于将对应顺序的子节点绑定到某个特征点上，其中-1表示忽略该节点，在运行过程中会自动同步变换信息，如示例：

与此同时，开发者还可以按自己的需求更加灵活地控制：

const tracker = el.getComponent(xrFrameSystem.ARTracker);

// 视情况需要自己同步`tracker`的`scale`和`rotation`特定节点。
// 第一个参数是特征点编好，第二个是可选的复用结果，第三个是可选的是否相对于`ARTracker`。
// 为`false`为世界空间的位置，需要配合`scale`自己使用
const position = tracker.getPosition(98, new xrSystem.Vector3(), false);

特征点定义如下：

threeDof

从基础库 2.30.4 开始支持。

由于Plane模式在一些安卓机下不稳定，针对不需要用户移动而只需要旋转设备的应用，我们提供了threeDof模式。这种模式下只需要修改ARSystem的modes即可，不需要添加ARTracker。

微信小程序 PlaneMarker

从基础库 v2.33.1 开始支持。

ARsystem 识别模式需支持 Plane Marker 模式，且开启使用。

平面识别模式下，使用 2D Marker 识别。

使用方法，在开启对应模式后，直接使用 2d Marker Tracker 的使用方式即可。

ar-tracker识别到目标后，会同步算法侧得到的，marker识别出来的，转化为相对于 平面模式世界空间的矩阵信息，到对应的 Tracker 节点。

该模式下，允许 同时识别多个 2D Marker。

目前版本，该模式仅适用于静态物体，识别物体更新频率相对较慢。每 3s，未明显移动会更新一下位置，每 7s 会进行重新检测。

案例代码片段链接

<xr-ar-tracker mode="Marker" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/marker/2dmarker-test.jpg">
  <xr-gltf model="butterfly" anim-autoplay position="0.2 0 -0.2" scale="0.6 0.6 0.6" rotation="0 -50 0" />
  <xr-gltf model="butterfly" anim-autoplay position="0.4 0 0.3" scale="0.5 0.5 0.5" rotation="0 -50 0" />
  <xr-gltf model="butterfly" anim-autoplay position="-0.3 0 0.3" scale="0.4 0.4 0.4" rotation="0 -50 0" />
</xr-ar-tracker>

飞机

平面识别模式，不依靠于src和image。

微信小程序的AR系统会标定出一个平面，相机组件开启 isARCamera 之后，相机的三维变换会与AR系统同步。

AR系统每帧会去计算这个平面的交点，之后同步到AR追踪器组件所在元素上，其所有的子节点继而受到影响。

由于这种模式的灵活度比较高，所以我们还给AR系统提供了几个接口供开发者使用：

// 传入某个节点的`nodeId`
scene.ar.placeHere(nodeId);

// 也可以传入元素引用，关闭`switchVisible`
scene.ar.placeHere(element, false);

// resetPlane
scene.ar.resetPlane();

placeHere方法接受一个节点的node-id或者元素引用，将当前和平面的焦点（即追踪器的3D变换）同步到这个节点上。第二个参数switchVisible则会在执行同步后自动将这个节点的visible设置为true。

resetPlane方法则是重置平面的标定。

OSD

OSD（One-shot Detection）识别模式，也会将传入的src或是image（image类型资源id，优先使用）作为特征去识别。

但不同于2D Marker，这是一个纯屏幕空间算法，只会影响到所有子节点的位置和缩放，不会影响旋转。

它一般以一个现实中物体的照片作为识别源，来识别出这个物体在屏幕中的 二维区域，我们已经做好了到三维空间的转换，但开发者需要自己保证 tracker 下模型的比例是符合识别源的。

OSD模式在识别那些 二维的、特征清晰的物体 效果最好，比如广告牌。其余情况，识别准度不如 2D Marker。

这种模式一般用于给现实中的物体做标注，在使用这种模式时，开发者需要自己保证了解要识别的物体（的特征图片）的原始尺寸，然后基于这些信息去添加子节点：

案例代码片段链接

<xr-ar-tracker mode="OSD" src="{{markerImg}}">
  <xr-mesh geometry="plane" rotation="-90 0 0" scale="1 1 1" uniforms="u_baseColorFactor:0 1 0 0.5" states="alphaMode:BLEND" />
</xr-ar-tracker>

三维Marker

3D Marker识别模式，使用方法与 2D Marker 基本一致，差异是，识别特征用的 src 需使用三维识别特征文件 map，该文件可以通过微信小程序示例的 接口 – VisionKit视觉能力 – 3DMarkerAR 页面生成。

三维识别特征文件 map 是根据 VisionKit 提供的算法能力，通过环绕物体一周的视频生成。流程同时还会产出三维重建的产物 glTF。具体的生成视频规范、生成流程、以及产物细节可以参考 VisionKit 3DMarker。

该模式下，识别出来的三维坐标系，会自带一个基于生成视频的旋转，一般情况下，这个旋转值都是很接近的。可以在业务逻辑上，对这个旋转进行适配。

<xr-ar-tracker mode="Marker" src="/assets/3d-marker.map">
  <!-- 一般情况下，可以用140度的旋转进行修正 -->
  <xr-node rotation="140 0 0">
      <xr-gltf model="gltf"></xr-gltf>
  </xr-node>
</xr-ar-tracker>

二维Marker

2D Marker识别模式，会将传入的 src (图片的网络地址) 或是 image（image类型资源id，优先使用）作为特征，去识别出三维空间一个平面上的图像部分，继而进行追踪。这个技术现在已经十分成熟可靠。

注意需要相机组件开启isARCamera。在这种追踪模式下，当AR系统识别到目标时会自动应用3D变换到AR追踪器组件所在的节点元素上，进而影响所有的子节点：

案例代码片段链接

<xr-ar-tracker mode="Marker" src="{{markerImg}}">
  <xr-gltf model="gltf" anim-autoplay position="0.2 0 -0.2" scale="0.6 0.6 0.6" rotation="0 -50 0" />
  <xr-gltf model="gltf" anim-autoplay position="0.4 0 0.3" scale="0.5 0.5 0.5" rotation="0 -50 0" />
  <xr-gltf model="gltf" anim-autoplay position="-0.3 0 0.3" scale="0.4 0.4 0.4" rotation="0 -50 0" />
</xr-ar-tracker>