【多服务场景化解决方案】AR虚拟技术助力智能家装
1 、介绍
总览
本应用采用了华为图形引擎服务的AR虚拟技术,您可以在手机相机里摆放想要购置的家具家电,交互式体验让您可以轻松操控它们的3D图例,以此来确定这些家具家电是否适合摆放在您的家里。
特性 |
HMS Core Kits |
统一登录帐号:华为帐号 |
帐号服务 |
摆放3D物品,虚拟装扮爱家。 |
图形引擎服务 |
您将建立什么
在本次codelab中,您将建立一个集成华为帐号服务以及图形引擎服务的装修应用程序。您的应用将包含:
华为帐号登录功能。
物品种类选择功能。
在AR相机中放置和移动选择的3D物品、放大、缩小等操作。
您将会学到什么
在本次codelab中,您将学习到:
如何在AppGallery Connect中配置项目信息。
如果集成华为帐号服务以及图形引擎服务。
如何使用华为帐号服务进行登录。
如何使用图形引擎服务在虚拟房屋中展示3D物品。
2、您需要什么
硬件需求
提前准备如下硬件:
一台Windows 10台式或笔记本电脑。
一部集成HMS Core (APK) 5.0.0.300或以上版本及EMUI 9.1或以上版本的华为手机。
软件需求
提前准备如下软件:
JDK 1.8或以上版本
安卓SDK平台(API 23或以上版本)
Gradle 5.4.1或以上版本
3、能力接入准备
参考如下:
4、开通服务
点击“项目设置”中“API管理”页签,开通如下服务的API:
帐号服务
认证服务
说明:以上API默认已开通。如未开通,请手动开通。
5、设计界面
登录界面支持华为帐号登录,获取用户名和头像图片地址,并展示在头像区域中。
主页按类别展示物品。您可以按需选择物品装扮房屋。
Product Details页面展示产品详情。您可以添加物品到购物车或者获取该物品的3D视图。
3D视图打开支持ARView的相机。相机检测平面,以点状图片显示该平面,您可以点击平面摆放物品。此外,还可以在3D视图中放大、缩小、移动、旋转物品。
6、集成帐号服务
华为账号服务登录后,应用可以访问帐号信息,例如邮箱地址、用户名、头像等。一旦使用可信赖的华为帐号服务登录,无需再验证用户邮箱或电话号码。
应用集成帐号服务验证用户的华为帐号并登录用户。
Java
使用认证服务登录。
AccountAuthParams authParams =
new AccountAuthParamsHelper(AccountAuthParams.DEFAULT_AUTH_REQUEST_PARAM)
.setAccessToken()
.createParams();
AccountAuthService accountAuthService =
AccountAuthManager.getService(this, authParams);
startActivityForResult(accountAuthService.getSignInIntent(), 1111);
@Override
protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == 1111) {
Task<AuthAccount> authAccountTask = AccountAuthManager.parseAuthResultFromIntent(data);
if (authAccountTask.isSuccessful()) {
AuthAccount authAccount = authAccountTask.getResult();
sharedPreferenceUtilClass = SharedPreferenceUtilClass.getInstance(LoginAuthenticationActivity.this);
sharedPreferenceUtilClass.saveData(Constants.USER_EMAIL, authAccount.getEmail());
sharedPreferenceUtilClass.saveData(Constants.USER_NAME, authAccount.getDisplayName());
sharedPreferenceUtilClass.saveData(Constants.USER_PROFILE_IMAGE, authAccount.getAvatarUri().toString());
Log.i("TAG", "accessToken:" + authAccount.getAccessToken());
useTokenToAuthorize(authAccount.getAccessToken());
}
}
}
结果
7、集成图形引擎服务
华为图形引擎服务是一个高性能、低功耗、轻量级渲染引擎,提供高级描述性API,便于编辑、操作和渲染3D资源。
应用集成图形引擎服务,使用ARView渲染普通AR场景。
Xml
在布局中添加图形引擎服务的ARView。
<com.huawei.hms.scene.sdk.ARView
android:id="@+id/ar_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.huawei.hms.scene.sdk.ARView>
Java
检查ARPermission,按需请求权限。并初始化图形引擎服务。
if (!PermissionUtil.checkARPermissions(ViewProduct.this)) {
PermissionUtil.requestARPermissions(ViewProduct.this);
}
if (!InitializeHelper.getInstance().isInitialized()) {
Toast.makeText(ViewProduct.this, "SceneKit initializing", Toast.LENGTH_SHORT).show();
InitializeHelper.getInstance().initialize(ViewProduct.this);
return;
}
开通ARView平面展示。
arView.enablePlaneDisplay(true);
加载素材。
if (testModel != null) {
return;
}
Model.builder()
.setUri(Uri.parse("Furniture/"+threeDFileName))
.load(getApplicationContext(), new Resource.OnLoadEventListener<Model>() {
@Override
public void onLoaded(Model model) {
Toast.makeText(TryProduct.this, "load success.", Toast.LENGTH_SHORT).show();
testModel = model;
}
@Override
public void onException(Exception exception) {
Toast.makeText(TryProduct.this, exception.getMessage(), Toast.LENGTH_SHORT).show();
}
});
添加相机和灯光组件。
Node lightNode = arView.getScene().createNode();
lightNode.addComponent(Light.descriptor())
.setType(Light.Type.DIRECTIONAL)
.setIntensity(30.f);
arView.addOnTapPlaneEventListener(tapPlaneResult -> {
node = arView.getScene().createNodeFromModel(testModel);
node.getComponent(Transform.descriptor())
.scale(new Vector3(0.01f, 0.01f, 0.01f));
node.traverseDescendants(des -> {
Renderable renderableComponent = des.getComponent(Renderable.descriptor());
if (renderableComponent != null) {
renderableComponent.setCastShadow(true).setReceiveShadow(true);
}
});
Animator animator = node.getComponent(Animator.descriptor());
if (animator != null) {
animator.play(animator.getAnimations().get(0));
}
ARNode arNode = tapPlaneResult.createARNode(node);
arView.recordARNode(arNode);
});
依次在ARView调用onResume()、onPause()、onDestroy()方法。
@Override
protected void onResume() {
super.onResume();
arView.resume();
}
@Override
protected void onPause() {
super.onPause();
arView.pause();
}
@Override
protected void onDestroy() {
super.onDestroy();
arView.destroy();
}
结果
华为图形引擎服务的ARView检测到点状平面后,您可以在该平面摆放、放大、缩小、移动、或旋转3D物品来确认效果。下图展示空调和长凳添加到视图上的效果。
您可以使用本codelab和图形引擎服务的ARView来装扮您家。
8、恭喜您
祝贺您,您已经成功构建了一个HMSHomeDecor安卓应用并学到了:
如何调用帐号服务、认证服务以及图形引擎服务的接口。
如何实现图形引擎服务的ARView服务。
如何在ARView中加载素材(3D文件或者纹路)。
9、参考文件
参考如下文件获取更多信息:
点击如下链接下载源码:
声明:本codelab实现多个HMS Core服务在单个项目中的集成,供您参考。您需要验证确保相关开源代码的安全合法合规。
欲了解更多更全技术文章,欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh
【多服务场景化解决方案】AR虚拟技术助力智能家装的更多相关文章
- 【多服务场景化解决方案】智能家居(UrbanHome)
介绍 UrbanHome是一款提供房屋维修服务的移动应用.如有维修需求,用户可通过该应用联系所在城市的管道工,电工,保洁,漆匠,木匠,修理工等,或是搜寻导航附近的维修商店. 通过构建UrbanHo ...
- 金融即服务(FaaS),将开启场景化金融新格局
转自: https://www.iyiou.com/p/28494/fs/1 [ 亿欧导读 ] 金融即服务揭示了场景金融的实现路径,通过双向连接做一个开放的系统,按需给客户提供金融服务. 本文系作者在 ...
- 庐山真面目之十四微服务架构的Docker虚拟技术深入探究
庐山真面目之十四微服务架构的Docker虚拟技术深入探究 一.我的开场白 曾几何时,分布式的发展也影响了后来的微服务架构的实现方式.到了现在,只要涉及到互联网技术领域,就会设计一个概念,那就是微服务. ...
- 数据迁移的应用场景与解决方案Hamal
本文来自网易云社区 作者:马进 跑男热播,作为兄弟团忠实粉丝,笔者也是一到周五就如打鸡血乐不思蜀. 看着银幕中一众演员搞怪搞笑的浮夸演技,也时常感慨,这样一部看似简单真情流露的真人秀,必然饱含了许许多 ...
- 网页静态化解决方案Freemarker
序言: 沉淀了三个月,逐步将自己最近两年在公司中用到的技术和知识点,重新整理归纳了下,对比以前可以发现,现在技术更新越来越快,也越来越成熟,在互联网企业,用到的技术也更先进,更领先,比如微服务.分布式 ...
- 汇聚优质AR应用开发者,技术助力AR领域繁荣生态
本文分享于HMS Core开发者论坛<EasyAR--汇聚优质AR应用开发者,技术助力AR领域繁荣生态>采访文字稿 EasyAR空间计算平台为应用开发者提供稳定建图.定位能力和完善工具链, ...
- 阿里云场景化阿里云企业数字化转型售前方法PSA
阿里云场景化阿里云企业数字化转型售前方法PSA 目录 01 课程收获 理解企业数字化转型的概念.内涵.本质 了解企业数字化转型的要点.目标和切入点 掌握数字化转型项目售前阶段实践方法 场景化方案 阿里 ...
- Redis作为消息队列服务场景应用案例
NoSQL初探之人人都爱Redis:(3)使用Redis作为消息队列服务场景应用案例 一.消息队列场景简介 “消息”是在两台计算机间传送的数据单位.消息可以非常简单,例如只包含文本字符串:也可以更 ...
- Diy页面服务端渲染解决方案
1. 问题由来 在移动互联网电商领域,运营每天需要搭建多个促销页面来吸引用户去点击去购买,一开始程序员临时写个新页面去实现,可这些页面可以用几次就不用了,每次创建新页面去实现费时费力,而且,电商的运营 ...
随机推荐
- MySQL-配置参数时 报错:remove CMakeCache.txt and rerun cmake.On Debian/Ubuntu......
报错:remove CMakeCache.txt and rerun cmake.On Debian/Ubuntu...... 原因: 1.第一次配置参数时,不完整,出现错误!,(报错也会产生CMak ...
- MySQL-报错:Error when bootstrapping CMake:
在进行MySQL的源码安装的时候,系统上找不到合适的C编译器,GCC忘了装,莫慌,直接 yum命令装上gcc,还有gcc-C++没装的话后面也会提示错误,一起装上,,, [root@localhos ...
- HTTP 的 Content-Type 及其媒体类型(MIME)
Content-Type Content-Type 代表 HTTP 携带的文件类型,决定文件接收方或发送方将以什么形式.什么编码读取这个文件.下图,load.gif 的媒体类型就是 image/gif ...
- 开发H5程序或者小程序的时候,后端Web API项目在IISExpress调试中使用IP地址,便于开发调试
在我们开发开发H5程序或者小程序的时候,有时候需要基于内置浏览器或者微信开发者工具进行测试,这个时候可以采用默认的localhost进行访问后端接口,一般来说没什么问题,如果我们需要通过USB基座方式 ...
- 【AGC】如何使用认证服务与云数据库处理用户信息
使用场景 华为 AGC认证服务可以为应用快速构建安全可靠的用户认证系统,可以实现多种方式关联认证登录.而如何处理这些多种登录方式的用户信息,例如在应用中发布一个活动,哪些用户参加了哪一个活动,这些信 ...
- 【Java】idea同时运行多个一样的类
点击"Edit Configurations..." 在左侧选中需要重复运行的类 单击"Modify options" 选择"Allow multip ...
- Java方法总结
什么是方法 何谓方法 就是一个方法只完成一个功能,这样利于后期的扩展 例子: public static void main(String[] args) { System.out.printl ...
- 完全解析Array.apply(null, { length: 1000 })
Array.apply(null, { length: 1000 }) 点击打开视频讲解更加详细 在阅读VueJS教程时有这么段demo code: render: function (createE ...
- Python入门系列(十)一篇学会python文件处理
文件处理 在Python中处理文件的关键函数是open()函数.有四种不同的方法(模式)来打开一个文件 "r" - 读取 - 默认值.打开一个文件进行读取,如果文件不存在则出错. ...
- vscode调试thinkhphp
第一步先安装xdebug扩展,我用宝塔环境,所以一键安装 第二步.在vscode中安装插件 我的php.ini是这样的 xdebug.remote_enable = 1 xdebug.remote_a ...