Сотни стеклянных карточек уложились в один рендер-проход

В браузерном эксперименте на Three.js каждая карточка — плоская сетка. Скругления, фаска и преломление рассчитываются в материале, который смещает выборку из видеотекстуры: изображение будто проходит через стекло. Сцена на WebGPU обходится без освещения, постобработки и промежуточных буферов.

Бесконечность тоже имитируется. Карточка, ушедшая за край, переносится на противоположный, а сетку размещают на большой сфере. Наклон и уменьшение элементов по краям создают глубину без бесконечной геометрии.

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