Key Terms

Sceneform is a node-based graph that does quite a few things. From handling plane detection and allowing us to set up nodes on the scene (can be zero or more nodes), to performing hit testing, and beyond.

Hit testing is a way of transforming 2D coordinates from the screen where the user taps into their 3D projection in the AR scene. Imagine a ray light originating from the tapped point on the screen and going through the camera view of your phone. The first point of intersection of this imaginary ray of light with the plane surface of the AR scene gives us the world position. We can then set up our nodes on this world position.

In the previous section, we discussed terms nodes, transformable nodes, and more. Let’s define them here:

Scene —where our 3D objects are rendered. It has a tree-like data structure.

—where our 3D objects are rendered. It has a tree-like data structure. Node — an object that contains all the information required to be rendered on the screen. It can contain a renderable property on which we can set our 3D assets and material shapes. Also, it consists of a collisionShape that helps detect collisions. Nodes can have zero or more child nodes and one parent.

— an object that contains all the information required to be rendered on the screen. It can contain a property on which we can set our 3D assets and material shapes. Also, it consists of a that helps detect collisions. Nodes can have zero or more child nodes and one parent. Renderable — 3D models that can be created from asset files (OBJ, FBX, glTF) as shown here or using MaterialFactory or ShapeFactory to create basic shapes such as cubes, spheres, and cylinders with textures

— 3D models that can be created from asset files (OBJ, FBX, glTF) as shown here or using or to create basic shapes such as cubes, spheres, and cylinders with textures Anchor Nodes — These types of nodes are assigned a particular position in the AR world space. Typically, this is the first node that’s placed once a plane is detected.

— These types of nodes are assigned a particular position in the AR world space. Typically, this is the first node that’s placed once a plane is detected. Transformable Nodes — As the name suggests, they can be transformed. These have the ability to scale, translate, and rotate in the AR scene by reacting to user gestures.

— As the name suggests, they can be transformed. These have the ability to scale, translate, and rotate in the AR scene by reacting to user gestures. Pose — Provides the position and orientation of the node in the scene. We can also determine the pose of the camera and find the distance between the camera and an anchor node in the scene.

Once you add the ArFragment to your Activity’s layout, it does the groundwork of setting up the ARCore session and the ArSceneView once it’s checked that the device passes the ARCore compatibility test.

setOnTapArPlaneListener is set in the ArFragment to listen to changes whenever any click event takes place on the detected plane. By using the HitResult returned from the listener, we can add anchors to the plane over which we’ll set our nodes.

MaterialFactory and ShapeFactory

The following code shows how to create a renderable with a shape and put it on the node:

MaterialFactory.makeOpaqueWithColor(this, Color(android.graphics.Color.YELLOW))

.thenAccept { material ->

val vector3 = Vector3(0.05f, 0.05f, 0.05f)

cubeRenderable = ShapeFactory.makeCube(vector3, Vector3.zero(), material)





cubeRenderable!!.isShadowCaster = false

cubeRenderable!!.isShadowReceiver = false



}

MaterialFactory lets us define the material type — metallic, color, opacity and more—and put it on the ShapeFactory instance. The ShapeFactory class allows us to define the size of the shape. The functions for setting up a sphere (with radius) and a cylinder (with radius and height) are:

ShapeFactory.makeCylinder(0.1f,0.3f,Vector3.zero(), material) ShapeFactory.makeSphere(0.1f, Vector3.zero(), material)

Here’s an illustration of what it looks like when you place a node with a renderable set on the ArSceneView .

The dots you’re seeing are feature point on the plane where an anchor can be placed.

The circle around the node is displayed when the user selects it or is using the select() method programmatically.

The following code snippet showcases how to add the renderable we created above to a transformable node on a plane:

arFragment!!.setOnTapArPlaneListener { hitResult, plane, motionEvent -> val anchor = hitResult.createAnchor()

val anchorNode = AnchorNode(anchor)

anchorNode.setParent(arFragment!!.arSceneView.scene) val node = TransformableNode(arFragment!!.transformationSystem)

node.renderable = cubeRenderable

node.setParent(anchorNode)



arFragment!!.arSceneView.scene.addChild(anchorNode)

node.select() }

As a result, upon tapping on a plane, we can add a transformable node that can be moved about in the boundaries of that plane.

Now that we’ve had a good look at the different components of Sceneform, let’s build an ARCore-based Android application that detects collisions and computes the distance between two transformable nodes.