乐趣区

关于android:在家也可以享受购物体验ARScene-帮您实现商品3D展示和虚拟试戴

jiezi

互联网和智慧终端的遍及促成了电商的产生和蓬勃发展，而新技术的产生，则推动着电商畛域的一直降级。疫情使得人们更加习惯于应用电商进行购物，但对传统的线上购物模式曾经产生了一些厌倦，电商市场急需模式上的改革，让老用户耳目一新，提供便捷的同时促成他们的购物欲望，同时也能凭借爆点吸引到新用户的退出。以此为背景，咱们以 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));

    }

}

源码

参加开发者探讨请到 Reddit 社区：https://www.reddit.com/r/HMSCore/

下载 demo 和示例代码请到 Github：https://git.huawei.com/HMS_Core_SPDT/DTSE/Super_Demo/tree/Br_feature_hmscore_cases/ARFittingRoom

解决集成问题请到 Stack Overflow：https://stackoverflow.com/questions/tagged/huawei-mobile-services?tab=Newest

原文链接：https://developer.huawei.com/consumer/cn/forum/topic/0201428872278800009?fid=18

原作者：胡椒

退出移动版