Immersive Visual Effects | Project 3

|| Tee Zi Tong, 0366165

|| Immersive Visual Effects | Project 3

|| Week 10 - Week 14

INSTRUCTIONS

PROJECT 3: POST-PRODUCTION

PROCESS OVERVIEW

After our content was approved, Ying Xuan and I shifted our focus to developing the Augmented Reality (AR) component. For this stage, we decided to create a web-based AR experience that allows users to interact with the project by selecting and switching between different travel videos, simulating the experience of travelling to various countries.

Mr. Fauzi advised us to keep the AR execution simple and reminded us that AI tools could be used to assist with technical tasks such as coding.


AR WEBSITE DEVELOPMENT

To develop the website, we used AI-generated code as a foundation. The generated code was then transferred into Adobe Dreamweaver, where we adjusted and organised the structure to suit our project needs.

Once the website was functional, we uploaded the files to Netlify, which allowed us to host the site online. A QR code was then generated so that viewers could scan it and access the AR experience while engaging with our physical installation.

WEEK 12: TROUBLESHOOTING & REFINEMENT

At this stage, we encountered difficulties connecting the AR website seamlessly with the projection mapping setup. Since the issue had not been fully resolved, Mr. Fauzi suggested that we consult classmates and friends to learn from their experiences with AR projects.

Following this advice, we conducted multiple rounds of testing, modifying the code and adjusting settings to improve the connection between the website and the projection system.

In addition, we designed a more visually engaging QR code page to make it clearer and more appealing for users to interact with.

Fig 1.1 QR Code Page

Fig 1.2 “Touch the World” Website Interface

PHYSICAL OBJECT REFINEMENT

After completing the AR component, we moved on to improving the physical globe. Initially, we sprayed the ball with matte white paint to enhance projection clarity. However, the projection results were still not ideal.

To improve the surface quality, we decided to wrap the globe with textured paper instead. This approach better resembled a real globe, as the uneven surface helped represent natural landforms such as mountains, canyons, and varied terrain, resulting in a more visually convincing projection.

Fig 1.3 Globe Spraying Process

Fig 1.4 Final Globe


FINAL PROJECTION ADJUSTMENTS

Before the final presentation, we conducted another round of projection mapping to ensure everything was functioning properly.

Fig 1.5 Projection Mapping Progress

During this test, we noticed that the Earth video background was obstructing certain parts of the travel footage. To solve this issue, we used Adobe After Effects to remove the black background by applying masking techniques.

The workflow involved:

  • Selecting the relevant layer

  • Applying a mask

  • Isolating the desired object

This adjustment allowed the travel visuals to appear more clearly on the globe.

Fig 1.6 Cropping Process Using Masking

POST-PRODUCTION SLIDE

All post-production progress, including AR development, physical refinements, and final adjustments, was compiled into a presentation slide deck.

1.7 Project 3: Post-Production by Tan Ying Xuan & Tee Zi Tong

FINAL OUTCOME

The completed project combined projection mapping, a physical globe, and an interactive AR website to deliver an immersive travel experience.

Fig 1.8 “Touch the World” Final Outcome (YouTube)


FEEDBACK

Week 11

The content was considered satisfactory, and we were encouraged to focus more on completing and refining the AR component.

Week 12

We were reminded that discussing technical challenges with classmates and peers can be an effective way to solve complex problems collaboratively.

Comments