If this is a heavy lab on mobile, give it a moment — it's not frozen.
P / DOUBLE TAP TO EXIT PRESENTATION MODE
Aeon - D Portfolio Piece
AEON is a single‑file, real‑time 3D portfolio scene built in the browser using Three.js, custom shaders, and a diegetic HUD.
The Saturn ring system uses thin‑film interference and view‑angle math for iridescence (no emissive/glow cheats), with warp transitions, scan overlays, and cinematic camera automation.
Performance is managed through runtime quality controls (pixel ratio/exposure), lightweight procedural textures, and GPU‑friendly shader hooks.
This build also includes optional “INSANE MODE” post‑processing and environmental anomalies (signals, beacons, occultation flicker) designed to stress test stability and readability.
AEON // Operator Manual (Plain English)
What this app is
AEON is an interactive browser-based 3D “lab” that lets you jump between several celestial bodies and view them with cinematic rendering and layered visual effects.
It is intended as a portfolio piece that demonstrates procedural modeling, shader customization, UI integration, and robust runtime safety.
How to use it (step-by-step)
Pick a target body: Use the TARGET // BODY buttons to warp between Saturn, Pluto, Mars, Ceres, and Europa. Warp includes a brief tunnel + stability reset.
Move the camera: Drag to orbit, wheel/pinch to zoom. The camera always targets the body center; panning is disabled for presentation clarity.
Control lighting: Use the Sun Angle slider to move the key light. Toggle ECLIPSE for dramatic rim lighting and night-side reveals.
Binary Star: Toggle BINARY STAR to add a second directional source and enable signal-spectrum overlays in the sky.
Run a scan: Click INITIATE SCAN to sweep an X‑Ray scanline through the scene. This temporarily reveals hidden patterns and boosts night-side signals.
HERO CAM: Enables an automated cinematic camera path. Toggle again to return to manual orbit controls.
Presentation mode: Press P or double-tap the viewport to hide UI and showcase the render full-screen.
Quality, performance, and what to do if it stutters
Quality toggle: Use the Quality pill (or press Q) to switch between High and Low pixel ratio/exposure presets.
Screen FX toggle: Press V to disable the overlay FX stack if your device is struggling.
INSANE MODE: If enabled, final-pass chromatic aberration and stronger anomaly events will run. Disable it for stability on low-end devices.
If the render is blank: Resize the window (forces renderer resize), then reload. WebGL can fail if GPU resources are exhausted.
Hidden / advanced controls
Konami code: Enter ↑ ↑ ↓ ↓ ← → ← → B A to open a lightweight internal dev readout.
Escape: closes any open modal windows.
What the effects are doing (plain English)
The ring iridescence is computed by simulating thin-film interference: as your view angle changes, the color shifts without relying on emissive glow.
Scans and signals inject shader overlays that highlight structures by mixing in colored grids and scanlines.
Background anomalies (occultation flicker, silent void, beacons) are intentionally subtle—visible cues become more obvious during eclipse, scan pulses, and INSANE mode.
A single-file Three.js portfolio piece with a Saturn “oil-slick spectral” ring system:
iridescence comes from view-angle + thin-film interference math, not glow/emissive.
Rules obeyed
- NO probe
- NO glow / no emissive cheats
- Crash fix: camera presets guarded if controls aren’t ready
- Saturn gets the spotlight as the centerpiece
LAB MANUAL // OPERATOR NOTES
Controls
- Orbit: drag
- Zoom: pinch / wheel
- Presentation: press P or double-tap viewport
- Konami: opens dev readout (lightweight)