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

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

description

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

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

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

nAcademy Le 23 mai 2014 Neuros -

Vectoriel & 3D en HTML5Animation Newschool (Partie 2)

Christophe Villeneuve

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

nAcademy Le 23 mai 2014 Neuros -

Aujourd'hui c'est • Rappel de la partie 1

• SVG

• WebGL

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

Rappel

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

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

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...

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

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>

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

nAcademy Le 23 mai 2014 Neuros -

Les possibilités avec Canvas

4

Page 7: Vectoriel et 3d en html5 - Animation newschool (partie 2)
Page 8: Vectoriel et 3d en html5 - Animation newschool (partie 2)

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

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

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>

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

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;" />

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

nAcademy Le 23 mai 2014 Neuros -

Animer le SVG

51

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

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>

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

nAcademy Le 23 mai 2014 Neuros -

On bouge avec le SVG en gradient

50

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

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>

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

nAcademy Le 23 mai 2014 Neuros -

Au final avec le SVG

52

Page 16: Vectoriel et 3d en html5 - Animation newschool (partie 2)
Page 17: Vectoriel et 3d en html5 - Animation newschool (partie 2)

nAcademy Le 23 mai 2014 Neuros -

WebGL• Balise canvas

• Couplage avec Blender ou logiciel modelage

• 3D

• Shaders

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

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

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

nAcademy Le 23 mai 2014 Neuros -

Shader ?• Image de synthèse

• Paramétrer une partie du rendu

• Existe : – Vertex shaders

– Geometry shaders

– Pixel shaders

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

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>

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

nAcademy Le 23 mai 2014 Neuros -

Shader en 3D

62

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

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

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

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>

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

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>

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

nAcademy Le 23 mai 2014 Neuros -

Cube

64

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

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

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

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

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

nAcademy Le 23 mai 2014 Neuros -

Merci

Questions

@hellosct1

@neuro_paris