How to Create AR Draw/Doodling in Unity3D — AR Foundation

Welcome to the tutorial on developing AR drawing and doodling using Unity3D and AR Foundation, without the need for extra plugins.

https://youtu.be/XZNU8Bd_nfU

If you've ever admired the Google Justline app and wanted to create something similar, follow along with this step-by-step guide and explore the exciting world of AR development. Let's unlock the potential of augmented reality and unleash your creativity!

1. Set up the Unity 3D Project:

- Open a new Unity 3D project.

- Modify the settings and platform for the Android build.

2. Create the Scene:

- Create a new scene in Unity.

- Import ARFoundation and ARCore XR Plugin.

- Add ARSession and ARSessionOrigin to the scene.

3. Create the Canvas:

- Create a new Canvas object.

- Add a Panel as a child of the Canvas.

- Set the color of the Image component of the Panel to transparent.

4. Set up the Line Objects:

- Create two empty GameObjects named Line and LinePool.

- Attach the Line Renderer component to the Line GameObject.

- Adjust the Line Renderer settings according to the provided screenshot.

- Create a prefab of the Line object and remove it from the scene.

5. Create the Line Manager:

- Create a new GameObject named LineManager.

- Attach the necessary scripts to the LineManager object.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ARDraw : MonoBehaviour
{
    Camera arCamera;

    Vector3 anchor = new Vector3(0,0,0.3f);

    bool anchorUpdate = false; //should anchor update or not

    public GameObject linePrefab; //prefab which genrate the line for user

    LineRenderer lineRenderer; //LineRenderer which connects and generate line

    public List<LineRenderer> lineList = new List<LineRenderer>(); //List of lines drawn

    public Transform linePool; //parent object
    
    public bool use; //code is in use or not

    public bool startLine; //already started line or not


    void Start()
    {
        arCamera = GameObject.Find("AR Camera").GetComponent<Camera>();
    }

    void Update()
    {
        if (use)
        {
            if (startLine)
            {   
                UpdateAnchor();
                DrawLinewContinue();
            }
        }
    }

    void UpdateAnchor()
    {   
        if(anchorUpdate)
        {
            Vector3 temp = Input.mousePosition;
            temp.z = 0.3f; //offset
            anchor = arCamera.ScreenToWorldPoint(temp);
        }
    }


    public void MakeLineRenderer()
    {
        GameObject tempLine = Instantiate(linePrefab);
        tempLine.transform.SetParent(linePool);
        tempLine.transform.position = Vector3.zero;
        tempLine.transform.localScale = new Vector3(1, 1, 1);
        
        anchorUpdate = true;
        UpdateAnchor();

        lineRenderer = tempLine.GetComponent<LineRenderer>();
        lineRenderer.positionCount = 1;
        lineRenderer.SetPosition(0, anchor);

        startLine = true;
        lineList.Add(lineRenderer);
    }
    
    
    public void DrawLinewContinue()
    {
        lineRenderer.positionCount = lineRenderer.positionCount + 1;
        lineRenderer.SetPosition(lineRenderer.positionCount - 1, anchor);
    }

    //to start drawing line
    public void StartDrawLine()
    {
        use = true;

        if (!startLine)
        {
            MakeLineRenderer();
        }
    }

    //to End the line which user started drawing
    public void StopDrawLine()
    {
        use = false;
        startLine = false;
        lineRenderer = null;
        
        anchorUpdate = false;
    }

    //To Undo Last Drawn Line
    public void Undo()
    {
        LineRenderer undo = lineList[lineList.Count-1];
        Destroy(undo.gameObject);
        lineList.RemoveAt(lineList.Count - 1);
    }

    //To clear all the lines
    public void ClearScreen()
    {
        foreach (LineRenderer item in lineList)
        {
            Destroy(item.gameObject);
        }
        lineList.Clear();
    }

    
}

- Reference LinePool and Line (prefab) in the scripts.

6. Configure Event Triggers:

- Add an EventTrigger component to the Panel object.

- Configure the Event Trigger to call the functions as shown in the provided screenshot.

7. Test and Preview:

- Play the scene in Unity editor to test the drawing functionality.

- Verify that you can draw on the scene as demonstrated in the provided GIF.

8. Build and Expand:

• Build the APK for deployment on Android devices.
• Further customize the features, such as width and color changes, based on your preferences. Also, Refer to the provided Git repository for additional resources and examples. Link

Conclusion:

Congratulations! You’ve successfully created an AR drawing and doodling experience using Unity3D and AR Foundation. With the knowledge gained from this tutorial, you can now explore further and add more advanced features to your AR projects. Enjoy unleashing your creativity in the world of augmented reality!

#ARdraw #ARdoodling