October 14, 2011 at 02:38CSS Shaders: 3D Effects for the Web
Adobe, Apple and Opera have jointly developed CSS Shaders specifications for generating high-quality video effects in a browser, and filters can be applied to any HTML element. They look familiar to everyone who applied effects in the Flash animation editor, or to those who know an element
The CSS Shaders algorithm is as follows: a polygonal mesh is superimposed on any HTML or SVG element (step 1), with which the vertex shader works, as in WebGL. The object can be transformed in three-dimensional space (step 2), after which rendering is performed, that is, translation into raster graphics (step 3).
Some filters on the CSS Shaders demo seem to duplicate WebGL functionality. No wonder, because CSS Shaders are written in the same OpenGL Shading Language as WebGL shaders. However, the fundamental difference is that WebGL works only through
CSS Shaders developers have borrowed a lot from the specifications of SVG filters ( Filter Effects 1.0 ). The main difference is that for the element
Here's what a typical Filter Effects 1.0 set looks like.
The code for this example:
The beauty of Filter Effects lies in its simple syntax and integration with CSS. But the capabilities of these filters are very limited, only nine predefined effects are prescribed in the specifications for
The result of applying filters with such parameters is shown in the illustration.
And that’s all, there are no other filters there. CSS Shaders are a completely different matter. Thanks
Agree, there is a difference.
The code:
Here are some examples of using CSS Shaders on regular HTML content.
A draft CSS Shaders was submitted for consideration to the W3C consortium, it is unknown how long it will drag out the matter. Now Adobe, Apple and Opera are trying to promote CSS Shaders to be included in the WebKit engine. Until this happened, Adobe developers had to compile their own build of Chromium to record a demo video.
Detailed overview of CSS Shaders, as well as examples for writing shaders cm. In the article by Vincent Hardy on the Adobe Developer Connection website.
PS Thus, Adobe continues to release technologies that are likely to bury Flash. This is done consciously : everyone understands that the future is HTML5, and the company has the mind to not swim against the tide.
filterfrom the Filter Effects 1.0 standard for SVG. It’s the same here, only much better.The CSS Shaders algorithm is as follows: a polygonal mesh is superimposed on any HTML or SVG element (step 1), with which the vertex shader works, as in WebGL. The object can be transformed in three-dimensional space (step 2), after which rendering is performed, that is, translation into raster graphics (step 3).
Some filters on the CSS Shaders demo seem to duplicate WebGL functionality. No wonder, because CSS Shaders are written in the same OpenGL Shading Language as WebGL shaders. However, the fundamental difference is that WebGL works only through
canvasand only with predefined effects, but CSS Shaders are more universal, because you can write your own filter, load it through the stylesheet and apply it to any element on the page.CSS Shaders developers have borrowed a lot from the specifications of SVG filters ( Filter Effects 1.0 ). The main difference is that for the element
filterthey added a function custom()through which you can specify arbitrary properties of the effects. It would seem that a trifle allows you to create effects of a fundamentally higher level. This can be illustrated by the following example. Here's what a typical Filter Effects 1.0 set looks like.
The code for this example:
...
The Creative Web
Lorem ipsum dolor ...
Mauris at ...
Morbi congue ....
The beauty of Filter Effects lies in its simple syntax and integration with CSS. But the capabilities of these filters are very limited, only nine predefined effects are prescribed in the specifications for
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)
The result of applying filters with such parameters is shown in the illustration.
And that’s all, there are no other filters there. CSS Shaders are a completely different matter. Thanks
custom()you can impose additional effects. For example, the conversion of a picture from black and white to color is complemented by a slight tilt of the picture and the “wave” effect, when the color gradually fills the picture from the bottom up.Agree, there is a difference.
The code:
...
The Creative Web
Lorem ipsum dolor ...
Mauris at ...
Morbi congue ....
Here are some examples of using CSS Shaders on regular HTML content.
A draft CSS Shaders was submitted for consideration to the W3C consortium, it is unknown how long it will drag out the matter. Now Adobe, Apple and Opera are trying to promote CSS Shaders to be included in the WebKit engine. Until this happened, Adobe developers had to compile their own build of Chromium to record a demo video.
Detailed overview of CSS Shaders, as well as examples for writing shaders cm. In the article by Vincent Hardy on the Adobe Developer Connection website.
PS Thus, Adobe continues to release technologies that are likely to bury Flash. This is done consciously : everyone understands that the future is HTML5, and the company has the mind to not swim against the tide.