使用深度图和Three.js对图像进行重打光

Editor’s note: And we are continuing our celebration of the Three.js community as we count down to the first Three.js Conference in Paris this September. In this new tutorial, Dominik Fojcik shares a little magic trick for making 2D images come alive with depth, light, and shadow, using Three.js, TSL, and WebGPU.

编者按： 随着今年 9 月首届 Three.js 巴黎大会的倒计时，我们将继续庆祝 Three.js 社区的盛事。在这篇新教程中，Dominik Fojcik 分享了一个小魔术，利用 Three.js、TSL 和 WebGPU 让 2D 图像在深度、光照和阴影中栩栩如生。

🇫🇷 Is Paris on your mind? As part of our partnership with the first Three.js Conference, Codrops readers can use the code CODROPS to get 15% off. Get your ticket →

🇫🇷 想去巴黎吗？作为我们与首届 Three.js 大会合作的一部分，Codrops 读者可以使用代码 CODROPS 享受 15% 的折扣。获取您的门票 →

I’ve seen many cool image effects on the web, but most of them stay on the surface. What if you could take it further and make the effect dive into the image? Something that actually gets inside the picture like a light.

我在网上见过很多很酷的图像效果，但大多数都只停留在表面。如果你能更进一步，让效果潜入图像内部会怎样？就像光线一样真正进入画面内部。

The key for that is a depth map. Something that before seemed to be magic is now doable thanks to depth estimation models, which have become really good at estimating depth from 2D images.

实现这一点的关键是深度图。以前看似魔法的东西，现在得益于深度估计模型变得切实可行，这些模型在从 2D 图像估计深度方面已经做得非常好了。

Depth Map

深度图

This is the main ingredient of our effect. To get one, we need to feed a depth estimation model with our image and use it to generate a depth map. You can install a model like Depth Anything 3 yourself or use a Depth Generation Tool I created for this article.

这是我们效果的主要组成部分。为了获得它，我们需要将图像输入深度估计模型，并使用它来生成深度图。你可以自己安装像 Depth Anything 3 这样的模型，或者使用我为本文创建的 Depth Generation Tool。

Original Image

原始图像

Depth Map: White color means something is near, black is far

深度图：白色表示物体较近，黑色表示较远

The raw depth map has a problem you can’t see, but the light can. It’s an 8-bit image, so it only has 256 possible depth values, and smooth surfaces get quantized into flat steps. The lighting reads the slope from this map, and at every step edge the slope suddenly spikes, so shading that should flow across smooth sto...