More Related Content Similar to I Can't Believe It's Not Flash (20) More from Thomas Fuchs (7) I Can't Believe It's Not Flash15. Timer
JavaScript Reflow Rendering Paint
sets CSS
Timer
Browser Reflow Rendering Paint
updates
CSS
16. Timer
JavaScript Reflow Rendering Paint
sets CSS
Timer
Browser Reflow Rendering Paint
updates
CSS
21. <!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;
22. #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>
23. Safari on Snow Leopard,
or on Windows: Nokia’s Starlight
browser (alpha)
http://www.starlight-webkit.org/
26. Fullscreen HD Video CPU%
HTML5: 10%
FLASH: 100+%
(and dropped frames)
http://jilion.com/sublime/video
28. Canvas
Timer
JavaScript Paint
uses
Canvas
APIs
30. Physics engine
with Canvas
Timer
1) clear canvas Paint
2) physics iteration
3) draw shapes
Box2D physics engine
31. 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);
}
35. Vector graphics
SVG + VML
JavaScript Reflow Rendering Paint
creates
vector
graphics
nodes
37. <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
41. 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>
42. 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
*/
47. JavaScript & CSS
CSS Transforms & Animations
2D bitmapped graphics
Physics engines
Vector graphics
HTML5 video
WebGL