Augmented Reality Wave Reflection

Recently, as part of our consultation project, the requirements are to vizualise sound wave reflection off a wall. It is required that the AR does not use markers so we used ground plane tracking. This is the outcome. By using the mic on mobile devices, students can record their own voice, the voice will be transmitted to the wall and reflected back. The students then can hear the echos of their own voices.

When Your Code Is On Fire

Disasters do happen when you are working on projects. I am reminded of a certain situation in which a junior programmer imported something into the core library and errors started popping up everywhere. Like “the whole house is on fire” situation. Now, I know about not touching production rules, backups, etc. There are systems put together in-place to stop this particular problem from happening. But this post is more of how to handle things when shit happens. This guide is mainly for Junior Programmers of Unity, but it may be of help for other software and languages as well.

Do Not Touch, Take A Break first

Hands off, stand up and go drink water. Take a break, take a deep breath, try to calm yourself as much as you can. When your code is on fire, you will be freaked out. But, trying to fix things when you are not having a rational mind is the worst thing that you can do to yourself, it will create more errors, which in turn might be harder to fix afterwards.

Accept The Situation

We screwed up, accept the situation. Things happen, we cannot change what has happen, but we can make up for our mistakes by fixing it. You might be getting an earful, but you need to make things better.

Analyzing the errors, and fixing it

You need to look at the errors that pops up. Here are some of the patterns you need to look at:

If the errors looks like it comes from the same method, variable or class reference:

This means, you have inadvertently overwritten a certain class or file. If the class/file belongs to you, you can fix this by finding out what changes have you made from the current version and the old version. But, given the fact that you are reading this guide I am assuming that its not you that developed that particular class/file. In that case, you would need to ask your co-worker that written the class to see if he has a backup. If he does not, he can still help you since he understands his code better than you. Just be sure to say sorry, thank you for the help, and buy them lunch or something.

If the errors looks like it comes from a particular library:

When this happens, chances are your library versions are mismatched, one of them is either older or newer. Find out what the old version number is. Download the old one, create a backup of the current code, replace the library with the old version. Sometimes, different versions of libraries have what we call breaking-changes. These are changes to the codes that makes our old implementation to no longer works. So, do not simply upgrade a library without glancing through the change notes.

If the errors looks like it comes from multiple libraries:

Sometimes this happens because you messed with or mismatched their dependencies. Chances are, there are libraries that uses the same dependency components from other libraries. Go through the codes that contains the errors and find out which dependency they share, and replace that dependency library with the correct version.

When all else fails

You tried fixing it, but it does not work, the errors does not make sense. Here is what you should do.

  1. Backup the code. I am literally asking you to have a backup of your error ridden project. Just in case you turned the fire into inferno, you can always go back to just fire.
  2. Isolate the parts that does not have errors, move them out of your burning project folder into another project folder. Save what you can from the burning wreckage. You do not have to start from scratch.
  3. Reimport the libraries, download from original/error free source.
  4. Bring one of the code files that have errors into your new project, see if it still burns in the new project. If it does, see what is wrong, and fix them first. Do not add more files until you fixed this one code file.
  5. Repeat step 4 until you have a working version again. It might take time, but this will allow you to focus on the problems one at a time.

Learning from disasters

Here are a few things that you can do to avoid such disasters:

  1. Backup!, Backup!, Backup! before doing any changes, especially to Production/Core.
  2. Do Not Touch Production or Core. Make a copy of it in your machine, and make changes in that instead. If it is okay, run it by your person in charge, he will move it to core safely.
  3. Always refer the person in charge before doing anything in Production / Core. They are the ones who are responsible for the whole codebase, do not bypass them, ever. They are the ones that will be either saving you from disaster or help you out of one.
  4. If you are not sure, ask and clarify.

Simpler Way To Play Animation for Vuforia (2021 Update)

Okay, you want to play an animation, then nooooooo………..the model has more than one animation, so what do you do? Do you go through the process and create transitions, add parameters and do all of that? No you don’t need to actually. This is a handy tool for doing things fast. Here is the download link, and also as usual the explanation part of it, coz what use is things that you don’t understand or learn from?

How to use

  1. Add the Animation Player script to your model, it will give you the names of the animation clip

2. Call PlayAnimation using Vuforia Default Trackable Event Handler or Button

3. Type in the name of the animation you want to play in the slot. Done! When your ImageTarget is detected, the animation will play.

The Editor Code

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


[CustomEditor(typeof(AnimationPlayer))]
public class AnimationPlayerEditor : Editor
{
    AnimationPlayer myTarget;
    UnityEditor.Animations.ChildAnimatorState[] states;

    public override void OnInspectorGUI()
    {
        // Assign the script to this inspector so that we can play with its properties
        myTarget = (AnimationPlayer)target;
        // create the menu and add items to it
        GenericMenu menu = new GenericMenu();
        
        GetAnimatorStates();

        GUILayout.Label("Animation State Name From Model:");

        foreach(UnityEditor.Animations.ChildAnimatorState b in states)
        {
          GUILayout.Label(b.state.name);
        }


    }

    void GetAnimatorStates()
    {
        // Get a reference to the Animator Controller:
        UnityEditor.Animations.AnimatorController animatorController = myTarget.GetTargetAnimator().runtimeAnimatorController as UnityEditor.Animations.AnimatorController;

        // States on layer 0:
        UnityEditor.Animations.AnimatorStateMachine stateMachine = animatorController.layers[0].stateMachine;
        states = stateMachine.states;
        
    }



}

The Script (called AnimationPlayer)

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


public class AnimationPlayer : MonoBehaviour
{
    Animator animator;
    // Start is called before the first frame update
    void Start()
    {
        animator = gameObject.GetComponent<Animator>();
    }

    // Update is called once per frame
    void Update()
    {
        
    }

    public Animator GetTargetAnimator()
    {
        if(animator == null)
        {
            animator = gameObject.GetComponent<Animator>();
            return animator;
        }
        else
        {
            return animator;
        }
        
    }

    public void PlayAnimation(string animationName)
    {
        if(animationName != "")
        {
            animator.StopPlayback();
            animator.Play(animationName);
        }

        
    }


}

The Explanation

This script has two parts. The first part is the editor extension. The reason we need the editor extension is to access the Animator’s Editor properties in order for us to extract the animation state names. This information is only available through UnityEditor.Animations.AnimatorController.

The second part is the script itself. We need this script to be two things, one is to become the interface that our editor script will rely on to get the reference to the Animator. The second function is for us to ask the animator to play our animation of choice.

From SkecthFab 3D Model to Unity + Vuforia

One of the complaints that I usually get from people that want to create contents but unable to do so is “I do not know how to create 3d models”.

Here is my proposed solution, you can use 3D Models from SketchFab for your Unity + Vuforia AR. In this video I have made, you will learn to import Animated SketchFab 3D models straight into Unity for use with your Vuforia AR. This tutorial will work with most models that has simple animations. If you want to import a model with multiple animations, you need a different method

Getting Yourself Started with Vuforia with Unity 2019 above (2020 updates)

So, why is this sudden post? Err well, if you install the latest versions of Unity, you will notice that setting up Vuforia will be a little bit different. We will need to use Unity’s Package Manager. So to update this new knowledge, here’s the new tutorial for how to get started with Vuforia. From now on, I will be trying to use Camtasia Studio this time to easily explain things. Leave your comments on how you like it, and how I can improve

Vuforia: Putting 2D Image on your Image Target

In order to complete this tutorial, you need:

  1. An Image, you can download one at www.pixabay.com
  2. You need to have completed the previous tutorial on Vuforia Basics

From the previous tutorial, we have added boxes to our image target.

Now lets import the image we needed to Unity, Drag and Drop the image you needed to the Assets window.

Next, lets right click one of the Image Targets we already have. Under 3D Obeject, select Plane

A Huge plane will appear. Don’t worry, we will resize this once done. But for now drag and drop the image we imported to the plane.

The plane will now have the image we imported. It will look something like this

Resize, rotate and move the plane as needed until it fit on your Image Target.

We no longer need the Cube. So let’s delete the cube. You will get something like this:

We are done! So lets press Play and test it out. You should now have an image and

Publishing Your Android App to Play Store – XZIMG Augmented Vision Tutorial 7 of 7

Final Roll-out

Click App releases

Under Production track, click Edit Release

Release to production window appears, scroll down and click Review

Confirm roll-out to production window appears. Click start roll-out to production

A confirmation window will appear, click Confirm

That’s it!, we are done! Click on your app menu, it will show that our app is now Pending Publication. Once it is approved, it will be on the Play Store

That is the end of our tutorial series on how to publish app to Play Store.

Thank you for following my tutorial everybody!

Publishing Your Android App to Play Store – XZIMG Augmented Vision Tutorial 6 of 7

Filling Up Store Listing Information

The Store Listing window appears. Firstly fill in your app’s short description and long description

Next, scroll down the page. Add the icon and screenshot

Scroll down a little more, and add the Feature Graphic

Scroll down a little more, under Categorisation, select your Application type and Category. The selection depends on whether you are building an AR App for education, games or etc. Select the apropriate settings for your app

Adding Tags to your app to make search easier

Click on Manage Tags

The Tags window will appear. Search for the appropriate tags suitable for your app. In this example, my AR is an Entertainment. Press Add to add tag

Confirmation window appears, press Add

Once you have added the relevant tag or tags, press the back arrow to go back to Store Listing

Scroll down all the way down to Contact details, fill in your email. On privacy policy, fill in the url to your privacy policy. Then, click Save Draft

We are done with this part. A green checkbox will appear beside Store Listing

A green checkbox will also appear beside App releases

In the next tutorial we will do our final push to the finish line

Vuforia Basics + Creating a multiple image target Android AR 2/2

Setting up Vuforia in Unity

In the File menu, click Build Settings

The Build Settings window appears. Click Player Settings

Player Settings window appears. Under XR Settings, select Vuforia Augmented Reality

Right Click on the Hierarchy window. Under Vuforia Engine click AR Camera

A Import Vuforia Engine Assets appears. Click Import

AR Camera will be added to Hieararchy

While AR Camera is selected, in the Inspector window select Open Vuforia Engine configuration

Vuforia Configuration appears

Login to your Vuforia Developer Portal. Under License Manager, click on the app we created in the previous tutorial

Click the license key to copy it

Paste the copied license key to the License Key slot in Vuforia Configuration

Importing our downloaded Database

Double click the database we downloaded

Import Unity Package window appears. Click Import

———————- Repeat for each Image Target start here ———————–

Creating our Image Target

Adding an Image Target

Right Click on the Hierarchy window. Under Vuforia Engine click Image

The Image Target and its preview appears

Select the image for the Image Target

Next, we will learn to select image for the Image Target. Click the ImageTarget

With the Image Target selected, in the Inspector window, click the Image Target and choose your wanted image.

Adding a Cube so that we can test the target

With the Image Target still selected, Right Click on the Image Target, Under 3D Object click Cube

Resize and Move the Cube so that it is on top of the Image Target’s preview. It should look something like this now

Select your Image Target, and Move your Image Target to the side a little bit. This will help later when we have more Image Target, so that it does not overlap each other. You will see later on when you have multiple Image Targets.

Test the Image Target

Press Play and show your image to the camera. It should work now and you will see your cube appears on top of your image.

Repeat this for all your image targets

———————- Repeat for each Image Target ends here ———————–

How it looks like once done

You will now have something like this

Enabling multiple Image Target tracking simultaneously

Select AR Camera

While AR Camera is selected, in the Inspector window select Open Vuforia Engine configuration

In Vuforia Configuration, change the Max Simultaneous Tracked Images to whatever number you need. For an example, I changed it to 3

Final Test – Lets allow see them all together

Press Play and you will see that multiple Image Targets work now.

Thanks for following my tutorial. Do follow my blog and comment below if you have anything to ask or add.