An Immersive Design Project - Part III: AR Development

An Immersive Design Project - Part III: AR Development

Kc. details her well-thought-out immersive media project from Rookie Awards 2023. As the Immersive Media Category's Rookie of the Year 2023 and a recent graduate of The One Academy of Communication Design, Kc. offers a valuable framework for beginners in immersive design.

In the last article of this series,  Tan Kai Ching, known professionally as Kc., will share details of the finishing touches she applied to her project, starting from the core experience (interactive trailer) to the subsidiary experiences (pre- & post- stages). Piecing it all together, fine-tuning the nitty-gritty details, and, in the end, bringing “Unfold: Beyond the Unknown” to life!


Time to Lock in the Execution Plan!

As I prioritised research, concept development, and execution plans, I realised that I had less time than initially expected for full execution.

Since the campaign was divided into 3 stages, I got the “green light” to focus exclusively on developing the core experience, allowing users to interact with the AR interactive trailer in real life. For the pre- and post-experiences, I created mockups to show the full journey concept, which reduced my workload.


Execution Plan & Research

I researched GUI references, including icon placements, app layouts, and tutorials to achieve the desired GUI art style.

Furthermore,  I explored user-friendly cues to help users initiate the AR experience with the trailer, investigating techniques like moving black borders, enhancing scannable objects within scenes with radial fast blur effects or vignettes, and adding idle effects during scene freezes.

In this phase, I consulted with lecturer Mink to validate the feasibility of my plans. His technical insights, especially for “special cases” of coding techniques, were invaluable. In the end, I decided to limit the AR experience to within 3 to 5, ensuring users can enjoy the trailer.


Core Experience Interactive Trailer: Mo-graph Final Touches

Refining the details of each scene:

  1. Re-traced the fonts for the "Doctor Strange" title in the last scene.
  2. Replaced the placeholders in Cinema 4D with finalised 3D assets.
  3. SC07's focus shifted from figures to the significant Darkhold scene at Kamar Taj, as seen in the released trailer. SC08 changed with the removal of redundant background elements, putting more emphasis on the character.
  4. Technical trials and errors for simulation effects in both C4D & AE.

I later enhanced the trailer by incorporating 2D graphics from Procreate and After Effects, enriching it with overlay VFX footage. Next, I added user-friendly AR hints and guidance necessary for the trailer. Finally, all the VO, SFX, and BGM were included to achieve the polished final result.


Core Experience Interactive Trailer: AR Design

While fine-tuning the trailer, I had just about 2.5 weeks to create the entire AR experience, including core AR and pre- and post-subsidiaries.

Core AR Design: Part I

I delved into the asset development for the trailer collectibles, shifting from both Cinema 4D and Adobe Illustrator to Unity 3D.

On my first try, I faced challenges getting 3D assets baked textures from Cinema 4D to work seamlessly with Unity. In my second attempt, I continued experimenting, this time utilizing 2D (.png) and 3D (.obj) assets exported from Adobe Illustrator by trying to replicate the 3D asset style from Cinema 4D.

Next, I exported Illustrator assets as SVG to Blender and tried to match the look through extrusion, materials, and lighting, following tutorials. However, it didn't quite capture the intended art direction. Also, Illustrator effects like inner glow didn't transfer to Blender, making it challenging to recreate similar effects using just emission materials in Blender.

Ultimately, I chose to recreate all the materials in Unity 3D as closely as possible to the 3D assets in Cinema 4D, even though they weren't an exact match to the Cinema 4D rendered scene.

Core AR Technical Progress

I had another consultation to tackle about 70% of my technical issues, mainly on the inventory system for collectibles.

Next, I imported the finalised image targets with improved detection ratings. To facilitate usability testing, I downloaded UI placeholders from Unity Hub. Additionally, a core AR technical checklist for Unity coding is created to ease the coding process.

Core AR Design: Part II

I created 2D UI icons in Adobe Illustrator and imported them as PNG into Unity to replace placeholders. In Unity, I animated everything, including 2D UI icon states and 3D collectibles. I also introduced a start screen, tutorial screens, and logo.


Subsidiary Experiences: AR Design

When I got into Subs AR design, I believe I had less than a week before the project was due. Luckily, I had my initial plan in place, so all I had to do was stick to it and make a few tweaks as needed.

Pre-Movie & Post-Movie AR Design

  1. Modeled and experimented with materials for the 3D scenes in Cinema 4D which was the same process as the core AR.
  2. Animated the 3D elements and the room, incorporating camera movement to simulate real-life AR interactions.
  3. Exported individual animated assets as PNG sequences were later imported into After Effects (AE) for post-production.
  4. Created poster and app UI mockups in AE with animations like particle & portal effects > Color adjustment > Added VFX, SFX, and BGM needed.

"Packaging" Unfold

In packaging "Unfold", I tackled various aspects. Crafting the concept board involved logo design, layout arrangements, and selecting the right footage, all while playing with composition and colours. The real challenge was distilling these diverse experiences into an idea graspable by anyone.

For the concept video, I crafted storyboards, researched clips, and sourced suitable footage while keeping the text minimal. I even created “manual” mockups to make the concept believable, fine-tuning pacing, and SFX through revisions.

The experience walkthrough video extended mockups from pre- and post-movie AR experiences. For the core, I screen-recorded the interactive trailer using the Unfold APK file for mockup purposes. I also developed extra mockups, simulating interactive posters in both the cinema waiting lounge and exit hallway.


For Those Who Made This Journey Special!

Last but certainly not least, I’d like to express my gratitude to everyone who has been by my side on this incredible journey: my beloved family, friends, and the unsung heroes - my dedicated lecturers. Words couldn't explain just how grateful I am for the unwavering support of lecturers like Lin Yew, Louise Ooi, Mink Tan, Jonathan Lim, and Wilson Ng.

A heartfelt shoutout to my project supervisor, Jeremy Phun, who believed in me even during moments of self-doubt when I questioned my ability to bring “Unfold” to life. It was a tough ride, and there were times when I almost gave up on executing the AR core experience. Thank you all for being there for me, both mentally and physically. As a student, I couldn't have asked for more.

Link to my full project on The Rookies and Behance.