0xHÖR :
An Online Meta-Limbo between Berlin and Taipei

A web registration portal developed for an online virtual party.
Augest, 2021

>>> View Website

 
 

/ Project Info /

After the successful collaboration with UNSOUND and Rewire Festival, 0xcore aims to host a series of online parties in its multiplayer gaming space and is committed to working with artists and communities worldwide.

The 1st online party: 0xHÖR, is launched by 0xcore and is a collaboration between 0xcore and the Berlin HÖR radio. A fantastic line-up of transcendent, future-thinking experimental sounds, including Berlin-based artists: GIL, Why Be, Mobilegirl, Taipei-based artists: Meuko!Meuko! and Jon Du. Special guest Final Taipei, the director of Final, and club manager Tenga Babe will party with all of you.
It’s time for a real Real-Live party, upload your soul and recreate your virtual-self in 0xcore.world.

>>> About 0xcore / Instagram
>>> RA / Hackazine

/ Job Position /

In this project, I acted as a front-end developer and cooperated with 0xcore team to develop a web registration portal for an online virtual party. The audiences were able to enter the virtual party (made with Unity3D) and registered their virtual identity through the web portal. And, before the audiences actually entered the virtual party, they had to go through the process below on the front-end pages.

Waiting for loading the virtual scene >> Log-in / Register >> Set up their Avatar’s photo & info
>> Go through the tutorial pages >> Quality Settings
>> Join the party scene (made with Unity3D)

Besides, after the audiences started to explore the virtual party, they still could open the menu written on the front-end pages to
acquire the Info / Schedule / Tutorial or adjust their virtual scene quality

 

/ Technical Sheet /

  • HTML5 , CSS

  • Javascript

  • Canvas
    (edit Avatar Images)

  • Vue.js / Webpack

  • Firebase

/ Requirements /

  • User Registration system / Log-in system via Firebase

  • Users can upload Avatar photos and automatically save thumbnails to Firebase
    with different sizes (1024, 512, 256, 128)

  • Users can modify Avatar photos on website (ex: scale, move, crop photos)

  • Retrieve data from Firebase in real-time (Announcement / Website close or open)

  • Get / Send Data between Front-end and Unity3D WebGL

  • Mobile Version (Display the event info only / link to watch live stream)

/ Landing Page /

If the browser doesn’t meet the requirement, the entrance is disabled.

Loading the Unity3D Scenes

 

/ Log-in & Register /

Log-in Page

Register Page: Set up e-mail / password / Avatar image & ID

After the user upload the Avatar photo, the photo & ID will be shown on the virtual character (in Unity3D)
(The photo & username data are sent to Unity3D in real time )

/ Tutorial & Quality Settings /

 

Quality Setting for virtual scenes

 

/ Enter the Virtual Party /

Users press ‘Tab’ key to open the menu made on Front-end

Users can reset their quality settings in Menu

/ Mobile Version /

 

Mobile version
(only dislayed the landing page)

 

/ Performance Record /

Next

Taiwan NOW (2021)