用AR Engine手部骨骼跟蹤能力實現虛擬手錶試戴

  • 2022 年 9 月 28 日
  • 筆記

AR技術的落地應用,推動着電商領域的不斷升級,通過增強現實為用戶帶來了虛擬與現實結合的AR購物體驗。如AR試衣、AR試鞋、AR試妝等功能的出現讓用戶在手機上就能體驗產品的佩戴效果,可以讓用戶更直觀、更真實的了解產品信息,提升消費者的購物愉悅感,幫助電商應用提高購物轉化率。華為AR Engine也為AR購物提供了實現方案,使用手部跟蹤能力即可實現虛擬手錶試戴。

效果展示

實現方法

AR Engine提供手部骨骼跟蹤能力,可以識別跟蹤21個手部關節點的位置和姿態,形成手部骨骼模型。通過手勢識別能力,可以給AR應用提供交互功能並實現一些趣味玩法,比如可以將AR世界中的虛擬物體置放到人的手部更精確的位置,如手指尖、手掌心等;還可驅動虛擬手做出更精細的動作。下面我會展示虛擬手錶試戴功能的具體開發步驟。

集成步驟

開發環境要求:
JDK 1.8.211及以上。

安裝Android Studio 3.0及以上:

minSdkVersion 26及以上

targetSdkVersion 29(推薦)

compileSdkVersion 29(推薦)

Gradle 6.1.1及以上(推薦)

在華為終端設備上的應用市場下載AR Engine服務端APK(需在華為應用市場,搜索「華為AR Engine」)並安裝到終端設備。

測試應用的設備:參見AREngine特性軟硬件依賴表。如果同時使用多個HMS Core的服務,則需要使用各個Kit對應的最大值。

開發準備

  1. 在開發應用前需要在華為開發者聯盟網站上註冊成為開發者並完成實名認證,具體方法請參見帳號註冊認證

  2. 華為提供了Maven倉集成方式的AR Engine SDK包,在開始開發前,需要將AR Engine SDK集成到您的開發環境中。

  3. Android Studio的代碼庫配置在Gradle插件7.0以下版本、7.0版本和7.1及以上版本有所不同。請根據您當前的Gradle插件版本,選擇對應的配置過程。

  4. 以7.0為例:

打開Android Studio項目級「build.gradle」文件,添加Maven代碼庫。

在「buildscript > repositories」中配置HMS Core SDK的Maven倉地址。

buildscript {
    	repositories {
        	google()
        	jcenter()
        	maven {url "//developer.huawei.com/repo/" }
    	}
}

打開項目級「settings.gradle」文件,配置HMS Core SDK的Maven倉地址

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    		repositories {
       			 repositories {
           			 	google()
            			jcenter()
            			maven {url "//developer.huawei.com/repo/" }
       			 }
   			 }
}
  1. 添加依賴 在「dependencies」中添加如下編譯依賴:
dependencies {
    implementation 'com.huawei.hms:arenginesdk:{version}
}

應用開發

1.運行前驗證:檢查當前設備是否安裝了AR Engine,若已經安裝則正常運行,若沒有安裝,App應採用合適的方式提醒用戶安裝AR Engine,如主動跳轉應用市場,請求安裝AR Engine。具體實現代碼如下

boolean isInstallArEngineApk =AREnginesApk.isAREngineApkReady(this);
if (!isInstallArEngineApk) {
    		// ConnectAppMarketActivity.class為跳轉應用市場的Activity。
startActivity(new Intent(this, com.huawei.arengine.demos.common.ConnectAppMarketActivity.class));
   		isRemindInstall = true;
}

2.初始化AR場景:AREngine提供5種場景,包括運動跟蹤(ARWorldTrackingConfig)、人臉跟蹤(ARFaceTrackingConfig)、手部識別(ARHandTrackingConfig)、人體跟蹤(ARBodyTrackingConfig)和圖像識別(ARImageTrackingConfig)。

調用ARHandTrackingConfig接口,初始化手部識別。

mArSession = new ARSession(context);
ARHandTrackingConfig config = new ARHandTrackingconfig(mArSession);
  1. 獲取到ARhandTrackingconfig後,可以設置使用相機的前置或者後置等等一些可選的方法:
Config.setCameraLensFacing(ARConfigBase.CameraLensFacing.FRONT);
  1. 你需要把你獲取到的手部識別獲取到的config配置到ArSession中,然後啟動手部識別場景:
mArSession.configure(config);
mArSession.resume();
  1. 初始化HandSkeletonLineDisplay類,此類是根據手骨架點的坐標來繪製手骨架線:
Class HandSkeletonLineDisplay implements HandRelatedDisplay{
//此類需要幾個方法
//初始化方法
public void init(){
}
//繪製手骨架點的方法,這裡需要傳入ARHand對象,用來獲取數據
public void onDrawFrame(Collection<ARHand> hands,){

    //調用getHandskeletonArray()方法用來獲取手部關節點坐標數據
        Float[] handSkeletons  =  hand.getHandskeletonArray();

        //把handSkeletons傳入到實時更新數據方法中
        updateHandSkeletonsData(handSkeletons);

}
//更新骨架點的連接數據,在更新任何幀的時候調用此方法
public void updateHandSkeletonLinesData(){

//用來創建並初始化緩衝區對象的數據存儲
GLES20.glBufferData(…,mVboSize,…);

//用來更新緩衝區對象中的數據
GLES20.glBufferSubData(…,mPointsNum,…);

}
}
  1. 初始化HandRenderManager類,此類是來渲染從HUAWEI AREngine獲取的數據
Public class HandRenderManager implements GLSurfaceView.Renderer{
	
	//設置ARSession對象,用於獲取onDrawFrame方法中的最新數據。
	Public void setArSession(){
	}
}
  1. 在HandRenderManager類中,初始化onDrawFrame()方法:
Public void onDrawFrame(){
//在這個方法中調用了setCameraTextureName(),update()等方法用來更新ArEngine的計算結果
//應用在獲取到最新數據時來調用此接口。
mSession.setCameraTextureName();
ARFrame arFrame = mSession.update();
ARCamera arCamera = arFrame.getCamera();
//獲取人體手部跟蹤時返回的跟蹤結果 
Collection<ARHand> hands =  mSession.getAllTrackables(ARHand.class);
     //把獲取到的hands對象循環傳入更新手勢識別信息方法中,進行處理
     For(ARHand hand  :  hands){
         updateMessageData(hand);
}
}

8.最後在展示效果的HandActivity頁面,給SurfaceView 設置渲染器。

mSurfaceView.setRenderer(mHandRenderManager);
設置渲染模式
mSurfaceView.setRenderMode(GLEurfaceView.RENDERMODE_CONTINUOUSLY);

具體實現可參考示例代碼

了解更多詳情>>

訪問華為開發者聯盟官網
獲取開發指導文檔
華為移動服務開源倉庫地址:GitHubGitee

關注我們,第一時間了解 HMS Core 最新技術資訊~