Follow the light. Find the solution.
An optics puzzle project where light, particles, and physical rules become things you can experiment with.
Explore how it works ↓Explore the project
Open the design and demonstrations, then follow the references for more detail.
Explore the concept
Playable physics playground demonstrating real-time laser reflection, beam splitters, and dynamic particle simulations.
The design, in more detail
Definition
A high-performance physics simulation and puzzle game exploring wave mechanics, light refraction, chromatic dispersion, and particle dynamics.
The problem
Many browser-based game engines introduce massive overhead and abstracted physics that fail to simulate realistic optical phenomena like Snell’s law refraction, caustic dispersion, and wave interference at 60+ FPS.
The approach
Lumina was engineered from scratch in clean TypeScript / WebGL canvas to implement realistic ray optics and Verlet particle integration, transforming complex physics principles into an intuitive, tactile puzzle experience.
How it works
- Verlet Particle Integration: Delivers unconditionally stable collision resolution for thousands of concurrent particles.
- Snell’s Law Optical Raymarching: Simulates true index of refraction (IoR) transitions across geometric prisms.
- Chromatic Dispersion: Splits white light beams into constituent wavelengths with distinct refraction angles.
- Zero-Dependency Render Loop: Direct HTML5 Canvas 2D/WebGL rendering achieving silky-smooth 60+ FPS on mobile and desktop.
Project notes
- Frame Rate
- 60+ FPS
- Dependencies
- 0 (Vanilla Math/Canvas)
- Physics Model
- Verlet & Snell’s Law
These are the project’s documented design notes. Consult the linked implementation and its version before relying on a specific capability.
Development history & next steps
Physics Engine Scratch Build
Wrote zero-dependency raycaster and reflection math calculations.
Puzzle Mechanics & Optics
Added refractive glass blocks, chromatic prisms, and laser absorption goals.
Web Engine Optimization
Optimized render loop to sustain 60 FPS on lower-powered mobile devices.
What comes next
Porting the core ray-optical solver to WebAssembly (Wasm) and introducing acoustic wave-interference modes.
Source material & related links
Follow the documentation, repositories, and related sites behind this project.
Source code demonstrating custom raycasting and reflection collision math.
Live playable interactive canvas embedded directly in the project page.
Topics: Physics Engine · Optics · TypeScript · WebGL · Game Dev