Building ARCore apps using Sceneform — Part 4

Hello AR using SceneForm II

Image credits — to me :-P

In this following series, we’ll learn about the fundamentals of Augmented Reality, ARCore SDK, Sceneform Framework — using simple examples. You will be walking away with an AR app at the end of this series.

Series Pit Stops

Prerequisites

Part 3— Hello AR using SceneForm I

Android development experience (SDK, library usage, Fragment etc.)

Kotlin experience (codebase will be in Kotlin)

ARCore supported device or the emulator supporting it

We created ArFragment to detect planes. Let’s continue from where we left.

Step 9: Adding object

Since our ArFragment detects the plane, initially, after that we should be able to place the object.

How do we do this? After the plane is detected, we add the object to the center of the screen — provided you keep the detected plane to the center of the screen. (I know it’s not the right way, in future will add a pointer on the screen so that you can place it right. Let’s keep it simple for now)

Let me summarise each function that we’re invoking

addObject() — we’re getting the Uri of the model, then identifying the screen center and performing hit test on that particular point. If it is trackable, then we call placeObject() . Hit test is nothing but if the plane is detected at the particular point or not.

placeObject() — As we saw earlier what Sceneform API provides, Renderable? remember? This API allows us to load the model asynchronously and provides a flexible way to handle errors (like Rx). This method should be extremely readable for you. If it’s successful, we call addToNode() .

addToNode() — This method accepts 3 parameters : Renderable , Anchor and ArFragment . Anchor is nothing but the position where the object need to be placed. In other words, in our case, center of the screen where the plane is tracked.

Node contains all the information Sceneform needs to render it (including its position, orientation, and renderable object) as well as interact with it (including its collision shape and event listeners). Nodes can be added to other nodes, forming a parent-child relationship. When a node is a child of another node, it moves, rotates, and scales with its parent — like how your arms move when your body moves. A node can have multiple children, but only one parent, thus forming a tree-like structure. This structure is known as the scene graph.

We’re creating 2 Nodes here : AnchorNode and TransformableNode

AnchorNode — To create an anchor, so that the object stays in the particular instructed position. Our case, tracked plane with screen center

TransformableNode — To translate and scale our model and also a selector.

We’re setting the renderable to the TransformableNode , then assigning the parent as the AnchorNode. Which means to put the model in that anchor position and also it should be scalable and transferable within the place.

Step 10: Run!

Yes! that’s the final step! Run and see for yourself!

If not like the above Gif, you will definitely see something like this below :-D

Bonus: Make the heart rotate!

Yes, why not? let’s make it rotate. In order to make it rotate, we need to create a new Node called RotatingNode and add our functionality. Create a separate class as RotatingNode and add the following code.

The explanation for this class is for another time, but let’s see how to use this class to make our model rotate.

Make the above changes to the addToScene() in your MainActivity . Using RotatingNode , we’re assigning our renderable to it and then creating a child node and assigning our transformableNode to it. Finally anchorNode as parent to our rotatingNode

Run and check for yourself ! Start spreading love !

Project

Refer to the project if you run across any issues. Don’t forget to give a star to the project

Summary

We placed the object on the scene, with the condition screen center && with detected plane.

We also walked through the node and renderable management.

Finally, we also made our model rotate.

End Note

Hope you enjoyed the post and building your first AR app. I’ll be posting more about ARCore and Sceneform henceforth. So stay tuned.