An interactive 3D visualizer that turns any image into a point cloud you can rotate, orbit, and dissect. Explore how color behaves by remapping pixels into RGB cubes and HSV cylinders by turning flat images into spatial data.
- Image — pixels in screen-space with configurable depth (brightness, R, G, B, or edges)
- RGB Linear — particles positioned by their linear RGB values (true sRGB → linear conversion)
- HSV — cylindrical mapping: hue = angle, saturation = radius, value = height
Single-file web app. No build step, no backend. Drop an image, adjust the controls.
Open index.html in a modern browser (Chrome, Safari, Firefox, Edge).
It loads Three.js from a CDN, so you'll need internet the first time.
- Drag-and-drop image upload
- Three color space projections with smooth transitions
- Depth modes: brightness (Rec. 709 luma), R/G/B channel, Sobel edges
- Color palette extraction (k-means) — click a swatch to isolate similar pixels
- Hue / brightness / contrast / palette-size adjustments
- Auto-rotation, idle motion, cursor pull
- PNG export (2× supersampled) and 1280×1280 video export (.mov/H.264 where supported)
- Three.js r160 via ESM import map
- Vanilla JS / CSS, no framework
- WebGL point cloud shader with per-particle color, alpha, and spring physics