Environment · Image-Based Lighting

Environment Lighting

Upload your own equirectangular panorama (.hdr, .jpg, or .png) and light a real PBR object with it — genuine image-based lighting, computed entirely in your browser via WebGL. No server call, no upload leaves your machine.

Environment Preview · Three.js
Drop an equirectangular image here .hdr (Radiance) or .jpg / .png · or click to browse

Environment

Preview Object

Show As

Actions

What Image-Based Lighting Actually Does

Every pixel of your uploaded panorama becomes a tiny light source. The renderer convolves it into a prefiltered mipmapped radiance environment map (PMREM) so reflections and diffuse lighting on the object are sampled directly from the image — this is the exact same pipeline production renderers and game engines use for IBL.

.hdr vs. .jpg / .png

A real .hdr (Radiance format) file stores floating-point color values above 1.0, so bright light sources like the sun stay physically bright instead of clipping to white — that's decoded here with a real RGBE parser. A .jpg/.png is lower dynamic range but still works fine for reflections and general lighting direction.

Nothing Leaves Your Browser

The file you drop is read locally via the File API and decoded straight into a WebGL texture — it's never uploaded anywhere. That's a real, honest constraint of the client-side approach used across every tool on this site.

Background Blur

Blurring the backplate while keeping full-resolution reflections is a common studio-lighting trick — it hides the seam/resolution of a low-quality panorama while the reflections on a glossy object still read correctly.