目錄

AR會話初始化

平面追蹤與相機定位

用戶交互處理

實時渲染

---

Unity 小游戲宿主現已支持 AR 功能，本文介紹如何從零開始創建一個可以在Unity小游戲宿主上運行的AR小游戲，歡迎大家試用！

想為你的小游戲注入虛實交融的魔力嗎？現在，Unity 小游戲宿主正式支持 AR 功能，助你輕松打造沉浸式增強現實體驗！

---

🌟 為什么選擇Unity小游戲宿主？

• 無縫接入：專為小游戲優化的 AR API，快速集成，省時省力

• 強大性能：基于成熟技術棧，流暢運行復雜 AR 場景

• 跨平臺兼容：一次開發，多端部署，觸達億萬玩家

🎮 開發者福音 無論你是想開發：

• 虛實結合的冒險游戲

• 場景互動的營銷應用

• 社交 AR 小游戲 這份文檔將手把手教你如何通過 Unity 宿主 AR API，快速實現AR功能！

📢 現在就開始，讓你的小游戲從屏幕里"跳"出來！

---

AR API設計原則

本AR API基于微信VisionKit API規范開發，為Unity小游戲開發者提供與微信平臺高度兼容的AR功能支持。我們采用與VisionKit一致的API命名規范，核心功能接口（如平面檢測、圖像追蹤等）保持對齊，并支持微信VisionKit的主要數據結構格式。但需要注意，部分API的輸出與原生VisionKit可能存在細微差異。

開發者可通過tj.createVKSession(option: SessionOption)函數啟動基礎AR功能。返回的VKSession對象可用于運動跟蹤，或獲取AR引擎對圖片、3D物體及平面的識別結果。基于這些識別結果，開發者可實現多種AR應用場景，包括：

• 圖片增強效果
• 3D物體特效展示（如在商品周圍呈現廣告）
• 平面虛擬物品陳列等

接下來，我們將從零開始構建一個AR小游戲。

創建AR小游戲步驟

1. 定義工具類

首先創建兩個核心工具類：

• ARCameraTexRenderer：負責相機背景渲染
• ARSceneRenderer：處理AR內容疊加

基礎類結構如下：

class ARCameraTexRenderer {setup() {// ...// 定義著色器程序，初始化WebGL，適配屏幕比例等}render(frame) {// ...// 將相機捕獲的YUV幀數據通過WebGL渲染到屏幕上}
}class ARSceneRenderer {setup() {// ...// 初始化WebGL渲染器，設置主相機，創建場景并添加光照，創建目標指示器，加載模型}render(frame) {// ...// 根據AR相機更新相機矩陣并渲染場景}
}

受限于篇幅兩個工具類的實現不具體展開，如果感興趣的話可以聯系我們索取demo工程。

2.準備工作

接下來讓我們做一些準備工作，通過tj.createCanvas()方法創建Canvas，并且實例化兩個工具類，為簡化渲染部分代碼我們引入了Three.js依賴用于3D渲染。

this.canvas = tj.createCanvas();
this.THREE = createScopedThreejs(canvas);
this.glContext = this.canvas.getContext("webgl");
this.arSceneRenderer = new ARSceneRenderer(this.canvas, this.THREE);
this.arSceneRenderer.setup();
this.camTexRenderer = new ARCameraTexRenderer(this.glContext);
this.camTexRenderer.setup();

3.創建session用于平面檢測 通過調用tj.createVKSession方法創建AR session。

this.session = tj.createVKSession({track:{plane:true,},version:'v1',gl:this.glContext 
});

我們通過上述代碼實現了支持平面檢測的AR會話。通過設置不同的sessionOption參數，可以擴展更多AR功能。

關于sessionOption的配置說明：

當前基礎版VKSession支持以下三種AR功能：

1. 標記檢測（支持圖片和模型識別）
2. 平面檢測
3. 運動跟蹤

創建VKSession時，系統會根據配置參數生成相應的AR功能實例。需要注意以下事項：

1. 當前版本暫不支持多跟蹤功能同時啟用
2. 當TrackOption中配置多個功能時，系統將按照優先級順序啟用最高級別的功能：
   • 運動跟蹤（最高優先級）
   • 平面檢測
   • 標記檢測（最低優先級）

SessionOption參數定義如下：

interface SessionOption{// 為了兼容微信的VisionKit，保留version屬性，但沒有任何功能上的影響。// 可傳入'v1'和'v2'。version:string// 具體的配置屬性，必須傳入。track:TrackOption,// webgl context。必要gl:WebGLRenderingContext
}
// 默認session只提供通用的AR功能，SSM和DSM請使用createSSMSession和createDSMSession創建
// 對應的session。同一時間只能開啟一個AR功能。
interface TrackOption {// 圖片/模型跟蹤功能。開啟之后，同時支持圖片和模型的跟蹤。圖片支持同時跟蹤多個圖片。// 模型支持同時跟蹤一個物體。測試工程：ARMain_Object.jsmarker:MarkersOption,// 是否開啟SurfaceTrack功能。SurfaceTrack能識別平面上最近的anchor點。plane: Bool,// 開啟后創建6Dof的簡單運動跟蹤，適合簡單的AR程序。較為輕量。同時，只有在這個模式下// camera.viewMaterix才會有值，其他模式下，viewMatrix都為單位矩陣motion: Bool,
}

4.啟動會話

最后，通過調用session.start()方法即可啟動AR會話。以下代碼示例展示了核心功能實現，非關鍵代碼已做簡化處理。

AR會話初始化

調用session.start()啟動AR功能，開啟平面檢測（plane detection）功能。

平面追蹤與相機定位

• addAnchors：當檢測到平面時，設置標記（planeExist = true）
• updateAnchors：實時更新相機位置（通過anchor.transform參數）

用戶交互處理

當用戶點擊屏幕時，通過射線檢測（Raycaster）在已檢測的平面上放置3D模型。

實時渲染

每幀獲取AR相機數據（getVKFrame），同時渲染相機背景和3D場景。

let mainCamera = this.arSceneRenderer.mainCamera;
this.session.start(status => {// 判斷status進行錯誤處理 ...session.on('addAnchors',anchors=>{if(anchors && anchors.length > 0){// 標記檢測到平面planeExist = true;}});session.on('updateAnchors',anchors=>{if(anchors && anchors.length>0){let anchor = anchors[0];// 更新相機mainCamera.matrixWorldInverse.fromArray(anchor.transform);                  mainCamera.matrixWorld.getInverse(mainCamera.matrixWorldInverse);}});let raycaster = new THREE.Raycaster();tj.onTouchStart(function(evt){if(!planeExist){return;} // 未檢測到平面則忽略// 計算點擊位置（歸一化坐標）let pointer = new THREE.Vector2()pointer.x = evt.touches[0].pageX / canvas.width * 2 - 1;pointer.y = - evt.touches[0].pageY / canvas.height * 2 + 1;// 射線檢測raycaster.setFromCamera(pointer,mainCamera);const intersects = raycaster.intersectObjects( arSceneRenderer.scene.children );for(let i of intersects){if(i.object == arSceneRenderer.planeMesh){// 放置目標指示器arSceneRenderer.aimCenter.position.set(i.point.x,i.point.y,i.point.z);// 放置模型if(arSceneRenderer.currentModel){if(arSceneRenderer.putModel){return;}let obj = arSceneRenderer.currentModel;obj.scale.setScalar(0.1);obj.position.set(i.point.x,i.point.y,i.point.z);arSceneRenderer.scene.add(obj);arSceneRenderer.putModel = true;// 模型控制器 ...}}}           })const onUpdate = function(){// 渲染相機背景和3D場景const frame = session.getVKFrame(canvas.width,canvas.height);if(frame && frame.camera){if(camTexRenderer.render(frame)){arSceneRenderer.render(frame);                      }}   session.requestAnimationFrame(onUpdate);}// 啟動渲染session.requestAnimationFrame(onUpdate);
});

5.運行

游戲編碼已完成，現在可以在宿主設備上運行測試。啟動游戲后，請按照以下步驟操作：

1. 移動手機直至系統成功識別平面，屏幕上將顯示平面坐標軸
2. 點擊屏幕即可在識別到的平面位置放置3D模型
3. 移動攝像頭時，模型會固定在已識別的平面位置
4. 通過觸屏手勢可調整模型的大小和旋轉角度

具體效果如下圖所示：