【多服务场景化解决方案】AR虚拟技术助力智能家装

阅读原文时间：2023年07月09日阅读：1

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或以上版本的华为手机。

提前准备如下软件：

Android Studio 3.6.X
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();
    }