DroneMeta-Red

3D procedural flight simulator integrated directly into Reddit

Comment

Inspiration

We were inspired by the "Daily Challenge" phenomenon seen in games like Wordle and Trackmania. We wanted to bring that "everyone plays the same map" excitement to a 3D space, utilizing Reddit's new Devvit platform to turn a static post into a living, breathing arcade. DroneMeta captures the zen of flight combined with the thrill of competitive leaderboards.

What it does

DroneMeta allows users to pilot a high-performance drone through infinite, procedurally generated terrain. The project features:

  • Daily Challenge Mode: Uses a date-based seed ($S_{daily} = f(YYYY-MM-DD)$) so every player on Reddit competes on the same map logic.
  • Physics-Based Flight: Smooth 3D movement using Three.js and specialized flight physics.
  • Embedded Webview: A full WebGL experience running inside a Reddit post via Devvit.
  • Global Leaderboards: Scores are submitted to Redis sorted sets, tracking the best pilots of the day.

How we built it

The project is built on a modern stack tuned for performance:

  • Frontend Core: React 16.8 and Three.js for the 3D engine.
  • Build System: Migrated from a legacy Webpack setup to Vite to handle complex GLSL shaders and Workers efficiently.
  • Terrain Engine: Procedural generation using heightmaps and custom geometry shaders. We use Web Workers to generate terrain off-main-thread, ensuring 60 FPS flight even during map streaming.
  • Platform: Devvit SDK, utilizing the Webview capability to host the Game and the Reddit API/Redis for social persistence.

Challenges we ran into

  • Vite Migration: Moving a project with complex WASM and Worker dependencies from Webpack to Vite was a major hurdle. We had to implement custom logic for ?worker imports and GLSL string injection.
  • Devvit Integration: Adapting a full-screen WebGL experience to fit the constraints of a Reddit post (CSP, viewport scaling) required careful asset management and security policy adjustments (removing external scripts).
  • Social Persistence: Designing a lightweight Discord-style leaderboard on Redis that could handle concurrent submissions from different flight sessions.

Accomplishments that we're proud of

  • True 3D on Reddit: Achieving high-performance WebGL flight within a social app wrapper.
  • Deterministic Generation: Successfully implementing terrain logic where the flight path is identical for all users globally.
  • Devvit Portability: Seamlessly bridging the gap between a standard React app and the Devvit ecosystem.

What we learned

We learned the intricacies of the Devvit Webview API, specifically how to handle bi-directional communication between a game engine and Reddit's backend. We also gained deep experience in optimizing Vite for legacy React/Three.js projects and managing strict Content Security Policies (CSP) in social environments.

What's next for it

  • Multiplayer Ghosts: Visualizing the "best flight" of the day as a transparent ghost drone flying alongside the player.
  • Customizable Drones: Allowing users to spend Karma or Community Points on new drone skins.
  • VR Support: Utilizing WebXR to bring the DroneMeta experience to headsets.

Built With

Share this project:

Updates