alizar Oct 14 2011 at 02:38

CSS Shaders: 3D-эффекты для веба

3 min

12K

Компании Adobe, Apple и Opera совместно разработали спецификации CSS Shaders для генерации качественных видеоэффектов в браузере, причём фильтры можно накладывать на любой HTML-элемент. Они выглядят знакомо для всех, кто применял эффекты в редакторе Flash-анимации, или для тех, кто знает элемент filter из стандарта Filter Effects 1.0 для SVG. Здесь то же самое, только гораздо лучше.

Алгоритм работы CSS Shaders такой: на любой элемент HTML или SVG накладывается полигональная сетка (шаг 1), с которой работает вершинный шейдер, как в WebGL. Объект можно трансформировать в трёхмерном пространстве (шаг 2), после чего выполняется рендеринг, то есть перевод в растровую графику (шаг 3).

Некоторые фильтры на демо-ролике CSS Shaders словно дублируют функционал WebGL. Неудивительно, ведь шейдеры CSS Shaders написаны на том же языке OpenGL Shading Language, что и шейдеры WebGL. Однако, принципиальное отличие в том, что WebGL работает только через canvas и только с предустановленными эффектами, а вот CSS Shaders более универсальны, ведь можно написать свой собственный фильтр, загрузить его через таблицу стилей и применить к любому элементу на странице.

Разработчики CSS Shaders многое позаимствовали из спецификаций SVG-фильтров (Filter Effects 1.0). Главное отличие в том, что для элемента filter они добавили функцию custom(), через которую можно указывать произвольные свойства эффектов. Казалось бы, мелочь позволяет создавать эффекты принципиально более высокого уровня. Это можно проиллюстрировать на следующем примере.

Вот как выглядит типичный эффект из набора Filter Effects 1.0.

Код этого примера:

<html>
<head>                                                      
    ...   
<style>
#shaded {
    filter: grayscale(1);
    transition: filter ease-in 0.3s;
}

#shaded:hover {
    filter: grayscale(0);
}
</style>
</head>

<body>
    <div id="shaded">
        <div id="multi-col">
            <h2>The Creative Web</h2>

            <p>Lorem ipsum dolor ... </p>
            <img id="png-img" src="planes.jpg"/>

            <p>Mauris at ... </p>
            <img id="svg-img" src="picture.svg" />
            
            <p>Morbi congue ....</p>
            <img id="css3-img" src="html5_css3_styling.svg" />
            
        </div>
    </div>
</body>
</html>

Красота Filter Effects — в простоте синтаксиса и интеграции с CSS. Но возможности этих фильтров очень ограничены, в спецификациях прописаны всего девять предустановленных эффектов для filter:

blur(5, 5)
drop-shadow(10, 5, 5)
hue-rotate(328deg)
saturate(5)
invert(1)
grayscale(1)
opacity(0.5)
gamma(1.1, 3.6, 0)
sepia(0.5)

Результат применения фильтров с такими параметрами показан на иллюстрации.

И это всё, других фильтров там нет. CSS Shaders — совершенно другое дело. Благодаря custom() можно наложить дополнительные эффекты. Например, превращение картинки из чёрно-белой в цветную дополняется небольшим наклоном картинки и эффектом «волны», когда цвет постепенно заливает картинку снизу вверх.

Согласитесь, разница есть.

Код:

<html>
<head>                                                      
    ...   
<style>
#shaded {
    filter: custom(url('wobble.vs')        /* wobble effect */
                   url('color-swipe.fs'), /* swipe effect  */
                   40 40,                 /* mesh lines/cols */
                   amplitude 60,          /* wobble strength */
                   amount 0.0);           /* effect amount */
    transition: filter ease-in-out 2s;
    ...;
}

#shaded:hover {
    filter: custom(url('wobble.vs') 
                   url('color-swipe.fs'), 
                   40 40, 
                   amplitude 60, 
                   amount 1.0);
}
</style>
</head>

<body>
    <div id="shaded">
        <div id="multi-col">
            <h2>The Creative Web</h2>

            <p>Lorem ipsum dolor ... </p>
            <img id="png-img" src="planes.jpg"/>

            <p>Mauris at ... </p>
            <img id="svg-img" src="picture.svg" />
            
            <p>Morbi congue ....</p>
            <img id="css3-img" src="html5_css3_styling.svg" />
            
        </div>
    </div>
</body>
</html>

Вот несколько примеров использования CSS Shaders на обычном HTML-контенте.

Черновик CSS Shaders представили для рассмотрения в консорциум W3C, насколько там затянется дело — неизвестно. Сейчас Adobe, Apple и Opera пытаются продвинуть код CSS Shaders для включения в движок WebKit. Пока это не произошло, разработчикам из Adobe пришлось скомпилировать собственную сборку Chromium, чтобы записать демо-видео.

Подробный обзор CSS Shaders, а также примеры по написанию шейдеров см. в статье Винсента Харди на сайте Adobe Developer Connection.

P.S. Таким образом, Adobe продолжает выпускать технологии, которые наверняка похоронят Flash. Это делается сознательно: все понимают, что будущее за HTML5, и у компании хватает ума не плыть против течения.

Tags:

Hubs: