Experiential Design - Final Task
INSTRUCTIONS
Project Overview
This report documents the development process of our final AR sneaker try-on application from the point after the MVP (Task 3) was completed. The project goal was to enable a realistic virtual sneaker try-on experience using Unity, Vuforia (marker-based tracking), and custom 3D models — while integrating UI interfaces built in Figma.
Post-MVP Development Workflow
1. Transition to Marker-Based AR (Vuforia)
After completing the MVP (which used tap-to-place interaction), I changed to marker-based AR using Vuforia. This enabled more consistent positioning by positioning the shoes directly onto image targets.
-
Logged in to Vuforia developer account and used the license key.
-
Added the Vuforia Engine to the Unity 2021.3.45f1 project via Unity Package
Manager.
-
Created a custom database on the Vuforia Target Manager and uploaded two
unique sneaker marker images.
- Imported the .unitypackage from Vuforia into Unity to add the image targets.
- Placed the
ImageTargetprefabs in the Unity scene.
Fig 1.3, Image target & Cube & 3D Model
-
Made sure each
ImageTargetwas linked to the correct database and corresponding marker name in the Inspector.
Fig 1.4, Image Target Inspector Settings
2. Ground Plane (Cube) Setup
To create a visual experience like a showcase and make the AR shoe feel grounded, I placed a 3D cube under each shoe.
- The cube was manually sized to fit beneath each shoe model.
- Originally, the plan was to apply textured materials like metal or ice.
-
This would involve:
- Applying a Base Map texture for color/texture
- Adjusting smoothness for surface reflection
- However, I faced challenges creating/importing custom materials that properly adapts to the cube’s mesh. So initially, I decided to use Unity’s default material for visual simplicity.
3. Shoe Prefab Controls: Rotate & Scale
To enhance interactivity, I implemented gesture-based manipulation:
- Pinch-to-scale: Users can zoom in/out on the shoe.
- Two-finger drag: Users can rotate the shoe around the Y-axis.
Fig 1.6, Rotate & Scale C#Script
- One shoe prefab (Shoe 2 in FBX format) rotated around the scene instead of in-place.
- Not sure whats the problem spawn position is way off as well
- In the end decided to not use Shoe 2 (Converse)
4. UI Import from Figma to Unity (By Ian Choo)
UI screens were created in Figma, then rebuilt in Unity by Ian. This allowed the app to have a polished interface transitioning from login to the AR experience.
Pages Included:- Login Screen
- Home Page (3 interactive shoe cards)
- Individual Shoe Description Page
- Camera/AR View Page
- Ian exported assets from Figma (using PNGs or Figma plugin).
- Rebuilt screens using Unity’s Canvas UI system.
- Added interaction logic using Unity's Button & EventTrigger components.
5. Managing Multiple Sneaker Prefabs
We managed to do 3 shoes, each linked to its own image marker and prefab.
Format Differences:- Shoe 1: .obj file
- Shoe 2: .fbx file (Not Working)
- Shoe 3: .obj file
- Shoe 4: .obj file
- FBX shoe had incorrect pivot and spawned off-position.
- Also rotated in orbit instead of around its local axis.
- Tried to fix by nesting the FBX prefab inside an empty GameObject at position (0,0,0), initially still failed to locate the shoe 2
Troubleshooting & Recovery
- During Vuforia database import, the scene hierarchy was accidentally cleared.
- Fixed by reopening the correct scene from
Assets/Scenes. - Re-applied AR Camera and ImageTarget settings.
Final Result
- 3 image markers activate 3 different shoes.
- Each shoe supports pinch to scale and rotation gestures.
- Ground cubes used for positioning and showcase vibe
- Figma based UI imported and integrated.
- Smooth and consistent marker tracking using Vuforia.
Final Presentation
Reflection
This final task helped me dive deeper into AR marker tracking, prefab nesting, UI/AR integration, and interaction design in Unity.
What I learned:- Working with .fbx and .obj files requires awareness of pivot placement and child-parent relationships.
- Marker based AR is wayy more stable than markerless tap to place but depends heavily on 3D model alignment as well as the designers personal skill
- Ground cubes with proper materials would enhance the vibe of the whole experience with real life light reflection and stuff but I faced technical challenges applying custom textures properly. As a result, I left the cube with the default Unity material to maintain visual clarity.
- Teamwork was crucial in blending UI and AR flows especially collaborating with Ian on the setup.
- Create dynamic UI options for switching shoes in runtime.
- Add transition animations when markers are scanned.
- Better understand Unity's URP material system to improve visual realism for surfaces and props.
Comments
Post a Comment