Making the app in Unity3D

In this section, I’ll be explaining the steps involved in making this project in Unity.

Step 1: Open Unity3D and create a new project named ARDraw101. Make sure to select 3D in the template section.

Step 2: After the project is created, head over to Unity->Unity Preferences->External Tools. Add the path of Android SDK and Android JDK taken from Android Studio into the respective fields.

Step 3: Go to File->Build Setting and select Android in the Platforms list. Then click Switch Platform. The Unity logo should appear in front of Android in the platforms list.

Step 4: Download the ARCore SDK for Unity from the following link:

Step 5: Right click in the Assets window->Import Package->Custom Package and select the downloaded ARCore SDK.

Step 6: Click on All and then Import in the dialog box that appears.

Step 7: The Project window should look like this.

Step 8: Go to File-> Build Settings and click on Player Settings.

Step 9: The following window will appear in the Inspector.

Step 10: In the Inspector window, configure the following settings except for Target API level, which should be set to Automatic (highest installed):

Step 11: Download and import the following package in Unity3D (similar to steps 5 and 6).

Step 12: The Project window should now look like this.

Step 13: Go to Assets->GoogleARCore->Examples->Scenes and open HelloAR scene.

Step 14: Now, for the following gameObjects: Example Controller, Plane Generator, Point Cloud, and Canvas, click on each one of them, and in the Inspector window, disable each one of them by unchecking the check box next to the top cube as shown below. This is done because these are the default components for ground plane detection and raycasting in ARCore, which are not required for this project.

Step 15: Create an empty object in Hierarchy and name it Renderer. The Hierarchy window should now look something like this:

Step 16: Add the CurvedLineRenderer component to the Renderer GameObject. In the LineRenderer component, set the value of Positions->Size to 0.

Step 17: In the Assets folder, create three new folders named Materials, Prefabs, and Scripts. The Project window should now look like this.

Step 18: Open the Materials folder and create a new material named TrailMaterial.

Step 19: Drag and drop this material into Renderer->LineRenderer->Material.

Step 20: Create a new Sphere in Hierarchy and rescale it to (0.1, 0.1, 0.1) in the Inspector window. Also add the Curved Line Point component to it and disable its MeshRenderer. The basic thing we’re doing here is instantiating new spheres at every touch and then rendering a line between consecutive spheres. When we disable the MeshRenderer, we see only the lines and not the spheres.

Step 21: Drag and drop this sphere in Prefabs folder to make it a Prefab and then delete the sphere.

Step 22: Go to the Scripts folder and create a new C# script named TrailScript. Open the script and paste the following code in it. Then add this script to the Renderer GameObject. Essentially, what this script is doing is instantiating a sphere at every touch and then rendering a line between all the spheres. Also, as the MeshRenderer of the sphere prefab is disabled, they are invisible in the final project. Then the spheres are set as children of FirstPersonCamera to anchor them in place.

e

Step 23: In the TrailScript component of Renderer GameObject, drag and drop Prefabs->Sphere to Game Object and ARCoreDevice->First Person Camera to Camera.

Step 24: Go to File->Build Settings and click on add open scenes and uncheck Scenes/SampleScene.

Step 25: Finally, build the app by pressing Ctrl.(Cmd.) + B and test it out. The final result should be as follows:

For the repository of the above project, visit the following link:

That’s it! I hope you liked this post. If you did, don’t forget to 👏 and leave a comment 💬 below.

Next Up: Adding multiple lines in the same project and adding functionality for changing color and thickness of the rendered lines.

Discuss this post on Hacker News and Reddit