Anúncio
Check these out next
I Can't Believe It's Not Flash
18 de Feb de 2010•0 gostou•25,006 visualizações
90 gostaram
Seja o primeiro a gostar disto
mostrar mais
visualizações
Vistos totais
0
No Slideshare
0
De incorporações
0
Número de incorporações
0
Baixar para ler offline
Denunciar
Tecnologia
Arte e fotografia
My talk at Webstock 2010 about up and coming open web technologies.
Thomas FuchsSeguir
JavaScript Guru em Slash7Anúncio
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
Anúncio