Cluster

A 3D educational world where you fly through cities of knowledge, unlock islands of learning, and watch your progress grow in real time.

Comment

Inspiration

Learning computer science online feels flat. You watch a video, read a doc, close the tab, forget everything. I wanted to ask: what if learning felt like exploring a living city? What if your progress was something you could see grow?

That question became Cluster.

Live demo: https://cluster-pljj.onrender.com Github repo: https://github.com/Saumya812/cluster

What it does

Cluster is a 3D educational world where every concept is a building, every subject is a city, and every level you complete makes your Growth Tower taller.

It is not just for CS. The same 3D world, the same island roadmap, and the same learning loop works for Machine Learning, AI, Programming, Web Development, and beyond. The globe has 12 subject pins ready.

  1. Start at a subject globe and pick CS
  2. Choose a city: Machine Learning, AI, Programming, or Web Dev
  3. Enter a floating island roadmap -- 10 islands in a zigzag climb, connected by swaying rope bridges in an anime sunset sky
  4. Islands unlock progressively, just like a game
  5. Fly into a level on your airplane and explore a dense 3D city where every building is a topic
  6. Click a building to open a learning panel with 5 tabs:
    • Reading -- real search results from Google and Wikipedia
    • Videos -- YouTube playlists for that topic
    • Research Papers -- live OpenAlex and Arxiv results
    • Visualization -- YouTube videos showing concepts visually
    • Quiz -- 600 hand-written questions, one set per topic
  7. Complete the quiz to grow your Growth Tower and unlock the next island
  8. ElevenLabs narrates key moments as you learn
  9. After every quiz, see real career outcomes from the DoIT dataset: top job titles, average salaries, top employers, and internship rates
  10. Progress is saved persistently via TigerData and Backboard memory

10 Visual Themes

Every level has its own visual theme so cities feel fresh as you progress: Neon Cyberpunk, Golden City, Emerald Forest, Autumn, Ice Crystal, Volcanic, Deep Space, Candy, Steampunk, Crystal Kingdom.

Career Outcomes (DoIT Track)

After every quiz, Cluster shows where that knowledge leads using synthetic UMBC alumni data from the DoIT dataset:

  • Top job titles graduates went into
  • Average starting salary
  • Top employers
  • Percentage who had internships

Every island tooltip also shows career outcomes so you know what you are working toward before entering the level.

How I built it

Frontend

  • Three.js for the entire 3D world -- globe, floating islands, level cities, airplane flight, particles, fountain, and Growth Tower
  • Three Sketchfab island models processed at load time: textures downsampled to 1024px, meshes merged by material, scaled to a common 48-unit footprint, drawn as instanced batches (10 islands = 47 draw calls total)
  • 10 visual themes, one per level
  • Animated fountain with real gravity simulation over a Float32Array
  • GPU-side firefly animation using a custom GLSL vertex shader
  • Web Audio API for ElevenLabs narration and synthesized waterfall ambience
  • Procedural window textures, street textures, sky domes, and particle sprites generated on Canvas 2D

Backend

  • FastAPI + Uvicorn serving both the REST API and the built frontend from one origin in production
  • One SQL codebase that runs on TigerData (Postgres) or SQLite with silent failover
  • Quiz answers never reach the browser -- choices shuffled with a seeded random generator keyed to the question itself
  • Two-way memory sync with Backboard: progress written as natural-language facts, six regexes restore them back into database rows
  • Docker: multi-stage build, node:20-slim for frontend, python:3.12-slim serving everything

Tech Stack

Layer Technology
3D Engine Three.js 0.185
Frontend Vanilla JS, Vite, Web Audio API, Canvas 2D
Backend FastAPI, Python 3.12, Uvicorn
Primary Database TigerData (Timescale Cloud Postgres)
Fallback Database SQLite
AI Memory Backboard
Quiz Generation Google Gemini API
Voice Narration ElevenLabs
Videos YouTube Data API v3
Reading Google Custom Search + Wikipedia
Research Papers OpenAlex + Arxiv
Career Data DoIT Synthetic UMBC Dataset
3D Assets Sketchfab (CC BY/BY-NC), Kenney (CC0)
Domain GoDaddy (pathwayisle.com)
Deployment Docker + Render
Version Control GitHub

Sponsors Used

Sponsor How we used it
Google Gemini API Generates quiz questions for topics outside the hand-written bank
ElevenLabs Voice narration at key learning moments
TigerData Primary persistent database for all learner progress and API caches
Backboard Cross-session AI memory -- progress written as facts and restored on login
GoDaddy Registry Registered pathwayisle.com for the live deployment
DigitalOcean Cloud deployment target
Render Deployed the live app at cluster-pljj.onrender.com

DoIT Track: Navigating the Future

Cluster directly answers the track question "Where will my degree take me?" by embedding real UMBC alumni outcome data into the learning experience itself. Every quiz completion shows the learner exactly what roles, salaries and employers their classmates went into after studying the same topics. Data source: HackUMBC 2026 DoIT synthetic dataset (CC0).

Challenges I ran into

  • Three wildly different island models as one consistent set -- models range from 47,000 to 1.5 million triangles, each needing different scale factors, custom ground-height detection, and model-specific fixes
  • Quiz integrity without sessions -- answers shuffled using a seeded random generator keyed to the question, so the server scores without storing state
  • Content that never goes blank -- Reading falls back from Google to Wikipedia, papers from OpenAlex to Arxiv, every empty state offers a link
  • Ten themes that never disturb layout -- theme colors use a separate random stream from building positions so layout is identical across themes
  • Frame rate -- roadmap renders in 4.7ms per frame using instanced meshes, fog-derived culling, and GPU-side particle animation

What I learned

  • How to build and optimize a complex 3D world in the browser at 60 FPS
  • How to process and instance heterogeneous 3D models at runtime
  • How to design a learning progression system that feels like a game
  • How to chain multiple content APIs with graceful fallbacks
  • That making learning feel like play is genuinely hard and genuinely worth it

AI Usage Disclosure

As required by Game Jamathon rules:

  • Google Gemini API: generates quiz questions for topics outside the hand-written bank
  • ElevenLabs: generates voice narration at key learning moments
  • Backboard: persistent AI memory for cross-session progress
  • Cursor: AI coding assistant used throughout development
  • No AI was used for asset creation. All 3D models are from Kenney.nl (CC0) and Sketchfab (CC BY / CC BY-NC 4.0)

What's next for Cluster

  • Multiplayer -- see other learners' towers growing in real time
  • More subjects -- 11 more globe pins ready, waiting for content
  • Mobile support -- explore the city on your phone
  • Mesh compression -- Draco/meshopt to reduce the 214 MB island download
  • Authentication -- real user accounts so progress is not shared

Credits

Fantasy Mystical Island by NJ; Floating Island Temple by Selin Berg; Stylized 3D Floating Island and Mine House by Skylar Muffin -- Sketchfab, CC BY / CC BY-NC 4.0. Nature Kit and City Kit by Kenney (CC0). DoIT dataset by jasonpaluck, CC0.

Built With

Share this project:

Updates

Submission history