Animez vos pages HTML5



Martin Gorner
GDG DevFest Berlin 2013

Animate your HTML5 Martin Gorner --self-- Anime seu HTML5 Martin Gorner [ Tradução: Átila Camurça ] --self--

Transitions et Animations en CSS3

CSS3 Transitions and Animations Transições e Animações em CSS3

Transitions CSS3

left: 0px;
-webkit-transform:
        rotate(0deg);
-webkit-transition: 1s;
onclick
left: 500px;
-webkit-transform:
        rotate(360deg);
-webkit-transition: 1s;
CSS3 Transitions --self-- --self-- --self-- Transições em CSS3 --self-- --self-- --self--

Animations CSS3

.move {-webkit-animation: anim2 ease-in-out 3s infinite alternate; }
@-webkit-keyframes anim2
{
   from {left: 0px;   -webkit-transform: scale(1.0) rotate(0deg)   }
   50%  {left: 250px; -webkit-transform: scale(0.8) rotate(10deg)  }
   to   {left: 500px; -webkit-transform: scale(1.2) rotate(-20deg) }
}
CSS3 Animations --self-- --self-- Animações em CSS3 --self-- --self--

Transformations géométriques 2D

-webkit-transform:
rotate(90deg);
-webkit-transform:
scale(0.5);
-webkit-transform:
skew(20deg, 20deg);

liste complète des transformations 2D:
rotate, scale, skew, translate, matrix

2D geometric transforms Full list of 2D transform functions: --self-- Transformações geométricas 2D Lista completa de funções de transformação 2D: --self--

1. Transitions CSS3

-webkit-transition:
-webkit-transition-delay:
-webkit-transition-duration:
-webkit-transition-timing-function:
-webkit-transition-property:

2. Animations CSS3

-webkit-animation:
-webkit-animation-delay / duration / timing-function:
-webkit-animation-name: foo => @keyframes foo { from {} to {}}
-webkit-animation-direction:
-webkit-animation-fill-mode:
-webkit-animation-iteration-count:

3. Transformations 2D en CSS3

-webkit-transform: rotate / scale / skew / translate / matrix
1. CSS3 Transitions 2. CSS3 Animations 3. CSS3 Transforms in 2D 1. Transições em CSS3 2. Animações em CSS3 3. Transformações 2D em CSS3

Transformations 3D
en CSS3

3D transforms in CSS3 Transformações 3D em CSS3

Transformations géométriques 3D

translateX, Y, Z,     rotateX, Y, Z,     matrix3d

-webkit-transform: translateZ(150px)  /* first picture */
-webkit-transform: translateZ(-150px) /* second picture */
-webkit-transform: rotateY(360deg)    /* their container */ 
3D geometric transforms --self-- Transformações geométricas em 3D --self--

La perspective

Ce n'est pas ce qu'on veut: il manque la perspective!
Cliquer pour la rajouter.
-webkit-perspective: 1000px;
Perspective That is not what you wanted: there is no perspective! Click to add it. --self-- Perspectiva Não é o que você queria: Não há perspectiva! Clique para adicionar. --self--

La perspective

-webkit-perspective: f

Perspective --self-- --self-- Perspectiva --self-- --self--

La propriété transform-style

-webkit-transform-style: flat; /* default value */
The transform-style property --self-- --self-- --self-- A propriedade transform-style --self-- --self-- /* valor padrão */

La propriété transform-style

-webkit-transform-style:           preserve-3d;
The transform-style property --self-- --self-- --self-- A propriedade transform-style --self-- --self-- --self--

Bonne habitudes pour travailler en 3D

 SCENE {-webkit-perspective: 1000px}
OBJECT {-webkit-transform-style: preserve-3d   -webkit-transform: rotateX(30deg) ...;}
 FACE
{-webkit-transform: translateZ(150px);}
Best practices for working in 3D --self-- --self-- --self-- --self-- As melhores práticas para trabalhar em 3D --self-- --self-- --self-- --self--

Les CSS du cube 3D

.SCENE {
	-webkit-perspective: 1000px;
	width: 600px;
	height: 340px;
}
.OBJECT {
	-webkit-transform-style: preserve-3d;
	-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	position: absolute;
	width: 100%;
	height: 100%;
}
.FACE {
	position: absolute;
	left: 165px;
	top: 15px;
}
.FACE.im1 { -webkit-transform: translateZ(150px); }
.FACE.im2 { -webkit-transform: translateZ(-150px); }
.FACE.im3 { -webkit-transform: translateX(150px) rotateY(90deg);}
.FACE.im4 { -webkit-transform: translateX(-150px) rotateY(-90deg);}
.FACE.im5 { -webkit-transform: translateY(150px) rotateX(90deg);}
.FACE.im6 { -webkit-transform: translateY(-150px) rotateX(-90deg);}
The CSS of the 3D cube --self-- --self-- --self-- O CSS do cubo 3D --self-- --self-- --self--

CSS 3D: animations, transition et transformation peuvent être combinées

CSS 3D: animations, transitions and transforms can be combined CSS 3D: animações, transições e transformações podem ser combinadas

Scalable Vector Graphics (SVG)

--self-- --self--

SVG: les primitives

<line x1 y1 x2 y2>
<rect x y width height>
<circle cx cy r>
<path d>
<image x y width height xlink:href>
<svg>
	<rect x="5" y="5" width="140" height="140" stroke="#000000"
	stroke-width="4" fill="#AAAAFF" opacity="1"/>
</svg>
SVG: primitives SVG: princípios

SVG: path - l'outil à tout faire

L - ligne

C - bézier cubique

Q - bézier quadratique

A - arc d'ellipse

M - Marqueur (nlle. pos. stylo)

z - pour fermer la courbe

Q C
<svg>
	<path d="M 30,240 Q 170,40 260,230" stroke="#F00" />
	<path d="M 30,240 C 70,90 210,150 260,230" stroke="#F00" />
</svg>

utilisez: INKSCAPE

SVG: path - the all-purpose tool L - line C - cubic bézier Q - quadratic bézier A - elliptic arc M - marker (new pen position) z - to close the path --self-- --self-- --self-- --self-- --self-- --self-- use: --self-- SVG: path - uma ferramenta para qualquer propósito L - linha C - bézier cúbica Q - bézier quadrática A - arco elíptico M - marker (new pen position) z - para fechar o path --self-- --self-- --self-- --self-- --self-- --self-- use: --self--

SVG: Transformations géométriques 2D

transform =
"translate(30, 0)"
transform =
"rotate(90, 100, 100)"
transform =
"scale(0.5)"

liste complète des transformations 2D:
translate, rotate, scale, skewX, skewY, matrix

<rect ... transform="translate(10,10) rotate(25) scale(2)">

SVG: geometric transforms in 2D full list of 2D transforms: --self-- --self-- SVG: transformações geométricas em 2D lista completa de transformações 2D: --self-- --self--

SVG+SMIL: animation sur un attribut

<circle cx="200" cy="205" r="80" >
	<animate dur="3s" attributeName="r" values="80; 150; 80"
	repeatCount="indefinite" />
</circle>
SVG+SMIL: animating an attribute SVG+SMIL: animação de um atributo

SVG+SMIL: l'attribut peut être le 'd' d'un tag path!

         
<path fill="#fff">
<animate attributeName="d" dur="2s" repeatCount="indefinite"
values="m 0,0  c  1,15 -13,45  -45,45  -32,0 -44,-28 -44,-44  z;
        m 0,0  c -4,15 -66,106 -98,106 -32,0   3,-89   9,-105 z" />
</path>
SVG+SMIL: the attribute can be the 'd' of a path tag! SVG+SMIL: o atributo pode ser o 'd' de uma tag path!

SVG+SMIL: animateTransform

<g> ... <!-- formes SVG groupées ici -->
  <animateTransform dur="3s" repeatCount="indefinite" additive="sum"
  attributeName="transform" type="translate" values="0,0; 200,-130" />
  <animateTransform dur="3s" repeatCount="indefinite" additive="sum"
  attributeName="transform" type="rotate" values="0; 20" />
</g>
--self-- SVG primitives group --self-- --self-- Grupos primitivos SVG --self--

SVG+SMIL: animateMotion

<g>
   ... <!-- formes SVG groupées ici -->
   <animateMotion dur="1s" repeatCount="indefinite"
   path="m 0,0 a 15,11 0 1 1 -30,0 15,11 0 1 1 30,0 z" />
</g>
--self-- SVG primitives group --self-- Grupos primitivos SVG --self--

SVG+SMIL: vitesse d'animation avec keySplines

1 temps 1 position 0 0
0.35 0 0.65 1
<animateTransform  calcMode="spline"
  dur="3s" attributeName="transform"
  type="rotate" repeatCount="indefinite"
  keySplines="0.35 0 0.65 1; 0.35 0 0.65 1"
  values="20,310,400; -20,310,400; 20,310,400" />
SVG+SMIL: animation speed with keySplines --self-- time --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- SVG+SMIL: velocidade da animação com KeySplines --self-- tempo --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self--

SVG: contrôle de l'animation en javascript

unpauseAnimations()

pauseAnimations()

setCurrentTime(0)

<g onclick="document.getElementById('svg_id').pauseAnimations()">...</g>
SVG: controlling the animation in javascript --self-- --self-- --self-- --self-- SVG: controlando a animação em javascript --self-- --self-- --self-- --self--

SVG: primitives (résumé)

<line>
<rect>
<circle>
<path>
<image>
<text>

SVG: tags d'animation (résumé)

<animate>
<animateTransform>
<animateMotion>

SVG: fonctions de contrôle de l'animation

pauseAnimations()
unpauseAnimations()
setCurrentTime(0)

SVG: primitives (summary) --self-- --self-- --self-- --self-- --self-- --self-- SVG: animation tags (summary) --self-- --self-- --self-- SVG: animation control --self-- --self-- --self-- SVG: princípios (sumário) --self-- --self-- --self-- --self-- --self-- --self-- SVG: tags de animação (sumário) --self-- --self-- --self-- SVG: controle da animação --self-- --self-- --self--

Les 5 techniques d'animation en HTML5

CSS3

objets HTML uniquement, aucun contrôle de trajectoire

DÉCLARATIF
SVG + SMIL courbes, trajectoires courbes mais préprogrammées
Canvas + Javascript boucle d'animation avec modèle et interactions libres, 2D uniquement
PROGRAM.
WebGL + Three.js full 3D
CSS shaders shaders 3D paramétrables depuis les CSS
5 HTML5 animation techniques --self-- only HTML objects, no control over trajectory DECLARATIVE --self-- curves, curved trajectories, but only preprogrammed ones --self-- animation loop with interactive world model, 2D only PROGRAM. --self-- full 3D CSS Shaders 3D shaders controllable from CSS 5 técnicas de animação em HTML5 --self-- somente objetos HTML, sem controle sobre a trajetória DECLARATIVA --self-- curvas, trajetórias em curva, mas já preprogramadas --self-- loop de animação interativo, somente 2D PROGRAM. --self-- totalmente 3D CSS Shaders 3D shaders controllable from CSS

Canvas

moteur physique: box2dweb.js

--self-- physics engine: --self-- --self-- engine para física: --self--

Canvas: mise ne place

HTML:
<canvas id     = "my-canvas"
        width  = "400"
        height = "400"
        style  = "width: 400px;
                  height: 400px;">
</canvas>
Javascript:
var canvasElement = document.getElementById("my-canvas");

var ctx = canvasElement.getContext("2d");
  
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
Canvas: setting it all up --self-- --self-- --self-- Canvas: configurando tudo --self-- --self-- --self--

Canvas: primitives de dessin

ctx.strokeStyle = "red"; // CSS color
ctx.fillStyle = "blue"; // CSS color
ctx.lineWidth = 5; // pixels
ctx.globalAlpha = 0.5;
ctx.beginPath(); ctx.closePath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.rect(x1, y1, w, h);
ctx.arc(x, y, r, bAng, eAng, dir);
ctx.bezierCurveTo(vx, vy, wx, wy, x, y);
ctx.stroke();
ctx.fill();
Canvas: drawing primitives Canvas: princípios de desenho

Canvas: afficher des images

BITMAP
var img = new Image();
img.onload = function()
{
   ctx.drawImage(img, x,y, w,h);
};
img.src = "myimage.png";
SVG
var data = "<svg>...</svg>";
var svg = new Blob([data],{type:"image/svg+xml"});
var DOMURL = self.URL || self.webkitURL;
var url = DOMURL.createObjectURL(svg);
var img = new Image();
img.onload = function()
{ ctx.drawImage(img, x, y, w, h); };
img.src = url;
! Chrome uniq.
! SVG inline uniq.
! pas d'anim SMIL
Canvas: displaying pictures --self-- --self-- --self-- --self-- ! Chrome only ! inline SVG only ! no SMIL anim. Canvas: mostrando figuras --self-- --self-- --self-- --self-- ! somente Chrome ! somente inline SVG ! sem anim. SMIL

Canvas: transformations géométriques

ctx.translate(x, y);
// dessiner ici
Translation
ctx.rotate(rads);
// dessiner ici
Rotation
ctx.scale(sx, sy);
// dessiner ici
Zoom
utiliser ctx.save() et ctx.restore() pour gérer l'état du contexte Canvas: geometric transforms --self-- draw here Translation --self-- draw here Rotation --self-- draw here Scale use  --self-- and  --self-- to handle drawing ctx. state Canvas: transformações geométricas --self-- desenhe aqui Mudar de posição --self-- desenhe aqui Rotação --self-- desenhe aqui Aumentar/Diminuir use  --self-- e  --self-- para manipular o estado do ctx.

Canvas: composer les transformations géométriques

1. Le Dessin
2. Centrer
3. Zoom
4. Rotation
5. Position
Etapes à rejouer en sens inverse:
/*5*/ ctx.translate(x, y);
/*4*/ ctx.rotate(4.5);
/*3*/ ctx.scale(0.6, 0.6);
/*2*/ ctx.translate(-width/2, -height/2);
/*1*/ ctx.beginPath(); // dessiner ici
Canvas: composing geometric transforms 1. The drawing 2. Center 3. Scale 4. Rotate 5. Position Replay the transforms in reverse order: draw from here Canvas: compondo transformações geométricas 1. O desenho 2. Centro 3. Escala 4. Rotação 5. Posição Repita as transformações em ordem inversa: desenhe deste ponto

Canvas: les boucles d'animation

function runAnimation()
{
    world.Draw(context); // votre code de dessin
    webkitRequestAnimationFrame(runAnimation);
}
function runWorld()
{
    world.Step(1000/60); // votre code de simulation
    setTimeout(runWorld, 1000/60);
}
Le navigateur optimise les appels à requestAnimationFrame
Canvas: animation loops your drawing code --self-- your simulation code The browser optimizes requestAnimationFrame calls Canvas: loops de animação seu código do desenho --self-- seu código de simulação O navegador otimiza as chamadas requestAnimationFrame

WebGL

  +   THREE.js

PRETS ?
--self-- --self-- READY ? --self-- --self-- PRONTOS?

THREE.js: camera, lumières, action !

Créer un moteur de rendu WebGL
var renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
renderer.setSize(width, height);
renderer.setClearColor(0x000000, 0); // color, transparency
L'ajouter au document
document.ouvousvoulez.appendChild(renderer.domElement);
Créer une caméra
// THREE.PerspectiveCamera( FOV, viewAspectRatio, zNear, zFar );
var camera = new THREE.PerspectiveCamera(35, width/height, 1, 10000);
camera.position.z = 300;
THREE.js: camera, lights, action ! Create a WebGL renderer Add it to the document whereeveryouwant Create a camera THREE.js: luz, câmera, ação! Cria uma renderizador WebGL Adiciona-o ao documento whereeveryouwant Cria uma câmera
Une lumière
var light = new THREE.DirectionalLight(0xffffff, 1); //color, intens.
light.position.set(1, 1, 0.3); // direction
Quelque chose à afficher
var texture = THREE.ImageUtils.loadTexture('Fernando Togni.jpg');
var cube = new THREE.Mesh(
               new THREE.BoxGeometry(100, 100, 100),
               new THREE.MeshLambertMaterial({map: texture}) );
Une scène avec tout ça
var scene = new THREE.Scene();
scene.add(cube);
scene.add(light);
Let there be light Something to display A scene with all of this Permita que haja luz Algo para mostrar Uma cena com tudo isso

... et action !

renderer.render(scene, camera);
... and action ! --self-- ... e ação! --self--

La boucle d'animation

function runAnimation(t)
{
    // animer les objets en fonction du temps
    cube.rotation.y =  t/1000;
    cube.position.x = ...
    
    renderer.render(scene, camera); // afficher
    requestAnimationFrame(runAnimation); // boucler
}
The animation loop animate your objects depending on time --self-- display --self-- and loop O loop de animação anima seus objetos dependendo do tempo --self-- mostrar --self-- e loop

THREE.js: charger un modèle

Format ouvert de modèles 3D: COLLADA (.dae)
var loader = new THREE.ColladaLoader();

loader.load("Android.dae", function(collada)
    {
      var model = collada.scene;
      model.position.set(x, y, z); // votre position
      model.rotation.set(φ, θ, ψ); // angles d'Euler
      scene.add(model);
    },
    function progress(p) {} );

utilisez: SKETCHUP

THREE.js: load a model Open 3D model data format: COLLADA (.dae) your position Euler angles use --self-- THREE.js: carregue um modelo Abra um modelo 3D no formato: COLLADA (.dae) your position Euler angles use --self--

WebGL + THREE.js: résumé

renderer = new THREE.WebGLRenderer(...)
camera   = new THREE.PerspectiveCamera(...)
light    = new THREE.DirectionalLight(...)
           new THREE.ColladaLoader().load(modelUrl, finishedCallback)
scene    = new THREE.Scene()
scene.add(...); // lights, models, ...

window.requestAnimationFrame(animate);
function animate(t)
{
     // animation: modifier la scène en fonction du temps t ici
     renderer.render(scene, camera);
     window.requestAnimationFrame(animate);
}
WebGL+ THREE.js: summary // animation: change the scene here depending on time t WebGL+ THREE.js: sumário // animação: mude a cena aqui dependendo to tempo t

Filtres CSS custom:
Des shaders GLSL en CSS

Custom CSS filters GLSL shaders in CSS Custom CSS filters GLSL shaders in CSS

Filtres CSS: nouveau mais classique

-webkit-filter: 
CSS filters: new but familiar --self-- --self-- --self-- --self-- --self-- CSS filters: new but familiar --self-- --self-- --self-- --self-- --self--

GLSL
shaders
in CSS

--self-- --self-- --self-- --self-- --self-- --self--

CSS shaders: la syntaxe

-webkit-filter: custom(
url(wind.vs) mix(url(wind.fs) normal source-over),
90 90, transform perspective(1000) rotateY(10deg), /* Paramètres utilisateurs, */ /* modifiables depuis une animation CSS */ curlPosition 0.2 0.5, curlDirection -45, curlRadius 0.15);

Vertex Shader: X Y Z ?

Pixel Shader: R G B ?
CSS shader syntax --self-- --self-- --self-- User-defined parameters usable in CSS animations --self-- --self-- CSS shader syntax --self-- --self-- --self-- User-defined parameters usable in CSS animations --self-- --self--

GLSL: idéal pour la géométrie

Vecteurs et matrices:
  • mat2, mat3, mat4
  • vec2, vec3, vec4
  • vec3 vector =
  • vec3(1.0, 3.0, -2.5)
  • opérateurs + - * /
Exemples d'opérations:
  • vec2 point = vector.xy;
  • vec4 color = vec4(vector.xxx, 0.5);
  • vec3 brga_color = color.brga;
  • vec3 v = 2.0*inverse(transform_matrix) * vector;
Fonctions géométriques:
  • dot, cross, normalize
  • inverse, transpose
  • length, distance
  • reflect, refract
  • mix, clamp
GLSL: the ideal language for geometry Vectors and matrices: --self-- --self-- --self-- --self-- --self-- Examples: --self-- --self-- --self-- --self-- Geometry functions: --self-- --self-- --self-- --self-- --self-- GLSL: the ideal language for geometry Vectors and matrices: --self-- --self-- --self-- --self-- --self-- Examples: --self-- --self-- --self-- --self-- Geometry functions: --self-- --self-- --self-- --self-- --self--

Les shaders à l'oeuvre

Vertex Shader: enroulement cylindrique

Vertex Shader: perturbation sinusoïdale

Pixel Shader: ombrage Lambert et transparence

The shaders behind the scene Vertex Shader: cylinder wrap Vertex Shader: sinusoidal flutter Pixel Shader: Lambert shading and see-through effect The shaders behind the scene Vertex Shader: cylinder wrap Vertex Shader: sinusoidal flutter Pixel Shader: Lambert shading and see-through effect

Vertex shader: en entrée et en sortie

Vertex shader: inputs and outputs Vertex shader: inputs and outputs

Vertex shader: en entrée et en sortie

// attribut standard
attribute vec4 a_position;

// uniforme standard
uniform mat4 u_projectionMatrix;

// uniforme correspondant à la transformation CSS
uniform mat4  transform;

// uniformes définis par l'utilisateur dans les CSS
uniform vec2  curlPosition;
uniform float curlDirection;
uniform float curlRadius;

// sortie: variant passé au pixel shader
varying vec3 v_normal;
// sortie: variable standard gl_Position
Vertex shader: inputs and outputs // built-in attribute // built-in uniform // uniform representing the CSS transform matrix // uniforms defined by the user in CSS // output: variants passed to the pixel shader // output: built-in variable gl_Position Vertex shader: inputs and outputs // built-in attribute // built-in uniform // uniform representing the CSS transform matrix // uniforms defined by the user in CSS // output: variants passed to the pixel shader // output: built-in variable gl_Position

Vertex shader: on enroule sur un cylindre

// Valeurs "attributs" standard
attribute vec4 a_position;
// Valeurs "uniforms" standard
uniform mat4 u_projectionMatrix;
// "Uniforms" en provenance des CSS
uniform mat4 transform;
uniform vec2 cylPos;
uniform vec2 N; //dir. d'enroulement
uniform float R; //rayon cylindre
// Valeurs "varyings" passées
// au pixel shader
varying vec3  v_normal;

void main() {
    // distance à l'axe du cylindre
    float d = dot(a_position.xy - cylPos, N);

    // Projection du vertex sur l'axe du cylindre
    vec3 C = vec3(a_position.xy - d * N, R);

    // Vertex enroulé sur le cylindre
    vec3 V = C + R * vec3( sin(d/R) * N.x,
                           sin(d/R) * N.y,
                          -cos(d/R));
    // vecteur normal à la surface du cylindre
    v_normal = (C - V) / R;

    // On positionne le vertex
    gl_Position = u_projectionMatrix
                            * transform * V;}
Vertex shader (part): roll onto a cylinder // Built-in attributes // Built-in uniforms // Uniforms passed in from CSS // curl direction // curl radius // Varyings passed // to pixel shader // distance to the curl axis --self-- // Projection of vertex on the curl axis // Vertex rolled onto the curl // normal to the cylider surface // Position the vertex. --self-- GLSL Vertex shader (part): roll onto a cylinder // Built-in attributes // Built-in uniforms // Uniforms passed in from CSS // curl direction // curl radius // Varyings passed // to pixel shader // distance to the curl axis --self-- // Projection of vertex on the curl axis // Vertex rolled onto the curl // normal to the cylider surface // Position the vertex. --self--

Pixel Shader: en entrée et en sortie

Pixel shader: inputs and outputs Pixel shader: inputs and outputs

Pixel shader: ombrage de Lambert

// valeurs "Varyings" passées par le vertex shader
varying vec3 v_normal;
// valeurs "uniforms" en provenence des CSS
uniform float u_shadows;

void main() {
     vec3 light = vec3(0.0, 0.0, -1.0);

     float shadow = dot(v_normal, -light) * u_shadows;
     css_MixColor = vec4(vec3(0.0), 1.0-shadow);
}
Pixel shader: Lambert lighting // Varyings passed from vertex shader // Uniforms passed from CSS --self-- --self-- GLSL Pixel shader: Lambert lighting // Varyings passed from vertex shader // Uniforms passed from CSS --self-- --self--

Les 5 techniques d'animation en HTML5

CSS3

objets HTML uniquement, aucun contrôle de trajectoire

DÉCLARATIF
SVG + SMIL courbes, trajectoires courbes mais préprogrammées
Canvas + Javascript boucle d'animation avec modèle et interactions libres, 2D uniquement
PROGRAM.
WebGL + Three.js full 3D
CSS shaders shaders 3D paramétrables depuis les CSS
5 HTML5 animation techniques --self-- only HTML objects, no control over trajectory DECLARATIVE --self-- curves, curved trajectories, but only preprogrammed ones --self-- animation loop with interactive world model, 2D only PROGRAM. --self-- full 3D CSS Shaders 3D shaders controllable from CSS 5 técnicas de animação em HTML5 --self-- somente objetos HTML, sem controle sobre a trajetória DECLARATIVA --self-- curvas, trajetórias em curva, mas já preprogramadas --self-- loop de animação interativo, somente 2D PROGRAM. --self-- totalmente 3D CSS Shaders 3D shaders controllable from CSS

Show time !

--self-- Adobe's CSS filter lab --self-- --self-- --self-- --self-- --self-- Particles and GPGPU --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- Materials, bump mapping Environment map, bump map, shadows --self-- --self-- --self-- (with Google Maps and Earth) Hora do show! Adobe's CSS filter lab --self-- --self-- --self-- --self-- --self-- Partículas e GPGPU --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- Materiais, bump mapping Mapa de ambiente, bump map, sombras --self-- --self-- --self-- (com Google Maps e Earth)

chrome

--self-- --self--

Contact:
Martin Gorner, Relations Développeurs, Google
Google+: plus.google.com/+MartinGorner

Cette présentation est en ligne:
http://animateyourhtml5.appspot.com

Plus d'infos:
http://html5rocks.com

Contact info: --self-- , Developer Relations, Google --self-- --self-- This presentation is available online: --self-- --self-- --self-- And much more on: --self-- --self-- --self-- Contato: --self-- , Developer Relations, Google --self-- --self-- Esta apresentação está disponível online: --self-- --self-- --self-- E muito mais em: --self-- --self-- --self--