Vectoriel et 3d en html5 - Animation newschool (partie 2)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 333 views

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

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

Statistics

Views

Total Views
333
Views on SlideShare
324
Embed Views
9

Actions

Likes
0
Downloads
2
Comments
0

1 Embed 9

http://neuros.fr 9

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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
  • 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. 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. 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. nAcademy Le 23 mai 2014 Neuros - Animer le SVG 51
  • 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. nAcademy Le 23 mai 2014 Neuros - On bouge avec le SVG en gradient 50
  • 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. nAcademy Le 23 mai 2014 Neuros - Au final avec le SVG 52
  • 15. nAcademy Le 23 mai 2014 Neuros - WebGL • Balise canvas • Couplage avec Blender ou logiciel modelage • 3D • Shaders
  • 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. 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. 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. nAcademy Le 23 mai 2014 Neuros - Shader en 3D 62
  • 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. 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. 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. nAcademy Le 23 mai 2014 Neuros - Cube 64
  • 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. 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. nAcademy Le 23 mai 2014 Neuros - Merci Questions @hellosct1 @neuro_paris