I Can't Believe It's Not Flash
Report
Thomas FuchsFollow
JavaScript Guru at Slash7Feb. 18, 2010•0 likes•25,009 views
I Can't Believe It's Not Flash
Feb. 18, 2010•0 likes•25,009 views
Download to read offline
Report
Technology
Art & Photos
My talk at Webstock 2010 about up and coming open web technologies.
Thomas FuchsFollow
JavaScript Guru at Slash7
I Can't Believe It's Not Flash
I Can’t Believe It’s Not Flash! @thomasfuchs
<omg code="on slides"/>
Animating CSS properties Timer JavaScript Reflow Rendering Paint sets CSS
Animating CSS properties Timer JavaScript Reflow Rendering Paint sets CSS
Performance hit
Performance hit JavaScript Reflow Rendering Paint
Performance hit JavaScript Reflow Rendering Paint
Performance hit JavaScript Reflow Rendering Paint
Performance hit JavaScript Reflow Rendering Paint
Performance hit JavaScript Reflow Rendering Paint
Browser CSS animation/ transitions Timer Browser Reflow Rendering Paint updates CSS
Timer JavaScript Reflow Rendering Paint sets CSS Timer Browser Reflow Rendering Paint updates CSS
Timer JavaScript Reflow Rendering Paint sets CSS Timer Browser Reflow 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
http://pepsicozeitgeist.com/
Vector graphics SVG + VML JavaScript Reflow 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
http://pepsicozeitgeist.com/
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/ firefox/nightly/latest-trunk/
JavaScript & CSS CSS Transforms & Animations 2D bitmapped graphics Physics engines Vector graphics HTML5 video WebGL
THANKS! @thomasfuchs