互聯網和智慧終端的普及促進了電商的產生和蓬勃發展，而新技術的產生，則推動著電商領域的不斷升級，疫情使得人們更加習慣于使用電商進行購物，但對傳統的線上購物模式已經產生了一些厭倦，電商市場急需模式上的變革，讓老用戶耳目一新，提供便捷的同時促進他們的購物欲望，同時也能憑借爆點吸引到新用戶的加入，以此為背景，我們以HMS Core提供的智能影像處理能力，識別用戶的面部和身體特征，再結合顯示模式，讓用戶直接在手機上就能體驗產品的佩戴效果，提供更加便利的購物體驗，
場景
在淘寶、京東、天貓等購物app，以及小紅書、得物、什么值得買等好物分享app，可以對產品進行AR體驗，便于消費者感受產品效果，也能減少后續的退換貨比例，
先看效果
打開App
點擊圖片可以查看商品的3D模型，可以進行旋轉和縮放
開發準備
配置華為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" />
開發步驟
MainActivity配置
在MainActivity的layout組態檔中添加兩個按鈕，一個背景設為產品的預覽圖，另一個添加文字“Try it on!”，引導用戶進行試戴，
<Button
android:layout_width="260dp"
android:layout_height="160dp"
android:background="@drawable/sunglasses"
android:onClick="onBtnShowProduct" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Try it on!"
android:textAllCaps="false"
android:textSize="24sp"
android:onClick="onBtnTryProductOn" />
點擊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"/>
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>
同時創建一個開關，用于對比佩戴與不佩戴的效果差別
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/switch_view"
android:layout_alignParentTop="true"
android:layout_marginTop="15dp"
android:layout_alignParentEnd="true"
android:layout_marginEnd ="15dp"
android:text="Try it on"
android:theme="@style/AppTheme"
tools:ignore="RelativeOverlap" />
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));
}
}
訪問華為開發者聯盟官網
獲取開發指導檔案
華為HMS Core官方論壇
AR Engine開源倉庫鏈接：GitHub、Gitee
解決集成問題請到Stack Overflow
關注我們，第一時間了解 HMS Core 最新技術資訊~
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/308623.html
標籤：Android