小程序 AI/AR 能力

一、关于 VisionKit

1、定义

2、版本

• • V1平面接口，适用于用户在平面场景下，例如桌面，地面，泛平面场景，放置虚拟物体，不提供真实世界距离。用户放置物体时，手机相机倾斜向下对着目标平面点击即可，具有广泛的机型支持。

• • V2平面接口，提供真实物理距离的 AR 定位功能，提供平面识别功能，用户在平面范围点击放置虚拟物体的功能，具有有限的支持机型。

3、能力

• • 平面检测

• • 2D/3D Marker
      2D Marker，仅适用于平面类物体，用户上传一张平面物体的俯视图像作为目标物体，算法运行时识别该平面物品，并渲染出相关虚拟物体。2D Marker可以理解为特殊的3D Marker。
      画展互动：https://www.bilibili.com/video/BV1VS4y1K75C/?spm_id_from=333.999.0.0
      精灵召唤：https://www.bilibili.com/video/BV1FL411G78Q/?spm_id_from=333.999.0.0
      3D Marker，相比于2D Marker，能够识别3D物体，不局限于平面物体，具有更广的使用范围，算法运行前，需要手动制作3D Marker的识别目标文件（.map文件），然后算法运行时载入该文件用于识别。
      潮玩场景：https://www.bilibili.com/video/BV1Qa411j7fo/?spm_id_from=333.999.0.0

• • 单样本检测（One-shot Detection, OSD）
      只使用一张待检测类别的图片，就能检测到输入图像中该类别的物体。
      适合标志性建筑、商品包装等具有平面图案的3D物体。不适用于检测人脸、动物、汽车等3D对象。允许识别图片与3D物体有视角差异或一定程度的外形差异。

• • 人脸检测
      提供了两种方式，静态图片检测和通过摄像头实时检测。可以输出人脸位置坐标、106个关键点坐标以及人脸在三维坐标系中的旋转角度。
      眼镜试戴：https://www.bilibili.com/video/BV1S64y1t7C6/?spm_id_from=333.999.0.0
     

二、使用 VisionKit

1、VKSession（VisionKit 会话对象）

• • 创建 VKSession 的实例：wx.createVKSession

const session = wx.createVKSession({
  track: {
    plane: {mode: 3},
  },
  version: 'v2', 
})

• • 启动 VKSession 实例：start 方法

session.start(err => {
  if (err) return console.error('VK error: ', err)
 
  // do something
})

2、渲染

3、WebGL & three.js

4、放置 3D 模型

• • 将 2D 坐标转成 3D 世界坐标，即 (x, y) 转成 (x, y, z)，原点是相机打开瞬间其所在的点

• • 参数：相对于画布视窗的坐标，取值范围为 [0, 1]，0 为左/上边缘，1 为右/下边缘

• • 返回：一个矩阵，包含 3D 世界坐标的位置、旋转和放缩信息

5、平面检测

三、官方demo解析

 

 

1、代码结构

2、实现逻辑

 

 

 

四、相关链接