Learning on Web Dev Open is free for all.

Immersive Web > Light, motion and the feel of weightLighting like a photographer
Phase 07Light, motion and the feel of weight359 of 434

Lighting like a photographer

Key, fill and rim, plus the shadow settings nobody tunes and everybody should.

Concept15 minAI pair

Three-point lighting transfers directly from photography. A key light does the work and sets the direction; a fill at perhaps a quarter of the intensity opens the shadows so they read as dark rather than empty; a rim from behind separates the subject from the background and is the single cheapest trick for making a render look deliberate. Adding lights beyond that usually flattens the image while costing more.

Shadow quality is a set of numbers that generated setups leave at defaults. Map size trades memory for crispness. The shadow camera frustum should tightly enclose what casts shadows: a directional light with a 500-unit frustum around a 5-unit object spends its entire resolution on empty space. Bias fixes acne and, pushed too far, detaches the shadow from the object, which is the peter-panning you have seen in bad game screenshots.

Colour management is the other invisible half. Textures authored in sRGB have to be flagged as such, lighting must happen in linear space, and a tone mapping curve maps the result back for display. Get that chain wrong and everything looks washed out or plastic no matter how well it is lit, and no amount of adjusting light intensity fixes it.

You should now be able to

  • Light a subject with three lights on purpose
  • Tune shadow map size and bias without peter-panning
Ask the community

Loading…