# Shoe 鞋部检测

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

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

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

# 方法定义

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

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

# 摄像头实时检测

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

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

最后,实时获取 VKSession 的帧数据 VKFrame,获得 VKCamera。得到 VKCamera.viewMatrixVKCamera.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 后。 调用 VKSessionupdateMaskMode 更新是否开启腿部分割纹理的返回。然后通过 VKFramegetLegSegmentBuffer 获取具体的腿部遮挡纹理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视觉能力 - 实时鞋部检测 - 试鞋案例

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

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

案例效果: