Lunatic Town 神不在的小鎮
A web portal developed for an online immersive performance.
October, 2021
/ Project Info /
In celebration of the Autumn performance art festival held by National Theater and Concert Hall in Taiwan, ‘Lunatic Town’ (神不在的小鎮) debuted Taiwan’s first “5G theater performance” on Oct. 30. 2021 This unique dramatic production was staged physically and streamed live, attracting tens of thousands of internet viewers.
"Lunatic Town" is an innovative performance that combines 5G technology, online live broadcast, immersive theater, and video game virtual reality. The story is about a murder case in a small town. It revolves around a cyberbullying incident, and explores what is true and false in the internet and real world.
>>>> ‘Lunatic Town,’ a theater performance starring 5G (News)
>>>> National Theater and Concert Hall Program Page
/ Job Position /
In this project, I acted as a front-end developer and cooperated with NAX corp.’s team to develop a web portal for an online performance. During the performance, the audiences were able to enter the virtual performance stage (streamed by Furioos) through the web portal. Before the audiences really started their journey exploring the virtual space (streamed by Furioos), they had to go through the process below on the front-end page.
Waiting for loading the virtual scene >> Set up their Avatar’s name >> Watch tutorial
>> Explore the virtual world! (Furioos) >> Sending data (ex: Chat) to Furioos / Interact with Furioos through Front-end Page
Besides, the audiences could visit the web portal and finish their log-in process either with Desktop or Mobile (Android / IOS)
/ Technical Sheet /
HTML5 , CSS
Javascript
Vue.js / Webpack
Firebase
/ Requirements /
Retrieve data from Firebase in real-time
(Announcement / Website close or open)Send Data from Front-end Page to Furioos
Develop Desktop / Mobile (IOS, Andriod) interactive interface
/ Desktop Version /
Log-in Process (1) : Audiences visit the web portal and wait for loading scene
Log-in Process (2) : Audiences key in their avatar's name
Log-in Process (3) : Tutorial
Audiences start to explore the virtual performance stage and can start to chat
(send messages to Furioos from Front-end Page)
/ Mobile Version /
As audiences visit the site from Apps (ex: facebook), the website would require them to copy the website URL and re-open the site from Chrome (Android) / Safari (IOS)
As the Furioos streaming is full, front-end page would receive messages from Furioos and tell audiences to wait in line.
The mobile version would automatically detect the orientation of mobiles and require users to hold their phones horizontally.
In order to maintain the best immersive experience for users to explore the virtual world, in Mobile version, if the users aren’t in full-sceen mode, the website would show warning.
After seeing the warning, users can swipe up to enter full-screen mode.
Log-in Process (1) : Audiences visit the web portal and wait for loading scene
Log-in Process (2) : Audiences key in their avatar's name
In the mobile version, especially for IOS, the input field would automatically jump up as the mobile’s keyboard appear. (To avoid being covered by the keyboard)
Log-in Process (3) : Tutorial
Audiences start to explore the virtual performance stage and can start to chat
(send messages to Furioos from Front-end Page)
/ Performance Record /