Your Guide to Straits Quay: AR/VR Series

Introduction

Straits Quay Retail Marina is a shopping mall-cum-marina located within George Town in the Malaysian state of Penang. Opened in 2010, the seafront mall consists of many facilities which include a marina designed for small recreational vessels, a 25,300 sq ft convention centre, various retail choices/eateries and many more.

Objective

This three-part project aims to create a series of Augmented Reality (AR) & Virtual Reality (VR) digital artefacts that can help users to learn more about the facilities that are available at the Straits Quay Retail Marina.

Design Process

The design process essentially started with deciding on a theme for the series of artefacts. Compared to other malls, the Straits Quay Retail Marina has a more unique appearance as its architecture draws inspiration from Penang Island's grand colonial heritage. This led to the decision to have the project's theme be based on the mall's architecture, which largely features intricate wrought-iron works. Below is a moodboard formed from images of the mall's interior/exterior architectural features, which also includes an overall color palette for the project:

Part I: Social Media AR

The first part of the project features the development of a simple face filter through Meta Spark Studio, with Instagram and Facebook being the accessible platforms. The face filter allows users to learn more about the Straits Quay Retail Marina in terms of its facilities. The design process for the face filter first started with a few concept sketches:

The randomizer filter idea was ultimately selected to be further developed. Assets were then created through Adobe Illustrator and Blender, which includes UI elements inspired by the wrought-iron works found throughout the mall, as well as 3D models that represent five respective facilities of Straits Quay.

The created assets were then imported into Meta Spark Studio, where the randomizer filter effect was achieved through the use of the patch editor:

To use the filter, users are required to tap on the screen once to change/randomize the displayed info. Below are the preview screenshots of the face filter as seen in Meta Spark Studio, along with QR codes that direct to the filters:

The video walkthrough below showcases the five different 3D models/information that can be displayed through the randomizer filter:

Part II: Native App AR

The second part of the project involves the generation of 3D models by scanning certain printed materials through an Augmented Reality (AR) mobile app, which allows users to become more familiar with Straits Quay's facilities and environment through information that is displayed on the generated 3D models. A total of two concept ideas were proposed for this part of the project:

As an effort to further enhance the users' interactive experience, the two concept ideas were eventually merged together, where the AR info cards would be stored in a "pocket" within the brochure. Assets were then created based on the aforementioned theme:

The created assets were then imported into Unity, where AR-related projects can be worked on with the aid of the Vuforia Engine plugin. Based on previous trials of the scan points, a problem arose where the design of the scan points of the AR info cards were too similar to one another, hence resulting in the incorrect generation of the 3D models. This issue was amended after adding more unique details to the respective design of each card.

Below are the final designs for the interactive brochure and AR info cards:

To generate the 3D models, users can scan the facility icons provided on both the AR info cards as well as the directory map. Below are a few examples of the generated 3D models when the icons are scanned:

The video walkthrough below showcases the function of the mobile AR app while scanning through different scan points available on the printed materials:

Part III: Virtual Reality (VR) Game

The final part of the project is a virtual-reality (VR) based game that allows players to explore a reimagined version of the lighthouse located at the Straits Quay Retail Marina, which is also known as The Beacon.

Gameplay-wise, players are tasked with collecting six items that are scattered throughout the interior of the lighthouse in an effort to unlock and retrieve the ultimate treasure — The Pearl of the Orient. By playing through the game, players can get to know the various facilities that are available at Straits Quay, as each level of the lighthouse represents a different facility.

In terms of asset creation, most of the assets were created through Blender, which were then imported into Unity to be implemented within the game environment.

The gameplay mechanics were implemented through the XR Interaction Tookit, a Unity package which allows user interactions and the detection of the VR controller inputs through the VR headset. Below are a few screenshots of the gameplay:

The video walkthrough below showcases an ideal playthrough of the game, where all six items are successfully collected from each level of the lighthouse and the Pearl of the Orient is retrieved at the end:

Thanks for Checking Out My Project!

And special thanks to my lecturer, Ms. Noradzlin, for the constructive feedback provided over the span of this project, notably suggestions on the suitability of certain concepts/ideas for the project. Also thanks to Ms. Syarifah and Jaydon Teh for the additional feedback and guidance provided regarding the gameplay mechanics for the Virtual Reality (VR) game.