This tutorial will help you to install location based AR app that you have purchased from https://www.zeanex.com/product/location-based-ar-app-with-admin-panel/. For unity application you have received a .unitypackage import that in an empty unity project and that’s all. For admin panel you have to follow a simple procedure with few steps.

Upload Files on Hosting:

Now you will upload all files and folders that are in the locationbasedAR.zip folder to the desired place in your hosting:

• In the root directory of your website. (For example, http://example.com/)
• In the sub directory of your website. (For example, http://example.com/locationbasedAR/)

Begin Installation:

After uploading files on hosting. Now, the second step is to begin Installation. Visit your domain (http://example.com/) or sub domain (http://example.com/locationbasedAR ) or where ever you have uploaded your files.

Create Database:

• After installation the next step is to create database and it’s user with all privileges on your hosting. As, we need following information in next step:
  1. Name of Database.
  2. Username of Database.
  3. Password of User.
  4. Database host
  5. Now we have all this information. So we will click on let’s go button.

Fill in all the information, and click on connect database. So, all the installation is done successfully.

Now we will click on Enjoy button and after that we need to login in your web panel using:

• Username: admin
• Password: admin

Change Username and Password

Now for security reasons first of all we will go to Account Settings and change them. After that we will enter our values and click on the proceed data.

That’s all, Thank You

Vuforia web services API is used to query vuforia cloud database, that is to perform functions such as add, edit or delete image target and it’s associated metadata. Metadata is the file that is stored against each target. It consists of a url to 3d model or video, or any custom requirements to like scale of model.

In this tutorial we will use vuforia web services API to upload target with metadata in vuforia cloud database.

Download Vuforia Web Services Sample Code

Visit https://developer.vuforia.com/downloads/samples, scroll down and at bottom of page you will see Vuforia Web Services heading, download the sdk for php. Upload the folder in your hosting and I renamed the folder to “vuforia” for easy access. You need to upload HTTP and Net to for web requests. Download them from here: http://free.zeanex.com/HTTP.zip, and extract them in same folder.

Download Free Admin Panel Theme

In this tutorial my major concern is to teach you the use vuforia web services API, instead of developing bootstrap theme, so i am uploading a theme you can use that or you can create your own theme. It’s a free theme i downloaded from https://startbootstrap.com/themes/sb-admin-2/, and i edited it according to our requirements you can download edited theme here: https://free.zeanex.com/vuforiaTheme.zip, and upload this in same folder where our vuforia, HTTP, and Net folders are stored.

Get Vuforia Development Key

Go to https://developer.vuforia.com/, create account or login. Then after clicking on develop menu item, click on get development key.

Enter License name, accept terms and click confirm.

Create Vuforia Cloud Database

Click on Target Manager, then click on Add Database, Enter Database name, Select “Cloud” as database type. Select newly created license key.

Create form

If you downloaded my theme then there is add-target.php file open it. Add these attributes to <form> tag.

action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post"

We need target name, image and associated model form user as input. So we need to have one input field to accept text, and two file upload fields. All these are already present in add-target.php file. There is also javascript and php code to upload files in hosting. Make sure to have name attribute in all input fields as shown in screenshot

Now Copy and paste this code at bottom of your page to get values from form and pass them to PostNewTarget.php file, that we will edit now.

<?php
$targetName = $imageLocation = $itemLocation = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if(isset($_POST['upload_object'])){
        $targetName = test_input($_POST["targetname"]);
        $imageLocation = "images/".test_input($_POST["file1"]);
        $itemLocation = test_input($_POST['file2']);
        require_once 'vuforia/php/PostNewTarget.php';
        $instance = new PostNewTarget($targetName, $imageLocation, $itemLocation);
    }
}
function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
?>

Post new target in vuforia cloud database

Now we have to edit PostNewTarget.php file that we get in vuforia samples. It is stored in your hosting at vuforia/php/PostNewTarget.php. We have to edit this to get values from our form.

Access Key and Secret Key

We have to copy access key and secret key from vuforia developer portal. In previous step we created vuforia cloud database. Now go back to vuforia developer portal and click on that database name. Then click on database access keys. Now Copy Server side keys.

We have to paste these keys in our PostNewTarget.php file.

Access form values

In our add-target.php file we are passing parameters to PostNewTarget.php file, but for now PostNewTarget. php file has no parameters in it’s function, so what we have to do is delete few things from file and edit few things.

Delete these:

private $targetName 	= "[ name ]";
private $imageLocation 	= "[ /path/file.ext ]";

Add these parameters in PostNewTarget()

$targetName, $imageLocation, $itemLocation

Replace $this->targetName with $targetName, replace “Vuforia test metadata” with $itemLocation replcae $this->getImageAsBase64() with $this->getImageAsBase64($imageLocation).

Add this parameter in getImageAsBase64()

$imageLocation

Replace $this->imageLocation with $imageLocation.

Now if we go to https://domain.com/add-target.php file and submit the form we will be able to store data in cloud database. So our major task is done, but we also want to store this data in mySQL database too. For that we have to do few more things.

Store data in mySQL database

To easily maintain and manage our data, we may want to store in our hosting database too. For that pass these parameters to execPostNewTarget() function.

$targetName, $imageLocation, $itemLocation

We will store data in database if data is successfully stored in vuforia cloud database. For that copy and paste this code under if() statement that checks status code is 200 or 201.

$json = json_decode($response->getBody(), true);
$result_code=$json['result_code'];
include 'connection.php';
$vuforiaId= $json['target_id'];
$sql = "INSERT INTO objects(vuforiaId,targetName,imageLocation,itemLocation) VALUES ('$vuforiaId','$targetName','$imageLocation','$itemLocation')";
if (mysqli_multi_query($conn, $sql)) {
   echo "<script>
   window.location.href = 'target-manager.php';
   </script>";
}

Create MySQL database

In previous step you have seen we have written code to enter data in MySQL database, but we have not created a MySQL database yet. So lets create it. In Your CPanel go to MySQL database

Enter database name and click create. We have to add user too to our database to access, means add, edit delete data in MySQL database.

Create User

Scroll down in same page find the section MySQL users, Add New User, fill username and password and click on create user.

Assign user to database

Now again scroll down to the section add user to database, select username and database name. Click on Add and then assign all Privileges and click on make changes.

Make Connection with database

In the last code we entered in PostNewTarget.php file you can see that we included a file connection.php, that is because this file will make connection with database. So create a file connection.php in main folder where we have all files.

Paste following code in it

<?php
$servername = "localhost";
$username = "write username here";
$password = "write password here";
$dbname = "write database name here";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>

Replace the values with your own.

phpMyAdmin

Now we have created our database and make a connection with it too. But we still have to create table in database. For that go to phpMyAdmin. Click on the database name and create exactly same table as shown in screenshot because we are using the same names in our PostNewTarget.php file in SQL statement, or download and import the following sql file in your database: https://free.zeanex.com/objects.sql

That’s all, now when you submit the form data will get stored in phpMyAdmin database after it got successfully uploaded in Vuforia Cloud Database. Thank You!

If you want you can buy our complete Vufoira Cloud Recognition with Vuforia Web Services API at: https://www.zeanex.com/product/vuforia-cloud-recognition-app-with-web-panel/

This tutorial will help you to install Markerless Web AR using ARCore for Android and iOS that you have purchased from https://www.zeanex.com/product/markerless-web-ar-with-admin-panel/ . It’s a simple procedure with few steps.

Upload Files on Hosting:

Now we will upload all files and folders that are in the markerlessWebAR.zip folder to the desired place in your hosting:

• In the root directory of your website. (For example, http://example.com/)
• In the sub directory of your website. (For example, http://example.com/markerlessWebAR/)

Begin Installation:

After uploading files on hosting. Now, the second step is to begin Installation. Visit your domain (http://example.com/) or sub domain (http://example.com/ markerlessWebAR ) or where ever you have uploaded your files.

Create Database:

• After installation the next step is to create database and it’s user with all privileges on your hosting. As, we need following information in next step:
  1. Name of Database.
  2. Username of Database.
  3. Password of User.
  4. Database host
  5. Now we have all this information. So we will click on let’s go button.

Fill in all the information, and click on connect database. So, all the installation is done successfully.

Now we will click on Enjoy button and after that we need to login in your web panel using:

• Username: admin
• Password: admin

Change Username and Password

Now for security reasons first of all we will go to Account Settings and change them. After that we will enter our values and click on the proceed data.

That’s all, Thank You

This tutorial will help you to install Vuforia Cloud Recognition app with web panel that you have purchased from https://www.zeanex.com/product/vuforia-cloud-recognition-app-with-web-panel/. It’s a simple procedure with few steps for installing vuforia cloud recognition.

Installing Web panel:

After purchasing you have received a zip file with web source code zipped and unity source code as unity package. Now we will start with the web panel installation.

Upload Files on Hosting:

Now we will upload all files and folders that are in the vuforiaAdminPanel folder to the desired place in your hosting:

• In the root directory of your website. (For example, http://example.com/)
• In the sub directory of your website. (For example, http://example.com/ar/)

Begin Installation:

After uploading files on hosting. Now, the second step is to begin Installation. Visit your domain (http://example.com/) or sub domain (http://example.com/vuforia) and wherever you have uploaded your files.

Create Database:

After installation the next step is to create a database and it’s user with all privileges on your hosting. As, we need following information in next step:

• Name of Database.
• Username of Database.
• Password of User.
• Database host

Now we have all this information. So we will click on the button let’s go.

Fill in all the information, and connect database. 

So, all the installation is done successfully. Now we have to change username , password and connect vuforia account.

Now we will click on Enjoy button and after that we need to login in your web panel using:

• Username: admin
• Password: admin

Change Username and Password

Now for security reasons first of all we will go to Account Settings to change them. We will enter our values and click on the proceed data.

Connect Vuforia Account with Web Panel

Now for connecting a vuforia account with a web panel you need to go to vuforia developer portal and create your account or login. Create a cloud database and open it. And go to database access keys and copy the Server Access Keys and paste them in Vuforia Cloud Server keys in your web panel and save them by clicking on Proceed data.

Install Application

Let’s move toward unity app, after downloading you have received another

vuforiaCloudRecoApp.unitypackage. This is the unity source code for the app.

Create New Unity Project

First of all create a new unity project, write project name and click on create button.

Enable Vuforia

Go to https://developer.vuforia.com, and download vuforia package for unity. Then import it in empty unity project.

Import Package

Import vuforiaCloudRecoApp.unitypackage in this unity project.

Vuforia Setup:

Open Vuforia engine configuration and paste your license key

In main scene select cloud recognition from hierarchy and paste Client side keys there

Connect Host with App:

Inside the Unity project open the Scripts folder and then open SaveLink.cs file. Enter your link there.

Final Steps

Now you have an app installed in unity in order to build for iOS or android, go to Build Settings, Add Required Scenes and switch your platform to android or iOS for which you want to build the app now. Change your package name or build ID. Make other changes according to your choice and then build an App. That’s All.

Modern technology that displays digital world in real world is Augmented Reality. In this blog we are going to learn about displaying image on an image target using Easy AR in unity 3D. The video below will help you for better understanding of this blog.

For better understanding make sure to read the previous blog i.e, DISPLAY 3D MODEL ON AN IMAGE TARGET USING EASY AR.

Create a new unity project:

In augmented reality creating a new unity project requires some of the things to be done. For creating a new unity project you need to write project name and then click on create project.

Go to EasyAR:

After creating new unity project, we need to go to EasyAR and go to download. After that go to unity packages and click on EasyAR Sense 3.0.1- final Basic_unity.zip and download it.

Now we need to go back to the develop center and add SDK License Key.

Check in the EasyAR SDK Basic and write the name in ” APP Name”. We are making for Android. That’s why we are writing package name as com-zeanex. easyar test. Now click on confirm.

Go back to unity:

Go back to unity and go to file. After go to file we need to click on build settings and change the platform to android. Click on switch platform and then go to player settings. In player settings go to other settings and paste the package name. For pasting the package name, copy the package name from easy AR and paste the package name in unity.

Copy and Paste License Key:

Now go back and import that which you have downloaded. After that drag in assets folder in unity and click on import. Its imported now. Click on Easy AR then click on common. After clicking on common, click on resources. Now click on Easy AR and then click on inspector. Go back to the website of Easy AR and copy that key which we have created and paste that key in the script in the Inspector.

Go to Package name:

After pasting license key next thing is that we have to use the package name in case of using this licence key. So go to file, then go to build settings and then click on player settings. After clicking on player settings go to identification and in identification you can see the package name. Copy the package name from Easy AR develop center and paste that in unity in the option of package name. Now go to console and clear that.

Displaying image on an image target:

The next thing is to display image on an image target. So go to assets then go to samples and then go to scenes. Then go to HelloAR_Image Target.

Copy this scene in assets for easy assess. Now open this scene. In this scene you can see there is an image target and a Quad. Now go to Inspector and then click on Element 0 in Mesh Renderer. After clicking on element 0 you can see name card. Now click on name card.

Quad is already used to display an image and the cube is 3D model. So, we will delete the cube but we need the Quad. Quad is already displaying the namecard Image that is placed on the material. So we will just change the image . Now we will take our image from the desktop and change the Albedo here. Then this Quad will show the image that we put onto it. Drag the image in the textures in the unity.

Now in Quad go to materials . Then click on Albedo and select the texture. In order to change the image target we will bring our own target in the streaming assets folder. We will drag the target 2.jpg in the streaming assets folder. Now go to image target and name it. Target name and target path will be same only we need to add .jpg with the target path.

Our image is stored as streaming assets. Now you can see that the Quad attach image is having black background . To remove that go to its settings. Now go to sprite (2D and UI) and click on apply.

Now we need to go back to the Quad and check the material and black background has removed now.

Setting Quad size:

We will now set the Quad size according to our requirements. You can set scale, rotation and position according to your choice. In order to not to show the background, we also have to change the opaque rendering mode to transparent rendering mode.

Export Application:

From top menu click on file, then click on build settings. Check the platform is android if not switch it. And then click on add open scenes. Now click on player settings. Go to other settings. Change the package name according to your choice. Unchecked x86 and Android TV compatibility. Change the stripping level to low. Click on XR settings and make sure vuforia augmented reality is selected. And then you can insert the icon of your app. That’s all for settings now connect your android mobile with your computer and click on build and run. Now name it and save it.

New technology that displays digital content in real world is Augmented Reality. In this blog we are going to learn about displaying 3D model on image target usingEasy AR in unity 3D. The video below will help you for better understanding of this blog.

For better understanding make sure to read the previous blog i.e. DISPLAY 3D MODEL ON IMAGE TARGET USING VUFORIA IN UNITY3D.

Create a new unity project:

In augmented reality creating a new unity project requires some of the things to be done. For creating a new unity project you need to write project name and then click on create project.

Go to EasyAR:

After creating new unity project, we need to go to EasyAR and go to download. After that go to unity packages and click on EasyAR Sense 3.0.1- final Basic_unity.zip and download it.

Now we need to go back to the develop center and add SDK License Key.

Check in the EasyAR SDK Basic and write the name in ” APP Name”. We are making for Android. That’s why we are writing package name as com-zeanex. easyar test. Now click on confirm.

Go back to unity:

Go back to unity and go to file. After go to file we need to click on build settings and change the platform to android. Click on switch platform and then go to player settings. In player settings go to other settings and paste the package name. For pasting the package name, copy the package name from easy AR and paste the package name in unity.

Copy and Paste License Key:

Now go back and import that which you have downloaded. After that drag in assets folder in unity and click on import. Its imported now. Click on Easy AR then click on common. After clicking on common, click on resources. Now click on Easy AR and then click on inspector. Go back to the website of Easy AR and copy that key which we have created and paste that key in the script in the Inspector.

Dragging Image Target:

Now go back to the assets and go to samples. Then go to scenes and drag Hello AR_ Image Target to assets.

Importing Image Target:

Now open assets and double click on it. As the scene is now open click on image target and delete the Quad and Cube. Import the image target which you want to show on the 3d model. We are dragging it to the streaming assets folder. Now click on streaming assets and you can see that the image is imported in it. Now click on image target and name the image target. Write the same name of image target in Target Path.

But in target path make sure that you have write the correct extension in target path. Our target image is in “.jpeg”. Now go back to assets.

Importing the Model:

Now import the model which you want to show on the image target. After importing open that model and drag the model on to the image target. Now we have to scale it as 0.04 in the x, y and z axis. I am rotating the x axis to 270. You can set the positions and rotations according to your choice.

Export Application:

From top menu click on file, then click on build settings. Check the platform is android if not switch it. And then click on add open scenes. Now click on player settings. Go to other settings. Change the package name according to your choice. Unchecked x86 and Android TV compatibility. Change the stripping level to low. Click on XR settings and make sure vuforia augmented reality is selected. And then you can insert the icon of your app. That’s all for settings now connect your android mobile with your computer and click on build and run. Now name it and save it.

Augmented Reality has reduced the space between imaginary and real world. In this tutorial you will learn to Display Image Slideshow on an Image Target. The video below will help you for better understanding of this blog.

For better understanding make sure to read the previous blogs i.e. DISPLAY 3D MODEL ON IMAGE TARGET USING VUFORIA IN UNITY3D and DISPLAY IMAGE ON AN IMAGE TARGET OR MARKER USING VUFORIA .

Create a new unity project:

In augmented reality creating a new unity project requires some of the things to be done. For creating a new unity project you need to write project name and then click on create project.

Adding new image:

For adding a new image target you need to go to vuforia engine. After going to vuforia engine click on image and re position it. Now go to vuforia portal. For opening vuforia developer portal make sure that you are sign in. Click on develop and after that go to click on target manager. For adding the target click on single image. Now choose the image by clicking on the browse button, then add certain width and rename it. Then click on add.

Scene Setting:

Now we have to set scene for augmented reality. For that you have to delete main camera and add AR camera and image. As you can see this warning sign, go to build settings then go to player settings. Go to the bottom click on XR settings and check the vuforia augmented reality.

Downloading the database:

Now download that data base. Click on unity editor then click on download. When it is downloaded drag it to the unity timeline put it in assets. Make sure that all the items are selected and click on import. Go to image target and select your database. Now you can see your image has loaded.

Making Buttons:

Right click on an image target and click on create empty. Now right click on game object then go to UI and select Canvas. Right click on canvas go to UI and then click on image. Now right click on image, go to UI and then click on buttons. We need two buttons one for next and one for previous. There fore, we will right click on image and go to UI . Then, click on button for the second button. We need two buttons one for next and one for previous. Therefore, we will again right click on image, go to UI and then click on button.

Changing positions:

Now go to canvas and change the render mode to world space. Drag AR camera to the event camera and change the positions of x, y and z axis to 0. We need to reduce its width and height. Now click on left, top, pos Z, right and bottom as 0. Now go to button and reduce its height.

We want one button on right and one button on left. So clicking on button and we want it on the right. Now click on right and set its Rect Transformation as 0. Now we need to do the same procedure with the second button. We will reduce the height and width of second button and then we will click on left because we want to show it on the left side. That’s why we will click on left and set its Rect Transformation as 0. Now go to canvas and rotate its x axis as 90 degrees and it is fix on the image. Go to image and delete this component (named as image script) and add a component Sprite Renderer.

Dragging images:

In order to display images we need to put them in resources folder.Now we will drag the images into the resources folder. We will drag the images into the resources folder. Now select these images . Go to default in Texture Type then click on sprite (2D and UI).

Importing Script:

Now we are going to import a script. You can download the script from here. After downloading script in unity and import it in assets and then open it.

You have to right the name of images in new string. We are naming and adding only three images. If you want to show more images you can just add them in the same pattern.

Naming Buttons:

Now going back to unity. Go to assets folder and dragging the script on in image. Now naming the one button as “next” and naming the second button as ” previous”. Dragging the next and previous buttons in slideshow (script). Now importing the arrow image to design next and previous button. in assets.

Display image slideshow on an image target:

Click the texture type and select sprite( 2D and UI) and click apply. Now select both buttons and drag them to the source image and check the preserve aspect. Now we have to rotate this button, click on the next button. Change the z axis in rotation as 180. Now extend the next and previous button and delete the text. We need to drag the first image which we want to display on sprite. Click on image and change the scale of x, y and z axis as 2.

Now move this button close to the image and also move second button close to the image. By clicking the next button we want to show the next image. So click on next button. Click on + in on click and drag image in on click. Now click on no function, then go to slide show and click on next (). For previous button click on no function, then go to slideshow and click on prev(). Now we don’t want to show this previous button on the first image. So, click on previous button and uncheck it.

Export Application:

From top menu click on file, then click on build settings. Check the platform is android if not switch it. And then click on add open scenes. Now click on player settings. Go to other settings. Change the package name according to your choice. Unchecked x86 and Android TV compatibility. Change the stripping level to low. Click on XR settings and make sure vuforia augmented reality is selected. And then you can insert the icon of your app. That’s all for settings now connect your android mobile with your computer and click on build and run. Now name it and save it.

Augmented Reality has minimizes the distances of imaginary and real world. In this tutorial you will learn to Display YouTube Video on an image target. The video below will help you for better understanding of this blog.

For better understanding make sure to read the previous blogs i.e. DISPLAY 3D MODEL ON IMAGE TARGET USING VUFORIA IN UNITY3D and DISPLAY VIDEO ON AN IMAGE TARGET USING VUFORIA IN UNITY 3D.

Create a new unity project:

In augmented reality creating a new unity project requires some of the things to be done. For creating a new unity project you need to write project name and then click on create project.

Adding new image:

For adding a new image target you need to go to vuforia engine. After going to vuforia engine click on image and re position it. Now go to vuforia portal. For opening vuforia developer portal make sure that you are sign in. Click on develop and after that go to click on target manager. For adding the target click on single image. Now choose the image by clicking on the browse button, then add certain width and rename it. Then click on add.

Scene Setting:

Now we have to set scene for augmented reality. For that you have to delete main camera and add AR camera and image. As you can see this warning sign, go to build settings then go to player settings. Go to the bottom click on XR settings and check the vuforia augmented reality.

Downloading the database:

Now download that data base. Click on unity editor then click on download. When it is downloaded drag it to the unity timeline put it in assets. Make sure that all the items are selected and click on import. Go to image target and select your database. Now you can see your image has loaded.

YouTube video plugin:

Now what we have to do is to display YouTube video on an image target. For that we need a YouTube video plugin. The link of YouTube video plugin is available here. You can buy YouTube video plugin from it.

Importing the YouTube video plugin:

Drag the YouTube video plugin in unity and import it. Now click on console and click on clear. You can see an error here and double click on it.

Change the “LOW” word into “STANDARD”. Now press Ctrl S to save. We need to go back to unity. Now in Assets. Click on the plugin folder “Light Shaft” and go to resources.

In the resources go to prefabs and then click on YouTube player. Now crop it in image target.

Settings positions and rotations:

We need to set its positions and rotations. All x,y and z axis are set as 0 in the rotations and positions. Now click in YouTube player and then click on Video Render Area and make the positions x,y and z axis as 0.

Go to Canvas and make the rotations x,y and z axis as 0. We need to set the positions of Y axis as 0.01 in YouTube player.

Now we need to rotate it also. Set the y axis of rotation as 180. You can set it according to your choice as well. Now paste a YouTube URL that you want to display on an image target in the YouTube player URL.

Scanning the image target:

Now the thing is when we will scan the image target video will start playing but when the target is lost video will not stop. Video will continue playing in the background. Thus, we will continue listening to the sounds of the video. So, in order to avoid that we need to code few lines. So, go to create and click on C# script and name it as track able event handler. Open this file by double clicking on it.

Coding of track able event handler:

The code of this track able event handler file is totally same as to the default track able event handler file that is attached to our image target. We will open this file. We only have to do few minor changing in code. Press Ctrl A and then Ctrl C and paste it to the track able event handler file.

Now in the track able event handler file delete the default placed code and press Ctrl V to paste the default track able event handler code in this file. Coding of track able event handler:heck the name of the file which is track able event handler file and give the same name to the class.

Adding unity engine event:

So, basically what we have to change in this file is that we are going to add unity engine event. So, we will be using codes as:

using Unity Engine. Events;

Declaring public variables:

We need to declare two public variables onTrack and onLost.

public UnityEvent onTrack;

public UnityEvent onLost;

The event onTrack needs to be called when tracking is found. So, here we will write

onTrack.Invoke();

The second unity event onLost needs to be called when tracker is lost. So, here we will write

onLost.Invoke();

Adding track able event handler:

Now in image target we have to declare this delete this default track able event handler and add the track able event handler . Now in these events click on + in onTrack () and drop in the youtube player here. Click on + in on Lost in the YouTube player here.

Selecting functions:

Select YouTube player from the drop down and select play () function. Select YouTube player from the drop down and select pause() or stop() function according to your choice.

Export Application:

From top menu click on file, then click on build settings. Check the platform is android if not switch it. And then click on add open scenes. Now click on player settings. Go to other settings. Change the package name according to your choice. Unchecked x86 and Android TV compatibility. Change the stripping level to low. Click on XR settings and make sure vuforia augmented reality is selected. And then you can insert the icon of your app. That’s all for settings now connect your android mobile with your computer and click on build and run. Now name it and save it.

Augmenting digital and real life together augmented reality is used. In this tutorial you will learn to display text on an image target or marker using vuforia in unity 3D. The video below will help you for better understanding of this blog.

For better understanding make sure to read the previous blogs i.e. DISPLAY 3D MODEL ON IMAGE TARGET USING VUFORIA IN UNITY3D , and DISPLAY IMAGE ON AN IMAGE TARGET OR MARKER USING VUFORIA.

Create a new unity project:

In augmented reality creating a new unity project requires some of the things to be done. For creating a new unity project you need to write project name and then click on create project.

Adding new image:

For adding a new image target you need to go to vuforia engine. After going to vuforia engine click on image and re position it. Now go to vuforia portal. For opening vuforia developer portal make sure that you are sign in. Click on develop and after that go to click on target manager. For adding the target click on single image. Now choose the image by clicking on the browse button, then add certain width and rename it. Then click on add.

Scene Setting:

Now we have to set scene for augmented reality. For that you have to delete main camera and add AR camera and image. As you can see this warning sign, go to build settings then go to player settings. Go to the bottom click on XR settings and check the vuforia augmented reality.

Downloading the database:

Now download that data base. Click on unity editor then click on download. When it is downloaded drag it to the unity timeline put it in assets. Make sure that all the items are selected and click on import. Go to image target and select your database. Now you can see your image has loaded.

Adding text on an image target:

Now we need to drag the downloaded in unity. Click on import and go to the image target and name it. Make sure that your image target is selected. Now right click on the image target and go to 3D object select 3D text.

Now, I am scaling it as 0.005 with x, y and z axis. Same scale size with all the three axis. Now you can see that Arial font is selected and we can not do changes with Arial. So, we have to select another text. So, go to format. I am selecting Source Sanserif font.

Click on selected font and give it 300 font size and change the character to Unicode and click on apply.

Now click on apply and then go to New text and add text of your choice and rotate it 90 degrees. After rotating positioning the text.

Export Application :

From top menu click on file, then click on build settings. Check the platform is android if not switch it. And then click on add open scenes. Now click on player settings. Go to other settings. Change the package name according to your choice. Unchecked x86 and Android TV compatibility. Change the stripping level to low. Click on XR settings and make sure vuforia augmented reality is selected. And then you can insert the icon of your app. That’s all for settings now connect your android mobile with your computer and click on build and run. Now name it and save it.

In real world to augment virtual objects augmented reality is used. In this tutorial you will learn to Play audio on an image target using vuforia in unity 3D. The video below will help you for better understanding of this blog.

For better understanding make sure to read the previous blogs i.e. DISPLAY 3D MODEL ON IMAGE TARGET USING VUFORIA IN UNITY3D ,DISPLAY IMAGE ON AN IMAGE TARGET OR MARKER USING VUFORIA and DISPLAY VIDEO ON AN IMAGE TARGET OR MARKER USING VUFORIA IN UNITY 3D.

Create a new unity project:

In augmented reality creating a new unity project requires some of the things to be done. For creating a new unity project you need to write project name and then click on create project.

Adding new image:

For adding a new image target you need to go to vuforia engine. After going to vuforia engine click on image and re position it. Now go to vuforia portal. For opening vuforia developer portal make sure that you are sign in. Click on develop and after that go to click on target manager. For adding the target click on single image. Now choose the image by clicking on the browse button, then add certain width and rename it. Then click on add.

Scene Setting:

Now we have to set scene for augmented reality. For that you have to delete main camera and add AR camera and image. As you can see this warning sign, go to build settings then go to player settings. Go to the bottom click on XR settings and check the vuforia augmented reality.

Downloading the database:

Now download that data base. Click on unity editor then click on download. When it is downloaded drag it to the unity timeline put it in assets. Make sure that all the items are selected and click on import. Go to image target and select your database. Now you can see your image has loaded.

Importing the audio clip:

Now as we want to play audio on an image target. Go to audio and then audio source. Let’s import it in unity first and drag this into the audio clip section.

Playing the audio:

We want to play the audio only when the image target is visible. So unchecked the play on awake. If you want to loop the audio means you want to play the audio again and again when it ends. So, check the loop checkbox. We want to play audio only when the target image is found and we want to stop the audio when the image target is lost.

Coding of track able event handler:

The code of this track able event handler file is totally same as to the default track able event handler file that is attached to our image target. We will open this file. We only have to do few minor changing in code. Press Ctrl A and then Ctrl C and paste it to the track able event handler file.

Now in the track able event handler file delete the default placed code and press Ctrl V to paste the default track able event handler code in this file. Coding of track able event handler:heck the name of the file which is track able event handler file and give the same name to the class.

Adding unity engine event:

So, basically what we have to change in this file is that we are going to add unity engine event. So, we will be using codes as:

using Unity Engine. Events;

Declaring public variables:

We need to declare two public variables onTrack and onLost.

public UnityEvent onTrack;

public UnityEvent onLost;

The event onTrack needs to be called when tracking is found. So, here we will write

onTrack.Invoke();

The second unity event onLost needs to be called when tracker is lost. So, here we will write

onLost.Invoke();

Play, stop and pause audio:

Save the file. Now attach this code to the image target and delete the default attached component. After that you will see the two events which are the public events that we have initialized onTrack and onLost. Click on the + icon in onTrack event. Here onTrack event drag the audio source. OnTrack we want to play the audio, audio source.play() and onLost repeat the same steps. Drag the audio source and go to audio source.pause() or audio source.stop().

Export Application :

From top menu click on file, then click on build settings. Check the platform is android if not switch it. And then click on add open scenes. Now click on player settings. Go to other settings. Change the package name according to your choice. Unchecked x86 and Android TV compatibility. Change the stripping level to low. Click on XR settings and make sure vuforia augmented reality is selected. And then you can insert the icon of your app. That’s all for settings now connect your android mobile with your computer and click on build and run. Now name it and save it.