CSS Shaders

Slide Transition Method:
Cube - Page - Concave - Linear (default) - Dissolve - Burn - Tile Flip

Note: Dissolve, Burn & Tile Flip are only viewable in Chrome Canary with CSS Shaders enabled

Two Kinds of Shaders

• Vertex Shaders
• Fragment Shaders

Vertex Shaders

1. CSS specifies mesh resolution, laid over HTML content
2. Vertex shader called for each mesh vertex
3. Named parameters can be passed into shader
4. Shader calculates new 3D position of each mesh vertex
5. Calculated varyings can be passed to fragment shader

Animating a CSS Shader

Mouse over the tree...

Fragment Shaders

1. CSS specifies named parameters, blend mode and compositing method
2. Varyingx calculated in vertex shaders passed in as well
3. Fragment shader called for every pixel
4. New color or Mix color is calculated

Plasma Tree

Plasma shader adapted from work done by Viktor Korsun

Combining Vertex & Fragment Shaders

3D Page Curl With Lighting & Shading

Mouse over the page to start page curl