Основы›Как работает стекло

Как работает стекло

Что умеет CSS

CSS умеет размывать то, что за элементом, через backdrop-filter, и только. Он не умеет двигать пиксели, а значит, не может изгибать свет. Для этого нужна программа, которая выполняется для каждого пикселя, а в браузере это шейдер на видеокарте. Запускает его WebGL.

Откуда стекло берёт картинку

Из соображений безопасности страница не может прочитать собственные пиксели. Поэтому стекло не может просто посмотреть, что за ним. Ему нужно найти источник: картинку, видео, canvas или сплошной цвет. Поэтому так важен Фон.

Что происходит в кадре

Сначала стекло находит источник и загружает его на видеокарту. Затем шейдер вычисляет изогнутый край вашей фигуры и для каждого пикселя определяет, откуда пришёл бы свет. Он читает это место, разделяет цвета, добавляет матовость и блик. Результат рисуется в canvas внутри вашего элемента.