nAcademy Le 23 mai 2014 Neuros -
Vectoriel & 3D en HTML5
Animation Newschool (Partie 2)
Christophe Villeneuve
nAcademy Le 23 mai 2014 Neuros -
Aujourd'hui c'est
• Rappel de la partie 1
• SVG
• WebGL
Rappel
http://fr.slideshare.net/neuros/newschool-partie1methodehtmlVoir la 1ère partie :
nAcademy Le 23 mai 2014 Neuros -
Canvas
• Format Bitmap dynamique
• Gestion par pixels
• Permet de dessiner dans une résol...
nAcademy Le 23 mai 2014 Neuros -
Elément : Canvas
<canvas id='animation' width='320' height='200'>
Navigateur non compatib...
nAcademy Le 23 mai 2014 Neuros -
Les possibilités avec Canvas
4
nAcademy Le 23 mai 2014 Neuros -
SVG
• Signifie Scalable Vector Graphics
• Gère les images au format léger
• Format vector...
nAcademy Le 23 mai 2014 Neuros -
Les bases du SVG
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1...
nAcademy Le 23 mai 2014 Neuros -
Habiller le SVG
<defs>
<linearGradient id="effetgradient"
x1="0%" y1="20%"
x2="10%" y2="1...
nAcademy Le 23 mai 2014 Neuros -
Animer le SVG
51
nAcademy Le 23 mai 2014 Neuros -
Le code de l'animation gradient
<defs>
<linearGradient id="animSVG" fy="0" gradientTransf...
nAcademy Le 23 mai 2014 Neuros -
On bouge avec le SVG en gradient
50
nAcademy Le 23 mai 2014 Neuros -
Le code de l'animation SVG
<svg>
<rect width="100" height="50">
<animate attributeName="w...
nAcademy Le 23 mai 2014 Neuros -
Au final avec le SVG
52
nAcademy Le 23 mai 2014 Neuros -
WebGL
• Balise canvas
• Couplage avec Blender ou logiciel modelage
• 3D
• Shaders
nAcademy Le 23 mai 2014 Neuros -
WebGL façon simple
<canvas id='balisewebgl'></canvas>
<script>
var balisewebgl = document...
nAcademy Le 23 mai 2014 Neuros -
Shader ?
• Image de synthèse
• Paramétrer une partie du rendu
• Existe :
– Vertex shaders...
nAcademy Le 23 mai 2014 Neuros -
Construire des shaders
• <script id='vshader' type='x-shader'>
• attribute vec2 aVertexPo...
nAcademy Le 23 mai 2014 Neuros -
Shader en 3D
62
nAcademy Le 23 mai 2014 Neuros -
Conception du tunnel
• Création d'une forme géométrique (ex cylindre)
• Définir les somme...
nAcademy Le 23 mai 2014 Neuros -
Explication exemple : The vertex shader (1/2)
<script id="shader-vs" type="x-shader/x-
ve...
nAcademy Le 23 mai 2014 Neuros -
Explication exemple : Fragment shader (2/2)
<script id="shader-fs" type="x-shader/x-fragm...
nAcademy Le 23 mai 2014 Neuros -
Cube
64
nAcademy Le 23 mai 2014 Neuros -
Conception cube 3D
• Les sommets = vertex
• Définir le nombre de points nécessaire
• Posi...
nAcademy Le 23 mai 2014 Neuros -
Les faces
• Définir une face
var mesh = new Engine.Mesh("Cube", 8, 12);
meshes.push(mesh)...
nAcademy Le 23 mai 2014 Neuros -
Merci
Questions
@hellosct1
@neuro_paris
Vectoriel et 3d en html5 - Animation newschool (partie 2)
Vectoriel et 3d en html5 - Animation newschool (partie 2)
Upcoming SlideShare
Loading in …5
×

Vectoriel et 3d en html5 - Animation newschool (partie 2)

793 views

Published on

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

Published in: Internet
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
793
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Vectoriel et 3d en html5 - Animation newschool (partie 2)

  1. 1. nAcademy Le 23 mai 2014 Neuros - Vectoriel & 3D en HTML5 Animation Newschool (Partie 2) Christophe Villeneuve
  2. 2. nAcademy Le 23 mai 2014 Neuros - Aujourd'hui c'est • Rappel de la partie 1 • SVG • WebGL
  3. 3. Rappel http://fr.slideshare.net/neuros/newschool-partie1methodehtmlVoir la 1ère partie :
  4. 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. 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. 6. nAcademy Le 23 mai 2014 Neuros - Les possibilités avec Canvas 4
  7. 7. 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
  8. 8. 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>
  9. 9. 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;" />
  10. 10. nAcademy Le 23 mai 2014 Neuros - Animer le SVG 51
  11. 11. 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>
  12. 12. nAcademy Le 23 mai 2014 Neuros - On bouge avec le SVG en gradient 50
  13. 13. 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>
  14. 14. nAcademy Le 23 mai 2014 Neuros - Au final avec le SVG 52
  15. 15. nAcademy Le 23 mai 2014 Neuros - WebGL • Balise canvas • Couplage avec Blender ou logiciel modelage • 3D • Shaders
  16. 16. 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
  17. 17. nAcademy Le 23 mai 2014 Neuros - Shader ? • Image de synthèse • Paramétrer une partie du rendu • Existe : – Vertex shaders – Geometry shaders – Pixel shaders
  18. 18. 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>
  19. 19. nAcademy Le 23 mai 2014 Neuros - Shader en 3D 62
  20. 20. 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
  21. 21. 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>
  22. 22. 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>
  23. 23. nAcademy Le 23 mai 2014 Neuros - Cube 64
  24. 24. 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
  25. 25. 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
  26. 26. nAcademy Le 23 mai 2014 Neuros - Merci Questions @hellosct1 @neuro_paris

×