9. Hit Testing & DOM Overlay

This is a series on using WebXR to build immersive content. To access the other blogs in the series, follow this link.

We’ll first go over some basics of Hit Testing and DOM Overlay. Finally, we’ll see an example that encompasses both of them.

Hit Testing:

Hit Testing is a WebXR Device API that gives us a means of placing virtual objects in a real-world camera view.

You can check out a demo of hit testing here. It is well-documented with proper comments. You can test this with an Android phone and a Chrome (Beta) v81+ browser.

Hit Testing

In the demo, you can see a blue circle which moves along with the device. This circle is the intersection between an imaginary line from your device to the point in the environment. As it finds intersection points, it appears to snap to surfaces such as floors, table tops, and walls because hit testing provides the position and orientation of the intersection point. This circle is known as reticle.

Now, if we tap the screen the dinosaur is placed on the surface at the reticle location oriented vertically to the surface at the reticle point, regardless of where you tapped the screen.

We can use the ar-hit-test component provided alongside the demo with the <a-entity> representing our reticle to bring hit-testing into our project.

<a-entity gltf-model=”#reticle” scale=”0.8 0.8 0.8" position=”0 0 -2" ar-hit-test></a-entity>

DOM Overlay:

Suppose we need an exit button to come out of our AR session. Now, a button is a 2D element which we need to render on our scene. So, the button here is an example of an interactive 2D web content.

DOM Overlay allows us to show interactive 2D web content during an immersive WebXR session.

The source code for an exit button using DOM Overlay is provided here.

Example:

Coming to the example, I recently created a Glitch project for a heart model.

Open the link in your smartphone and press Show → In a New Window. Now press the AR button on the bottom-right corner. You will see this heart model on your screen.

This is what appears in AR mode. You can see my room in the background and the model with the reticle just below it. Also, you can see the buttons for our music player and a button for exiting the AR session.

It encompasses all the learnings of this entire blog series. It has multiple features like:

• Hit Testing for moving the heart model. You can see the reticle at the bottom of our heart model in the image to the right.
• DOM Overlay for displaying various buttons. You can see the 5 buttons at the bottom of our heart model in the image to the right.
• Custom components for creating a music player, hiding environment in AR mode, adding shadows in AR mode etc.
• The music player has the options of play, pause and switch to next or previous songs. As you switch the songs, rotation of the heart model also changes by 90 degrees each time.

YoungSphere crowdsources immersive content for K12 education. Contribute your AR/VR content at www.youngsphere.com to earn monetary credits.