DavisVerse

Inspiration

University campus life is vibrant, but it is incredibly easy to feel isolated. During the recent UC Davis Picnic Day, we felt this firsthand. With hundreds of events scattered across campus, trying to track what was happening and navigating using the outdated, static official website was an absolute nightmare.

We realized a broader problem: campus event discovery is broken. Most student clubs post exclusively on Instagram. To stay up-to-date, you have to follow dozens of fragmented student groups, monitor stories constantly, and hope they don't get buried. If you don't know the right accounts, you are left in the dark.

This friction does more than ruin event discovery—it contributes to a silent epidemic of college student loneliness, social isolation, and depression. We built DavisVerse to fight this loneliness. We wanted to convert the physical campus into a shared, living, breathing 3D multiplayer social sandbox where finding your community and joining spontaneous events is as easy, fun, and natural as playing an MMO.

What it does

DavisVerse is a real-time, WebGL-powered 3D multiplayer campus sandbox that mirrors the physical UC Davis campus.

Immersive 3D Navigation: Students control a 3D avatar, exploring an exact, beautifully modeled scale replica of the UC Davis campus—including iconic landmarks like the Memorial Union, Shields Library, and the ARC.
Real-Time Multiplayer: Students can see other active students moving and running across campus in real-time with smooth player models and floating 3D nametags.
Spontaneous Event Creation: Any student can create an event on the fly (e.g., pickup basketball at the ARC, or a study group in Shields). The system automatically calculates custom offsets to spawn the 3D event marker right in front of the building entrance.
Proximity Radius Events: When an avatar's coordinate $ P = (x_p, z_p) $ enters the proximity radius of an event coordinate $ E = (x_e, z_e) $, the frontend dynamically pulls up rich event details, allowing them to RSVP.
Real-Time Event Chats & Announcements: Once RSVP'd, students enter a dedicated Socket.io chat room to coordinate, chat, and receive instant megaphone announcements from the event organizers.
Left-Sliding Registry: A sleek, dark-glassmorphic sidebar drawer listing all active events in a clean registry, keeping students connected without cluttering the map canvas.

How we built it

We built DavisVerse from the ground up during the hackathon using a modern, high-performance web stack:

3D Asset Engineering: We used the Blosm Blender Add-on to import real-world coordinate maps and OpenStreetMap (OSM) geometry data directly into Blender. We then refined, optimized, and compiled the 3D UC Davis model into lightweight, high-performance GLTF files.
Frontend Render Loop: Built using React Three Fiber (R3F) and @react-three/drei inside a Vite + React framework. This let us leverage React's declarative state model while rendering hardware-accelerated WebGL.
State Management: Orchestrated using Redux Toolkit (RTK) to manage user profiles, selected events, UI sidebars, and real-time multiplayer coordination.
Real-Time Synchronization: We used Socket.io on top of a Node.js + Express backend, storing database models in MongoDB via Mongoose.
Multi-User Authentication: Integrated Clerk Authentication to handle secure, seamless student login workflows.

The Mathematics Behind DavisVerse

1. Distance & Proximity Detection

To trigger automatic sidebars, we run distance checks in the 3D render loop. The proximity check satisfies the inequality:

$$d(P, E) = \sqrt{(x_p - x_e)^2 + (z_p - z_e)^2} < \theta$$

Where $ P $ is the player's 2D coordinate, $ E $ is the event coordinate, and the proximity threshold is configured at $ \theta = 6 $ units.

2. Smooth Multiplayer Interpolation (Lerp)

To ensure remote players move smoothly across your screen even with network latency, we perform Linear Interpolation (Lerping) inside the R3F useFrame rendering loop at 60fps:

$$P_{\text{current}} = (1 - \alpha) P_{\text{current}} + \alpha P_{\text{target}}$$

Where $ P_{\text{target}} $ is the target position received from the server, and the interpolation weight is set to $ \alpha = 0.15 $ for butter-smooth gliding. We also normalize yaw rotations to prevent sudden radial flipping:

$$\Delta \theta = \theta_{\text{target}} - \theta_{\text{current}} \pmod{2\pi}$$

3. Smart Network Throttling

To keep socket traffic light and prevent connection lag-spikes, we throttled client updates. Instead of emitting coordinates on every screen frame ($ 60\text{ Hz} $), we emit updates at a maximum frequency of ($ 20\text{ Hz} $) ($ \Delta t = 50\text{ ms} $) only when moving. The number of packets sent is optimized by the relation:

$$N_{\text{packets}} = \min \left( f_{\text{render}}, \frac{1}{\Delta t_{\text{emit}}} \right)$$

When the player stops running, a final synchronization packet is dispatched to lock down the exact final coordinates.

Challenges we ran into

Reducing 3D Assets Lag: Initial Blender OSM map imports were highly unoptimized, featuring millions of complex polygons that choked mobile browser GPUs. We spent several hours manually decimating geometries, combining materials, and baking lights to ensure 60fps performance on any device.
React Render Lag vs. 3D loops: Dispatching local coordinates to Redux at 60 FPS from the 3D loop originally choked the React Virtual DOM, causing severe screen freezes. We resolved this by bypassing React state during movement—emits are calculated natively inside useFrame refs, and remote player coordinates bypass the primary page structure, rendering directly in the WebGL tree.
Socket serialization issues: Storing the live non-serializable Socket.io class instance in the Redux store originally caused constant, CPU-heavy serialization warnings. We solved this by custom-configuring the Redux Toolkit middleware pipeline to ignore serialization checks specifically on the socket.instance state tree path.

Accomplishments that we're proud of

Blender + Blosm OS Synthesis: Successfully importing, rendering, and scaling the actual topological maps of UC Davis using Blosm to get real map data and simulate the map inside Blender. Seeing the exact physical layout of the campus rendered as a gorgeous 3D digital-twin environment inside a standard browser is mind-blowing!
Robust Multi-Tab Sockets: Building a bulletproof multiplayer connection that coordinates joined chat rooms, megaphone announcements, and live player mapping in real-time, instantly responding to tab closures and disconnects.
Pixel-Perfect Aesthetic: Fusing dark glassmorphic tailwind cards, glowing concentric radar background animations, and custom 3D capsule player rings to establish a highly premium, modern, gamified visual look.

What we learned

WebGL Optimization: We learned how crucial geometry decimation, instancing, and material merging are when trying to serve huge 3D architectural models to mobile web browsers.
Transient Socket Architecture: We discovered that keeping fast-moving state (like live coordinates) entirely in-memory on the Node server session instead of running slow database writes keeps the server incredibly light and performant.
R3F Portal Rendering: Combining 2D HTML elements (like user nametags) directly within a projected 3D coordinate space using <Html> portals from @react-three/drei is an incredibly powerful way to fuse UI with gameplay.

What's next for Davis Verse

Universal College Scaling: Expand our automated Blender pipeline to be able to map and spin up a virtual multiplayer 3D "Verse" for every college community worldwide, connecting students globally on their own interactive local campus sandboxes!
Downtown Davis Integration: Expand the 3D map beyond the campus borders to include Downtown Davis community events, mapping local business storefronts, boba shops, student-favorite restaurants, and local community events!
NPC AI Assistants: Connect our existing 3D NPC group with advanced Large Language Model APIs (like Gemini) to let students converse with customized university assistants (e.g., getting academic advice or food recommendations on campus).
Gamified Quests: Introduce campus scavenger hunts and club recruitment quests to incentivize freshman exploration and make finding friends an interactive game.