Augmented Reality – Fire Effect using Vuforia and Unity

Share the Post

In this tutorial, I will show you how to create an augmented reality – fire effect using Vuforia and Unity. 

This tutorial covers the configuration and setup of Vuforia in Unity, the creation of an image target database and adding image targets, creating a fire particle effect, adding the fire effect to the image target, and finally exporting the application to an Android phone.

https://faramira.com/wp-content/uploads/2020/06/WhatsApp-Video-2020-06-02-at-16.41.58.mp4

View the entire tutorial in Youtube


Read a detailed tutorial on Solving 8 puzzle problem using A* star search

Download the 8 Puzzle Unlimited App from Google Play.


Step 1. Register an account with Vuforia

Open your favourite browser and visit https://developer.vuforia.com/. If you already have an account then log in to your vuforia account. Otherwise, click on Register.

Once you have registered by verifying your email address log in to your vuforia account.

Step 2. Get a development key

Click on License Manager followed by Get Development Key. Type in the name of your application key.

This will allow you to get a license key that can be used for creating the Vuforia application. The image below shows the key generated for this tutorial application. You will get your own key with your credentials. We will need this later when we create the application.

Step 3: Create the image tracker database and add image trackers

Click on Target Manager and then on Add Database. Give a name (name should not contain spaces or any special characters). 

For this tutorial, I have named the database as TEST_FIRE.

Now select the database and click on Add Target, browse to the folder where your target image is and select the image. For this tutorial, I am using the following as the target image.

The picture of the image target.

Enter the width of your target in scene units. The size of the target should be on the same scale as your augmented virtual content. The target’s height will be calculated when you upload your image.

Step 4. Download the database to your local computer

Click on Download Database (All). 

Select Unity Editor and click Download. This will download a Unity package for the database.

For our tutorial, it is TEST_FIRE.unitypackage

Step 5. Create a Unity Project

Open Unity Hub and create a new Unity 3D project. 

Step 6. Install the Vuforia Engine AR package.

You can also install the latest version of Vuforia Unity package from Vuforia site.

Step 7. Remove default camera and add Vuforia AR Camera

Select the main camera and delete.

Now, go to GameObject -> Vuforia Engine -> AR Camera

Go to Window -> Vuforia Configuration.

This will open the Vuforia Configuration window in Unity.

Now go to your Vuforia in the web browser, select the License Manager, select the application and copy the License Key.

Paste in the App License Key field in the Vuforia Configuration window.

Step 8. Add Image target

Click on GameObject -> Vuforia Engine -> Image Target. 

Before you configure the target, import the database package that you downloaded from Vuforia in Step 4.

Once, imported head on to select the image for the image target from the database. To do this, select the ImageTraget from the Hierarchy. Go to inspector and select From Database in the Type dropdown.

Select the correct Database from the dropdown. Your database will not appear if you have not imported the database into your Unity project. 

After selecting the database select the desired image in the Image Target dropdown.

Now you are all set to have your first augmented reality application using Vuforia and Unity. Before we proceed with the Fire effect, add a simple cube with the ImageTarget as the parent and test out whether the application is able to detect the image correctly.

Save the scene. If you have a webcam then you can test you application now by running in the Unity Player. Alternately, you can deploy to your iOS or Android phone. For this tutorial, I will deploy the application to an Android phone.

Go to File -> Build Settings

Select Player Settings and change the name of the Company

There is no need to change any other parameters at this stage. Save and click on Switch Platform.

Once you have switched the platform you can connect your Android phone to your computer through a USB cable (make sure you have enabled developer options in your phone) and click Build and Run. Give the apk filename.

The apk should be built and deployed to your phone. Below is the video of what it looks like at this stage.

https://faramira.com/wp-content/uploads/2020/06/WhatsApp-Video-2020-06-08-at-10.37.13.mp4
Image target that displays a cube.

Step 9. Create the Fire Effect

Once, we have successfully tested our augmented reality app with an image target and a cube, we proceed on to creating the fire effect. See this tutorial to create the fire effect in Unity using unity’s particle system.

Now, we replace the Cube game object (that was a child of the AR Camera) with this Fire particle system. 

Step 10. Enable camera to be on continuous autofocus mode.

Sometimes, you might face an issue of seeing a blurry video in your Vuforia app eventually leading to not recognizing the target image. This is because the app’s camera is not able to focus. To overcome this problem we will write the following script and set to the AR Camera game object. To do this select the AR Camera game object, Add Component -> New Script. Give the name as AutoFocusCamera.cs

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

public class AutoFocus : MonoBehaviour
{
    private bool m_vuforiaStarted = false;
    // Start is called before the first frame update
    void Start()
    {
        VuforiaARController vuforia = VuforiaARController.Instance;
        if(vuforia != null)
        {
            vuforia.RegisterVuforiaStartedCallback(InitCameraAutoFocus);
        }
    }

    private void InitCameraAutoFocus()
    {
        m_vuforiaStarted = true;
        SetAutoFocus();
    }

    private void SetAutoFocus()
    {
        if(CameraDevice.Instance.SetFocusMode(CameraDevice.FocusMode.FOCUS_MODE_CONTINUOUSAUTO))
        {
            Debug.Log("Success in setting camera to autofocus continuously.");
        }
        else
        {
            Debug.Log("Failed to set camera to autofocus continuously.");
        }
    }

    private void OnApplicationPause(bool pause)
    {
        if(!pause)
        {
            // since app has resumed we will start autofocus.
            SetAutoFocus();
        }
    }
}

Build the final app and deploy to your Android Phone. See the video below on the Augmented Reality – Fire Effect final demo.

Other Tutorials

Leave a Reply

Your email address will not be published. Required fields are marked *