i can't believe it's not flash
Post on 08-Sep-2014
75.905 Views
Preview:
DESCRIPTION
TRANSCRIPT
I Can’t Believe It’s Not Flash!
@thomasfuchs
<omg code="on slides"/>
JavaScript sets CSS
Reflow Rendering Paint
Animating CSS properties
Timer
JavaScript sets CSS
Reflow Rendering Paint
Animating CSS properties
Timer
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 updates
CSS
Reflow Rendering Paint
Browser CSS animation/transitions
Timer
Browser updates
CSS
Reflow Rendering Paint
Timer
JavaScript sets CSS
Reflow Rendering Paint
Timer
Browser updates
CSS
Reflow Rendering Paint
Timer
JavaScript sets CSS
Reflow Rendering Paint
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>
<!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://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
Reflow Rendering Paint
<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://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/
JavaScript & CSSCSS Transforms & Animations
2D bitmapped graphicsPhysics enginesVector graphics
HTML5 videoWebGL
THANKS!
@thomasfuchs
top related