小程序 AI/AR 能力

一、關於 VisionKit

1、定義

VisionKit 爲小程序提供了開發 AR 功能的能力，包含了 AR 在內的視覺算法。

2、版本

提供了 V1 和 V2 兩個版本，區別如下：

• • 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
     

掃碼體驗：進入小程序 → 底部 tab 選擇「接口」 → VisionKit 視覺能力

二、使用 VisionKit

1、VKSession（VisionKit 會話對象）

一個小程序在一個確定的時刻最多隻會有一個 VKSession 實例。

• • 創建 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、渲染

通過 VKSession 實例的 getVKFrame 方法可以獲取到幀對象，幀對象包含了需要上屏的畫面，然後將其用 WebGL 渲染出來。

3、WebGL & three.js

初始化 three.js （相機、場景、渲染層、光源……），渲染 3D 模型

初始化 WebGL（編寫着色器……）

到這裏就渲染好了基礎的背景畫面，如同開着攝像頭一樣了。

（需要具體學習 WebGL & three.js）

4、放置 3D 模型

把 three.js 渲染的 3D 模型放到畫面中對應的 3D 世界

VKSession 的 hitTest 接口：

• • 將 2D 座標轉成 3D 世界座標，即 (x, y) 轉成 (x, y, z)，原點是相機打開瞬間其所在的點

• • 參數：相對於畫布視窗的座標，取值範圍爲 [0, 1]，0 爲左/上邊緣，1 爲右/下邊緣

• • 返回：一個矩陣，包含 3D 世界座標的位置、旋轉和放縮信息

通過幀對象的 camera 屬性拿到了幀相機，把幀相機拿到的視圖矩陣、投影矩陣，都傳給 three.js 的相機對象，以確保 three.js 的相機位置、角度正確。

5、平面檢測

檢測 3D 世界的平面

VisionKit 識別到的平面會以 anchor 對象的方式提供給我們，這裏 VKSession 提供了很便利的事件：addAnchors/updateAnchors/removeAnchors，通過這三個事件我們可以監聽 anchor 列表的變化：

三、官方demo解析

官方demo：https://github.com/wechat-miniprogram/miniprogram-demo/tree/master/miniprogram/packageAPI/pages/ar

 

 

1、代碼結構

如上圖，是一個頁面所包含的文件。

.wxml 主要包含了一個 canvas 標籤

.wxss 樣式文件（可忽略）

.json 頁面設置文件（可忽略）

.js 邏輯交互文件

2、實現邏輯

三個 js 文件通過自定義組件 behaviors實現代碼共享，其中 yuvBehavior.js 主要包含 webGL 相關方法。主要代碼邏輯如下（以水平面 AR 爲例）：

 

 

 

四、相關鏈接

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/visionkit/base.html

api：https://developers.weixin.qq.com/miniprogram/dev/api/ai/visionkit/wx.createVKSession.html

官方demo：https://github.com/wechat-miniprogram/miniprogram-demo/tree/master/miniprogram/packageAPI/pages/ar

Three.js 文檔：https://threejs.org/docs/index.html#manual/en/introduction

Three.js 小程序版：https://github.com/wechat-miniprogram/threejs-miniprogram

 

END--------------------------------------