Relighting Images with Depth Maps and Three.js
Clean, practical, and deeply inspiring, this tutorial shows how to make flat photos breathe with believable light and shadow. Dominik Fojcik breaks down depth estimation, normal map generation, and GPU-friendly workflows. The explanations balance intuition and code, so designers and developers can follow the full pipeline.
First, it converts noisy 8-bit depth maps into smooth half float data, removing visible quantization artifacts. Then it generates normals and blends brightness based detail for convincing surface reaction to light. The tutorial also shows depth based occlusion, shadow tracing, and practical MeshPhong material setups.
As a curator I value work that teaches elegant techniques and invites experimentation. This post is a concise playbook for elevating photography, interactive art, and branded visuals. If you craft immersive experiences, this guide is a must read. This is essential reading now.
The article pairs accessible theory with runnable examples that accelerate prototyping and iteration. Whether you prefer WebGL, TSL, or WebGPU, the techniques translate across modern pipelines. Expect clear diagrams, annotated code, and visual comparisons that reveal each decision’s impact. Read it now to pick up smart refinements you can apply to your next project.
Source: tympanus.net
