Le document présente des concepts liés à l'animation vectorielle et 3D en HTML5, notamment l'utilisation de Canvas, SVG et WebGL. Il aborde la création d'animations avec SVG et la construction de shaders pour le rendu 3D. Des exemples de code illustrent la mise en œuvre de ces technologies pour générer des effets visuels dynamiques.

1. nAcademy Le 23 mai 2014 Neuros -
Vectoriel & 3D en HTML5
Animation Newschool (Partie 2)
Christophe Villeneuve

2. nAcademy Le 23 mai 2014 Neuros -
Aujourd'hui c'est
• Rappel de la partie 1
• SVG
• WebGL

3. Rappel
http://fr.slideshare.net/neuros/newschool-partie1methodehtmlVoir la 1ère partie :

4. nAcademy Le 23 mai 2014 Neuros -
Canvas
• Format Bitmap dynamique
• Gestion par pixels
• Permet de dessiner dans une résolution précise
• Unique nœud dans le DOM...

5. nAcademy Le 23 mai 2014 Neuros -
Elément : Canvas
<canvas id='animation' width='320' height='200'>
Navigateur non compatible
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('animation');
var demo = canvas.getContext('2d');
</script>

6. nAcademy Le 23 mai 2014 Neuros -
Les possibilités avec Canvas
4

8. nAcademy Le 23 mai 2014 Neuros -
SVG
• Signifie Scalable Vector Graphics
• Gère les images au format léger
• Format vectoriel en XML
• Mémorise le 'graph' objet en mémoire dans le DOM
• Couplage à CSS

9. nAcademy Le 23 mai 2014 Neuros -
Les bases du SVG
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="2" y="150"
transform="translate(40) rotate(-45 10 50)"
>Neuros</text>
</svg>
Texte
Habillage
<rect x="10" y="5" height="110" width="110"
style="stroke:#ff0000; fill: #CFCFCF;"
transform="translate(30) rotate(28 50 35)">
</rect>

10. nAcademy Le 23 mai 2014 Neuros -
Habiller le SVG
<defs>
<linearGradient id="effetgradient"
x1="0%" y1="20%"
x2="10%" y2="100%"
spreadMethod="pad">
<stop offset="0%" stop-color="#FF44AA" stop-
opacity="1"/>
<stop offset="100%" stop-color="#000066" stop-
opacity="1"/>
</linearGradient>
</defs>
<rect x="10" y="10" width="75" height="100" rx="10" ry="10"
style="fill:url(#effetgradient);
stroke: #005000;
stroke-width: 2;" />

11. nAcademy Le 23 mai 2014 Neuros -
Animer le SVG
51

12. nAcademy Le 23 mai 2014 Neuros -
Le code de l'animation gradient
<defs>
<linearGradient id="animSVG" fy="0" gradientTransform="rotate(356 .15 .65)">
<stop offset="0.06" stop-color="#f15361"></stop>
<stop offset="1" stop-color="#f15FF2"/>
</linearGradient>
</defs>
<rect x="30" y="30" width="50" height="50" fill="url(#animSVG)" />
<stop offset="0.25" stop-color="#fbaf4a">
<animate attributeName="offset" dur="5s" values="0;1;0" repeatCount="indefinite" />
</stop>
<stop offset="0.49" stop-color="#00fb4a">
<animate attributeName="offset" dur="6s" values="1;0;1" repeatCount="indefinite" />
</stop>

13. nAcademy Le 23 mai 2014 Neuros -
On bouge avec le SVG en gradient
50

14. nAcademy Le 23 mai 2014 Neuros -
Le code de l'animation SVG
<svg>
<rect width="100" height="50">
<animate attributeName="width"
attributeType="XML"
fill="freeze"
from="0" to="300"
begin="0s" dur="3s"/>
</rect>
</svg>

15. nAcademy Le 23 mai 2014 Neuros -
Au final avec le SVG
52

17. nAcademy Le 23 mai 2014 Neuros -
WebGL
• Balise canvas
• Couplage avec Blender ou logiciel modelage
• 3D
• Shaders

18. nAcademy Le 23 mai 2014 Neuros -
WebGL façon simple
<canvas id='balisewebgl'></canvas>
<script>
var balisewebgl = document.getElementById('balisewebgl');
var webGL = balisewebgl.getContext('webgl');
webGL.clearColor(0.0, 0.3, 0.0, 1.0);
webGL.enable(webGL.DEPTH_TEST);
webGL.clear(webGL.COLOR_BUFFER_BIT);
</script>
60

19. nAcademy Le 23 mai 2014 Neuros -
Shader ?
• Image de synthèse
• Paramétrer une partie du rendu
• Existe :
– Vertex shaders
– Geometry shaders
– Pixel shaders

20. nAcademy Le 23 mai 2014 Neuros -
Construire des shaders
• <script id='vshader' type='x-shader'>
• attribute vec2 aVertexPosition;
• varying vec2 vTexCoord;
• uniform vec2 uOffset;
• void main() {
• vTexCoord = aVertexPosition + uOffset;
• gl_Position = vec4(aVertexPosition, 0, 1);
• }
• </script>
•
• <script id='fshader' type='x-shader'>
• precision mediump float;
• varying vec2 vTexCoord;
• void main() {
• gl_FragColor = vec4(vTexCoord, 0, 1);
• }
• </script>
• <script>
• var c = document.getElementById('c');
• var gl = c.getContext('experimental-webgl');
• var offset = [1, 1];
• var vertexPosBuffer = screenQuad();
•
• var vs = document.getElementById('vshader').textContent;
• var fs = document.getElementById('fshader').textContent;
• var program = createProgram(vs,fs);
• gl.useProgram(program);
• program.vertexPosAttrib = gl.getAttribLocation(program,
'aVertexPosition');
• program.offsetUniform = gl.getUniformLocation(program,
'uOffset');
• gl.enableVertexAttribArray(program.vertexPosAttrib);
• gl.vertexAttribPointer(program.vertexPosAttrib,
vertexPosBuffer.itemSize, gl.FLOAT, false, 0, 0);
• gl.uniform2f(program.offsetUniform, offset[0], offset[1]);
• gl.drawArrays(gl.TRIANGLE_STRIP, 0,
vertexPosBuffer.numItems);
• </script>

21. nAcademy Le 23 mai 2014 Neuros -
Shader en 3D
62

22. nAcademy Le 23 mai 2014 Neuros -
Conception du tunnel
• Création d'une forme géométrique (ex cylindre)
• Définir les sommets (vertex color)
• Modifier la géométrie avec un vertex shader
• Créer une illusion de mouvement
• Modification des sommets pour la profondeur

23. nAcademy Le 23 mai 2014 Neuros -
Explication exemple : The vertex shader (1/2)
<script id="shader-vs" type="x-shader/x-
vertex">
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
attribute vec2 aTextureCoord;
shader execution.
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform float fTime;
//interpolation
varying vec4 vColor;
// Coordonnées de la texture
varying vec2 vTextureCoord;
• void main(void) {
• vec3 pos=aVertexPosition;
• // -- définir les coordonnées X et Y et Z
• pos.x += cos(fTime + (aVertexPosition.z/4.0));
• pos.y += sin(fTime + (aVertexPosition.z/4.0));
• // -- transforme the vertex
• gl_Position = uPMatrix * uMVMatrix * vec4(pos, 1.0);
•
• vColor = aVertexColor;
• // Simule l'illusion de mouvemnt
• vec2 texcoord=aTextureCoord;
• texcoord.y = texcoord.y + (fTime);
•
• // -- copier la texture
• vTextureCoord = texcoord;
• }
• </script>

24. nAcademy Le 23 mai 2014 Neuros -
Explication exemple : Fragment shader (2/2)
<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
uniform sampler2D uSampler;
varying vec4 vColor;
varying vec2 vTextureCoord;
void main(void) {
// -- récupère la valeur du pixel
vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
// -- multiplie le pixel texture avec la couleur du vertex
gl_FragColor = vColor * textureColor;
}
</script>

25. nAcademy Le 23 mai 2014 Neuros -
Cube
64

26. nAcademy Le 23 mai 2014 Neuros -
Conception cube 3D
• Les sommets = vertex
• Définir le nombre de points nécessaire
• Positionne les points dans 1 univers
• Simulation d'une caméra pour modéliser
• Projection

27. nAcademy Le 23 mai 2014 Neuros -
Les faces
• Définir une face
var mesh = new Engine.Mesh("Cube", 8, 12);
meshes.push(mesh);
mesh.Vertices[0] = new Vector3(-1, 1, 1);
mesh.Vertices[1] = new Vector3(1, 1, 1);
mesh.Vertices[2] = new Vector3(-1, -1, 1);
mesh.Vertices[3] = new Vector3(1, -1, 1);
mesh.Vertices[4] = new Vector3(-1, 1, -1);
mesh.Vertices[5] = new Vector3(1, 1, -1);
mesh.Vertices[6] = new Vector3(1, -1, -1);
mesh.Vertices[7] = new Vector3(-1, -1, -1);
mesh.Faces[0] = { A:0, B:1, C:2 };
mesh.Faces[1] = { A:1, B:2, C:3 };
mesh.Faces[2] = { A:1, B:3, C:6 };
mesh.Faces[3] = { A:1, B:5, C:6 };
mesh.Faces[4] = { A:0, B:1, C:4 };
mesh.Faces[5] = { A:1, B:4, C:5 };
mesh.Faces[6] = { A:2, B:3, C:7 };
mesh.Faces[7] = { A:3, B:6, C:7 };
mesh.Faces[8] = { A:0, B:2, C:7 };
mesh.Faces[9] = { A:0, B:4, C:7 };
mesh.Faces[10] = { A:4, B:5, C:6 };
mesh.Faces[11] = { A:4, B:6, C:7 };
• Définir représentation des traits

28. nAcademy Le 23 mai 2014 Neuros -
Merci
Questions
@hellosct1
@neuro_paris