About this presentation

This presentation was given at the WebVisions conference held in Barcelona, Spain on Saturday, July 7th. The slides are supporting the presentation, and do not have enough textual information to be understood by themselves.

At the time it was created, the presentation required a prototype build of the Chromium browser to view the prototype features it uses. You can get the prototype implementation on github.com/adobe/webkit/downloads.

You can navigate with the left and right arrow keys and with the up/down keys to drill into sections.

Cinematics for the Web

HI !

Raul Hudea

Computer Scientist

Web Platform

CSS Filters

CSS Filters

  • Ways of changing the rendering of HTML5 content
  • ANY content, not just images (beat that, canvas!)

Shorthand Filters

#myelement {
	filter: shorthand-function(params);

Shorthand Filters

  • cover most common needs (ex: galleries)
  • can be applied to any HTML5 content
  • hardware accelerated (on most browsers)

SVG Filters

#myelement {
	filter: url(#svg-filter-id);

SVG Filters

  • (currently) no parameters passing
  • applies only to SVG content (Firefox, WebKit nightly)
  • created as graph of filters primitives(see spec for more details)

SVG Filter graph

<filter id='Emboss' filterUnits='objectBoundingBox' >
  <feColorMatrix result='pict0' in='SourceGraphic' 
  <feSpecularLighting result='pict1' in='pict0' 
                      specularExponent='16' surfaceScale='6'>
    <fePointLight x='-200' y='100' z='380' 
  <feComposite in2='pict1' in='SourceGraphic' 
               operator='out' k1='3.3' k2='0.2' k3='0.1' k4='0'/>

CSS Shaders

CSS Shaders

#myelement {
	filter: custom(params)

Shader Syntax

#myelement {
	filter: custom(

Vertex shader

#myelement {
	filter: custom( url(vertex.vs)
	                ,4 4);

CSS Shaders

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

  • operates on mesh of vertices
  • alters the 3D Geometry

Fragment shader

#myelement {
	filter: custom(	url(vertex.vs)
	                ,4 4);

CSS Shaders

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

  • decides the pixel color
  • receives interpolated data from vertex

Passing arguments

#myelement {
	filter: custom(	url(vertex.vs)
	                ,4 4

CSS Shaders

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

  • move the slider

CSS Shaders

  • easy to use
  • hardware accelerated
  • pixel and geometry manipulation

Shader code

Vertex code

precision mediump float;
// vertex attributes
attribute vec4 a_position;
attribute vec2 a_texCoord;
// shader uniform
uniform mat4 u_projectionMatrix;
varying vec2 v_texCoord;
uniform mat4 txf;
... const defines (PI, PHI) ...
void main() {    
    v_texCoord = a_texCoord;
    vec4 pos = a_position;
    pos.z = 40.0 * cos(pos.x * PI * 2.0 + PHI);
    gl_Position = u_projectionMatrix * txf * pos;

Fragment code

precision mediump float;
// These uniform values are passed in using CSS.
uniform float frontColor;
uniform float backColor;
// This varying value is passed from vertex shader.
varying float shadow;

void main()
    // Use gl_FrontFacing to hide the back face.
    float c = gl_FrontFacing ? frontColor : backColor;
    float a =  shadow * c;

    css_BlendColor = vec4(a, a, a, c);

CSS Shaders Security


  • access to rendered content
  • access to third-party content (bank info)
  • user agent data (like visited links)

Timing attacks

  • read pixel value
  • depending on pixel value, spend more or less time in shader
  • time the shader execution
  • infer data

Timing attacks

  • demonstrated in WebGL
  • demonstrated in our prototype

Current fix

  • rewrite shader to eliminate color based decisions
  • analyze GPU execution patterns

CSS Shaders Studio

CSS Compositing & Blending

  • A very common idiom for designers. They currently have to use prerendered images
  • Easy to describe with simple keywords
  • Easy to implement by browser vendors

Alpha Compositing

#myelement {
	alpha-compositing: value;

CSS Blending

#myelement {
	blend-mode: value;

Mixing Blending and Filters

soft-glow effect

Current status

  • CSS Filters available in Chrome 18+
  • CSS Shaders - work in progress
  • CSS Blending & Compositing - work in progress

attributions 1/3

attributions 2/3

  • Image with permission from miChou

  • Image from personal collection

attributions 3/3

Thank you!