Experiential Design - Task 3

Name : Ivy Chung Ai Shin

Student ID : 0358429

Course : Bachelor Of Computer Science (Hons) 

Week 8 - Week 10 

Task 3 Progress : 

In this task , we will be moving on to create the prototype for the app showcasing the workings of the AR experience. Firstly, I proceed to create the model target for the car engine. After doing my research , I figured to use polycam to capture and obtain the car engine model. Therefore , I downloaded the polycam app Polycam on my device and took pictures of my car engine in which the app will generate the car engine model.

In the end , it turned out to be relatively clear and accurate. Moving on , I had to create the model target using the model target generator provided by Vuforia. I proceed to create the model target as shown below. 

Here , I had to adjust the guide view to ensure the visibility of the car engine model from all angles. 

As I planned to create a visual effect on the engine parts , I had to create meshes for each engine parts. Thus , I carefully extracted each engine parts and created model targets for all. 

Following the Figma , I created the basic UI for the app with scene management between screens. I created multiple scenes based on the prototype planned as before. There will be scenes that includes : 

1. onBoarding Screen
2. Main Screen
3. Home Screen
4. Inspect Screen
5. AR Screen

Following in class , I have also created the MySceneManager script that will allow me to load the scenes. 

I first develop the onBoarding screen where users will first come across as they start the app. 

Then , they will proceed to the Home screen.  

In this screen , I figured to add in animation that will inform the user to flip their phone horizontally as they scan the car for a better experience. 

In this screen , I have also added the custom UI elements such as the button. Here , I created a sprite swapfor the button as the user clicks on it , changing its colour , thus creating a more immersive user experience. 

Additionally , I also created another sprite for the above component as shown.

Therefore , this is how the screens load from one another with the scene manager. 

Moving on to the AR Scene , I imported the Vuforia Models that was generated as explained above into the assets. 

From there , I then downloaded a free asset , also known as Force Field,  from unity asset store that will allow to show a cool highlight effect onto the individual engine parts.

Lastly , I also added a free Sci-fi UI elements for the this screen as I wanted a transparent effect to be displayed on the screen. 

 

First Test : 

Final Test : 

Prototype Presentation : 

Reflection : 

Throughout this prototype stage , it was definitely not easy and was relatively challenging as the learning curve was steep. Before I could start , I had to figure out what I could do to allow the AR camera to identify the car engine parts. Therefore , I came across model target as one of the solution. Thus , I also went to study the documentation on how to do model target with vuforia as well as how to work with polycam. I then proceed to work with polycam on my car engine and had successfully made it work. After generating each of the engine model , I proceed into applying what was taught in class such as scene management and playing with the UI elements animation. For the AR , at first , I had difficulty in understanding on how I can add a highlight effect on each of the engine parts when I had only model out the overall car engine. Thus , I figured that I had to model each of the engine parts one by one to obtain the meshes of each of them. Then , adding the meshes into the car engine model. Lastly , I added the downloaded UI to show the name of the engine parts. This then sums up the prototype that I have did. 

<<What's Next To Do>>

• Add inspection tutorial + information 
• Add 3D model hand + Camera Raycasting