Four concepts, one codebase
The problem
Scene-graph navigation, real-time collision, and orbital visualization each need different structure.
What I did
Gave every experience its own route and scene lifecycle inside a shared app shell.
Case study
COMP-599 WebGL Seminar
Four interactive 3D browser experiences built for a WebGL seminar: Campus Explorer, Paper Plane Assault, Plane vs AI, and OrbitScope.
- JavaScript
- Next.js
- TypeScript
- HTML5
The core problem
What needed solving
A graduate WebGL seminar required building multiple distinct interactive 3D browser experiences demonstrating different rendering techniques, scene management, and user interaction patterns.
The solution
What I built
Each project targets a specific WebGL concept: scene graph navigation (Campus Explorer), real-time collision and game logic (Paper Plane Assault / Plane vs AI), and orbital mechanics visualization (OrbitScope) — all delivered as a unified Next.js app.
A Next.js application hosting four WebGL seminar projects for CSUCI COMP-599. Includes a highway scene, a bunker scene, and multiple interactive 3D experiences — Campus Explorer (3D campus tour), Paper Plane Assault, Plane vs AI, and OrbitScope (satellite tracker) — alongside a seminar paper and capability showcase presentation.
Integration
How it fits together
One Next.js + TypeScript application hosts four WebGL experiences with route-based scene loading, so each scene loads only when visited. The seminar paper and capabilities presentation live alongside the code.
The flow, step by step
- Navigate to each project route in the Next.js app (highway, bunker, and the main showcase).
- Interact with 3D scenes using mouse and keyboard controls specific to each experience.
- Review the seminar paper and WebGL capabilities presentation in the docs folder.
Problems along the way
What got hard, and what I did about it
Takeaways
What I learned
- Route-level code splitting keeps several heavy 3D scenes from slowing each other down.
- Building the same fundamentals four ways deepened my understanding of the WebGL rendering pipeline.
Outcome
Where it stands today
Four distinct WebGL experiences: Campus Explorer, Paper Plane Assault, Plane vs AI, OrbitScope.
Hosted as a Next.js application with TypeScript and dedicated route-based scene loading.
Includes seminar paper (DOCX) and WebGL Capabilities Showcase presentation (PPTX).
Milestones
- Shipped
Campus Explorer
Interactive 3D campus tour scene complete.
- Shipped
Paper Plane Assault & Plane vs AI
Real-time flight and collision game modes complete.
- Shipped
OrbitScope
Satellite orbital tracking visualization complete.