小程式 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、實現邏輯

 

 

 

四、相關連結