網際網路和智慧終端的普及促進了電商的產生和蓬勃發展，而新技術的產生，則推動著電商領域的不斷升級。疫情使得人們更加習慣於使用電商進行購物，但對傳統的線上購物模式已經產生了一些厭倦，電商市場急需模式上的變革，讓老使用者耳目一新，提供便捷的同時促進他們的購物慾望，同時也能憑藉爆點吸引到新使用者的加入。以此為背景，我們以HMS Core提供的智慧影像處理能力，識別使用者的面部和身體特徵，再結合顯示模式，讓使用者直接在手機上就能體驗產品的佩戴效果，提供更加便利的購物體驗。

## 場景

在淘寶、京東、天貓等購物app，以及小紅書、得物、什麼值得買等好物分享app，可以對產品進行AR體驗，便於消費者感受產品效果，也能減少後續的退換貨比例。

## 先看效果

**開啟App**

點選圖片可以檢視商品的3D模型，可以進行旋轉和縮放

![](https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/303/188/248/0070086200303188248.20201209090133.76890482216490367426436366882238:50520909071927:2800:803D722188F8EC02818CD41F5BB67BDF8B2879F015CC122B2BC6D9FB5315C601.gif)

![](https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/303/188/248/0070086200303188248.20201209090153.84323540869021054409617195245480:50520909071927:2800:0E7F65BBFEA8D1E53C8F5FA91406E194067CF290085E58AA8956138BD93A678A.gif)

**開發準備**

配置華為Maven倉地址

開啟AndroidStudio專案中的build.gradle檔案

在“buildscript > repositories”和“allprojects > repositories”中增加SDK的Maven倉地址：

```

buildscript {

repositories{

...

maven {url 'http://developer.huawei.com/repo/'}

}

allprojects {

repositories {

…

maven { url 'http://developer.huawei.com/repo/'}

}

```

### 新增編譯SDK依賴

開啟應用級的“build.gradle”檔案

在dependencies中新增圖形引擎的SDK包，使用Full-SDK，以及AR Engine的SDK包

```

dependencies {

….

implementation 'com.huawei.scenekit:full-sdk:5.0.2.302'

implementation 'com.huawei.hms:arenginesdk:2.13.0.4'

}

```

上述步驟可以參考開發者網站中的應用開發介紹

### 在AndroidManifest.xml中新增許可權

```

開啟main中的AndroidManifest.xml檔案，在<application>

<uses-permission android:name="android.permission.CAMERA"></uses-permission>

```

### 開發步驟

MainActivity配置

在MainActivity的layout配置檔案中新增兩個按鈕，一個背景設為產品的預覽圖，另一個新增文字“Try it on!”，引導使用者進行試戴。

```

```

```

點選onBtnShowProduct按鈕，會載入產品的3D模型，而點選onBtnTryProductOn，則會進入AR試戴介面。

### 產品3D模型展示

1、建立一個繼承自SceneView的SceneSampleView

```

public class SceneSampleView extends SceneView {

public SceneSampleView(Context context) {

super(context);

}

public SceneSampleView(Context context, AttributeSet attributeSet) {

super(context, attributeSet);

}

```

重寫surfaceCreated完成SceneView的建立和初始化，loadScene載入的是要進行渲染顯示的模型檔案，目前支援glTF和glb格式素材的渲染，loadSkyBox、loadSpecularEnvTexture、loadDiffuseEnvTexture分別進行天空盒紋理、鏡面反射紋理和漫反射紋理的載入，目前支援的是cubemap格式的dds檔案。

所載入的素材都存放在src->main->assets->SceneView資料夾內。

```

@Override

public void surfaceCreated(SurfaceHolder holder) {

super.surfaceCreated(holder);

// 載入渲染素材

loadScene("SceneView/sunglasses.glb");

//呼叫loadSkyBox載入天空盒紋理貼圖素材

loadSkyBox("SceneView/skyboxTexture.dds");

//呼叫loadSpecularEnvTexture載入環境光反射貼圖素材

loadSpecularEnvTexture("SceneView/specularEnvTexture.dds");

//呼叫loadDiffuseEnvTexture載入環境光漫反射貼圖素材

loadDiffuseEnvTexture("SceneView/diffuseEnvTexture.dds");

}

```

2、新建一個SceneViewActivity，繼承自Activity，在其中用onCreate方法呼叫setContentView，傳入在layout檔案中用xml標籤建立的SampleView，

```

public class SceneViewActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_sample);

}

```

layout檔案中的SampleView建立為

```

<com.huawei.scene.demo.sceneview.scenesampleview android:layout_width="match_parent" android:layout_height="match_parent"></com.huawei.scene.demo.sceneview.scenesampleview>

```

3、在MainActivity中新建onBtnShowProduct，當點選對應的按鈕時，就會呼叫SceneViewActivity，將商品的3D模型載入，進行渲染，然後顯示出來

```

public void onBtnShowProduct(View view) {

startActivity(new Intent(this, SceneViewActivity.class));

}

```

產品AR試戴展示

透過HMS Core提供的面部識別、影像渲染和AR顯示能力，可以非常便捷的實現產品的AR試戴展示

1、建立一個FaceViewActivity，繼承自Activity，同時建立對應的layout檔案

在layout中建立face_view，用於顯示試戴效果

```

<com.huawei.hms.scene.sdk.faceview android:id="@+id/face_view" android:layout_width="match_parent" android:layout_height="match_parent" app:sdk_type="AR_ENGINE"></com.huawei.hms.scene.sdk.faceview>

```

同時建立一個開關，用於對比佩戴與不佩戴的效果差別

```

```

2、在FaceViewActivity中重寫onCreate方法，獲取FaceView

```

public class FaceViewActivity extends Activity {

private FaceView mFaceView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_face_view);

mFaceView = findViewById(R.id.face_view)；

}

```

3、建立switch開關的監聽方法，當開關開啟時，使用loadAsset方法載入商品的3D模型，LandmarkType可以選定與人臉的識別位置

```

mSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

@Override

public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

mFaceView.clearResource();

if (isChecked) {

// Load materials.

int index = mFaceView.loadAsset("FaceView/sunglasses.glb", LandmarkType.TIP_OF_NOSE);

}

});

```

模型的大小和位置可以透過setInitialPose進行調整，建立position，rotation，scale陣列，將要調整的數值傳入

```

final float[] position = { 0.0f, 0.0f, -0.15f };

final float[] rotation = { 0.0f, 0.0f, 0.0f, 0.0f };

final float[] scale = { 2.0f, 2.0f, 0.3f };

```

在loadAsset語句下面加入

```

mFaceView.setInitialPose(index, position, scale, rotation);

```

4、在MainActivity中新建onBtnTryProductOn，點選按鈕時呼叫FaceViewActivity讓使用者檢視AR試戴效果

```

public void onBtnTryProductOn(View view) {

if (ContextCompat.checkSelfPermission(this, Manifest.permission.CAMERA)

!= PackageManager.PERMISSION_GRANTED) {

ActivityCompat.requestPermissions(

this, new String[]{ Manifest.permission.CAMERA }, FACE_VIEW_REQUEST_CODE);

} else {

startActivity(new Intent(this, FaceViewActivity.class));

}

```

訪問[華為開發者聯盟官網](http://developer.huawei.com/consumer/cn/hms?ha_source=hms1)

獲取[開發指導文件](http://developer.huawei.com/consumer/cn/doc/development?ha_source=hms1)

[華為HMS Core官方論壇](https://developer.huawei.com/consumer/cn/forum/block/hms-core?ha_source=hms1)

AR Engine開源倉庫連結：[GitHub](https://github.com/HMS-Core/hms-3d-modeling-demo)、[Gitee](https://gitee.com/hms-core/hms-3d-modeling-demo)

解決整合問題請到[Stack Overflow](https://stackoverflow.com/questions/tagged/huawei-mobile-services?tab=Newest)

關注我們，第一時間瞭解 **HMS Core** 最新技術資訊~

</application>

眼鏡選款新方法，用AR+Scene技術實現3D虛擬試戴

相關文章