Option 13: PBR (physically based rendering) with three.js. The bot is now a real-time 3D object lit by a virtual photo studio. Swap materials, tune roughness and metalness, and drag sideways to spin the camera.

This one cost less than the last three. three.js supplies the renderer, so I only wrote the scene.

**A virtual photo studio.**
An invisible room with glowing softbox panels (top, left, right, front) is pre-blurred into a lighting map. Every surface on the bot reflects that room. That's why the chrome shows bright rectangles.

**Two numbers describe most real materials:**
**The eyes have their own glossy black material.**
The studio lights reflect in them as tiny sparkles. That single highlight makes eyes read as wet and alive.

**Drag sideways**
on the scene to spin the camera; drag up or down to change height. The page still scrolls when you swipe vertically outside the scene.

**Chrome, then drag roughness from 0 to 1.**
Mirror → brushed → satin. The reflections blur but never get brighter or dimmer overall. That's energy conservation: rough surfaces spread the same light wider.

**Clay, then drag metalness to 1.**
It turns into dull cast metal. Metals have no diffuse colour, so their colour lives entirely in the reflection.

**Ceramic: watch the rim of the ball.**
Edges reflect more than the centre. That's the Fresnel effect, and it's why wet roads shine at a distance.

**The glass is a cheat.**
It's a transparent reflective shell, not true refraction; the version of three.js I can load here lacks the full glass model. Real glass would bend the eyes like a lens.

**The contact shadow is a painted blur.**
A dark gradient disc sits under the bot, on top of the real cast shadow. Product renders use both, because real soft contact shadows are expensive.

**PBR in two sliders**
```
metalness 0 (dielectric) metalness 1 (metal) roughness 0 glossy plastic/ceramic mirror chrome roughness 1 chalk, clay cast iron, matte aluminium
```

**Where the light comes from**
```
studio room (emissive panels) ──► pre-blurred at many roughness levels │ bot surface ─ normal + view dir ──► pick blur level by roughness │ + key light shadow + Fresnel edge boost ─► pixel
```

**Scene graph**
```
root (hop height) └─ squash (world-aligned scale) └─ turn (yaw) ├─ body sphere (PBR material) ├─ eye pivot L ─ ellipsoid (glossy black, 35° roll) └─ eye pivot R ─ ellipsoid
```

**Critical thinking:**
PBR made games look consistent and "correct," and many say it also made them look alike. When does physical accuracy help a character like your bot, and when does it kill personality?

**Lateral thinking:**
car paint shops, jewellers and food photographers all "design the environment" to make objects look good. The chrome bot is really a portrait of the studio. What in your work only looks good because of what it reflects?

**First principles:**
why must a perfectly rough surface reflect the same total light as a mirror? What would it mean, physically, if a slider made an object brighter than the light hitting it?

- How does real-time glass refraction work?