HUAWEI AR Engine Demo Development

1. Introduction

This codelab guides you through changing the color, initial angle, and scaling of the AR logo by modifying the source code in the demo.

What is WorldAR

HUAWEI AR Engine is a platform for building augmented reality apps on Huawei smartphones. WorldAR is a subsystem of the HUAWEI AR Engine and allows your app to:

Support the motion tracking capability, so that the device can perceive and track its location and pose relative to the real world.
Understand the surrounding environment, so that the device can detect and identify the size and location of various planes (such as desktop, wall, etc.).
Estimate the illumination, so that the device can know the lighting intensity in the current environment.

What You Will Create

In this codelab, you will create an app that is able to scan the surrounding environment using the camera, identify the plane in the environment, place a virtual object on the plane, and select and drag the object.

What You Will Learn

In this codelab, you will learn how to:

Integrate HUAWEI AR Engine in an app.
Zoom in on and out of a 3D model in the real world.
Rotate a 3D model in the real world.

2. What You Will Need

Hardware Requirements

A computer(desktop or laptop).
A Huawei phone that supports HUAWEI AR Engine, can be connected to a computer via a USB cable, and whose camera works properly.

Software Requirements

Java JDK (1.8 or later).
Android Studio (3.1 or later).
- minSdkVersion: 26 or later
- targetSdkVersion: 27 (recommended)
- compileSdkVersion: 28 (recommended)
- Gradle version: 6.1.1 or later (recommended)
Test devices: see Software and Hardware Requirements of AR Engine Features.
If you need to use multiple HMS Core kits, use the latest versions required for these kits.
Latest HUAWEI AR Engine SDK, which is available on HUAWEI Developers.
Latest HUAWEI AR Engine APK, which is available in HUAWEI AppGallery and has been installed on the phone.

Required Knowledge

Android development basics
OpenGL development basics

3. Setting Environment

Opening HwAREngineDemo Sample Program

Download hms-AREngine-demo-master.zip from Sample Code and decompress it.
Start Android Studio and choose to open an existing Android Studio project.
Open the hms-AREngine-demo-master directory and wait until the Android Studio completes project synchronization.

4. Creating Your App

Updating AndroidManifest.xml

Apply for the camera permission for the app.


<!--Declare the camera permission.--> 
<uses-permission android:name="android.permission.CAMERA" />

Building and Running the Program

Use a physical device to run the sample program in the codelab (Android Emulator is not supported). A HUAWEI P40 Pro is used here as an example. Connect the phone to the development device through USB. (Open Developer options and enable USB debugging. When the trusted computer is displayed on the mobile phone, agree and proceed to the next step.)
Run the following command to check whether the device is connected to the computer:
```
adb devices
```
This will connect to your devices and output the device serial number.
In Android Studio, select and run HwAREngineDemo. Select your device as the deployment target and click OK to start the sample app on the device.
Grant the requested permission on your device, which will allow the device to start the rear camera to scan the surrounding environment. After a plane is scanned, click the plane to add virtual objects to the real world. You can also click the added virtual object and drag it on the plane.

5. Customizing the App

Modifying Virtual Object Rendering Factors

Add the interface for updating the scaling factor and rotation angle to world/rendering/VirtualObject.java and provide the updated values before rendering.


public void updateScaleFactor(float scaleFactor){
    // The scaling factor is set externally based on the 0.15f scaling.
    mScaleFactor = 0.15f * scaleFactor;
}

public void updateRotation(float angle) {
    // Set the rotation angle externally.
    mRotationAngle = angle;
}
public float[] getModelAnchorMatrix() {
    float[] modelMatrix = new float[MATRIX_SIZE];
    if (mArAnchor != null) {
        mArAnchor.getPose().toMatrix(modelMatrix, 0);
    } else {
        Matrix.setIdentityM(modelMatrix, 0);
    }
    float[] rets = new float[MATRIX_SIZE];
    Matrix.multiplyMM(rets, 0, modelMatrix, 0, mModelMatrix, 0);
    // Rotate the model around the y axis at a specified angle.
    Matrix.rotateM(rets, 0, mRotationAngle, 0f, 1f, 0f);
    // Scale the x, y, and z dimensions of the model according to the specified factor.
    if (mScaleFactor != 0) {
        Matrix.scaleM(rets, 0, mScaleFactor, mScaleFactor, mScaleFactor);
    }
    return rets;
}

Adding SeekBars on the Interface

Two SeekBars are added to the main interface of the app to control the scaling and rotation parameters respectively. Add the following code to the res/layout/world_java_activity_main.xml file.


     <SeekBar
        android:id="@+id/scaleSeekBar"
        android:layout_width="300dp"
        android:layout_height="40dp"
        android:layout_alignParentEnd="true"
        android:min="1"
        android:max="400"
        android:progress="150"/>
    <SeekBar
        android:id="@+id/rotationSeekBar"
        android:layout_width="300dp"
        android:layout_height="40dp"
        android:layout_below="@id/scaleSeekBar"
        android:layout_alignParentEnd="true"
        android:min="0"
        android:max="360"
        android:progress="180"/>

Setting Rotation and Scaling Factors

Obtain the corresponding SeekBar from world/rendering/WorldRenderManager.java and set it to the selected model. The implementation code is as follows.


public WorldRenderManager(Activity activity, Context context) {
    mActivity = activity;
    mContext = context;
    mTextView = activity.findViewById(R.id.wordTextView);
    mSearchingTextView = activity.findViewById(R.id.searchingTextView);
    // Set the rotation and scaling factors.
    initSeekBar(activity);
}
private void initSeekBar(Activity activity) {
    mScaleSeekBar = activity.findViewById(R.id.scaleSeekBar);
    mScaleSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            if (mSelectedObj != null) {
                mSelectedObj.updateScaleFactor(progress / (float) 150);
            }
        }
...
    });
    mRotationSeekBar = activity.findViewById(R.id.rotationSeekBar);
    mRotationSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            if (mSelectedObj != null) {
                mSelectedObj.updateRotation(progress);
            }
        }
...
    });
}

Compiling and Running the Modified Program

Run the program in Android Studio and select your physical device. Move your device to scan the surrounding environment. After a plane is detected, touch the plane to add virtual objects to the real world. You can also select the virtual object and drag the SeekBar on the page to have the model zoomed in or out and rotated.

6. Congratulations

Well done. You have successfully completed this codelab and learned how to:

Integrate HUAWEI AR Engine in an app.
Zoom in on and out of a 3D model in the real world.
Rotate a 3D model in the real world.

You can also check other demos in the sample project to learn more about the capabilities of HUAWEI AR Engine.

7. References

You can download the sample code project from Sample Code and extend it.

Back