I Can't Believe It's Not Flash

I Can’t
Believe It’s
Not Flash!

@thomasfuchs

Animating CSS properties
Timer

JavaScript Reﬂow Rendering Paint
sets CSS

Performance hit

JavaScript Reflow Rendering Paint

Browser CSS animation/
transitions

Timer

Browser Reﬂow Rendering Paint
updates
CSS

Timer

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 {
-‐webkit-‐transform:translateZ(-‐100px);
}
#d3 {
}
#d4 {
}
#d5 {
}
body {
-‐webkit-‐transform-‐style: preserve-‐3d;

#d2 {
}
#d3 {
}
#d4 {
}
#d5 {
}
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/

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);
}

3) draw shapes

box2d
objects/
positions

canvas

Vector graphics
SVG + VML

creates
vector
graphics
nodes

<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://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

I Can't Believe It's Not Flash

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to I Can't Believe It's Not Flash

Similar to I Can't Believe It's Not Flash (20)

More from Thomas Fuchs

More from Thomas Fuchs (7)

Recently uploaded

Recently uploaded (20)

I Can't Believe It's Not Flash