I Can't Believe It's Not Flash

I Can’t Believe It’s Not Flash - Presentation Transcript

I Can’t Believe It’s Not Flash! @thomasfuchs

Animating CSS properties Timer JavaScript Reﬂow Rendering Paint sets CSS

Performance hit

Performance hit JavaScript Reflow Rendering Paint

Browser CSS animation/ transitions Timer Browser Reﬂow Rendering Paint updates CSS

Timer JavaScript Reﬂow Rendering Paint sets CSS Timer Browser Reﬂow Rendering Paint updates CSS

-webkit-transform Paint JavaScript or Browser sets CSS

<!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;

#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>

Safari on Snow Leopard, or on Windows: Nokia’s Starlight browser (alpha) http://www.starlight-webkit.org/

http://pepsicozeitgeist.com/

Fullscreen HD Video CPU% HTML5: 10% FLASH: 100+% (and dropped frames) http://jilion.com/sublime/video

Canvas Timer JavaScript Paint uses Canvas APIs

Physics engine with Canvas Timer 1) clear canvas Paint 2) physics iteration 3) draw shapes 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 graphics SVG + VML JavaScript Reﬂow Rendering Paint creates vector graphics nodes

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,19 0.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,34 0.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.9 8,620.5L149.7,635.5L162.73,650.5L142.83,665.5L164.2,680.5L106.2 5,695.5L97.28,710.5L88.75,725.5L90.83,740.5L87.15,755.5L85.15,7 70.5L62.55,785.5M52.78,840.5L41.5,855.5L33.1,870.5L22.38,885.5L 25.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.5L1 37.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,118 5.5M58.6,1240.5L43.38,1255.5L33.35,1270.5L28.43,1285.5L29.05,13 00.5L38.43,1315.5L51.35,1330.5L82.38,1345.5L105.73,1360.5L159.7 8,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.5L 161.35,1775.5L171.2,1790.5L180.43,1805.5L171.88,1820.5L168.65,1 835.5L153.88,1850.5L148.35,1865.5L140.28,1880.5L110.2,1895.5L10 4.68,1910.5L101.2,1925.5L96.7,1940.5L96.5,1955.5L80.08,1970.5L6 8.4,1985.5M54.8,2040.5L41.23,2055.5L35.85,2070.5L30.15,2085.5L3

WebGL shaders Timer JavaScript Paint

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>

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( scenejs.org { lights: [ { pos: { x: -‐30.0, y: 30.0, z: -‐30.0 } } ]}, /* Perspective transformation */

http://github.com/OneGeek/WebGLU

http://learningwebgl.com/

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

JavaScript & CSS CSS Transforms & Animations 2D bitmapped graphics Physics engines Vector graphics HTML5 video WebGL

THANKS! @thomasfuchs

I Can't Believe It's Not Flash

17 comments

Notes on slide 1

79 Favorites

1 Event

Follow SlideShare