O recurso de shaders CSS é proposto à consideração da FX Task Force que pode ser integrado na especificação de Filter Effects.
Introdução
Um Shader é essencialmente um pequeno programa que proporciona um efeito particular e cujo comportamento é controlado com parâmetros de entradas.
Arquiteturas de gráficos, tais como Microsoft Direct3D ou OpenGL tem uma noção de vertex shaders que são operadas em coordenadas de ponto(vértices). Vertex shaders opera em uma malha de vértices e fornece uma ampla variedade de efeitos e distorção (Onda, oscilação). Shaders permitem varios efeitos per-pixel, como por exemplos, um efeito de florescer e vários outros efeitos de imagem (borrão, brilhos, detecção de bordas).
Quando aplicado para um conteúdo do documento, como o HTML ou elementos SVG, shaders podem ser usados de formas interessantes. Esses elementos 2D podem ser desenhados conceitualmente sobre uma malha de vértices que podem ser processados através de um Vertex Shader para a distorção e depois para um shader de fragmento para o processamento de pixel.
Shaders são particulamente interessantes no contexto de transições animadas e um complemento para o Filter Effects 1.0, CSS Animations, CSS Transitions entre outras.
Este documento propõe:
- Modelo e uma sintaxe CSS para fazer a vertex shaders ao conteúdo de marcação arbitrária.
- Sintaxe CSS para fazer fragmentos de shaders para operar com outros filtros de efeitos primitivos.
- Uma sintaxe CSS para passar parâmetros para fragmentar e vertex shaders.
- Uma sintaxe CSS para controlar a granularidade da malha processada pelo CSS.
- Uma sintaxe CSS para definir um efeito de filtro (aplicável a shaders CSS, mas geralmente útil para efeitos de filtro).
Exemplos de CSS Shaders
[cce lang=”css”]
.waving {
filter: custom(url(‘wave.vs’), 20 20, phase 0, amplitude 50);
transition-property: filter;
transition-duration: 0.2s;
}
.waving:hover {
filter: custom(url(‘wave.vs’), 20 20, phase 90, amplitude 20);
}
[/cce]
[cce lang=”html”]
[/cce]
url(‘wave.vs’) faz referencia ao vértice shader customizada que calcula o efeito de ondulação. O parametro 20 20 controla a Vertex mesh, de modo que a onda é suave. Finalmente a amplitude paraametros de controle a forma e a força da curva utilizada para o efeito de ondulação.
Combinado vértice e fragmento
[cce lang=”css”]
.old-book-page {
filter: grayscale(1.0) custom(url(‘book.vs’) url(‘old-page-paper.fs’));
}
[/cce]
[cce lang=”html”]
[/cce]
A figura mostra uma combinação de um vertex shader (para dar forma um “livro aberto” ) e um shader de fragmento (para dar a imagem um estilo de ‘papel velho’, com uma sombra sutil no meio).
Note como a propriedade ‘filter’ é estendida com um costume () função e como essa função pode ser combinada com uma das funções existentes filtrantes (tais como tons de cinza () no exemplo acima)
Cada shader define seu próprio conjunto de parâmetros. Normalmente, os shaders terão diferentes parâmetros com tipos diferentes. Por exemplo, “box-blur” e “box-size”.
Na parte 2, mostrarei mais exemplos práticos sobre como usar melhor os Shaders, nesse artigo, quiz mesmo fazer uma introdução sobre o elemento.