Wednesday, 30 September, 2020 UTC
Summary
Will you believe me if I tell you that you can create an Augmented Reality Application without a single line of code? Will you believe me if I tell you that you can create it with your iPhone? YES, it is possible and I’m going to tell you how to do it.
For this you need an iPhone with AR compatibility and an app called “Reality Composer”.
The first step is to install Reality Composer in your iPhone. Now we are going to create an Augmented Reality ‘Birthday card’ with image recognition and 3D animations. Open Reality Composer in your iPhone and click the + icon on top right corner to create a new project.
Create New Reality Composer ProjectNow you have to select an Anchor Type for your mobile application. There are few options you can select from, Horizontal, Vertical, Image, Face and Object. For this project we are going to select “Image”.
This anchor type helps us to run an augmented reality application on a specific image you select. You can select any image you want. And this is the first look you get for Image Anchor Project.
Image Anchor ProjectThis project comes with an empty image placeholder and a 3D model top of that image placeholder. So we are going to remove this 3D model first. To manipulate this 3D model you have to click it twice, then you get a menu. From that menu you need to click the “Delete” option to remove it.
Trending AR VR Articles:
1. What can Vuzix Smart glasses mean for the current Android Developers?
2. How To Use the ARLOOPA App: A Step-by-Step Guide (2020)
3. Augmented reality for maintenance and repair
4. Top 10 Movies that Got Augmented Reality and Virtual Reality Righ
Now we are going to select our image to run our augmented reality application. Click the icon between “AR” and “…” on the top right corner called “Property”.
From property you need to select an “Image Asset” to replace the image placeholder.
Choose Image AssetWhen you select the image asset from your phone memory or cloud drive it replaces the place holder as shown in the below image.
Reality Composer comes with a 3D model library, which you can use for free. There are few interesting 3D models there. I’m going to use “Cup Cake”, “Poster”, “Balloons” and “Text” objects.
First we are going to add Cup Cake to the project. To add 3D models click “+” on the top and select any 3D models from the library and click it.
Adding 3D modelsIf the 3D model is already downloaded in your mobile it directly shows up in your application, if it’s showing a box with download progress, then it’s downloading. After the download is completed it shows up like the image below.
Select the object and it’ll show you 3 arrow heads, Green, Red and Blue and a Green circle. Using those arrow heads you can move the object to different sides. Using the circle you can scale your 3D object. You can do all those things and much more using the property menu. Just click the property icon on the top (Same icon used to change the image asset). Now you get the property menu with multiple options — Transform, Look, Physics and Accessibility. For this project we are only going to talk about the first two menu options “Transform” and “Look”.
Transform: Using this section you can Position, Rotate and Scale the object. Based on your requirement you can place the cup cake. I placed it at 0, 0, 0 position and rotation 0, 15, 0.
TransformNow lets look at the “LOOK” option ;)
Style: There are three options here — Realistic, Stylised and Iconic. I left the cup cake as stylised because it’s nice that way. Let’s discuss the “Iconic Style”. When you select iconic there are more options to work with. First option is “Material”. There are few material options to select and from other options you can select Material Colour. This is going to help us when we add balloons and other stuff to make this colourful.
Now we are going to add all the 3D models we need. Go to the library and add a Sign, then add a balloon and one text model. Next step is to place all the objects wherever you want to. First select the sign and go to properties, from transform set X and Z to 0cm and Y to 3.55cm. Depending on the cupcake size Y value may change. From look keep it as “Rectangle” and Mounting as “Single” and you can change others the way you need the sign to look like. Next, we are going to change the text in the sign. From the properties add a text you want, may be a number which would represent the age of the person you are going to wish. That is the only property we are going to set for the sign.
Now let’s move to balloons, click twice on the balloons and select duplicate. continue this multiple times, so you can have multiple balloons. Then for each balloon, go to property and select style “Iconic”, and material “Plastic” then change the colour. Continue this process for all the balloons. Now using arrow heads move the balloons to different positions you want.
Next let’s move to the Text model, go to properties, select “Add Background”, select one of the options from there. Change “Text Colour” and change “Background Colour”. Change text to “HAPPY”. There are more options you can change. Close the property option and double click the text model and select “Duplicate” then select the second text model and change the text to “BIRTHDAY”. Now place them in different positions you want. Now we have all the models in the right places like this.
Let’s add some behaviours to these models.
First click “…” on the top right hand corner and click Behaviours. There are 7 behaviours in this lists,
- Tap & Flip -> This will flip the object after tapping.
- Tap & Play Sound -> This will play a sound from the object after tapping.
- Tap & Add Force -> This will add impulse force after tapping.
- Start Hidden -> This will hide objects on scene start.
- Wait & Show ->This will show the object after 2 seconds.
- Proximity & Jiggle -> This will jiggle object when within the proximity.
- Custom -> This will allow you to create your own custom behaviour.
First we are going to select “Start Hidden”:
When you select a behaviour there is a pop up going to show up in your work area and it says “Select the Affected Objects for the Hide Action”. So we need to select all the objects and click “Done”. Keep the Duration as 0 sec, So all the objects will be hidden when it starts.
When you select a behaviour there is a pop up going to show up in your work area and it says “Select the Affected Objects for the Hide Action”. So we need to select all the objects and click “Done”. Keep the Duration as 0 sec, So all the objects will be hidden when it starts.
Now let’s add behaviours to other objects. So click behaviour and select custom. First thing you need to select is the “Trigger”. There are few triggers.
- Tap -> Triggers when the objects are tapped.
- Scene Start -> Triggers when the scene start.
- Proximity To Camera -> Triggers when in proximity to the camera.
- Collide -> Triggers when specified objects are collied.
- Notification -> Define a Notification trigger in Xcode.
For the last trigger you need to create the application using XCode. For our project we are only going to use Scene Start.
Now we are going to add actions to all the models:
The Action we are going to add is called Show. For this action we are using the cup cake and the sign as affected objects. Let’s set the duration to 2 seconds and change motion type to “Scale Big”. Then add another show action and select all the balloons, set the duration to 3 seconds and select motion type Pop.
Now we have the cupcake and balloons ready. Next we are going to set action to the “HAPPY BIRTHDAY” text. Add another show action and select “HAPPY” text. Set the duration to 1 second and motion type to Move from Above and set the style as Playful. You can change the distance also but I’m going to keep it as 1m. Then let’s do the same thing to “BIRTHDAY” text, but I’m going to change only the motion type to Move from Front.
Everything is done now and your augmented reality birthday wish is ready to send. Before you send that, you can preview. Just click the play button on the top of the screen. It shows you how the behaviours and actions will be played. If you are satisfied with the output you can set it as an augmented reality application or if you need to customise the action, you can go back and edit them. When you add actions there will be another play button from which you can play every action individually and preview. To get the full AR experience, click AR button on the top menu and test with the birthday card image.
https://medium.com/media/bb1dbc930d83567ea69991fda8206840/hrefTo send this to your friend, click “…” menu and click export.
PS: If you just want to create AR birthday card without image recognition, select different Anchor Type like Horizontal and follow same steps except selecting image asset.
Don’t forget to give us your 👏 !
https://medium.com/media/1e1f2ee7654748bb938735cbca6f0fd3/hrefCreate an Augmented Reality Application without a single line of code. was originally published in AR/VR Journey: Augmented & Virtual Reality Magazine on Medium, where people are continuing the conversation by highlighting and responding to this story.