PBR

Showcase

Physically-based rendering, in a browser tab

In the 2010s, putting a photorealistic 3D product render on a website was a specialty job. A studio would model the asset, paint physically-based texture maps — albedo, normals, metallic-roughness, ambient occlusion, emissive — and light it in an offline renderer: RenderMan, Mental Ray, V-Ray. Hours per frame. Static images, baked out and dropped onto a page as JPGs.

Physically-based rendering is the same technique those offline pipelines used. A material is described by a handful of scalar properties — how rough is the surface, how metallic, what does it reflect — and the renderer simulates how light bounces based on the physics of microfacets and reflection. Light the result with a 360° photograph of a real environment — image-based lighting — and the output sits somewhere between a render and a photograph.

This is that. The Khronos DamagedHelmet — the canonical reference asset for PBR — rendered with three.js's MeshStandardMaterial, lit by image-based reflections from the same HDR sky used in the terrain demo. The sky itself stays off-screen here; a dark backdrop keeps the focus on the material. Sixty frames a second in your browser tab. Drag to orbit. Scroll to zoom.