Présentation à la nAcademy (Mai 2014) : Vectoriel et 3d en html5 / Animation newschool (partie 2) par Christophe Villeneuve

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