As a lover of React, it was revolutionary to find out that I can use React and React Native as a platform for Augmented Reality Development!
To get acquainted with Viro, I will break down some of what's happening in the Viro Quickstart Tutorial. I'll go through some of the key elements at play, as well as introduce you to some terminology used in AR development.
AR Vocabulary
To get started, you'll need to know a few common terms:
- Target / Markers: Visual cues which trigger the display of virtual information. These can be pictures or even objects.
- Anchor: A real-world position and orientation which can be used for placing objects in an AR scene.
- Scene: The space shown through a camera to be interacted with.
There's loads more vocabulary to learn, but this should be all we need for this project.
Z - Axis
Another important concept to understand will be working with the Z-axis. We've all worked with X and Y axis, even if you didn't realize it. Remember these from school? 
X axis is simply our horizontal, Y is vertical, but Z is our depth. Working with AR, you'll need a slight understanding of this, but with this analogy, it should be clear. Going back up to the image of x and y axis here, imagine another line coming out of your computer screen, directly towards you. That's z-axis. This is what makes things "3D". X and Y being your two dimensions (2D), and Z added in to make your third dimension (3D). Here's a picture for reference.
Viro AR Project
Moving along, once the project is downloaded, along with it's dependencies, you're able to import anything you'll need from Viro.
The highlighted imports here are the ones I'll be using in the project. There loads of things that can be rendered in, and that can all be found in their documentation.
Let's go over a few basic concepts in this React Component containing our scene.
The entirety of whats rendered is wrapped in this "ViroARScene" tag.
Within this component is a full-featured 3D scene graph engine. This is also the AR equivalent to View tags in React. One or more of these Scene components are contained in a "ViroARSceneNavigator" component. In order to actually get the Scene to render, the ViroARSceneNavigator must know which scene to load up first. More on that can be found here on the Viro Scene Navigator Docs.
On line 56, you can see that I'm rendering "ViroText", which is just like the Text tag from React-Native, but for text in AR! To keep things short and sweet, I modified the original code a bit. As you can see on line 55, there's an onClick passing into the entire Scene, an onPress would also work here, and this actually just changes the text you'll see on the screen from "Hello World", to "I've been clicked", and then vice versa.
Conclusion
This is the first part of my Intro to Viro. As I continue this journey, I'll post more and more on it. From my short example, you can see that getting started and using it just like a normal React application is totally possible. Feel free to leave a comment about any more Viro aspects I should cover!
Top comments (0)