互联网和智慧终端的普及促进了电商的产生和蓬勃发展，而新技术的产生，则推动着电商领域的不断升级。疫情使得人们更加习惯于使用电商进行购物，但对传统的线上购物模式已经产生了一些厌倦，电商市场急需模式上的变革，让老用户耳目一新，提供便捷的同时促进他们的购物欲望，同时也能凭借爆点吸引到新用户的加入。以此为背景，我们以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!”，引导用户进行试戴。

<Buttonandroid:layout_width="260dp"android:layout_height="160dp"android:background="@drawable/sunglasses"android:onClick="onBtnShowProduct" />

<Buttonandroid: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文件夹内。

@Overridepublic 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 {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_sample);}}

layout文件中的SampleView创建为

<com.huawei.scene.demo.sceneview.SceneSampleViewandroid: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.FaceViewandroid: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>

同时创建一个开关，用于对比佩戴与不佩戴的效果差别

<Switchandroid: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;@Overrideprotected 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() {@Overridepublic 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

原作者：胡椒

在家也可以享受购物体验？AR+Scene 帮您实现商品3D展示和虚拟试戴相关推荐

眼镜选款新方法，用AR+Scene技术实现3D虚拟试戴
互联网和智慧终端的普及促进了电商的产生和蓬勃发展,而新技术的产生,则推动着电商领域的不断升级.疫情使得人们更加习惯于使用电商进行购物,但对传统的线上购物模式已经产生了一些厌倦,电商市场急需模式上的变革 ...
购物商城系统设计与实现总结_商品列表展示页的实现
商品分类展示页面和关键字搜索所显示的商品页面,只是传入的信息不同,重复调用了相同的子组件.子组件为商品列表组件和详细信息组件,点击列表页展示的商品时,跳转到对应商品详情页.列表页用到的分页功能单独制作 ...
AR珠宝试戴经典案例盘点
珠宝的选择是一个非常严谨的过程--无论是订婚戒指.还是送给挚爱的礼物.高昂的价格以及对珠宝的了解,很大程度上导致了人们在电商渠道购买珠宝时会犹豫不决. AR试戴功能在各珠宝品牌中的应用,用沉浸式的试 ...
即试即买丨帕克西首推假发自动售卖机，3D发型试戴变革假发购物体验！
假发-头顶上的时装! 除了满足特定刚需(脱发.补发) 渐渐成为服装化妆品一样的时尚消费品一款适合自己的假发用品能在最短的时间内改变个人造型(气质)! 但是买到适合自己的假发并不容易先不论假发是 ...
商家应用 + AR : 助力虚拟试妆引擎落地手淘
作者|方曦(千之) 出品|阿里巴巴新零售淘系技术部一句话概括全文: 现在,商家应用支持 AR 效果了! AR 是什么?是一种现实增强技术(Augmented Reality),可以将虚拟效果应用到真 ...
京东ARVR天工计划升级 3D购物虚拟试妆加开放平台助力无界零售
12月19日京东宣布其面向AR/VR领域的天工计划正式升级至2.0阶段,"升级的计划包含京东天工AR开放平台.京东AR视界.京东试试,这三大业务将为消费者带来更具革命性的虚拟购物体验,而对于 ...
卡斯商学院研究表示AR可提升购物体验
据报告,AR交互式购物体验使消费者线上和线下的购物体验大大提升. 还记得前不久阿里巴巴虚拟现实工作室推出的Buy+计划吗?其宣传视频中足不出户就能体验逛街购物的场景极具未来感.而增强现实作为在虚拟现实 ...
互道信息：智慧门店如何优化线下购物体验？
作为零售行业的决策者如何借助新技术应对疫情带来的不确定性? 如何拥抱数字化带来的变革实现品牌稳健增长? 本次活动中,互道信息与众多领军企业行业专家共同围绕零售企业的数字化变革,深入探讨影响行业的 ...
拿捏了，这样的购物体验才深得用户心
如何把我们最熟悉的购物变得简单.直接.充满想象力? 有的时候用户想要一声令下就能看到自己心仪的商品,有的时候用户需要一个智能购物管家来管理自己常用的卡券,甚至还想要在股掌之间.分秒之际就掌握商品全貌信 ...

在家也可以享受购物体验？AR+Scene 帮您实现商品3D展示和虚拟试戴

场景