分类： VisionKit 视觉能力

VisionKit 从基础库 2.25.0 版本 (安卓微信>=8.0.25，iOS微信>=8.0.24) 开始提供人脸关键点检测，作为与 marker 能力和 OSD 能力 平行的能力接口。

从 微信 >= 8.1.0 版本开始提供人脸3D关键点检测，作为人脸2D关键点检测的扩展能力接口。

方法定义

人脸关键点检测有2种使用方法，一种是输入一张静态图片进行检测，另一种是通过摄像头实时检测。

1. 静态图片检测

通过 VKSession.detectFace 接口 输入一张图像，算法检测到图像中的人脸，然后通过 VKSession.on 接口 输出人脸位置坐标、106个关键点坐标以及人脸在三维坐标系中的旋转角度。

示例代码：

const session = wx.createVKSession({
  track: {
    face: { mode: 2 } // mode: 1 - 使用摄像头；2 - 手动传入图像
  },
})
// 静态图片检测模式下，每调一次 detectFace 接口就会触发一次 updateAnchors 事件
session.on('updateAnchors', anchors => {
  anchors.forEach(anchor => {
    console.log('anchor.points', anchor.points)
    console.log('anchor.origin', anchor.origin)
    console.log('anchor.size', anchor.size)
    console.log('anchor.angle', anchor.angle)
  })
})

// 需要调用一次 start 以启动
session.start(errno => {
  if (errno) {
    // 如果失败，将返回 errno
  } else {
    // 否则，返回null，表示成功
    session.detectFace({
      frameBuffer, // 图片 ArrayBuffer 数据。人脸图像像素点数据，每四项表示一个像素点的 RGBA
      width, // 图像宽度
      height, // 图像高度
      scoreThreshold: 0.5, // 评分阈值
      sourceType: 1,
      modelMode: 1,
    })
  }
})

2. 通过摄像头实时检测

算法实时检测相机中的人脸，通过 VKSession.on 接口 实时输出人脸位置坐标、106个关键点坐标以及人脸在三维坐标系中的旋转角度。

示例代码：

const session = wx.createVKSession({
  track: {
    face: { mode: 1 } // mode: 1 - 使用摄像头；2 - 手动传入图像
  },
})

// 摄像头实时检测模式下，监测到人脸时，updateAnchors 事件会连续触发 （每帧触发一次）
session.on('updateAnchors', anchors => {
  anchors.forEach(anchor => {
    console.log('anchor.points', anchor.points)
    console.log('anchor.origin', anchor.origin)
    console.log('anchor.size', anchor.size)
    console.log('anchor.angle', anchor.angle)
  })
})

// 当人脸从相机中离开时，会触发 removeAnchors 事件
session.on('removeAnchors', () => {
  console.log('removeAnchors')
})

// 需要调用一次 start 以启动
session.start(errno => {
  if (errno) {
    // 如果失败，将返回 errno
  } else {
    // 否则，返回null，表示成功
  }
})

3. 开启3D关键点检测

想要开启人脸3D关键点检测能力，静态图片模式仅需要在2D调用基础上增加open3d字段，如下

// 静态图片模式调用
session.detectFace({
      ...,           // 同2D调用参数
      open3d: true,  // 开启人脸3D关键点检测能力，默认为false
    })

摄像头实时模式则在2D调用基础上增加3D开关更新函数，如下

// 摄像头实时模式调用
session.on('updateAnchors', anchors => {
  this.session.update3DMode({open3d: true})  // 开启人脸3D关键点检测能力，默认为false
  ...,  // 同2D调用参数
})

输出说明

1. 点位定义

人脸2D关键点与人脸3D关键点均为106点，定义方式如下图所示。在脸部姿态发生变化时，人脸2D关键点的轮廓点会始终沿着可见人脸边缘，而人脸3D关键点则维持立体结构。

2. 人脸2D关键点

人脸2D关键点输出字段包括

struct anchor
{
  points,    // 106点在图像中的(x,y)坐标
  origin,    // 人脸框的左上角(x,y)坐标
  size,      // 人脸框的宽和高(w,h)
  angle,     // 人脸角度信息(pitch, yaw, roll)
  confidence // 人脸关键点的置信度
}

3. 人脸3D关键点

开启人脸3D关键点检测能力后，可以获取人脸2D及3D关键点信息，其中人脸3D关键点输出字段包括

struct anchor
{ 
  ...,               // 人脸关键点2D输出信息
  points3d,          // 人脸106点的(x,y,z)3D坐标
  camExtArray,       // 相机外参矩阵，定义为[R, T \\ 0^3 , 1], 使用相机内外参矩阵可将3D点位投影回图像
  ccamIntArray       // 相机内参矩阵，参考glm::perspective(fov, width / height, near, far);
}

应用场景示例

1. 人脸检测。
2. 人脸特效。
3. 人脸姿态估计。
4. 人脸 AR 游戏。

程序示例

1. 实时摄像头人脸检测能力使用参考
2. 静态图像人脸检测能力使用参考

特别说明

若微信小程序人脸识别功能涉及采集、存储用户生物特征（如人脸照片或视频、身份证和手持身份证、身份证照和免冠照等），此类型服务需使用微信原生人脸识别接口

VisionKit从基础库 2.28.0版本开始提供body检测能力。从 微信>=8.1.0 版本开始提供人体3D关键点检测，作为Body检测的扩展能力接口。

方法定义

body检测有2种使用方法，一种是输入一张静态图片进行检测，另一种是通过摄像头实时检测。

1. 静态图片检测

通过 VKSession.detectBody 接口 输入一张图像，算法检测到图像中的人体，然后通过 VKSession.on 接口 输出获取的人体关键点信息。

示例代码：

const session = wx.createVKSession({
  track: {
    body: { mode: 2 } // mode: 1 - 使用摄像头；2 - 手动传入图像
  },
})

// 静态图片检测模式下，每调一次 detectBody 接口就会触发一次 updateAnchors 事件
session.on('updateAnchors', anchors => {
    this.setData({
        anchor2DList: anchors.map(anchor => {
            points: anchor.points, // 关键点坐标
            origin: anchor.origin, // 识别框起始点坐标
            size: anchor.size // 识别框的大小
        }),
    })
})

// 需要调用一次 start 以启动
session.start(errno => {
  if (errno) {
    // 如果失败，将返回 errno
  } else {
    // 否则，返回null，表示成功
    session.detectBody({
      frameBuffer, // 图片 ArrayBuffer 数据。待检测图像的像素点数据，每四项表示一个像素点的 RGBA
      width, // 图像宽度
      height, // 图像高度
      scoreThreshold: 0.5, // 评分阈值
      sourceType: 1 //图片来源， 默认为1， 0表示输入图片来自于视频的连续帧
    })
  }
})

2. 通过摄像头实时检测

算法实时检测相机中的人体姿态，通过 VKSession.on 接口 实时输出检测到的人体关键点。

示例代码：

const session = wx.createVKSession({
  track: {
    body: { mode: 1 } // mode: 1 - 使用摄像头；2 - 手动传入图像
  },
})

// 摄像头实时检测模式下，监测到人体时，updateAnchors 事件会连续触发 （每帧触发一次）
session.on('updateAnchors', anchors => {
    this.data.anchor2DList = []
    this.data.anchor2DList = this.data.anchor2DList.concat(anchors.map(anchor => {
        points: anchor.points,
        origin: anchor.origin,
        size: anchor.size
    }))
})

// 当人体从相机中离开时，会触发 removeAnchors 事件
session.on('removeAnchors', () => {
  console.log('removeAnchors')
})

// 需要调用一次 start 以启动
session.start(errno => {
  if (errno) {
    // 如果失败，将返回 errno
  } else {
    // 否则，返回null，表示成功
  }
})

3. 开启3D关键点检测

想要开启人体3D关键点检测能力，静态图片模式仅需要在2D调用基础上增加open3d字段，如下

// 静态图片模式调用
session.detectBody({
      ...,           // 同2D调用参数
      open3d: true,  // 开启人体3D关键点检测能力，默认为false
    })

摄像头实时模式则在2D调用基础上增加3D开关更新函数，如下

// 摄像头实时模式调用
session.on('updateAnchors', anchors => {
  this.session.update3DMode({open3d: true})  // 开启人体3D关键点检测能力，默认为false
  ...,  // 同2D调用参数
})

输出说明

点位说明

人体2D关键点为23点定义，如下图所示。

人体3D关键点为SMPL-24点关节定义，如下图所示。

人体检测

人体检测输出字段包括

struct anchor
{
  points,    // 人体2D关键点在图像中的(x,y)坐标
  origin,    // 人体检测框的左上角(x,y)坐标
  size,      // 人体检测框的宽和高(w,h)
  score,     // 人体检测框的置信度
  confidence // 人体关键点的置信度
}

人体3D关键点

开启人体3D关键点检测能力后，可以获取人体2D及3D关键点信息，其中人体3D关键点输出字段包括

struct anchor
{ 
  ...,               // 人体检测2D输出信息
  points3d,          // 人体3D关键点的(x,y,z)3D坐标
  camExtArray,       // 相机外参矩阵，定义为[R, T \\ 0^3 , 1], 使用相机内外参矩阵可将3D点位投影回图像
  camIntArray        // 相机内参矩阵，参考glm::perspective(fov, width / height, near, far);
}

应用场景示例

1. 人像抠图。
2. 越界检测。
3. 人群流量统计。

程序示例

1. 实时摄像头body检测能力使用参考
2. 静态图像body检测能力使用参考

VisionKit 从基础库 2.28.0 版本开始提供手部检测能力。从 微信>=8.1.0 版本开始提供人手3D关键点检测，作为手部检测的扩展能力接口。

方法定义

手部检测有2种使用方法，一种是输入一张静态图片进行检测，另一种是通过摄像头实时检测。

1. 静态图片检测

通过 VKSession.detectHand 接口 输入一张图像，算法检测到图像中的手势，然后通过 VKSession.on 接口 输出获取的手势关键点信息。

示例代码：

const session = wx.createVKSession({
  track: {
    hand: { mode: 2 } // mode: 1 - 使用摄像头；2 - 手动传入图像
  },
})

// 静态图片检测模式下，每调一次 detectHand 接口就会触发一次 updateAnchors 事件
session.on('updateAnchors', anchors => {
    this.data.anchor2DList = []
    this.setData({
        anchor2DList: anchors.map(anchor => ({
            points: anchor.points, // 关键点坐标
            origin: anchor.origin, // 识别框起始点坐标
            size: anchor.size, // 识别框的大小
            gesture: anchor.gesture // 手势分类
        })),
    }) 
})

// 需要调用一次 start 以启动
session.start(errno => {
  if (errno) {
    // 如果失败，将返回 errno
  } else {
    // 否则，返回null，表示成功
    session.detectHand({
      frameBuffer, // 图片 ArrayBuffer 数据。待检测图像的像素点数据，每四项表示一个像素点的 RGBA
      width, // 图像宽度
      height, // 图像高度
      scoreThreshold: 0.5, // 评分阈值
      algoMode: 2 //算法模式：0, 检测模式，输出框和点；1，手势模式，输出框和手势分类；2，同时具备0和1，输出框、点、手势分类
    })
  }
})

2. 通过摄像头实时检测

算法实时检测相机中的手势姿态，通过 VKSession.on 接口 实时输出检测到的手势关键点。

示例代码：

const session = wx.createVKSession({
  track: {
    hand: { mode: 1 } // mode: 1 - 使用摄像头；2 - 手动传入图像
  },
})

// 摄像头实时检测模式下，监测到手势时，updateAnchors 事件会连续触发 （每帧触发一次）
session.on('updateAnchors', anchors => {
    this.data.anchor2DList = []
    this.data.anchor2DList = this.data.anchor2DList.concat(anchors.map(anchor => ({
        points: anchor.points,
        origin: anchor.origin,
        size: anchor.size
    })))
})

// 当手势从相机中离开时，会触发 removeAnchors 事件
session.on('removeAnchors', () => {
  console.log('removeAnchors')
})

// 需要调用一次 start 以启动
session.start(errno => {
  if (errno) {
    // 如果失败，将返回 errno
  } else {
    // 否则，返回null，表示成功
  }
})

3. 开启3D关键点检测

想要开启人手3D关键点检测能力，静态图片模式仅需要在2D调用基础上增加open3d字段，如下

// 静态图片模式调用
session.detectHand({
      ...,           // 同2D调用参数
      open3d: true,  // 开启人手3D关键点检测能力，默认为false
    })

摄像头实时模式则在2D调用基础上增加3D开关更新函数，如下

// 摄像头实时模式调用
session.on('updateAnchors', anchors => {
  this.session.update3DMode({open3d: true})  // 开启人手3D关键点检测能力，默认为false
  ...,  // 同2D调用参数
})

输出说明

点位说明

人手2D关键点定义与OpenPose相同，采用21点点位定义，如下图所示。

人手3D关键点采用MANO-16点关节定义，如下图所示。

人手检测

人手检测输出字段包括

struct anchor
{
  points,     // 人手2D关键点在图像中的(x,y)坐标
  origin,     // 人手检测框的左上角(x,y)坐标
  size,       // 人手检测框的宽和高(w,h)
  score,      // 人手检测框的置信度
  confidence, // 人手关键点的置信度
  gesture     // 人手手势类别
}

人手3D关键点

开启人手3D关键点检测能力后，可以获取人手2D及3D关键点信息，其中人手3D关键点输出字段包括

struct anchor
{ 
  ...,               // 人手检测2D输出信息
  points3d,          // 人手3D关键点的(x,y,z)3D坐标
  camExtArray,       // 相机外参矩阵，定义为[R, T \\ 0^3 , 1], 使用相机内外参矩阵可将3D点位投影回图像
  camIntArray        // 相机内参矩阵，参考glm::perspective(fov, width / height, near, far);
}

应用场景示例

1. 智能家居。
2. AR互动。
3. 智能车载。

程序示例

1. 实时摄像头手部检测能力使用参考
2. 静态图像手部检测能力使用参考

VisionKit 从基础库 3.2.1 版本 (安卓微信>=8.0.43，iOS微信>=8.0.43) 开始支持。

鞋子检测 能力作为与 其他 VisionKit 能力 平行的能力接口。

该能力一般用于用户进行 AR试鞋 或者 腿部遮挡 等功能的开发。

方法定义

鞋子检测，目前只支持通过 摄像头实时检测。

可以通过配置，决定是否每帧获取 用于对鞋子的腿部区域进行蒙版过滤的 腿部遮挡纹理。

摄像头实时检测

首先需要创建 VKSession 的配置，然后通过 VKSession.start 启动 VKSession 实例。

运行过程中，算法实时检测相机中的鞋子，通过 VKSession.on 实时输出鞋子矩阵信息（位置旋转缩放）、8个关键点坐标。

最后，实时获取 VKSession 的帧数据 VKFrame，获得 VKCamera。得到 VKCamera.viewMatrix 与 VKCamera.getProjectionMatrix 并结合，鞋子矩阵 与关键点信息 进行具体渲染。

开启VKSession示例代码：

// VKSession 配置
const session = wx.createVKSession({
    track: {
        shoe: {
            mode: 1 // 1 使用摄像头
        }
    }
})

// 摄像头实时检测模式下，监测到鞋子时，updateAnchors 事件会连续触发 （每帧触发一次）
session.on('updateAnchors', anchors => {
    // 目前版本能识别 1-2 双鞋子，anchors 长度为 0-2
    anchors.forEach(anchor => {
        // shoedirec 鞋子左右，0 为左，1 为右。
        console.log('anchor.shoedirec', anchor.shoedirec)
        // transform 鞋子的矩阵信息（位置旋转缩放），4*4 行主序矩阵，
        console.log('anchor.transform', anchor.transform)
        // points3d 位置，8个关键点坐标
        console.log('anchor.points3d', anchor.points3d)
    })
})

// 摄像头实时检测模式下，当鞋子从相机中丢失时，会不断触发
session.on('removeAnchors', () => {
  console.log('removeAnchors')
})

// 需要调用一次 start 以启动
session.start(errno => {
  if (errno) {
    // 如果失败，将返回 errno
  } else {
    // 否则，返回null，表示成功
  }
})

渲染试鞋示例代码：

// 可以理解每一帧都需要执行的行为

// 1. 通过 VKSession 实例的 `getVKFrame` 方法可以获取到帧对象
const frame = this.session.getVKFrame(canvas.width, canvas.height)

// 2. 获取 VKCamera
const VKCamera = frame.camera

// 3. 获取 VKCamera 的 视图矩阵与投影矩阵
const viewMat = VKCamera.viewMatrix;
const projMat = VKCamera.getProjectionMatrix(near, far);

// 4. 结合 updateAnchors 里面返回 anchor 的 transform、points3d 进行具体渲染。（具体可以参考官方示例）

开启腿部遮挡

摄像头实时模式下，想要开启腿部分割能力。

需要保证在 VKSession.start 接口 调用，开启 VKSession 后。 调用 VKSession 的 updateMaskMode 更新是否开启腿部分割纹理的返回。然后通过 VKFrame 的 getLegSegmentBuffer 获取具体的腿部遮挡纹理buffer，然后基于 buffer 创建纹理，进行对应的遮挡剔除。

示例代码：

// 1. 开启腿部遮挡纹理获取开关
// VKSession.start 后，可以通过 updateMaskMode 更新是否能够获取腿部遮挡纹理buffer
this.session.updateMaskMode({
    useMask: true // 开启或关闭腿部遮挡纹理buffer (客户端 8.0.43 默认开启获取，可以手动关闭)
});

// 2. 通过 VKSession 实例的 `getVKFrame` 方法可以获取到帧对象
const frame = this.session.getVKFrame(canvas.width, canvas.height)

// 3. 通过帧对象，获取具体腿部分割纹理Buffer（160*160、单通道）
const legSegmentBuffer = frame.getLegSegmentBuffer();

// 4. 基于腿部分割纹理过滤内容（具体可以参考官方案例）

PS.除了算法分割外，可以手动添加Mesh进行遮挡，可以实现类似的遮挡分割效果。具体可以参考官方案例。

输出说明

anchor 信息

struct anchor
{
  transform,  // 鞋子矩阵信息，位置旋转缩放
  points3d,   // 鞋子关键点数组
  shoedirec,  // 鞋子左右脚，0 为左脚，1 为右脚
}

1. 鞋子矩阵 transform

长度为 16 的数组，表示 行主序 的 4*4 矩阵。

2. 鞋子关键点 points3d

长度为 8 的数组，表示 鞋子识别的 8个关键点:

Array<Point>(8) point3d

每个数组元素结构为:

struct Point { x, y, z }

表示在 鞋子矩阵 作用后，每个点的 三维偏移位置。

以下为关键点图示与点位解释：

• 点位0 位于鞋的底部后部，脚后跟处，靠近地面的位置。
• 点位1 位于鞋子最前面，在竖直方向上大致处于鞋子上表面和鞋子下底面的中间。
• 点位2 位于鞋的后部，在点位0的上方，位于靠近脚踝的位置。
• 点位3、4 位于鞋子侧面，其中3点位于左鞋的左侧，右鞋的右侧。4点位于左鞋子的右侧，右鞋的左侧。上图中的3点处于被遮挡的位置。3，4点均紧靠鞋子下底面。
• 点位5，6 位于鞋子侧面，相对于3，4更靠后，在鞋子下底面偏上一点的位置。
• 点位7 大致位于鞋舌的中央。

3.腿部分割纹理Buffer

160*160 的 单通道浮点数颜色 ArrayBuffer，数值 0.0 对应非腿部区域，大于 0.0 代表是腿部区域，越靠近 1.0 越接近是腿部区域。

如何基于返回信息摆放模型

首先，可以将添加一个节点同步鞋子矩阵信息。再往该节点添加模型，基于鞋子关键点，设置对应的偏移，然后可以缩放模型适配比例，使模型贴合鞋子关键点，达到目标效果。

程序示例

摄像头实时检测示例

微信小程序示例 的 接口 – VisionKit视觉能力 – 实时鞋部检测 - 试鞋案例

开源地址：实时鞋部检测-试鞋案例

识别鞋子，并将鞋子模型放置到识别出的区域。默认并支持动态开启与关闭腿部遮挡，以及显示与隐藏对应的鞋子关键点。

案例效果：