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:

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:

Hardware Requirements

Software Requirements

Required Knowledge

Opening HwAREngineDemo Sample Program

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

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

  1. 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.)
  2. 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.

  3. 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.

  4. 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.

Modifying Virtual Object Rendering Factors

Add the interface for updating the scaling factor and rotation angle to world/rendering/ 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/ 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(; mSearchingTextView = activity.findViewById(; // Set the rotation and scaling factors. initSeekBar(activity); } private void initSeekBar(Activity activity) { mScaleSeekBar = activity.findViewById(; 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(; 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.

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

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

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

Code copied