Labs
N-gon Wave Refraction Simulator
A real-time physics simulation for exploring wave behavior in polygonal boundaries. Visualize refraction via Snell's law, total internal reflection (TIR), Fresnel effects, chromatic dispersion, and emergent caustic patterns—all rendered in 2D ray-tracing or 3D WebGL.
What You're Seeing
Light doesn't just bounce—it bends, splits, and interferes in ways that reveal the deep structure of wave mechanics. This simulator lets you manipulate:
- Polygon complexity — from triangles to high-order N-gons
- Ray density — observe statistical emergence of caustics
- Refraction indices — simulate glass, water, diamond-like materials
- Chromatic dispersion — wavelength-dependent refraction (prism effect)
- Dual-ray mode — track both transmitted and reflected components
Toggle between 2D (canvas-based ray tracer) and 3D (Three.js physical materials) to see the same physics through different lenses. The control panel (top-right) gives you real-time parameter adjustment with immediate visual feedback.
Controls: Use the panel (top-right) to adjust parameters. Play/Pause, Reset, and Export PNG buttons are in the bottom-left corner.
Technical Notes
2D Mode: Custom canvas ray-tracer with polygon intersection detection, Snell's law refraction, Fresnel coefficient calculations (Schlick approximation), and wavelength-dependent dispersion. Caustics emerge from ray density accumulation.
3D Mode: Three.js renderer with physically-based materials (MeshPhysicalMaterial), index of refraction (IOR), transmission, and environmental lighting. The geometry is an extruded prism based on the N-gon parameters.
Tech Stack: TypeScript, Vite, Three.js, Tweakpane. Built as a standalone experiment and embedded here via iframe for isolation and performance.