Labels

Experiential Design / Task 3

19/11/2024 - 15/12/2024 / Week 9 - Week 12
Iman binti Kamarudin / 0364014
Experiential Design  / Bachelors of Design (Hons) in Creative Media
Task 3:
LECTURE

Week 9
During this week, we had a tutorial on camera raycasting and getting an object to play an animation when the camera points at it.

Notes:
- Begin working on the development and exploration of your app
- Prove that it can work first


Week 10
In week 10, we learned how to create and import a 3D avatar from Ready Player Me. We also used Mixamo to animate our avatar and got the character to play a different animation sequence when a specific button was pressed.


Week 11
In week 11, we continued on from our image target exercise and learned how to switch specific 3d objects as well as their materials.

INSTRUCTIONS


EXERCISE 9
In this exercise, we played around with camera raycast and getting an animation to play when the specific object is scanned.

Afterwards, we tried to figure out how to get another object's animation to play when an object is scanned (eg. scan the sphere but the cube animation plays and etc.)


EXERCISE 10
We learned how to create and import a 3D avatar into unity and have it play animation sequences when specific buttons are pressed.

First, we created our avatar on Ready Player Me and animations using Mixamo. Then we imported them into Unity and applied the materials to the model.

Afterwards, we made an animation sequence in the animator panel and then added buttons to play two different animation sequences.


EXERCISE 11
We learned how to spawn different 3D objects when the corresponding button is pressed as well as how to swap the materials when the object is clicked on.


TASK 3
To begin, I first watched some videos on creating an AR navigational experience on YouTube. Then, I downloaded the Vuforia Creator App on my iPad to see if it can scan area targets. Once I confirmed that it could, I went and scanned the areas where my user will walk to get to the club room.

Fig 1.1 - 3D Scan of Navigation Start Point

When scanning the area targets, I thought of the easiest path to get to the club room from a higher floor. I decided instead of starting the experience in a classroom, since it can be a larger room than other places on campus, I used the Recharge Room in Block D, level 7 to start the experience. I also had to scan all the areas at night since it was the only time there would be significantly less people.

I started by scanning the room itself and then the hallway leading to the lift. I tried scanning the lift however it didn't work since it was a very small space and the scan would move if the lift was moving. Instead, I just started another scan beginning from the first level at Block D in front of the lift. During the scanning phase, I faced a lot of issues with the app suddenly losing its place and having to relocalise however it wouldn't load and I had to restart my scan again.

Fig 1.2 - All 3D Scans in Unity

After scanning all the areas, I created a new project in Unity and added the Vuforia package as well as the area targets. I watched a couple of tutorials however it was difficult choosing which one to follow as I needed to be able to combine multiple area targets together and have the navigation mesh.

List of Tutorials:

Before I knew it, I was running out of time so I decided to pivot and focus on the other AR experience for the app. This one is marker based and will display the departments in the club's Board of Directors. When the user selects a department, it will then show the members under that department and basic details on their role etc.

To start off, I took a picture of the physical vinyl that we have displayed in our club room and edited it. I then added it as an image target in the Vuforia database. (Tip: Vuforia won't let you upload the image sometimes if its a PNG and not in RGB mode).

Fig 2.1 - TMC Vinyl

Fig 2.2 - Edited TMC Vinyl

I set up my AR camera and image target in a new Unity scene. 
Afterwards, I surfed the internet to find a vinyl player 3D model. Once I imported it, I duplicated the vinyls for each department and changed the material of the inner part to a different color.

Fig 2.3 - 3D Vinyl Player Model

Then, I added text underneath each vinyl to let the user know what department each vinyl represents. I also added next and previous buttons to the canvas to switch between the vinyls.

Fig 2.4 - Design Department Vinyl

Fig 2.5 - Temporary Next & Previous Buttons

Once I got the next and previous buttons to work, I created canvases for each department and added all the members in the departments.  In my Figma prototype, some of my UI elements had rounded corners however I discovered that Unity apparently doesn't have a built in feature to created rounded corners for their UI? I found and imported a package from the internet that lets you do that.

Fig 2.6 - Member Info Card Display

Fig 2.7 - Canvas Layout

After that, I added a 'Confirm' button to the canvas and added a code in the script to toggle the corresponding canvas when a vinyl is selected. However, when it turned the canvas for the department on, the record player still stayed so I made sure to disable it when the user selects a vinyl.

Fig 2.8 - Canvas in AR Experience

Once I got the canvas toggle to work, I needed to figure out a way to get the 'Next' and 'Previous' buttons to work to switch between the members in every department. I updated the code to check whether the user was in the vinyl selection mode or the canvas mode. If it was in the vinyl selection, then the 'CycleVinyl' and 'PreviousVinyl' voids would play. However, if it wasn't in the vinyl selection mode then it would play the 'NextMember' and 'PreviousMember' voids.

Then, I made it so the 'Confirm' button would hide when the user is in the canvas selection mode and reappear when the user goes back.

After I got the marker based AR to work, I created two scenes for the pages when the user first opens the app and the main menu of the app.

Fig 2.9 - Project Scenes

For the app start scene, I created two canvases; one for the splash page, one for the login page. I then added all the UI elements according to what I did in my Figma prototype. Afterwards, I created an empty game object and assigned a script to it to manage the two canvases. I then searched up how to get the splash page to be enabled first and then after a few seconds, disable itself and enable the login page. I also added a void to load the main menu scene and linked it to the start button in the login page.

Fig 2.10 - Splash Page

Fig 2.11 - Login Page

Fig 2.12 - Splash Page Code

Then, I created the main menu and a script to load the corresponding scenes for each button. I had to use images instead of buttons to go to each page since the rounded corner script doesn't work with buttons that have a sprite. Therefore, I used the event trigger component to act as a button feature.

Fig 2.13 - Main Menu Scene

Fig 2.14 - Script to Load Scenes

Afterwards, I created another canvas to let the user know they have to scan the vinyl and once they tap on the screen, they can proceed to scan. I added a script to load the main menu when the back button is pressed in the initial canvas and another script to always display the 'scan TMC vinyl' screen in the beginning of the scene and disable the AR canvas. I also added a void to then disable the initial canvas and display the AR canvas when the user presses anywhere on the screen.

Fig 2.15 - Initial Canvas in BOD AR Scene

Fig 2.16 - Script to Disable Initial Canvas


FINAL

Fig 3.1 - Task 3 Presentation

Done:
- Board of Directors AR
- Splash Page
- Login Page
- Main Menu
- Scans for the navigation experience

To Do:
- Navigation Experience
- Update AR UI
- Add screenshot feature in the department view
- Events Page
- Add sound effects


FEEDBACK

Week 9
Specific Feedback - Try using the app Immersal and see if mapping areas works, if not then can use Mr. Razif's ipad.


REFLECTION

This task was.....insanely painful. I was struggling a lot with my motivation on this task because I'm unfortunately a perfectionist and if I don't understand something right away I'll get frustrated with myself and my work. Other than that, there were so many obstacles thrown at me during this task.

For example, trying to scan the areas on campus was so much harder than it needed to be as sometimes it'll lose its place and if it doesn't manage to find its way back you'll; 1. Have a messed up scan and 2. Might have to end the scanning session prematurely. It was also really hard because there's a lot of people on campus during the day so I had to stay on campus until 8pm and even come on the weekends just to scan it. Furthermore, there is a lack of references on creating a navigational AR app in Unity on the internet and any tutorials that exist use methods different from each other which makes it difficult to know how to proceed.

Additionally, despite the heavy workload that I forced upon myself last semester, I seemed to not have learnt my lesson because I didn't really think through how hard it was going to be to create TWO AR experiences for this task in the span of 14 weeks while juggling my other assignments. Oh well.

Overall, this task is so incredibly tedious but I know I'll survive. Probably.
Labels:

Comments

Post a Comment