loader image
Project Overview

VR Avatar Controller

An integrated system utilizing a WordPress interface and a Node.js server to create personalized VR gaming experiences.
Project Type
UX Design
Web Dev
Technologies Used
WordPress
Node.js
different APIs
Figma

Challenges

  • Integrating multiple technologies (WordPress, Node.js, VR apps) to create a seamless user experience for VR game setup and play.
  • Managing real-time data exchange across different systems and ensuring the accurate capture and reproduction of user-specific avatar dimensions.

Solutions

  • Developed a WordPress site as the central user interface where players can set up their gaming session and customize avatars.
  • Utilized Node.js to handle backend operations, including game and OBS session control, ensuring data from WordPress is accurately processed and executed in the VR environment.

Visual Overview

View All

Overview

The VR Avatar Controller is a sophisticated setup designed to enhance VR gaming experiences through personalized avatars and game settings. The system starts with a user-friendly WordPress site accessible on an iPad, where users select their desired game, enter personal details, and customize avatars using the ReadyPlayer.Me integration. This data is stored in the WordPress database and, upon initiating the game, is sent to a Node.js server. The server processes this data to launch the selected Steam game and the LIV application, adjusting the avatar’s dimensions based on the user’s height for realistic gameplay. Additionally, OBS is configured to record the session automatically, saving video files under order-specific names. After the session, the recordings and a JSON file with session data are stored on a shared local disk and then uploaded to an online hosting platform. Each player receives a personalized mini-site displaying their game session details and videos, with a link sent directly to their WhatsApp. This automated, integrated system not only simplifies complex VR setups but also personalizes the gaming experience, making it more engaging and accessible.

Expertise
UX Design
UI Design
Web Development
WordPress Web Development
Branding
magic-wand eye camera pushpin