Ajouter du contenu à WebGL

  • Raccourci de la révision : WebGL/Adding_2D_content_to_a_WebGL_context
  • Titre de la révision : Ajouter du contenu à WebGL
  • ID de la révision : 328247
  • Créé :
  • Créateur : TimN
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{gecko_minversion_header("2")}}

{{PreviousNext("WebGL/Commencer_avec_WebGL", "WebGL/Ajouter_des_couleurs_avec_les_shaders")}}

Une fois que vous avez correctement crée un contexte WebGL, vous pouvez commencer à dessiner dedans. La chose la plus simple est de dessiner un objet 2D et sans texture, l'article vous propose donc d'apprendre à dessiner un simple carré.

Illuminez la scène

La chose la plus importante à comprendre avant que nous commencions est que, bien que nous allons dans cet exemple afficher un objet à deux dimensions, nous le dessinons dans un espace 3D. Pour cela il nous faut tout d'abord créer les shaders qui vont illuminer notre scène et dessiner notre objet.

Initialiser les shaders

Les shaders sont décrit dans le OpenGL ES Shading Language. Pour faciliter la réutilisabilité du code, nous allons écrire une fonction qui charge les shaders appelés depuis le document HTML au lieu de tout écrire directement dans le JavaScript. Intéressons nous maintenant à la fonction initShaders() qui s'occupe de gérer cette tâche :

function initShaders() {
  var fragmentShader = getShader(gl, "shader-fs");
  var vertexShader = getShader(gl, "shader-vs");
  
  // Créer le programme shader
  
  var shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);
  
  // Faire une alerte si le chargement du shader échoue
  
  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    alert("Impossible d'initialiser le shader.");
  }
  
  gl.useProgram(shaderProgram);
  
  vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
  gl.enableVertexAttribArray(vertexPositionAttribute);
}

Il y a deux programmes de shader qui sont chargés dans cette fonction ; le premier, le fragment shader, est chargé depuis l'élément script avec "shader-fs" comme ID. Le second, le vertex shader, est chargé depuis l'élément script avec "shader-vs" comme ID. Nous regarderons dans le prochain paragraphe la fonction getShader() qui va en fait inclure les shaders depuis le DOM.

Ensuite nous créons le programme shader en appelant la function createProgram()de l'objet WebGL. Nous attachons ensuite les deux shaders à ce programme que nous allons lier au contexte de WebGL.
Après avoir fait ceci, le paramètre LINK_STATUS de l'objet gl est vérifié pour être sûr que notre programme s'est lié correctement. Si c'est fait, on active le nouveau programme.

Charger les shaders depuis le DOM

La fonction getShader() insère le contenu d'un programme shader à partir d'un objet DOM (récupéré ici par l'id). La fonction retourne null si le programme n'a pas pu être chargé ou compilé.

Dans la première partie de la fonction on récupère l'élément DOM puis on insère son texte dans la variable theSource.

function getShader(gl, id) {
    var shaderScript, theSource, currentChild, shader;
    
    shaderScript = document.getElementById(id);
    
    if (!shaderScript) {
        return null;
    }
    
    theSource = "";
    currentChild = shaderScript.firstChild;
    
    while(currentChild) {
        if (currentChild.nodeType == currentChild.TEXT_NODE) {
            theSource += currentChild.textContent;
        }
        
        currentChild = currentChild.nextSibling;
    }

Une fois que le code du shader a été lu, on regarde le type MIME du shader afin de déterminer si il s'agit d'un vertex shader (avec pour type MIME "x-shader/x-vertex") ou un fragment shader (type MIME "x-shader/x-fragment"), puis on crée un shader ayant le même type que son contenu.

  if (shaderScript.type == "x-shader/x-fragment") {
    shader = gl.createShader(gl.FRAGMENT_SHADER);
  } else if (shaderScript.type == "x-shader/x-vertex") {
    shader = gl.createShader(gl.VERTEX_SHADER);
  } else {
     // type de shader inconnu
     return null;
  }

Finalement, le contenu de la variable theSource passé au shader. Si une erreur apparaît lors de la compilation, on affiche une alerte décrivant l'erreur et on retourne null.

Si tout se passe bien, le shader compilé est renvoyé.

  gl.shaderSource(shader, theSource);
    
  // Compile le programme shader
  gl.compileShader(shader);  
    
  // Vérifie si la compilation s'est bien déroulée
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {  
      alert("Une erreur est survenue au cours de la compilation des shaders: " + gl.getShaderInfoLog(shader));
      return null;  
  }
    
  return shader;
}

Les shaders

Nous avons besoin de créer le contenu des shaders à notre HTML. Les shaders sont décrits par un langage qui leur est propre, le GLSL. Il est possible de faire de nombreuses choses avec tel qu'illuminer une scène.

Dans cet exemple, nous l'utiliserons de la manière la plus simple qui soit.

Le Vertex shader

Le vertex shader défini la position de chaque vertex (sommet de triangle).

La position du sommet est défini par la variable GL gl_Position. Nous ne nous préoccuperons pas pour l'instant de ce que contiennent les matrices uMVMatrix et uPMatrix.

<script id="shader-vs" type="x-shader/x-vertex">
  attribute vec3 aVertexPosition;

  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;
  
  void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
  }
</script>

Le Fragment shader

Chaque pixel d'un triangle est appelé un fragment. Le but du fragment shader est d'établir la couleur de chaque pixel. Dans cet exemple on va simplement mettre chaque pixel sur la couleur blanche.

gl_FragColor est une variable de GL qui est utilisée pour la couleur du fragment. Assigner sa valeur établit la couleur du pixel.

Ici il y a quatres composantes de couleur, le rouge, le vert, le bleu et l'opacité.

<script id="shader-fs" type="x-shader/x-fragment">
  void main(void) {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
  }
</script>

Créer un objet

Avant de commencer à dessiner notre carré, on doit créer un buffer qui va contenir nos sommets. On va pour cela utiliser la fonction initBuffers(). On pourra améliorer cette fonction plus tard pour créer des objets 3D plus complexes.

var horizAspect = 480.0/640.0;

function initBuffers() {
  squareVerticesBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
  
  var vertices = [
    1.0,  1.0,  0.0,
    -1.0, 1.0,  0.0,
    1.0,  -1.0, 0.0,
    -1.0, -1.0, 0.0
  ];
  
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
}

Cette fonction est très courte car nous allons dessiner une scène très simple. La fonction appelle d'abord la méthode createBuffer() de l'objet gl afin d'obtenir un buffer dans lequel nous allons mettre nos sommets (vertices). On ajoute ensuite ce buffer au contexte avec la méthode bindBuffer().

Une fois que le buffer est prêt, on crée un tableau JavaScript qui va contenir les coordonnées 3D de chaque sommet de notre carré.

Le tout est passé à la méthode bufferData() de l'objet gl pour établir les sommets de notre objets.

Vous noterez au passage que l'on a converti le tableau JavaScript en tableau de nombre flottant WebGL.

Dessiner la scène

Maintenant que les shaders sont prêts et que l'objet a été construit, on peut vraiment commencer à rendre la scène. Puisque notre scène n'est pas animée, la fonction drawScene() est très simple. Elle utilise quelques fonctions dont nous verrons rapidement l'utilité.

function drawScene() {
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  
  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
  
  loadIdentity();
  mvTranslate([-0.0, 0.0, -6.0]);
  
  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
  setMatrixUniforms();
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}

La première étape est de nettoyer la scène avec notre couleur d'arrière plan, ensuite on établit la perspective de la caméra. On met un angle d'ouverture de 45° et un rapport largeur/hauteur de 640 par 480 (la taille de notre canvas). On indique aussi que l'on ne veut rendre que les objets compris entre 0.1 et 100 unités par rapport à la caméra.

Ensuite on positionne notre carré en chargeant la matrice identité et en faisant une translation en arrière de 6 unités. Après ça on lie le vertex buffer de notre carrée au context, on le configure puis on le dessine avec la méthode drawArrays()

Si vous avez un navigateur qui supporte le WebGL, vous pouvez essayer la démo en cliquant ici.

Opérations sur les matrices

Les opérations sur les matrices sont assez compliquées. Personne n'a vraiment envie d'écrire le code pour les gérer. Heureusement , il y a Sylvester, c'est une bibliothèque très pratique pour gérer les opérations sur les vecteurs et les matrices depuis JavaScript.

Le fichier glUtils.js utilisé dans cette démo est présent dans de nombreuses démos WebGL que l'on peut voir sur le Web. Personne n'est vraiment clair sur sa provenance, mais elle fait des simplifications encore plus grandes pour construire des matrices d'un certains types ainsi que pour générer du HTML pour les afficher.

De plus, cette démo définie un certains nombre de fonctions utiles pour utiliser ces librairies. Ce qu'elles font exactement ne fait pas partie de ce que vous apprendrez dans cette démo mais il y a plein de bonnes références en ligne pour bien comprendre leur utilité, n'hésitez pas à jeter un oeil à la section {{anch("A voir")}} pour une liste de quelques unes

function loadIdentity() {
  mvMatrix = Matrix.I(4);
}

function multMatrix(m) {
  mvMatrix = mvMatrix.x(m);
}

function mvTranslate(v) {
  multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
}

function setMatrixUniforms() {
  var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
  gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));

  var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
  gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
}

A voir

{{PreviousNext("WebGL/Commencer_avec_WebGL", "WebGL/Ajouter_des_couleurs_avec_les_shaders")}}

{{ languages( { "en": "en/WebGL/Adding_2D_content_to_a_WebGL_context", "de": "de/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext", "ja": "ja/WebGL/Adding_2D_content_to_a_WebGL_context" } ) }}

Source de la révision

<p>{{gecko_minversion_header("2")}}</p>
<p>{{PreviousNext("WebGL/Commencer_avec_WebGL", "WebGL/Ajouter_des_couleurs_avec_les_shaders")}}</p>
<p>Une fois que vous avez correctement <a href="htttp://developer.mozilla.org/fr/docs/WebGL/Commencer_avec_WebGL" title="Commencer avec le WebGL">crée un contexte WebGL</a>, vous pouvez commencer à dessiner dedans. La chose la plus simple est de dessiner un objet 2D et sans texture, l'article vous propose donc d'apprendre à dessiner un simple carré.</p>
<h2 id="Illuminez_la_sc.C3.A8ne">Illuminez la scène</h2>
<p>La chose la plus importante à comprendre avant que nous commencions est que, bien que nous allons dans cet exemple afficher un objet à deux dimensions, nous le dessinons dans un espace 3D. Pour cela il nous faut tout d'abord créer les shaders qui vont illuminer notre scène et dessiner notre objet.</p>
<h3 id="Initialiser_les_shaders">Initialiser les shaders</h3>
<p>Les shaders sont décrit dans le <a class="external" href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" title="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf">OpenGL&nbsp;ES Shading Language</a>. Pour faciliter la réutilisabilité du code, nous allons écrire une fonction qui charge les shaders appelés depuis le document HTML au lieu de tout écrire directement dans le JavaScript. Intéressons nous maintenant à la fonction <code>initShaders()</code> qui s'occupe de gérer cette tâche :</p>
<pre class="script-jem">
function initShaders() {
  var fragmentShader = getShader(gl, "shader-fs");
  var vertexShader = getShader(gl, "shader-vs");
  
  // Créer le programme shader
  
  var shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);
  
  // Faire une alerte si le chargement du shader échoue
  
  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    alert("Impossible d'initialiser le shader.");
  }
  
  gl.useProgram(shaderProgram);
  
  vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
  gl.enableVertexAttribArray(vertexPositionAttribute);
}

</pre>
<p>Il y a deux programmes de shader qui sont chargés dans cette fonction ; le premier, le fragment shader, est chargé depuis l'élément <a href="http://developer.mozilla.org/en-US/docs/HTML/Element/Script" title="En/HTML/Element/Script"><code>script</code></a> avec "shader-fs" comme ID. Le second, le vertex shader, est chargé depuis l'élément <a href="http://developer.mozilla.org/en-US/docs/HTML/Element/Script" title="En/HTML/Element/Script"><code>script</code></a> avec "shader-vs" comme ID. Nous regarderons dans le prochain paragraphe la fonction <code>getShader()</code> qui va en fait inclure les shaders depuis le DOM.</p>
<p>Ensuite nous créons le programme shader en appelant la function <code>createProgram()</code>de l'objet WebGL. Nous attachons ensuite les deux shaders à ce programme que nous allons lier au contexte de WebGL.<br />
  Après avoir fait ceci, le paramètre <code>LINK_STATUS</code> de l'objet <code>gl</code> est vérifié pour être sûr que notre programme s'est lié correctement. Si c'est fait, on active le nouveau programme.</p>
<h3 id="Charger_les_shaders_depuis_le_DOM">Charger les shaders depuis le DOM</h3>
<p>La fonction <code>getShader()</code> insère le contenu d'un programme shader à partir d'un objet DOM (récupéré ici par l'id). La fonction retourne null si le programme n'a pas pu être chargé ou compilé.</p>
<p>Dans la première partie de la fonction on récupère l'élément DOM puis on insère son texte dans la variable <code>theSource.</code></p>
<pre class="script-jem">
function getShader(gl, id) {
    var shaderScript, theSource, currentChild, shader;
&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;shaderScript = document.getElementById(id);
&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;if (!shaderScript) {
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;return null;
&nbsp;&nbsp; &nbsp;}
&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;theSource = "";
&nbsp;&nbsp; &nbsp;currentChild = shaderScript.firstChild;
&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;while(currentChild) {
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;if (currentChild.nodeType == currentChild.TEXT_NODE) {
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;theSource += currentChild.textContent;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;currentChild = currentChild.nextSibling;
&nbsp;&nbsp; &nbsp;}

</pre>
<p>Une fois que le code du shader a été lu, on regarde le type MIME du shader afin de déterminer si il s'agit d'un vertex shader (avec pour type MIME "x-shader/x-vertex") ou un fragment shader (type MIME "x-shader/x-fragment"), puis on crée un shader ayant le même type que son contenu.</p>
<pre class="deki-transform">
  if (shaderScript.type == "x-shader/x-fragment") {
&nbsp;   shader = gl.createShader(gl.FRAGMENT_SHADER);
&nbsp; } else if (shaderScript.type == "x-shader/x-vertex") {
&nbsp;&nbsp; &nbsp;shader = gl.createShader(gl.VERTEX_SHADER);
&nbsp; } else {
&nbsp;&nbsp;   // type de shader inconnu
&nbsp;&nbsp; &nbsp; return null;
&nbsp; }
</pre>
<p>Finalement, le contenu de la variable <code>theSource</code> passé au shader. Si une erreur apparaît lors de la compilation, on affiche une alerte décrivant l'erreur et on retourne null.</p>
<p>Si tout se passe bien, le shader compilé est renvoyé.</p>
<pre class="deki-transform">
  gl.shaderSource(shader, theSource);
&nbsp;&nbsp; &nbsp;
&nbsp; // Compile le programme shader
&nbsp; gl.compileShader(shader); &nbsp;
&nbsp;&nbsp; &nbsp;
&nbsp; // Vérifie si la compilation s'est bien déroulée
&nbsp; if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { &nbsp;
&nbsp;&nbsp; &nbsp;&nbsp; alert("Une erreur est survenue au cours de la compilation des shaders: " + gl.getShaderInfoLog(shader));
&nbsp;&nbsp; &nbsp;&nbsp; return null; &nbsp;
&nbsp; }
&nbsp;&nbsp; &nbsp;
&nbsp; return shader;
}
</pre>
<h3 id="Les_shaders">Les shaders</h3>
<p>Nous avons besoin de créer le contenu des shaders à notre HTML. Les shaders sont décrits par un langage qui leur est propre, le GLSL. Il est possible de faire de nombreuses choses avec tel qu'illuminer une scène.</p>
<p>Dans cet exemple, nous l'utiliserons de la manière la plus simple qui soit.</p>
<h4 id="Le_Vertex_shader">Le Vertex shader</h4>
<p>Le vertex shader défini la position de chaque vertex (sommet de triangle).</p>
<p>La position du sommet est défini par la variable GL <code>gl_Position</code>. Nous ne nous préoccuperons pas pour l'instant de ce que contiennent les matrices uMVMatrix et uPMatrix.</p>
<pre class="deki-transform">
&lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
&nbsp;&nbsp;attribute vec3 aVertexPosition;

&nbsp;&nbsp;uniform mat4 uMVMatrix;
&nbsp;&nbsp;uniform mat4 uPMatrix;
&nbsp; 
&nbsp;&nbsp;void main(void) {
&nbsp;&nbsp;&nbsp;&nbsp;gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
&nbsp;&nbsp;}
&lt;/script&gt;
</pre>
<h4 id="Le_Fragment_shader">Le Fragment shader</h4>
<p>Chaque pixel d'un triangle est appelé un fragment. Le but du fragment shader est d'établir la couleur de chaque pixel. Dans cet exemple on va simplement mettre chaque pixel sur la couleur blanche.</p>
<p><code>gl_FragColor</code> est une variable de GL qui est utilisée pour la couleur du fragment. Assigner sa valeur établit la couleur du pixel.</p>
<p>Ici il y a quatres composantes de couleur, le rouge, le vert, le bleu et l'opacité.</p>
<pre class="deki-transform">
&lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
&nbsp;&nbsp;void main(void) {
&nbsp;&nbsp;&nbsp;&nbsp;gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
&nbsp;&nbsp;}
&lt;/script&gt;
</pre>
<h2 id="Cr.C3.A9er_un_objet">Créer un objet</h2>
<p>Avant de commencer à dessiner notre carré, on doit créer un buffer qui va contenir nos sommets. On va pour cela utiliser la fonction <code>initBuffers()</code>. On pourra améliorer cette fonction plus tard pour créer des objets 3D plus complexes.</p>
<pre class="deki-transform">
var horizAspect = 480.0/640.0;

function initBuffers() {
  squareVerticesBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
  
  var vertices = [
    1.0,  1.0,  0.0,
    -1.0, 1.0,  0.0,
    1.0,  -1.0, 0.0,
    -1.0, -1.0, 0.0
  ];
  
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
}
</pre>
<p>Cette fonction est très courte car nous allons dessiner une scène très simple. La fonction appelle d'abord la méthode <code>createBuffer()</code> de l'objet gl afin d'obtenir un buffer dans lequel nous allons mettre nos sommets (vertices). On ajoute ensuite ce buffer au contexte avec la méthode <code>bindBuffer()</code>.</p>
<p>Une fois que le buffer est prêt, on crée un tableau JavaScript qui va contenir les coordonnées 3D de chaque sommet de notre carré.</p>
<p>Le tout est passé à la méthode <code>bufferData()</code> de l'objet gl pour établir les sommets de notre objets.</p>
<p>Vous noterez au passage que l'on a converti le tableau JavaScript en tableau de nombre flottant WebGL.</p>
<h2 id="Dessiner_la_sc.C3.A8ne">Dessiner la scène</h2>
<p>Maintenant que les shaders sont prêts et que l'objet a été construit, on peut vraiment commencer à rendre la scène. Puisque notre scène n'est pas animée, la fonction <code>drawScene()</code> est très simple. Elle utilise quelques fonctions dont nous verrons rapidement l'utilité.</p>
<pre class="deki-transform">
function drawScene() {
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  
  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
  
  loadIdentity();
  mvTranslate([-0.0, 0.0, -6.0]);
  
  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
  setMatrixUniforms();
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
</pre>
<p>La première étape est de nettoyer la scène avec notre couleur d'arrière plan, ensuite on établit la perspective de la caméra. On met un angle d'ouverture de 45° et un rapport largeur/hauteur de 640 par 480 (la taille de notre canvas). On indique aussi que l'on ne veut rendre que les objets compris entre 0.1 et 100 unités par rapport à la caméra.</p>
<p>Ensuite on positionne notre carré en chargeant la matrice identité et en faisant une translation en arrière de 6 unités. Après ça on lie le vertex buffer de notre carrée au context, on le configure puis on le dessine avec la méthode <code>drawArrays()</code></p>
<p>Si vous avez un navigateur qui supporte le WebGL, <a href="/samples/webgl/sample2" title="https://developer.mozilla.org/samples/webgl/sample2/">vous pouvez essayer la démo en cliquant ici</a>.</p>
<h2 id="Op.C3.A9rations_sur_les_matrices">Opérations sur les matrices</h2>
<p>Les opérations sur les matrices sont assez compliquées. Personne n'a vraiment envie d'écrire le code pour les gérer. Heureusement , il y a <a class="external" href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a>, c'est une bibliothèque très pratique pour gérer les opérations sur les vecteurs et les matrices depuis JavaScript.</p>
<p>Le fichier <code>glUtils.js</code> utilisé dans cette démo est présent dans de nombreuses démos WebGL que l'on peut voir sur le Web. Personne n'est vraiment clair sur sa provenance, mais elle fait des simplifications encore plus grandes pour construire des matrices d'un certains types ainsi que pour générer du HTML pour les afficher.</p>
<p>De plus, cette démo définie un certains nombre de fonctions utiles pour utiliser ces librairies. Ce qu'elles font exactement ne fait pas partie de ce que vous apprendrez dans cette démo mais il y a plein de bonnes références en ligne pour bien comprendre leur utilité, n'hésitez pas à jeter un oeil à la section {{anch("A voir")}} pour une liste de quelques unes</p>
<pre class="deki-transform">
function loadIdentity() {
  mvMatrix = Matrix.I(4);
}

function multMatrix(m) {
  mvMatrix = mvMatrix.x(m);
}

function mvTranslate(v) {
  multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
}

function setMatrixUniforms() {
  var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
  gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));

  var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
  gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
}
</pre>
<h2 id="A_voir">A voir</h2>
<ul>
  <li><a class="external" href="http://www.siteduzero.com/tutoriel-3-5003-les-matrices.html" title="http://www.siteduzero.com/tutoriel-3-5003-les-matrices.html">Matrices</a> sur le siteduzero</li>
  <li><a class="external" href="http://fr.wikipedia.org/wiki/Matrice_%28math%C3%A9matiques%29" title="http://fr.wikipedia.org/wiki/Matrice_%28math%C3%A9matiques%29">Matrices</a> sur Wikipedia</li>
</ul>
<p>{{PreviousNext("WebGL/Commencer_avec_WebGL", "WebGL/Ajouter_des_couleurs_avec_les_shaders")}}</p>
<p>{{ languages( { "en": "en/WebGL/Adding_2D_content_to_a_WebGL_context", "de": "de/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext", "ja": "ja/WebGL/Adding_2D_content_to_a_WebGL_context" } ) }}</p>
Revenir à cette révision