Depth map превращает плоскую картинку в освещаемую поверхность

В Codrops разобрали эффект динамического освещения 2D-изображения с помощью Three.js, TSL и WebGPU. Геометрия сцены остаётся плоской, а ощущение объёма создают карты глубины и нормалей.

Модель оценки глубины строит depth map: светлые области обозначают близкие объекты, тёмные — удалённые. Исходная 8-битная карта содержит 256 уровней, поэтому на плавных поверхностях могут появляться ступени. В примере значения переводят в формат с плавающей точкой, размывают и сохраняют как half-float-текстуру.

Из градиента глубины формируется normal map — направление условной поверхности для каждого пикселя. От него зависит яркость. Дополнительные детали получают из яркости исходной фотографии. Для расчёта собственных теней каждый пиксель проверяется по depth map в направлении источника света.

Изображение, рассчитанные нормали и затенение объединяются в MeshPhongNodeMaterial. В результате свет и тени перемещаются по фотографии так, как если бы она была рельефной 3D-поверхностью.

Источник: Codrops