Flowz

game world import and bounding box to define player constraints
League world import and bounding box to define player bounds
Early stage Player visualisation
additional UI features implemented. Player trails along with nameplates.

Flowz: Immersive VR Visualization for Esports and Gaming

Flowz originated from a moment of profound inspiration during a demonstration of Lapz on the Apple Vision Pro. Witnessing Formula 1 cars dynamically racing along a three-dimensional track superimposed on a coffee table revealed the transformative potential of spatial computing for interactive entertainment. This experience illuminated the possibility of extending such immersion to gaming and esports, where real-time player actions could be visualized in a shared virtual environment. Flowz emerged as a dedicated tool to bridge this gap, initially tailored for the Extended Movement Mod (EMM) in Garry's Mod—a high-velocity parkour system emphasizing fluid momentum, strategic traversal, and competitive evasion in games like tag.

The development process began with a modular architecture to ensure seamless data integration and VR compatibility. Leveraging Meta's Immersive Web SDK (IWSDK), the core visualization engine was built in TypeScript under the /src directory, rendering a 3D urban landscape where player positions, velocities, and trajectories appear as dynamic avatars. An Express.js server in /server acts as a real-time relay, fetching data from Garry's Mod via Lua scripts in /gmod, which track client-side movements and transmit them securely over HTTP. Static assets, including 3D models and textures, reside in /public for efficient loading. Prerequisites were straightforward: Node.js (version 20.19.0 or higher), Garry's Mod, and a Meta Quest headset. Setup involved installing dependencies with npm install, configuring Garry's Mod's http.cfg for localhost access, and running parallel servers (npm run server for data relay and npm run dev for IWSDK). Controls in-game, such as the !flows_toggle chat command, enable/disable tracking, with console debug output for refinement.

Throughout prototyping, I gained invaluable insights into the intricacies of cross-platform synchronization. Real-time data streaming demanded robust error handling for network latency, teaching me the importance of WebSocket fallbacks and throttling to maintain VR frame rates above 72 Hz. Challenges were multifaceted: Garry's Mod's Lua sandbox restricted direct server queries, necessitating client-side hooks that risked desynchronization during high-movement scenarios (fixed with help of EMM community allowing for server integration).

For future improvements, Flowz will expand beyond EMM to encompass broader esports ecosystems. Early prototypes for League of Legends spectating are underway, trying and failing to integrate Riot's API for champion paths and ability cooldowns into the 3D viewer, fostering collaborative analysis for teams. Planned enhancements include multiplayer VR lobbies for remote coaching, AI-driven highlight reels, and integration with Meta Horizon Store for public distribution. These steps aim to redefine live esports entertainment, enabling immersive, scalable experiences that captivate global audiences. Screenshots

Garry's Mod Prototype Visualization League of Legends Spectating Prototype