天天看點

用AR Engine手部骨骼跟蹤能力實作虛拟手表試戴

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

效果展示

用AR Engine手部骨骼跟蹤能力實作虛拟手表試戴

實作方法

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 "https://developer.huawei.com/repo/" }
    	}
}
           

打開項目級“settings.gradle”檔案,配置HMS Core SDK的Maven倉位址

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    		repositories {
       			 repositories {
           			 	google()
            			jcenter()
            			maven {url "https://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);
           

具體實作可參考示例代碼。