diff options
Diffstat (limited to 'files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html')
| -rw-r--r-- | files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html | 256 |
1 files changed, 256 insertions, 0 deletions
diff --git a/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html b/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html new file mode 100644 index 0000000000..e163e5bd32 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html @@ -0,0 +1,256 @@ +--- +title: WebGLRenderingContext.vertexAttribPointer() +slug: Web/API/WebGLRenderingContext/vertexAttribPointer +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/vertexAttribPointer +--- +<div>{{APIRef("WebGL")}}</div> + +<p class="summary">La méthode <strong><code>WebGLRenderingContext.vertexAttribPointer()</code> </strong>de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> spécifie la disposition en mémoire de l'objet de tampon vertex. Elle doit être appelée une fois pour chaque attribut de sommet.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <em>gl</em>.vertexAttribPointer(<em>indice</em>, <em>taille</em>, <em>type</em>, <em>normalise</em>, <em>pas</em>, <em>decalage</em>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>indice</code></dt> + <dd>Un {{domxref("GLuint")}} indiquant l'indice de l'attribut de sommet à modifier.</dd> + <dt><code>taille</code></dt> + <dd>Un {{domxref("GLint")}} indiquant le nombre de composantes par attribut de sommet. Doit être 1, 2, 3 ou 4.</dd> + <dt><code>type</code></dt> + <dd>Un {{domxref ("GLenum")}} spécifiant le type de données de chaque composante dans le tableau. Valeurs possibles : + <ul> + <li><code>gl.BYTE</code> : entier signé sur 8 bits, à valeurs dans [-128, 127]</li> + <li><code>gl.SHORT</code> : entier signé sur 16 bits, à valeurs dans [-32768, 32767]</li> + <li><code>gl.UNSIGNED_BYTE</code> : entier non signé sur 8 bits, à valeurs dans [0, 255]</li> + <li><code>gl.UNSIGNED_SHORT</code> : entier non signé sur 16 bits, à valeurs dans [0, 65535]</li> + <li><code>gl.FLOAT</code> : nombre flottant IEEE 32 bits</li> + <li>lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, la valeur suivante est en outre disponible : + <ul> + <li><code>gl.HALF_FLOAT</code> : nombre flottant IEEE 16 bits</li> + </ul> + </li> + </ul> + </dd> + <dt><code>normalise</code></dt> + <dd>Un {{domxref("GLboolean")}} indiquant si les valeurs des données entières doivent être normalisées dans une certaine plage lorsqu'elles sont converties en flottant. + <ul> + <li>Pour les types <code>gl.BYTE</code> et <code>gl.SHORT</code>, normalise les valeurs à [-1, 1] si <code>true</code>.</li> + <li>Pour les types <code>gl.UNSIGNED_BYTE</code> et <code>gl.UNSIGNED_SHORT</code>, normalise les valeurs à [0, 1] si <code>true</code>.</li> + <li>Pour les types <code>gl.FLOAT</code> et <code>gl.HALF_FLOAT</code>, ce paramètre est sans effet.</li> + </ul> + </dd> + <dt><code>pas</code></dt> + <dd>Un {{domxref ("GLsizei")}} spécifiant le décalage en octets entre le début des attributs de sommets consécutifs. Ne peut être supérieur à 255. Si la valeur de <code>pas</code> est 0, l'attribut est supposé être étroitement compacté, c'est-à-dire que les attributs ne sont pas entrelacés mais que chaque attribut se trouve dans un bloc distinct et que l'attribut du sommet suivant suit immédiatement le sommet en cours.</dd> + <dt><code>decalage</code></dt> + <dd>Un {{domxref ("GLintptr")}} spécifiant le décalage en octets de la première composante dans le tableau d'attributs de sommets. Doit être un multiple de <code>type</code>.</dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Aucune.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<ul> + <li>Une erreur <code>gl.INVALID_VALUE</code> est déclenchée si <code>decalage</code> est négatif.</li> + <li>Une erreur <code>gl.INVALID_OPERATION</code> est déclenchée si <code>pas</code> et <code>decalage</code> ne sont pas des multiples de la taille du type de données.</li> + <li>Une erreur <code>gl.INVALID_OPERATION</code> est déclenchée si aucun WebGLBuffer n'est lié à la cible ARRAY_BUFFER.</li> + <li>Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, une erreur <code>gl.INVALID_OPERATION</code> est déclenchée si l'attribut du sommet est défini comme entier dans le shader de sommet (par ex., <code>uvec4</code> or <code>ivec4</code>, iau lieu de <code>vec4</code>).</li> +</ul> + +<h2 id="Description">Description</h2> + +<p>Supposons que nous voulions afficher une géométrie 3D, et que pour cela, nous ayons besoin de fournir nos sommets au Shader de Sommet. Chaque sommet a un certain nombre d'attributs, tels que la position, le vecteur normal ou les coordonnées de texture, qui sont définis dans un {{jsxref("ArrayBuffer")}} et qui seront fournis à l'Objet de Tampon de Sommets (OTS). Grâce à cette méthode <code>gl.vertexAttribPointer()</code>, nous spécifions dans quel ordre les attributs sont stockés, et quel est leur type de données. De plus, nous devons inclure le pas, qui est la longueur totale en octets de tous les attributs pour un sommet. Également, nous devons appeler {{domxref("WebGLRenderingContext/enableVertexAttribArray", "gl.enableVertexAttribArray()")}} pour indiquer à WebGL que cet attribut doit être rempli avec les données de notre tampon de tableaux.</p> + +<p>Habituellement, votre géométrie 3D se trouve déjà dans un certain format binaire, de sorte que vous devez lire la spécification de ce format particulier pour comprendre la disposition en mémoire. Cependant, si vous concevez le format vous-même, ou si votre géométrie se trouve dans des fichiers texte (comme les fichiers Wavefront .obj) et doit être convertie en <code>ArrayBuffer</code> à l'exécution, vous êtes libre de choisir comment structurer la mémoire. Pour des performances optimales, entrelacez les attributs et utilisez le plus petit type de données représentant néanmoins fidèlement votre géométrie.</p> + +<p>Le nombre maximum d'attributs de vertex dépend de la carte graphique, et vous pouvez appeler <code>gl.getParameter(gl.MAX_VERTEX_ATTRIBS)</code> pour obtenir cette valeur. Sur les cartes graphiques haut de gamme, le maximum est de 16, sur les cartes graphiques de bas de gamme, la valeur sera inférieure.</p> + +<h3 id="Indice_d'attribut">Indice d'attribut</h3> + +<p>Pour chaque attribut, vous devez spécifier son indice. Cela est indépendant de l'emplacement à l'intérieur de la mémoire tampon de tableaux, de sorte que vos attributs peuvent être envoyés dans un ordre différent de celui dans lequel ils sont stockés dans le tampon de tableaux. Vous avez deux options :</p> + +<ul> + <li>Soit vous spécifiez l'index vous-même. Dans ce cas, vous appelerez {{domxref("WebGLRenderingContext.bindAttribLocation()", "gl.bindAttribLocation()")}} pour connecter un attribut nommé du shader de sommet à l'index que vous voulez utiliser. Cela doit être fait avant d'appeler {{domxref("WebGLRenderingContext.linkProgram()", "gl.linkProgram()")}}. Vous pouvez alors fournir ce même index à <code>gl.vertexAttribPointer()</code>.</li> + <li>En variante, vous pouvez utiliser l'index affecté par la carte graphique lors de la compilation du shader de sommet. Suivant la carte graphique, l'index varie, aussi devrez-vous appeler {{domxref("WebGLRenderingContext.getAttribLocation()", "gl.getAttribLocation()")}} pour trouver l'index, puis le fournir à <code>gl.vertexAttribPointer()</code>.<br> + Si vous utilisez WebGL 2, vous pouvez spécifier l'index vous-même dans le code du shader de sommet et remplacer la valeur par défaut utilisée par la carte graphique, par ex. <code>layout(location = 3) in vec4 position;</code> définirait l'attribut <code>"position"</code> à l'indice 3.</li> +</ul> + +<h3 id="Attributs_entiers">Attributs entiers</h3> + +<p>Bien que le <code>ArrayBuffer</code> puisse être rempli à la fois d'entiers et de flottants, les attributs seront toujours convertis en flottant lorsqu'ils seront envoyés au shader de sommet. Si vous avez besoin d'utiliser des entiers dans votre code de shader de sommet, vous pouvez, soit reconvertir les flottants en entiers dans le shader de sommet (par exemple, <code>(int) floatNumber</code>), soit utiliser {{domxref("WebGL2RenderingContext.vertexAttribIPointer()", "gl.vertexAttribIPointer()")}} à partir de WebGL2.</p> + +<h3 id="Valeurs_d'attribut_par_défaut">Valeurs d'attribut par défaut</h3> + +<p>Le code de vertex shader peut inclure un certain nombre d'attributs, mais nous n'avons pas besoin de spécifier les valeurs pour chaque attribut. A la place, nous pouvons fournir une valeur par défaut qui sera identique pour tous les sommets. Nous pouvons appeler <code>{{domxref("WebGLRenderingContext.disableVertexAttribArray()", "gl.disableVertexAttribArray()")}}</code> pour indiquer à WebGL d'utiliser la valeur par défaut, tandis que l'appel à {{domxref("WebGLRenderingContext.enableVertexAttribArray ()", "gl.enableVertexAttribArray () ")}} lira les valeurs du buffer du tableau comme spécifié avec <code>gl.vertexAttribPointer()</code>.</p> + +<p>De façon similaire, si notre shader de sommet attend par ex. un attribut à 4 composantes avec <code>vec4</code>, mais que dans notre appel à <code>gl.vertexAttribPointer()</code>, nous définissons la taille à 2, alors WebGL définira les deux premières composantes en se basant sur le tampon des tableaux, tandis que les troisième et quatrième composantes prendront la valeur par défaut.</p> + +<p>La valeur par défaut est <code>vec4(0.0, 0.0, 0.0, 1.0)</code> par défaut, mais nous pouvons spécifier une valeur par défaut différente avec <code>{{domxref ("WebGLRenderingContext.vertexAttrib()", "gl.vertexAttrib[1234]f[v]()")}}</code>.</p> + +<p>Par exemple, votre shader de sommet peut utiliser une position et un attribut de couleur. La plupart des maillages ont leur couleur spécifiée au niveau des sommets, mais certains maillages ont une teinte uniforme. Pour ces maillages, il n'est pas nécessaire de définir la même couleur pour chaque sommet dans le tampon des tableaux, aussi vous utiliserez <code>gl.vertexAttrib4fv()</code> pour définir une couleur constante.</p> + +<h3 id="Interrogation_des_paramètres_en_cours">Interrogation des paramètres en cours</h3> + +<p>Vous pouvez appeler {{domxref ("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} et {{domxref ("WebGLRenderingContext.getVertexAttribOffset()", "gl.getVertexAttribOffset()")}} pour obtenir les paramètres en cours d'un attribut, par ex., le type de données ou si l'attribut doit être normalisé. Gardez présent à l'esprit que ces fonctions WebGL ont des performances faibles et qu'il est préférable de stocker l'état dans votre application JavaScript. Cependant, ces fonctions sont idéales pour déboguer un contexte WebGL sans toucher au code de l'application.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Cet exemple montre comment envoyer vos attributs de sommet au programme shader. Nous utilisons une structure de données imaginaire, dans laquelle les attributs de chaque sommet sont stockés entrelacés avec une longueur de 20 octets par sommet :</p> + +<ol> + <li><strong>position :</strong> nous devons stocker les coordonnées X, Y et Z. Pour une précision maximale, nous utilisons des flottants 32 bits ; au total, cela utilise 12 octets ;</li> + <li><strong>vecteur normal :</strong> nous avons besoin de stocker les composantes X, Y et Z du vecteur normal, mais comme la précision n'est pas si importante que cela, nous utilisons des entiers signés sur 8 bits. Pour de meilleures performances, nous alignons les données sur 32 bits en stockant également une quatrième composante de valeur zéro, ce qui porte la taille totale à 4 octets. Également, nous indiquons à WebGL de normaliser les valeurs, car nos normales sont toujours dans la plage [-1, 1] ;</li> + <li><strong>coordonnées de texture :</strong> nous avons besoin de stocker les coordonnées U et V ; pour que ces nombres entiers non signés sur 16 bits offrent suffisamment de précision, la taille totale est de 4 octets. Nous indiquons également à WebGL de normaliser les valeurs à [0, 1].</li> +</ol> + +<p>Par exemple, le sommet suivant :</p> + +<pre class="brush: json">{ + "position": [1.0, 2.0, 1.5], + "normale": [1.0, 0.0, 0.0], + "coordTex": [0.5, 0.25] +} +</pre> + +<p>sera stocké dans le tampon des tableaux comme suit :</p> + +<table style="width: auto;"> + <tbody> + <tr> + <td style="background-color: #ccf;">00 00 80 3F</td> + <td style="background-color: #ddf;">00 00 00 40</td> + <td style="background-color: #ccf;">00 00 0C 3F</td> + <td style="background-color: #cfc;">7F</td> + <td style="background-color: #dfd;">00</td> + <td style="background-color: #cfc;">00</td> + <td style="background-color: #dfd;">00</td> + <td style="background-color: #fcc;">7F FF</td> + <td style="background-color: #fdd;">3F FF</td> + </tr> + </tbody> +</table> + +<h3 id="Création_du_tampon_des_tableaux">Création du tampon des tableaux</h3> + +<p>Tout d'abord, nous créons dynamiquement le tampon des tableaux à partir de données JSON en utilisant un {{domxref("DataView")}}. Notez l'utilisation de <code>true</code>, car WebGL s'attend à ce que nos données soient en little-endian.</p> + +<pre class="brush: js">// Charger la géometrie avec fetch() et Response.json() +const response = await fetch('assets/geometry.json'); +const sommets = await response.json(); + +// Créer le tampon des tableaux +const tampon = new ArrayBuffer(20 * sommets.length); +// Remplir le tampon des tableaux +const dv = new DataView(tampon); +for (let i = 0; i < sommets.length; i++) { + dv.setFloat32(20 * i, sommets[i].position[0], true); + dv.setFloat32(20 * i + 4, sommets[i].position[1], true); + dv.setFloat32(20 * i + 8, sommets[i].position[2], true); + dv.setInt8(20 * i + 12, sommets[i].normale[0] * 0x7F); + dv.setInt8(20 * i + 13, sommets[i].normale[1] * 0x7F); + dv.setInt8(20 * i + 14, sommets[i].normale[2] * 0x7F); + dv.setInt8(20 * i + 15, 0); + dv.setUint16(20 * i + 16, sommets[i].coordTex[0] * 0xFFFF, true); + dv.setUint16(20 * i + 18, sommets[i].coordTex[1] * 0xFFFF, true); +}</pre> + +<p>Pour de meilleures performances, nous pourrions également effectuer la conversion JSON vers ArrayBuffer précédente du côté serveur, par ex. avec Node.js. Nous pourrions alors charger le fichier binaire et l'interpréter comme un tampon de tableaux :</p> + +<pre class="brush: js">const response = await fetch('assets/geometry.bin'); +const tampon = await response.arrayBuffer(); +</pre> + +<h3 id="Utiliser_le_tampon_de_tableaux_avec_WebGL">Utiliser le tampon de tableaux avec WebGL</h3> + +<p>Tout d'abord, nous créons un nouvel Objet Tampon de Sommets (OTS) et nous l'alimentons avec notre tampon de tableaux :</p> + +<pre class="brush: js">// Lier le tampon de tableaux à l'Objet Tampon de Sommets +const ots = gl.createBuffer(); +gl.bindBuffer(gl.ARRAY_BUFFER, ots); +gl.bufferData(gl.ARRAY_BUFFER, buffer, gl.STATIC_DRAW); +</pre> + +<p>Ensuite, nous spécifions la disposition en mémoire du tampon de tableaux, soit en définissant nous-mêmes l'indice :</p> + +<pre class="brush: js, highlight:[3, 6, 9]">// Décrire la disposition du tampon : +//1. position, non normalisé +gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 20, 0); +gl.enableVertexAttribArray(0); +//2. vecteur normal, normalisé à [-1, 1] +gl.vertexAttribPointer(1, 4, gl.BYTE, true, 20, 12); +gl.enableVertexAttribArray(1); +//3. coordonnées de texture, normalisées à [0, 1] +gl.vertexAttribPointer(2, 2, gl.UNSIGNED_SHORT, true, 20, 16); +gl.enableVertexAttribArray(2); + +// Définir les attributs dans le shader de sommet aux mêmes indices +gl.bindAttribLocation(shaderProgram, 0, 'position'); +gl.bindAttribLocation(shaderProgram, 1, 'normal'); +gl.bindAttribLocation(shaderProgram, 2, 'texUV'); +// Du fait que indices des attributs ont changé, nous devons refaire l'édition de liens du shader +// Noter que cela réinitialisera tous les uniforms qui avaient été précédemment définis. +gl.linkProgram(shaderProgram); +</pre> + +<p>soit en utilisant l'indice fourni par la carte graphique, au lieu de le définir nous-mêmes ; cela évite la réédition des liens du programme shader.</p> + +<pre class="brush: js, highlight:[2, 6, 10]">const positionLoc = gl.getAttribLocation(shaderProgram, 'position'); +gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 20, 0); +gl.enableVertexAttribArray(positionLoc); + +const normalLoc = gl.getAttribLocation(shaderProgram, 'normal'); +gl.vertexAttribPointer(normalLoc, 4, gl.BYTE, true, 20, 12); +gl.enableVertexAttribArray(normalLoc); + +const texUVLoc = gl.getAttribLocation(shaderProgram, 'texUV'); +gl.vertexAttribPointer(texUVLoc, 2, gl.UNSIGNED_SHORT, true, 20, 16); +gl.enableVertexAttribArray(texUVLoc); +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.10", "vertexAttribPointer")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td> + <p>Définition initiale.</p> + </td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glVertexAttribPointer.xml", "glVertexAttribPointer")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td> + <p>Page man de l’API OpenGL.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.vertexAttribPointer")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://www.khronos.org/opengl/wiki/Vertex_Specification">Vertex Specification</a> sur le wiki OpenGL</li> +</ul> |