Кастомные фильтры в CSS

Приступая к кастомным фильтрам на CSS (Custom Cascading Style Sheets Filters)

Вступление

Кастомные CSS фильтры (далее CCSSF)(ранее известные как CSS шейдеры) — это новая браузерная фича, накладывающая созданные руками визуальные эффекты на элементы HTML документа.
Кастомные фильтры являются частью Filter Effects 1.0 specification. Они дополняют другую часть этой спецификации, определяющую некоторые общие CSS фильтры, уже встроенные в браузеры (blur, sepia, contrast, grayscale).

Встроенные CSS фильтры

Встроенные CSS фильтры предлагают функционал, схожий с фильтрами в редакторах изображений — у вас сет предустановленных, повсеместно используемых эффектов, в которых вы можете только контролировать параметры.
Например, это изображение было сконвертировано в grayscale а затем был применён blur:

(можно нажать на картинки и убедиться самому, встроенные CSS фильтры должны работать в стабильной версии Chrome)

Кастомные CSS фильтры

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

(можно нажать на картинки и убедиться самому, подробнее в пункте Как сделать так, чтобы CSS фильтры заработали)

Встроенные фильтры имеют доступ к функционалу, недоступному для кастомных. Они могут достичь большего, чем было задумано создателями браузеров изначально.
Самые заметные встроенные фильтры могут считывать пиксели с указанного DOM контента, что значит, что они могут сделать, например, blur (Смотрите в пункте Ограничения кастомных фильтров).

Что такое шейдеры?

Эффекты кастомных фильтров устанавливаются маленькими программами, назвываемыми шейдеры (shaders).
Шейдеры определяют 3D форму и вид графических элементов (шейдеры оперируют полигональными сетками).
Шейдеры работают напрямую на железе видеокарты. Они могут обрабатывать параллельно большое количество данных, что значит, что они могут быть очень быстрыми, но часто и лишними по сравнению с типичным циклом работы программ, крутящихся на CPU.
CCSSF используют GLSL как язык для написания шейдеров.
Если вы знакомы с шейдерами по программированию графики, задействующему шейдерные языки (OpenGL, OpenGL ES, WebGL, DirectX), то здесь всё похоже — шейдеры, использованные в кастомных CSS фильтрах работают так же.

Типы шейдеров

Шейдеры, используемые в CCSSF, бывают двух типов: вершинные шейдеры (Vertex Shader)и фрагментные шейдеры (Fragment Shader)(их еще называют пиксельные).
Вершинные шейдеры говорят, где что находится. Они позволяют двигать вершины сетки в 3D пространстве, деформируя и переставляя объекты.
Фрагментные шейдеры говорят как выглядят поверхности объектов. Они позволяют рисовать на объектах или изменять принадлежность существующих пикселей к внешности объектов.
В целом, чтобы иметь возможность создавать валидную GPU программу, вам нужны и те, и другие шейдеры. Тем не менее, для кастомных CSS фильтров нужен только один из этих видов, а для недостающего браузер использует default pass-through shader.

Как работают кастомные CSS фильтры?

Современные браузеры нынче сами реализовывают использование графического ускорения.
HTML страницы отрисовываются браузерами как коллекции текстурированных прямоугольников, соответствующих DOM элементам.
С кастомными CSS фильтрами вы цепляетесь за браузерный рендерный информационный поток, получая возможность менять форму и вид этих прямоугольников до того, как они отрисуются на экране.
Это похоже на то, как работают CSS 3D transforms, только заместо возможности играться с параметрами с уже заданным функционалом, вы можете запускать свой собственный код обработки DOM контента.

Контентовая сетка

Каждый DOM элемент с CCSSF будет преобразован в треугольную сетку с мозаикой, определённой юзером:
<img srс=«cs317217.userapi.com/v317217705/37a5/ghtCCVl9SeM.jpg» alt=«image»/>

По умолчанию, сетка содержит только два треугольника (необходимый минимум для создания прямоугольника).
Эта сетка получит текстуру, созданную для контента DOM элемента (то, что обычно и отрисовывается на экране), а потом к ней применятся ваши кастомные шейдеры.

Связность сеток

Сетка из треугольников может быть создана двумя путями (контролируемыми из CSS):

1. прикреплённые треугольники
2. откреплённые треугольники

Сетка с прикреплёнными треугольниками это один объединённый объект, где соседние треугольники имеют общие вершины. Если вы сдвинете вершину, все связанные с ней треугольники деформируются (как лист ткани). Этот вариант используется по умолчанию.
Сетка с откреплёнными треугольниками собрана из множества отдельных треугольников. Каждая вершина принадлежит только одному треугольнику. Вы можете поделить сетку на отдельные компоненты. Сетка может содержать дыры, или вообще быть полностью перемоделирована в вершинный шейдер.
Мозаика сетки и связность должны оставаться одними и теми же во всех CSS transitions.

Входные параметры шейдеров

Вершинные и фрагментовые шейдеры могут принимать на вход параметры трёх типов:

1. формы (uniforms)
2. атрибуты (attributes)
3. отличия (varyings)

Формы являются параметрами с одним значением для всех вершин и пикселей сетки (например, цвет объекта).
Атрибуты являются индивидуальными параметрами вершин, каждая вершина сетки получает своё значение для каждого атрибута (например, позиция вершины).
Отличия являются параметрами, передаваемыми вершинами фрагментам. Они указываются для каждой вершины треугольника и их значения для точек внутри треугольника интерполирует GPU (например, освещение).

Filter Effects specification так же допускают другой тип входных данных: текстуры. Тем не менее, они еще не реализованы (и попытки использовать их тихо сломают шейдеры).
Браузеры предоставляют некоторые дефолтные встроенные параметры, созданные и инициализированные для все элементов, к которым применяются кастомные CSS фильтры.

attribute vec4 a_position; attribute vec2 a_texCoord; attribute vec2 a_meshCoord; attribute vec3 a_triangleCoord;

Встроенные атрибуты позволяют идентифицировать и находить отдельные вершины и треугольники в сетке.

 uniform mat4 u_projectionMatrix; uniform vec2 u_textureSize; uniform vec4 u_meshBox; uniform vec2 u_tileSize; uniform vec2 u_meshSize;

Встроенные формы предоставляют информацию про данные DOM элементов, общие для всей сетки.

varying vec2 v_texCoord;

Встроенные отличия предоставляют координаты текстуры в случае, если эффект использует дефолтные шейдеры.
Точные определения этих параметров можно найти в специализации Filter Effects (атрибуты, формы, отличия).

Предостережение: на данный момент, не все встроенные параметры из этой специализации реализованы.

Например, отсутствуют формы u_textureSize и u_meshSize. Вы можете решить эту проблему, самолично определив их в CSS.
Так же, отличие v_texCoord пока не работает, поэтому вам надо будет создать своё отличие для передачи координат текстуры из атрибута a_texCoord в вершинный шейдер.
Следить за прогрессом внедрения кастомных CSS фильтров можно в этом издании WebKit «master» issue.
В дополнение к встроенным параметрам вы так же можете описать свои формы для эффекта через CSS стили.

 .shaded {   -webkit-filter: custom(url(distort.vs) mix(url(tint.fs) normal source-atop),                           distortAmount 0.5, lightVector 1.0 1.0 0.0); }  

// Шейдер (вершинный или фрагментовый)  ...  uniform float distortAmount; uniform vec3 lightVector; ...

Всё это позволяет вам контролировать эффекты извне. В частности, значения для форм, описанные в CSS будут интерполированы при использовании CSS transitions.
Предостережение: количество доступных слотов под формы и отличия органичено и зависит от конкретных GPU (то же самое относится и к атрибутам, но для CSS фильтров их использовать не получится).

<style> .shader {     -webkit-filter:         custom(url(shaders/crumple.vs) mix(url(shaders/crumple.fs) normal source-atop),         50 50, amount 0, strength 0.2, lightIntensity 1.05); } </style>

<style> .shader {     -webkit-filter:         custom(none mix(url(shaders/tint.fs) normal source-atop), amount 0); } </style>

<div class="shader">

-webkit-transition: -webkit-filter ease-in-out 1s;

chrome --enable-css-shaders

chrome://flags/ 

precision mediump float;  attribute vec4 a_position; uniform mat4 u_projectionMatrix;  void main() {      gl_Position = u_projectionMatrix * a_position;  }

precision mediump float;  void main() {      float r = 1.0;     float g = 1.0;     float b = 1.0;     float a = 1.0;      css_ColorMatrix = mat4( r, 0.0, 0.0, 0.0, 			0.0, g, 0.0, 0.0, 			0.0, 0.0, b, 0.0, 			0.0, 0.0, 0.0, a ); }

<style> .shader {     -webkit-filter: custom(url(simple.vs) mix(url(simple.fs) normal source-atop), 1 1) } </style>  <body>     <div class="shader"> Hello world! </div> <body>

attribute vec4 a_position;

vec4 position = a_position;

Распостранённой операцией в компютерной графика является текстурирование посредством a href=«en.wikipedia.org/wiki/UV_mapping»>UV mapping, когда прямоугольная картина оборачивается вокруг сетки, используя 2D координаты текстуры. Звучит очень похоже на то, что нам нужно.

Один из встроенных атрибутов сетки, предоставляемый браузером — двухкомпонентный вектор a_texCoord с текстурными координатами вершины.

attribute vec2 a_texCoord;

Текстурные координаты называются U и V, они находятся в промежутке 0… 1 для каждой оси и мапят вершины сетки по длине и высоте картинки.

Чтобы получить координаты X, Y, Z, соответствующие нашим U и V координатам, мы будем использовать трансформацию между сферической системой координат (её ещё называют полярной) и прямоугольной системой координат:

x = r * sin( θ ) * cos( φ ) y = r * sin( θ ) * sin( φ ) z = r * cos( θ )

Сферическая система координат использует следующие координаты:

• радиус r
• зенит (inclination) θ (промежуток [0… π])
• азимут (azimuth) φ (промежуток [0… 2π])

Позволим пользователю определять радиус через CSS форму:

uniform float sphereRadius;

И будем мапить U и V координаты в азимут и зенит:

vec3 computeSpherePosition( vec2 uv, float r ) {      vec3 p;      float fi = uv.x * PI * 2.0;     float th = uv.y * PI;      p.x = r * sin( th ) * cos( fi );     p.y = r * sin( th ) * sin( fi );     p.z = r * cos( th );  }

vec3 sphere = computeSpherePosition( a_texCoord, sphereRadius );

Теперь мы можем переходить между оригинальной плоской позицией и новой сферической позицией, которую мы только что посчитали, используя встроенную в GLSL функцию (линейной интерполяции между двумя значениями).

uniform float amount;

Мы будем использовать предоставленные пользователем параметры формы чтобы контролировать переход (параметр формы из CSS может быть интерполирован браузером, используя CSS transitions).

position.xyz = mix( position.xyz, sphere, amount );

Наконец, мы можем заменить вершины сетки, записывая в встроенную GLSL переменную, трансформирующую нашу посчитанную позицию по предоставленной браузером матричной форме gl_Position:

gl_Position = u_projectionMatrix * position;

Затенение поверхности

Подсчёт затенения делается объединением вершинных и фрагментных шейдеров.

Затенение: вершинные шейдеры

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

Для затенения мы будем использовать простую модель Ламбертовского рассеивания.
Свет отражения считается как скалярное произведение нормального вектора поверхности и нормализованного вектора направления света.
Нам понадобится позиция света и нормаль поверхности для каждой вершины.
Мы позволим пользователю определять позицию источника света как трёхкомпонентную векторную форму lightPosition, передоваемую через CSS:

uniform vec3 lightPosition;

Мы будем нормализовывать используая встроенную в GLSL функцию normalize:

vec3 lightPositionNormalized = normalize( lightPosition );

Далее нам надо посчитать нормаль для плоской и сферической поверхности.
Нормаль поверхности обычно считается на стороне CPU, так как вам нужно работать со связной сеткой и иметь доступ ко всем вершинам треугольников одновременно (шейдер видит за раз только одн вершину).
Тем не менее, здесь мы имеем дело с простыми геометрическими формами, поэтому мы можем посчитать нормали аналитически.
Для нормали плоскости мы немного схитрим: правильная нормаль плоскости должна быть направлена от монитора, перпендикулярно к плоскости XY.
Но такая нормаль даст нам неизменённый DOM элемент, местами немного затенённый, и это будет неестественно на фоне остальных элементов страницы, которые не имеют наложенных шейдеров.
Поэтому мы используем вектор, направленный к источнику света как нормаль поверхности.

vec3 planeNormal = lightPositionNormalized;

Это позволит недеформированному элементу всегда быть полностью освещённым.

Для нормали сферы мы будем использовать простую аналитическую формулу. Нормаль сферы на поверхности — это нормализованные векторы из центра сферы к её поверхности:

vec3 sphereNormal = normalize( position.xyz );

Чтобы получить адекватную нормаль для нашего переходного состояния, мы будем просто переходить от нормали плоскости к нормали сферы и нормализировать этот переходный вектор:

vec3 normal = normalize( mix( planeNormal, sphereNormal, amount ) );

Наконец, мы можем посчитать освещение соответственно Ламбертовской формуле, используя встроенную в GLSL функцию dot, и зафиксировать отрицательные занчения формулой max:

float light = max( dot( normal, lightPositionNormalized ), 0.0 );

Последним действием векторного шейдера мы передадим интенсивность света фрагментному шейдеру через отличие:

varying float v_light;

v_light = light;

Затенение: фрагментный шейдер

Фрагментный шейдер будет очень простой, всё тяжёлое было осилено в вершинном шейдере.
Возьмём интенсивность света из отличия:

varying float v_light;

И используем его, чтобы модулировать цветовые коэффиценты (прозрачность менять не будем):

float r, g, b; r = g = b = v_light;

И используем их чтобы получить матрицу перехода css_ColorMatrix:

 css_ColorMatrix = mat4( r, 0.0, 0.0, 0.0,                         0.0, g, 0.0, 0.0,                         0.0, 0.0, b, 0.0,                         0.0, 0.0, 0.0, 1.0 ); 

В нашем случае, получится цвет, эквивалетный этому:

gl_FragColor = vec4( r, g, b, 1.0 ) * sourceColor;

Итоговый вершинный шейдер

Скачать

Итоговый фрагментный шейдер

Скачать

CSS стиль

Скачать

Еще немного примеров кастомных эффектов

• Burn shader
• Dissolve shader
• Crumple shader
• Dots shader
• Flip shader (variant 1)
• Flip shader (variant 2)
• Sphere shader (planets)
• Sphere shader (map)

Отладка шейдеров

Отладка шейдеров, используемых в CCSSF — дело сложное. По крайней мере, сейчас нет никакого error лога в консоль Chrome (в отличие от WebGL, где можно получить результаты компиляции шейдера и, возможно, найти ошибку или опечатку).

На маке вы можете получить error output отображаемый в окне консоли, из которой вы запустили Chrome, но в Windows в консоль такого не пишется.

Возможное решение — использовать GL shader validation plugin для Sublime text editor, созданного недавно ребятами @aerotwist и @brendankenny.

Профилирование шейдеров

К сожалению, так же как и в WebGL нет никакого способа увидеть, что происходит на стороне GPU :S.
Всё же, есть пара хитростей, которые можно использовать, чтобы получить немного внутренней информации о работе шейдеров.
Например, если вы хотите узнать, привязано ли действие вашего эффекта привязанным к фрагментному шейдеру, попробуйте изменить размер DOM элемента, чтобы увидеть, стало ли работать лучше на уменьшенных элементах.
Пытайтесь избегать эффектов, применяемых к полноэкранным элементам. Это будет непроизводительно и может оказаться узким местом при построении страницы.
Если хотите увидеть, привязано ли действие вашего эффекта к вершинным шейдерам, попробуйте его на сетке с другой мозаикой.

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

Полезные ссылки

• Filter Effects specification
• GLSL specification
• Compositing and Blending specification
• CSS transitions specification
• CSS transforms specification
• Umbrella WebKit issue tracking CSS Shaders implementation progress
• Adobe custom CSS filter effects examples
• Introducing CSS shaders: Cinematic effects for the web
• WebGL quick reference card (включает полезный справочник GLSL)
• GLSL Sandbox
• CSS Shaders implemented with WebGL

Материал

• Jupiter close-up by Voyager 1
• Jupiter texture
• Earth from Google Maps
• Diagrams from Filter Effects spec