Experiential Design: Final Project

01/09/2022 - 11/12/2022 / Week 1 - Week 14
Darren Liga / 0351480
Experiential Design Final Project

---

INSTRUCTIONS

Exercise & 3d Models

After following the practical class tutorials about the introduction to unity and the vuforia engine, I started developing my AR app.

Fig 1.1: creating 3d objects (unity)

Fig 1.2: Vuforia image tracking

Since I wanted to make a guide on how to use a coffee machine I currently have at home, I needed the 3d model of my coffee machine. My coffee machine is a vast spread machine that everyone with some knowledge of brewing espresso will know. So I searched google to get a 3d model of my machine to make my life easier. I have several sources of my 3d model, but they are all paid models.

Fig 1.3: paid 3d model

So I outsourced to manually make a 3d model using a mobile phone app, Polycam. Sir Razif also recommended I use that 3d model scanning application. 

Here are the scanned results:

Fig 2.1: PolyCam 3d scan

After several tries scanning a 3d object, I finally figured out how to check it properly to be used.

Fig 2.2: polycam pro to export .obj file

The free version of polycam could not export to the 3d format needed by vuforia, so I had to make a trial polycam to export it as a .obj file to be used in vuforia's model target generator.

Fig 2.3: exported .obj file

Finally got the .obj file needed by the model target generator.

Fig2.4: Vuforia's Model Target Generator

Vuforia's Model Target Generator app is pretty straightforward; once the 3d setup is done, we simply need to export it into a unity-ready format.

Unity

After the 3d model was successfully generated, I needed to head to unity. Followed the tutorial on the basic steps I needed to start my project.

Fig 3.1: First Unity 3d model

Followed several other tutorials on the web on how to mess around with 3d models using vuforia in unity. Figured out how to make it work. Good stuff.

Fig 3.2: 1st hiccup

The 3d model successfully tracked real objects, but the 3d model was also shown. Minor hiccup, there are 2 children of ModelTarget, 1 occlusion object and another target representation. I just needed to deactivate target representation, and the 3d model didn't show up during tracking.

Fig 3.3: Tracking buttons to their dedicated areas

This part of the progress was a bit time-consuming due to the scale of the "3d object world" in unity in contrast with canvas pages. But overall, the process was smooth.

Fig 3.4: scanning ar target page

Referring to the tutorial, we need some page overlay to properly design an Augmented Reality app when no objects are tracked. But that required a page to hide when the objects were tracked.

Video

I shot the video tutorials regarding the use of my coffee machine.

Fig 4.1: Shooting

Fig 4.2: Video Files

I lost the screenshots of unity development during button coding to connect the videos.

Fig 5.1: Button Script (video stuff)

Found a tutorial on google on video scripting.

Fig 5.2: Video Clips

Build Testing:

Fig 5.3: Build video test

Everything working as intended.

Landing Page & Problems

After completing the main ARsceen content, time for me to polish the app landing page.

Designed in Figma.

Fig 6.1: App Landing Page

Followed the first (week 3) tutorial on creating landing pages, having several scenes, and using scripting to connect all locations (gotoAnd).

Fig 6.2: Landing Page scene

Created a new scene for the landing page, following the tutorial.

I had my first problem while scripting to go to the main AR scene after clicking the "start" button. I just remembered that I must create a new script for the button component and edit the main button script. Resetting the buttons.cs would bring my new script back to normal. Instead, I lost all progress hours before submission.

Fig 7.1: Error 1

Fig 7.2: Error 2

Fig 7.3: help needed

Fig 7.4: Recovering VScode previous saved files

I tried several possible methods, finding previously saved versions of unity, like what adobe has. Tried the same thing with VScode, but mine didn't have sourcecode.

I then proceeded to accept everything bombarded to me and started redoing everything.

While importing the 3d object into unity, an idea came out of nowhere. I searched google to get the main code for buttons in unity.

Fig 7.5: buttons.cs Main Code

https://github.com/liuqiaosz/Unity/blob/master/UGUI%E6%BA%90%E4%BB%A3%E7%A0%81/UnityEngine.UI/UI/Core/Button.cs

It worked.

I then continued with the button scripting, making a new script file for the button to gotoPlay my main AR scene.

After finishing the script in unity, I build the app for final submission.

Fig7.6: Build Settings

Added both scenes into build settings. 

Icon and Build in XCode

Fig 8.1: Icon

Designed icons in Adobe Illustrator.

Exported as png.

Fig 8.2: Importing Icons in Unity

Fig 8.3: Build File (ios)

Link to Build File:

https://drive.google.com/drive/folders/14VJ6zBHvDOOirJyPhICdedUcoyo-NRGn?usp=share_link

Fig 8.4: Sideloading app to iPhone

Everything onwards was straightforward.

Fig 8.5: Verifying App in iPhone

Final Video Walkthrough

Vid1.1: Final Video Walkthrough