i can't believe it's not flash

I Can’t Believe It’s Not Flash!

@thomasfuchs

JavaScript sets CSS

Reflow Rendering Paint

Animating CSS properties

Timer

Performance hit

Performance hit

JavaScript Reflow Rendering Paint

Browser updates

CSS


Browser CSS animation/transitions

Timer

Browser updates

CSS


Timer

JavaScript sets CSS


Timer

JavaScript or Browser

sets CSS

Paint

-webkit-transform

<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <meta http-‐equiv="Content-‐Type" content="text/html; charset=utf-‐8"/> <title>index</title> <style type="text/css" media="screen"> div { position: absolute; border: 3px solid red; } #d1 { left: 20px; top: 20px; width: 400px; height: 400px; -‐webkit-‐transform:translateZ(0px); } #d2 { left: 100px; top: 30px; width: 150px; height: 100px; -‐webkit-‐transform:translateZ(-‐100px); } #d3 { left: 300px; top: 40px; width: 100px; height: 50px; -‐webkit-‐transform:translateZ(-‐200px); } #d4 { left: 320px; top: 80px; width: 90px; height: 50px; -‐webkit-‐transform:translateZ(-‐300px); } #d5 { left: 280px; top: 90px; width: 90px; height: 50px; -‐webkit-‐transform:translateZ(-‐400px); } body { -‐webkit-‐transform-‐style: preserve-‐3d; -‐webkit-‐transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) perspective(0); } body.stage2 { -‐webkit-‐transition: -‐webkit-‐transform 10s; -‐webkit-‐transform:rotateX(30deg) rotateY(-‐50deg) rotateZ(10deg) perspective(0); } </style></head><body> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> <div id="d4"></div> <div id="d5"></div></body></html>

http://www.starlight-webkit.org/

Safari on Snow Leopard,or on Windows: Nokia’s Starlight

browser (alpha)

http://www.starlight-webkit.org

http://www.starlight-webkit.org

http://pepsicozeitgeist.com/

http://pepsicozeitgeist.com


















Fullscreen HD Video CPU%

HTML5: 10%

FLASH: 100+%(and dropped frames)

http://jilion.com/sublime/video



JavaScript uses

Canvas APIs

Paint

Canvas

Timer

1) clear canvas2) physics iteration

3) draw shapes

Paint

Physics enginewith Canvas

Timer

Box2D physics engine

function createBall(world, x, y) { var ballSd = new b2CircleDef(); ballSd.density = 0.3; ballSd.radius = 20+Math.random()*20; ballSd.restitution = 0.1; ballSd.friction = 0.2; var ballBd = new b2BodyDef(); ballBd.rotation = 0.3; ballBd.AddShape(ballSd); ballBd.position.Set(x,y); return world.CreateBody(ballBd);}

world.Step(ms,1);

3) draw shapes

box2d objects/

positions

canvas

Vector graphicsSVG + VML

JavaScript creates vector

graphics nodes


http://raphaeljs.com/

http://raphaeljs.com

http://raphaeljs.com

<path fill="none" stroke="#5cbfff" d="M52.2,40.5L47.23,55.5L38.53,70.5L33.88,85.5L36.63,100.5L50.1,115.5L70.7,130.5L97.85,145.5L123.65,160.5L139.3,175.5L126.2,190.5L132.95,205.5L157.58,220.5L143.85,235.5L155.25,250.5L151.43,265.5L149.05,280.5L104.5,295.5L103.6,310.5L97.85,325.5L94.58,340.5L86.7,355.5L78.95,370.5L69.35,385.5M56.4,440.5L42.3,455.5L32.93,470.5L26.38,485.5L28.23,500.5L28.95,515.5L40.45,530.5L57.55,545.5L80.18,560.5L123.55,575.5L144.95,590.5L137.33,605.5L134.98,620.5L149.7,635.5L162.73,650.5L142.83,665.5L164.2,680.5L106.25,695.5L97.28,710.5L88.75,725.5L90.83,740.5L87.15,755.5L85.15,770.5L62.55,785.5M52.78,840.5L41.5,855.5L33.1,870.5L22.38,885.5L25.63,900.5L24.05,915.5L33.05,930.5L48.3,945.5L65.35,960.5L115.2,975.5L137.7,990.5L136.43,1005.5L102.28,1020.5L132.28,1035.5L137.5,1050.5L132.05,1065.5L155.83,1080.5L107.3,1095.5L95.98,1110.5L94.73,1125.5L94.65,1140.5L86.25,1155.5L83.4,1170.5L70.48,1185.5M58.6,1240.5L43.38,1255.5L33.35,1270.5L28.43,1285.5L29.05,1300.5L38.43,1315.5L51.35,1330.5L82.38,1345.5L105.73,1360.5L159.78,1375.5L176.05,1390.5L164.13,1405.5L139.48,1420.5L131.53,1435.5L164.83,1450.5L161.15,1465.5L157.2,1480.5L112.68,1495.5L105.68,1510.5L103.83,1525.5L104.25,1540.5L92.5,1555.5L91.35,1570.5L70.48,1585.5M54.05,1640.5L48.6,1655.5L35.02,1670.5L32.8,1685.5L36.98,1700.5L41.75,1715.5L63.78,1730.5L90.6,1745.5L112.28,1760.5L161.35,1775.5L171.2,1790.5L180.43,1805.5L171.88,1820.5L168.65,1835.5L153.88,1850.5L148.35,1865.5L140.28,1880.5L110.2,1895.5L104.68,1910.5L101.2,1925.5L96.7,1940.5L96.5,1955.5L80.08,1970.5L68.4,1985.5M54.8,2040.5L41.23,2055.5L35.85,2070.5L30.15,2085.5L32.23,2100.5L42.58,2115.5L59.63,2130.5L86.8,2145.5L107.73,2160.5L123.98,2175.5L133.7,2190.5L142.98,2205.5L140.93,2220.5L137.25,2235.5L126.9,2250.5L129.88,2265.5L117.93,2280.5L111.55,2295.5L112.03,2310.5L114.8,2325.5L106.35,2340.5L100.7,2355.5L88.75,2370.5L71.17,2385.5M62.78,2440.5L44.75,2455.5L35.43,2470.5L31.73,2485.5L33.52,2500.5L43.25,2515.5L64.15,2530.5L88.98,2545.5L112.6,2560.5L130.33,2575.5L147.13,2590.5L140.93,2605.5L138.85,2620.5L136.6,2635.5L138.7,2650.5L121.25,2665.5L102.75,2680.5L100.6,2695.5L107.7,2710.5L108.08,2725.5L106.3,2740.5L98.8,2755.5L92.88,2770.5L72.92,2785.5M65.92,2840.5L50.4,2855.5L39.18,2870.5L33.4,2885.5L34.85,2900.5L48.55,2915.5L64.38,2930.5L96.08,2945.5L119.63,2960.5L133.35,2975.5L137.35,2990.5L143.4,3005.5L146.33,3020.5L141.25,3035.5L140.93,3050.5L135.45,3065.5L118.13,3080.5L111.1,3095.5L102.98,3110.5L103.38,3125.5L91.9,3140.5L93.5,3155.5L87.85,3170.5L70.3,3185.5M54.43,3240.5L43.4,3255.5L34.63,3270.5L26.5,3285.5L2.25,3300.5L36.48,3315.5L41.5,3330.5L48.05,3345.5L60.9,3360.5L79.3,3375.5L90.58,3390.5L93.98,3405.5L103.1,3420.5L102.3,3435.5L96.43,3450.5L95.53,3465.5L92.23,3480.5L91.53,3495.5L91.4,3510.5L88.5,3525.5L93.75,3540.5L90.88,3555.5L73.7,3570.5L65.23,3585.5M58.15,3640.5L44.58,3655.5L34.48,3670.5L26.43,3685.5L26.78,3700.5L26.7,3715.5L29.05,3730.5L42.45,3745.5L58.8,3760.5L68.23,3775.5L76.93,3790.5L86.13,3805.5L88.08,3820.5L89.2,3835.5L88.5,3850.5L85.2,3865.5L84.03,3880.5L88.6,3895.5L85.5,3910.5L86.43,3925.5L87.68,3940.5L83.88,3955.5L70.5,3970.5L59.5,3985.5" style=�"stroke-‐width: 4.5px;" stroke-‐width="4.5">�

JavaScript Paint

WebGL

Timer

shaders

WebGL<script id="vshader" type="x-‐shader/x-‐vertex"> uniform mat4 u_modelViewMatrix; uniform mat4 u_modelViewProjMatrix; uniform mat4 u_normalMatrix; uniform vec3 lightDir;

attribute vec3 vNormal; attribute vec4 vTexCoord; attribute vec4 vPosition; varying float v_Dot; varying vec2 v_texCoord; void main() { gl_Position = u_modelViewProjMatrix * vPosition; v_texCoord = vTexCoord.st; vec4 transNormal = u_normalMatrix * vec4(vNormal,1); v_Dot = max(dot(transNormal.xyz, lightDir), 0.0); }</script>

/* Introductory SceneJS scene which renders the venerable OpenGL teapot.

Lindsay S. Kay, lindsay.stanley.kay AT gmail.com December 21, 2009

To render the teapot, SceneJS will traverse the scene in depth-‐first order. Each node is a function that will set some WebGL state on entry, then un-‐set it again before exit. In this graph, a canvas activates a Canvas element, a shader activates some GLSL scripts, and the rest of the nodes set various matrices, vectors and geometry variables within the scripts. Note that node declarations generally have the form node({configs}, child,child...). For brevity, node configurations need only specify values where defaults are overridden, such as non-‐zero vector components, for example. */with (SceneJs) {

var exampleScene = scene( {},

/* A renderer node binds subnodes to a WebGL canvas element defined in the HTML tab then clears the depth and colour buffers */ renderer({ canvasId: 'theCanvas', clear : { depth : true, color : true} }, /* A simple phong GLSL shader to render sub-‐nodes, with a single light source. This shader type only supports a one light source. */ shader( { type: 'simple-‐shader' },

lights( { lights: [ { pos: { x: -‐30.0, y: 30.0, z: -‐30.0 } } ]},

/* Perspective transformation */ perspective( { fovy : 25.0, aspect : 1.0, near : 0.10, far : 300.0 },

/* Viewing transform specifies eye position, looking at the origin by default */ lookAt( { eye : { x: 0.0, y: 10.0, z: -‐15 }, up : { y: 1.0 } },

/* Next, a modelling transform to orient our teapot by a given angle. See how this node takes a function which creates its configuration object? You can do that when you want a node's configuration to be evaluated dynamically at traversal-‐time. The function takes a scope, which is SceneJS's mechanism for passing variables down into a scene graph. Using the angle variable on the scope, the function creates a configuration that specifies a rotation about the X-‐axis. Further down you'll see how we inject that angle variable when we render the scene. */ rotate(function(scope) { return { angle: scope.get('angle'), y : 1.0 }; },

/* Make our teapot nice and shiney */ material({ ambient: { r:0.2, g:0.2, b:0.5 }, diffuse: { r:0.6, g:0.6, b:0.9 } }, /* Teapot's geometry */ objects.teapot() ) ) // rotate ) // lookAt ) // frustum ) // lights ) // shader ) // renderer ); // scene

/* Throw the switch, Igor! * We render the scene, injecting the angle for the rotate node. */ exampleScene.render({angle: 45.0});

/* As soon as we are finished with a scene, we should destroy it to to * release all the resources (shaders, VBOs etc.) that SceneJS is * managing for it. This is critical for the PlayRoom examples since * they are re-‐evaluated each time you hit that Run button -‐ SceneJS * will get really confused if you remove this. */ exampleScene.destroy();

}�

scenejs.org

http://github.com/OneGeek/WebGLU



http://learningwebgl.com/

http://learningwebgl.com

http://learningwebgl.com

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/





JavaScript & CSSCSS Transforms & Animations

2D bitmapped graphicsPhysics enginesVector graphics

HTML5 videoWebGL

THANKS!

@thomasfuchs

i can't believe it's not flash

Technology