眼镜选款新方法,用AR+Scene技术实现3D虚拟试戴
互联网和智慧终端的普及促进了电商的产生和蓬勃发展,而新技术的产生,则推动着电商领域的不断升级。疫情使得人们更加习惯于使用电商进行购物,但对传统的线上购物模式已经产生了一些厌倦,电商市场急需模式上的变革,让老用户耳目一新,提供便捷的同时促进他们的购物欲望,同时也能凭借爆点吸引到新用户的加入。以此为背景,我们以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));
}
}
解决集成问题请到Stack Overflow
关注我们,第一时间了解 HMS Core 最新技术资讯~
眼镜选款新方法,用AR+Scene技术实现3D虚拟试戴的更多相关文章
- 【C#代码实战】群蚁算法理论与实践全攻略——旅行商等路径优化问题的新方法
若干年前读研的时候,学院有一个教授,专门做群蚁算法的,很厉害,偶尔了解了一点点.感觉也是生物智能的一个体现,和遗传算法.神经网络有异曲同工之妙.只不过当时没有实际需求学习,所以没去研究.最近有一个这样 ...
- 厉害了,摩托罗拉发布全球首款支持VR和AR的手机MotoZ
目前支持谷歌daydream移动VR生态系统的手机型号并不多,除了谷歌自家的Pixel系列外,还有华为推出的mate9系列.如今又到了一位新成员,即升级到Android 7.0后的Moto Z. 更为 ...
- SWF在线绘本批量制作高质量PDF的新方法(重点在批量制作)
SWF在线绘本批量制作高质量PDF的新方法(重点在批量制作) 2012-12-21 未来决定... http://www.ebama.net/thread-107643-1-1.html ...
- 【Android】一种提高Android应用进程存活率新方法
[Android]一种提高Android应用进程存活率新方法 SkySeraph Jun. 19st 2016 Email:skyseraph00@163.com 更多精彩请直接访问SkySeraph ...
- Execel(导出新方法):
#region 新方法 //var sbHtml = new StringBuilder(); //sbHtml.Append("<table border='1' cellspaci ...
- 交换ctrl和caps_loack的新方法
交换ctrl和caps_loack的新方法 Table of Contents 1 过程 1 过程 debian用了几年,由于emacs的关系,一直将右ctrl和caps_lock键交换,使用的是xm ...
- MVC导出数据到EXCEL新方法:将视图或分部视图转换为HTML后再直接返回FileResult
导出EXCEL方法总结 MVC导出数据到EXCEL的方法有很多种,常见的是: 1.采用EXCEL COM组件来动态生成XLS文件并保存到服务器上,然后转到该文件存放路径即可: 优点:可设置丰富的EXC ...
- 用javascript得到客户端IP的新方法
javascript得到客户端IP的新方法 很久以来,我都是经过http://fw.qq.com/ipaddress来得到客户端用户的IP,这个方法简单.快速.实用 . 我们调用它的写法是: < ...
- iOS5中UIViewController的新方法
iOS5中UIViewController的新方法 前言 在苹果的 WWDC2011 大会视频的<Session 101 - What's New in Cocoa> 和<Sessi ...
随机推荐
- js 跨域请求失败
注:错误返回:Failed to load http://xxxxxxxxxxx: No 'Access-Control-Allow-Origin' header is present on the ...
- Netty 源码分析系列(一)Netty 概述
前言 关于Netty的学习,最近看了不少有关视频和书籍,也收获不少,希望把我知道的分享给你们,一起加油,一起成长.前面我们对 Java IO.BIO.NIO. AIO进行了分析,相关文章链接如下: 深 ...
- RecyclerView跳转到指定位置的几种种方式
Mark一下: http://blog.csdn.net/huangxiaoguo1/article/details/53706971 https://www.jianshu.com/p/3acc39 ...
- ABC133简要题解
A T or T TOT 模拟即可 B Good Distance \(O(n^2)\) 模拟. C Remainder Minimization 2019 把 \(r\) 变成 \(l+2019\) ...
- springboot集成swagger的pom依赖
pom依赖加入以下内容 //版本一致做个属性 <properties> <swagger.version>2.6.1</swagger.version> </ ...
- JavaWeb——CSS总结
CSS 记得大一下学期那会参加基地后就开始跟师兄师姐接触前端了,利用业余时间在站看各种视频.由于初次认知并且时间也能不固定集中,也存在跳跃式学习等等原因,这就导致了好多知识点要么漏掉要么没记全,只能懂 ...
- uniapp scroll-view 组件横向滑动失效(ios问题出的最多)
注意事项(做好以下几点就很难出问题): 一.scroll-view组件必须有固定高度,不可出现高度坍塌或让高度消失等现象;(重中之重) 二.一般问题出的多的就是在nvue环境下去使用的scroll-v ...
- jpa 指定字段内容按照顺序排序(orderBy when then)
query.orderBy( criteriaBuilder.desc( criteriaBuilder.selectCase() .when(criteriaBuilder.equal(root.g ...
- 使用SuperSocket实现自定义协议C/S设计
一.简介: 21世纪是出于互联网+的时代,许多传统行业和硬件挂钩的产业也逐步转向了系统集成智能化,简单来说就是需要软硬件的结合.这时,软硬件通讯便是这里面最主要的技术点,我们需要做到的是让硬件能够听懂 ...
- excel控件只为简单写入数据表--github找到ExcelUtil笔记
github地址 https://github.com/SargerasWang/ExcelUtil 文档地址 https://sargeraswang.com/blog/2018/11/27/exc ...