--- title: Relighting Images with Depth Maps and Three.js | daily.dev description: A tutorial walks through creating a relighting effect for flat 2D images using depth maps generated by depth estimation models, combined with Three.js, TSL,... canonical: https://daily.dev/posts/relighting-images-with-depth-maps-and-three-js-jgklhsfbz twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Relighting Images with Depth Maps and Three.js | daily.dev og:description: A tutorial walks through creating a relighting effect for flat 2D images using depth maps generated by depth estimation models, combined with Three.js, TSL,... og:url: https://daily.dev/posts/relighting-images-with-depth-maps-and-three-js-jgklhsfbz og:image: https://api.daily.dev/og/posts/JgKLHsfbZ.png og:image:alt: Relighting Images with Depth Maps and Three.js og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Relighting Images with Depth Maps and Three.js **[Codrops](https://daily.dev/sources/codrops)** · 5 min read · 1 upvotes · 0 comments ## Summary A tutorial walks through creating a relighting effect for flat 2D images using depth maps generated by depth estimation models, combined with Three.js, TSL, and WebGPU. It covers converting 8-bit depth maps to smoothed float data, deriving normal maps from depth gradients to fake 3D surface lighting, computing soft shadows via ray marching through the depth map, and combining all three (color, normals, ambient occlusion) into a MeshPhongNodeMaterial for realistic dynamic lighting on flat images. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do you fix the blotchy, stepped lighting artifacts when using a depth map for relighting an image? Convert the 8-bit depth values (only 256 possible values) into floating-point numbers, blur them to smooth out the quantization steps, then store the result as half-float data. Without this, the lighting reads sharp slope spikes at each step edge, causing shading on smooth surfaces to break into gritty, blotchy noise instead of flowing smoothly. _daily.dev surfaces shader techniques like this for developers building realistic depth-based lighting effects._ ### How can you fake shadows on a flat 2D image using only a depth map, without real 3D geometry? Each pixel traces a ray toward the light through the depth map, sampling depth values at several points along that path; if a sampled point sits higher (closer to the light) than the ray at that step, occlusion accumulates, producing a soft shadow. This is passed into the material as an ambient occlusion node rather than true geometric shadow casting. _developers exploring depth-based shadow tricks in webgl can track techniques like this via daily.dev._ ## Similar posts on daily.dev - [Building a Dual-Scene Fluid X-Ray Reveal Effect in Three.js](https://daily.dev/posts/building-a-dual-scene-fluid-x-ray-reveal-effect-in-three-js-ajz5uu9x7) · Codrops · 3 upvotes · 0 comments - [Drawing With Light: An Exploration of Lit GPU Tubes with TSL and WebGPU](https://daily.dev/posts/drawing-with-light-an-exploration-of-lit-gpu-tubes-with-tsl-and-webgpu-hcfish0ru) · Codrops · 0 upvotes · 0 comments - [Shaders 103 - smoke](https://daily.dev/posts/shaders-103---smoke-dqivsjx8i) · Brad Woods' Digital Garden · 1 upvotes · 0 comments - [THREE.js-PathTracing-Renderer](https://daily.dev/posts/three-js-pathtracing-renderer-f7kf7vkhm) · Hacker News · 2 upvotes · 0 comments - [3D Web Development with Blender and Three.js](https://daily.dev/posts/3d-web-development-with-blender-and-three-js-i4xuekmxb) · freeCodeCamp · 3 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#threejs](https://daily.dev/tags/threejs), [#webgpu](https://daily.dev/tags/webgpu), [#creative-coding](https://daily.dev/tags/creative-coding) [View this post on daily.dev](https://daily.dev/posts/relighting-images-with-depth-maps-and-three-js-jgklhsfbz) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Relighting Images with Depth Maps and Three.js","url":"https://daily.dev/posts/relighting-images-with-depth-maps-and-three-js-jgklhsfbz","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/relighting-images-with-depth-maps-and-three-js-jgklhsfbz"},"datePublished":"2026-08-19T14:43:23.618Z","dateModified":"2026-09-14T06:55:58.152Z","description":"A tutorial walks through creating a relighting effect for flat 2D images using depth maps generated by depth estimation models, combined with Three.js, TSL,...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ad0c393be79c6da584bc504b41c0a7b5?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ad0c393be79c6da584bc504b41c0a7b5?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Codrops","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Codrops","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/codrops","url":"https://daily.dev/sources/codrops"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/relighting-images-with-depth-maps-and-three-js-jgklhsfbz","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"javascript,threejs,webgpu,creative-coding","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Codrops","item":"https://daily.dev/sources/codrops"},{"@type":"ListItem","position":3,"name":"Relighting Images with Depth Maps and Three.js"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/relighting-images-with-depth-maps-and-three-js-jgklhsfbz#faq","mainEntity":[{"@type":"Question","name":"How do you fix the blotchy, stepped lighting artifacts when using a depth map for relighting an image?","acceptedAnswer":{"@type":"Answer","text":"Convert the 8-bit depth values (only 256 possible values) into floating-point numbers, blur them to smooth out the quantization steps, then store the result as half-float data. Without this, the lighting reads sharp slope spikes at each step edge, causing shading on smooth surfaces to break into gritty, blotchy noise instead of flowing smoothly. daily.dev surfaces shader techniques like this for developers building realistic depth-based lighting effects."}},{"@type":"Question","name":"How can you fake shadows on a flat 2D image using only a depth map, without real 3D geometry?","acceptedAnswer":{"@type":"Answer","text":"Each pixel traces a ray toward the light through the depth map, sampling depth values at several points along that path; if a sampled point sits higher (closer to the light) than the ray at that step, occlusion accumulates, producing a soft shadow. This is passed into the material as an ambient occlusion node rather than true geometric shadow casting. developers exploring depth-based shadow tricks in webgl can track techniques like this via daily.dev."}}]} ```