diff options
Diffstat (limited to 'files/fr/web/api/webglrenderingcontext')
33 files changed, 3971 insertions, 0 deletions
diff --git a/files/fr/web/api/webglrenderingcontext/activer/index.html b/files/fr/web/api/webglrenderingcontext/activer/index.html new file mode 100644 index 0000000000..4d3b41d6c0 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/activer/index.html @@ -0,0 +1,145 @@ +--- +title: WebGLRenderingContext.enable() +slug: Web/API/WebGLRenderingContext/activer +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/enable +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <code>WebGLRenderingContext.enable()</code> de l'API WebGL active des fonctionnalités WebGL particulières pour ce contexte.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var>gl</var>.enable(<em>fon</em>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>fon</code></dt> + <dd>Un {{domxref("GLenum")}} indiquant quelle fonctionnalité WebGL activer. Valeurs possibles :</dd> + <dd> + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Constante</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>gl.BLEND</code></td> + <td>Active le mélange des valeurs de couleur de fragment calculées. Voir {{domxref("WebGLRenderingContext.blendFunc()")}}.</td> + </tr> + <tr> + <td><code>gl.CULL_FACE</code></td> + <td>Active le masquage des polygones. Voir {{domxref("WebGLRenderingContext.cullFace()")}}.</td> + </tr> + <tr> + <td><code>gl.DEPTH_TEST</code></td> + <td>Active les comparaisons et les mises à jour dans le tampon de profondeur. Voir {{domxref("WebGLRenderingContext.depthFunc()")}}.</td> + </tr> + <tr> + <td><code>gl.DITHER</code></td> + <td>Active le tramage des composantes de couleur avant qu'elles ne soient écrites dans le tampon de couleur.</td> + </tr> + <tr> + <td><code>gl.POLYGON_OFFSET_FILL</code></td> + <td>Active l'ajout d'un décalage aux valeurs de profondeur des fragments de polygone. Voir {{domxref("WebGLRenderingContext.polygonOffset()")}}.</td> + </tr> + <tr> + <td><code>gl.SAMPLE_ALPHA_TO_COVERAGE</code></td> + <td>Active le calcul d'une valeur de couverture temporaire déterminée par la valeur alpha.</td> + </tr> + <tr> + <td><code>gl.SAMPLE_COVERAGE</code></td> + <td>Active le ET de la couverture des fragments avec la valeur de couverture temporaire. Voir {{domxref("WebGLRenderingContext.sampleCoverage()")}}.</td> + </tr> + <tr> + <td><code>gl.SCISSOR_TEST</code></td> + <td>Active le test de détourage qui supprime les fragments se trouvant en dehors du rectangle de détourage. Voir {{domxref("WebGLRenderingContext.scissor()")}}.</td> + </tr> + <tr> + <td><code>gl.STENCIL_TEST</code></td> + <td>Active le test et les mises à jour stencil dans le stencil buffer. Voir {{domxref("WebGLRenderingContext.stencilFunc()")}}.</td> + </tr> + </tbody> + </table> + Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : + + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Constante</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>gl.RASTERIZER_DISCARD</code></td> + <td>Les primitives sont supprimées immédiatement après l'étape de rastérisation, mais après l'étape de renvoi de transformation optionnelle. Les commandes <code>gl.clear()</code> sont ignorées.</td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Aucune.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">gl.enable(gl.DITHER); +</pre> + +<p>Pour vérifier que cette fonctionnalité est activée, utilisez la méthode {{domxref("WebGLRenderingContext.isEnabled()")}} :</p> + +<pre class="brush: js">gl.isEnabled(gl.DITHER); +// true +</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.3", "enable")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale pour WebGL.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glEnable.xml", "glEnable")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page man de l'API OpenGL ES 2.0.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glEnable.xhtml", "glEnable")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>Page man de l'API OpenGL ES 3.0 API.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">La table de compatibilité de cette page est générée à 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.enable")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.disable()")}}</li> + <li>{{domxref("WebGLRenderingContext.isEnabled()")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/activetexture/index.html b/files/fr/web/api/webglrenderingcontext/activetexture/index.html new file mode 100644 index 0000000000..4d2733b6eb --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/activetexture/index.html @@ -0,0 +1,87 @@ +--- +title: WebGLRenderingContext.activeTexture() +slug: Web/API/WebGLRenderingContext/activeTexture +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/activeTexture +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong><code>WebGLRenderingContext.activeTexture()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> indique quelle unité de texture doit être rendue active.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var><em>void gl</em>.activeTexture</var><var>(texture);</var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>texture</code></dt> + <dd>L'unité de texture à rendre active. La valueur est une <code>gl.TEXTURE<em>I</em></code> où <em>I</em> est dans la plage de 0 à<code>gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1</code>.</dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Aucune.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<p>Si <em>texture</em> n'est pas l'une des <code>gl.TEXTURE<em>I</em></code>, où <em>I</em> est dans la plage de 0 à<code>gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1</code>, une erreur <code>gl.INVALID_ENUM</code> est déclenchée.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>L'appel suivant choisit <code>gl.TEXTURE1</code> comme texture en cours. Les appels suivants qui modifient l'état de la texture affecteront cette texture.</p> + +<pre class="brush: js">gl.activeTexture(gl.TEXTURE1); +</pre> + +<p>Le nombre d'unités de texture dépend de l'implémentation, vous pouvez obtenir ce nombre à l'aide de la constante <code>MAX_COMBINED_TEXTURE_IMAGE_UNITS</code>. Il est, de par la spécification, d'au moins 8.</p> + +<pre class="brush: js">gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS); +</pre> + +<p>Pour obtenir la texture en cours, faire une requête sur la constante <code>ACTIVE_TEXTURE</code>.</p> + +<pre class="brush: js">gl.activeTexture(gl.TEXTURE0); +gl.getParameter(gl.ACTIVE_TEXTURE); +// retourne "33984" (0x84C0, valeur enum pour gl.TEXTURE0) +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statué</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14.3", "activeTexture")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glActiveTexture.xml", "glActiveTexture")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page man de l'API OpenGL.</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.activeTexture")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.getParameter()")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/attachshader/index.html b/files/fr/web/api/webglrenderingcontext/attachshader/index.html new file mode 100644 index 0000000000..6aaac592aa --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/attachshader/index.html @@ -0,0 +1,98 @@ +--- +title: WebGLRenderingContext.attachShader() +slug: Web/API/WebGLRenderingContext/attachShader +tags: + - Méthode + - WebGL +translation_of: Web/API/WebGLRenderingContext/attachShader +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong>WebGLRenderingContext.attachShader()</strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> attache un {{domxref("WebGLShader")}} de fragment ou de sommet à un {{domxref("WebGLProgram")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var><em>gl</em>.attach</var>Shader<var>(programme, shader);</var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>programme</code></dt> + <dd>Un {{domxref("WebGLProgram")}}.</dd> + <dt><code>shader</code></dt> + <dd>Un {{domxref("WebGLShader")}} de fragment ou de sommet.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<p>Le code suivant attache des shaders pré-existants à un {{domxref("WebGLProgram")}}.</p> + +<pre class="brush: js">var programme = gl.createProgram(); + +// Attacher des shaders pré-existants +gl.attachShader(programme, shaderDeSommet); +gl.attachShader(programme, shaderDeFragment); + +gl.linkProgram(programme); + +if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) { + var info = gl.getProgramInfoLog(programme); + throw 'Impossible de compiler le program WebGL. \n\n' + info; +} +</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.9", "attachShader")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glAttachShader.xml", "glAttachShader")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page man OpenGL.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">La table de compatibilité fans this page est générée à partir de données structurées. Si vous souahaitez contribuer aux données, merci de regarder sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et de nous envoyer une pull request.</p> + +<p>{{Compat("api.WebGLRenderingContext.attachShader")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLProgram")}}</li> + <li>{{domxref("WebGLShader")}}</li> + <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.createShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.isShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/bindbuffer/index.html b/files/fr/web/api/webglrenderingcontext/bindbuffer/index.html new file mode 100644 index 0000000000..af21b2932f --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/bindbuffer/index.html @@ -0,0 +1,132 @@ +--- +title: WebGLRenderingContext.bindBuffer() +slug: Web/API/WebGLRenderingContext/bindBuffer +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/bindBuffer +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong><code>WebGLRenderingContext.bindBuffer()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> lie un {{domxref("WebGLBuffer")}} donné à une cible.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var>gl</var>.bindBuffer(<var>cible</var>, <var>tampon</var>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt>cible</dt> + <dd>Un {{domxref ("GLenum")}} spécifiant le point de liaison (cible). Valeurs possibles :</dd> +</dl> + +<ul> + <li><code>gl.ARRAY_BUFFER</code> : tampon contenant des attributs de sommet, tels que des coordonnées de vertex, des données de coordonnées de texture ou des données de couleurs de sommet ;</li> + <li><code>gl.ELEMENT_ARRAY_BUFFER</code> : tampon utilisé pour les indices d'éléments ;</li> + <li>Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, les valeurs suivantes sont disponibles en plus : + <ul> + <li><code>gl.COPY_READ_BUFFER</code> : tampon pour la copie d'un objet tampon à un autre ;</li> + <li><code>gl.COPY_WRITE_BUFFER</code> : tampon pour la copie d'un objet tampon à un autre ;</li> + <li><code>gl.TRANSFORM_FEEDBACK_BUFFER</code> : tampon pour les opérations de retour de la transformation ;</li> + <li><code>gl.UNIFORM_BUFFER</code> : tampon utilisé pour stocker des blocs uniformes ;</li> + <li><code>gl.PIXEL_PACK_BUFFER</code> : tampon utilisé pour les opérations de transfert de pixels ;</li> + <li><code>gl.PIXEL_UNPACK_BUFFER</code> : tampon utilisé pour les opérations de transfert de pixels.</li> + </ul> + </li> +</ul> + +<dl> + <dt>tampon</dt> + <dd>Un {{domxref ("WebGLBuffer")}} à lier.</dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Aucune.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<p>Une seule cible peut être liée à un {{domxref ("WebGLBuffer")}} donné. Une tentative de lier le tampon à une autre cible déclenchera une erreur <code>INVALID_OPERATION</code> et la liaison du tampon en cours restera la même.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Liaison_d'un_tampon_à_une_cible">Liaison d'un tampon à une cible</h3> + +<pre class="brush: js">var canevas = document.getElementById('canevas'); +var gl = canevas.getContext('webgl'); +var tampon = gl.createBuffer(); + +gl.bindBuffer(gl.ARRAY_BUFFER, tampon); +</pre> + +<h3 id="Récupération_des_liaisons_en_cours">Récupération des liaisons en cours</h3> + +<p>Pour vérifier les liaisons de tampon en cours, interrogez les constantes ARRAY_BUFFER_BINDING et ELEMENT_ARRAY_BUFFER_BINDING.</p> + +<pre class="brush: js">gl.getParameter(gl.ARRAY_BUFFER_BINDING); +gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING); +</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.5", "bindBuffer")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td> + <p>Définition initiale pour WebGL.</p> + </td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glBindBuffer.xml", "glBindBuffer")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page man de l’API OpenGL ES 2 (similaire).</td> + </tr> + <tr> + <td>{{SpecName('WebGL2', "#3.7.1", "bindBuffer")}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td> + <p>Définition mise à jour pour WebGL 2.</p> + + <p>Ajoute de nouveaux tampons <code>cible</code> :<br> + <code>gl.COPY_READ_BUFFER</code>,<br> + <code>gl.COPY_WRITE_BUFFER</code>,<br> + <code>gl.TRANSFORM_FEEDBACK_BUFFER</code>,<br> + <code>gl.UNIFORM_BUFFER</code>,<br> + <code>gl.PIXEL_PACK_BUFFER</code>,<br> + <code>gl.PIXEL_UNPACK_BUFFER</code></p> + </td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glBindBuffer.xhtml", "glBindBuffer")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>Page man de l’API OpenGL ES 3 (similaire).</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.bindBuffer")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li> + <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/bindtexture/index.html b/files/fr/web/api/webglrenderingcontext/bindtexture/index.html new file mode 100644 index 0000000000..1a009bed62 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/bindtexture/index.html @@ -0,0 +1,121 @@ +--- +title: WebGLRenderingContext.bindTexture() +slug: Web/API/WebGLRenderingContext/bindTexture +tags: + - API + - Méthode + - Reference + - Textures + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/bindTexture +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong><code>WebGLRenderingContext.bindTexture()</code></strong> de l'API WebGL lie la {{domxref("WebGLTexture")}} donnée à une cible (point de liaison).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var>gl</var>.bindTexture(<var>cible</var>, <var>texture</var>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt>cible</dt> + <dd>Un {{domxref ("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : + <ul> + <li><code>gl.TEXTURE_2D</code> : une texture bidimensionnelle ;</li> + <li><code>gl.TEXTURE_CUBE_MAP</code> : une texture mappée sur un cube ;</li> + <li>lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : + <ul> + <li><code>gl.TEXTURE_3D</code> : une texture tridimensionnelle ;</li> + <li><code>gl.TEXTURE_2D_ARRAY</code> : une texture en tableau bidimensionnelle.</li> + </ul> + </li> + </ul> + </dd> + <dt>texture</dt> + <dd>Un objet {{domxref ("WebGLTexture")}} à lier.</dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Aucune.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<p>Une erreur <code>gl.INVALID_ENUM</code> est déclenchée si <code>cible</code> n'est pas <code>gl.TEXTURE_2D</code>, <code>gl.TEXTURE_CUBE_MAP</code>, <code>gl.TEXTURE_3D</code>, ou <code>gl.TEXTURE_2D_ARRAY</code>.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Liaison_d'une_texture">Liaison d'une texture</h3> + +<pre class="brush: js">var canevas = document.getElementById('canevas'); +var gl = canevas.getContext('webgl'); +var texture = gl.createTexture(); + +gl.bindTexture(gl.TEXTURE_2D, texture); +</pre> + +<h3 id="Obtention_des_liaisons_en_cours">Obtention des liaisons en cours</h3> + +<p>Pour vérifier la liaison de texture en cours, interrogez les constantes <code>gl.TEXTURE_BINDING_2D</code> ou <code>gl.TEXTURE_BINDING_CUBE_MAP</code>.</p> + +<pre class="brush: js">gl.getParameter(gl.TEXTURE_BINDING_2D); +</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.8", "bindTexture")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td> + <p>Définition initiale pour WebGL.</p> + </td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glBindTexture.xml", "glBindTexture")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td> + <p>Page man de l’API OpenGL ES 2.0 (similaire).</p> + </td> + </tr> + <tr> + <td>{{SpecName('WebGL2', "#3.7.1", "bindTexture")}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td>Définition mise à jour pour WebGL 2.<br> + Ajoute : <code>gl.TEXTURE_3D</code> et <code>gl.TEXTURE_2D_ARRAY</code></td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glBindTexture.xhtml", "glBindTexture")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>Page man de l’API OpenGL ES 3.0 (similaire).</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.bindTexture")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> +</ul> + +<ul> + <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteTexture()")}}</li> + <li>{{domxref("WebGLRenderingContext.isTexture()")}}</li> + <li>{{domxref("WebGLRenderingContext.texImage2D()")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/bufferdata/index.html b/files/fr/web/api/webglrenderingcontext/bufferdata/index.html new file mode 100644 index 0000000000..d3fa1f224a --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/bufferdata/index.html @@ -0,0 +1,163 @@ +--- +title: WebGLRenderingContext.bufferData() +slug: Web/API/WebGLRenderingContext/bufferData +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/bufferData +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong><code>WebGLRenderingContext.bufferData()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> initialise et crée le magasin de données de l'objet tampon.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">// WebGL1: +void gl.bufferData(cible, taille, utilisation); +void gl.bufferData(cible, ArrayBuffer? donneesSrc, utilisation); +void gl.bufferData(cible, ArrayBufferView donneesSrc, utilisation); + +// WebGL2: +void gl.bufferData(cible, ArrayBufferView donneesSrc, utilisation, decalageSrc, longueur); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt>cible</dt> + <dd>Un {{domxref ("GLenum")}} spécifiant le point de liaison (cible). Valeurs possibles : + <ul> + <li><code>gl.ARRAY_BUFFER</code> : tampon contenant des attributs de sommet, tels que des coordonnées de sommet, des données de coordonnées de texture ou des données de couleurs de sommet ;</li> + <li><code>gl.ELEMENT_ARRAY_BUFFER</code> : tampon utilisé pour les indices d'éléments ;</li> + <li>lors de l'utilisation d'un {{domxref ("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, les valeurs suivantes sont en outre disponibles : + <ul> + <li><code>gl.COPY_READ_BUFFER</code> : tampon pour la copie d'un objet tampon à un autre ;</li> + <li><code>gl.COPY_WRITE_BUFFER</code> : tampon pour la copie d'un objet tampon à un autre ;</li> + <li><code>gl.TRANSFORM_FEEDBACK_BUFFER</code> : tampon pour les opérations de retour de transformation ;</li> + <li><code>gl.UNIFORM_BUFFER</code> : tampon utilisé pour stocker des blocs uniform ;</li> + <li><code>gl.PIXEL_PACK_BUFFER</code> : tampon utilisé pour les opérations de transfert de pixels ;</li> + <li><code>gl.PIXEL_UNPACK_BUFFER</code> : tampon utilisé pour les opérations de transfert de pixels.</li> + </ul> + </li> + </ul> + </dd> + <dt>taille</dt> + <dd>Un {{domxref("GLsizeiptr")}} définissant la taille du magasin de données de l'objet tampon.</dd> + <dt>donneesSrc {{optional_inline}}</dt> + <dd>Un {{jsxref("ArrayBuffer")}}, {{jsxref("SharedArrayBuffer")}} ou l'un des types de tableau typés {{domxref("ArrayBufferView")}} à copier dans le magasin de données. Si <code>null</code>, un magasin de données est quand même créé, mais son contenu n'est ni initialisé, ni défini.</dd> + <dt>utilisation</dt> + <dd>Un {{domxref("GLenum")}} indiquant le modèle d'utilisation du magasin de données. Valeurs possibles : + <ul> + <li><code>gl.STATIC_DRAW</code> : le contenu du tampon est susceptible d'être utilisé souvent mais de ne pas changer souvent ; du contenu est écrit dans le tampon, mais non lu ;</li> + <li><code>gl.DYNAMIC_DRAW</code> : le contenu du tampon est susceptible d'être souvent utilisé et de changer souvent ; du contenu est écrit dans le tampon, mais non lu ;</li> + <li><code>gl.STREAM_DRAW</code> : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est écrit dans le tampon, mais non lu ;</li> + <li>lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes the following values sont en outre disponibles : + <ul> + <li><code>gl.STATIC_READ</code> : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; du contenu est lu depuis le tampon, mais non écrit ;</li> + <li><code>gl.DYNAMIC_READ</code> : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; du contenu est lu depuis le tampon, mais non écrit ;</li> + <li><code>gl.STREAM_READ</code> : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est lu depuis le tampon, mais non écrit ;</li> + <li><code>gl.STATIC_COPY</code> : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ;</li> + <li><code>gl.DYNAMIC_COPY</code> : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ;</li> + <li><code>gl.STREAM_COPY</code> : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur.</li> + </ul> + </li> + </ul> + </dd> + <dt>decalageSrc</dt> + <dd>Un {{domxref("GLuint")}} indiquant le décalage d'indice d'élément où commencer à lire dans le tampon.</dd> + <dt><code>longueur</code> {{optional_inline}}</dt> + <dd>Un {{domxref("GLuint")}} valant 0 par défaut.</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.OUT_OF_MEMORY</code> est déclenchée si le contexte ne peut pas créer un magasin de données de la <code>taille</code> indiquée.</li> + <li>Une erreur<code>gl.INVALID_VALUE</code> est déclenchée si <code>taille</code> est négative.</li> + <li>Une erreur <code>gl.INVALID_ENUM</code> est déclenchée si <code>cible</code> ou<code>utilisation</code> ne sont pas l'un des enums autorisés.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_de_bufferData">Utilisation de <code>bufferData</code></h3> + +<pre class="brush: js">var canevas = document.getElementById('canevas'); +var gl = canevas.getContext('webgl'); +var tampon = gl.createBuffer(); +gl.bindBuffer(gl.ARRAY_BUFFER, tampon); +gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW); +</pre> + +<h3 id="Récupération_de_l'information_de_tampon">Récupération de l'information de tampon</h3> + +<p>Pour vérifier l'utilisation du tampon en cours et la taille du tampon, utiliser la méthode {{domxref("WebGLRenderingContext.getBufferParameter()")}}.</p> + +<pre class="brush: js">gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE); +gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_USAGE); +</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.5", "bufferData")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glBufferData.xml", "glBufferData")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td> + <p>Page man de l’API OpenGL.</p> + </td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glBufferData.xhtml", "glBufferData")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td> + <p>Page man de l’API OpenGL ES 3 (similaire).</p> + Ajoute les noouveaux tampons <code>cible</code> :<br> + <code>gl.COPY_READ_BUFFER</code>,<br> + <code>gl.COPY_WRITE_BUFFER</code>,<br> + <code>gl.TRANSFORM_FEEDBACK_BUFFER</code>,<br> + <code>gl.UNIFORM_BUFFER</code>,<br> + <code>gl.PIXEL_PACK_BUFFER</code>,<br> + <code>gl.PIXEL_UNPACK_BUFFER</code><br> + <br> + Ajoute les nouvelles indications d'<code>utilisation</code> :<br> + <code>gl.STATIC_READ</code>,<br> + <code>gl.DYNAMIC_READ</code>,<br> + <code>gl.STREAM_READ</code>,<br> + <code>gl.STATIC_COPY</code>,<br> + <code>gl.DYNAMIC_COPY</code>,<br> + <code>gl.STREAM_COPY</code>.</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.bufferData")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.bufferSubData()")}}</li> + <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/canevas/index.html b/files/fr/web/api/webglrenderingcontext/canevas/index.html new file mode 100644 index 0000000000..6b7965a1d7 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/canevas/index.html @@ -0,0 +1,75 @@ +--- +title: WebGLRenderingContext.canvas +slug: Web/API/WebGLRenderingContext/canevas +tags: + - Propriété + - WebGL + - WebGLRenderingContext + - lecture seule +translation_of: Web/API/WebGLRenderingContext/canvas +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La propriété <code>WebGLRenderingContext.canvas</code> est une référence en lecture seule à l'objet {{domxref("HTMLCanvasElement")}} ou {{domxref("OffscreenCanvas")}} associé au contexte. Il peut s'agir de {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}} ou à un objet {{domxref("OffscreenCanvas")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var><em>gl</em></var>.canvas;</pre> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Soit un objet {{domxref("HTMLCanvasElement")}} ou {{domxref("OffscreenCanvas")}}, soit {{jsxref("null")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Élément_canevas">Élément canevas</h3> + +<p>Étant donné cet élément {{HTMLElement("canvas")}} :</p> + +<pre class="brush: html"><canvas id="canevas"></canvas> +</pre> + +<p>Vous pouvez en récupérer une référence à partir du <code>WebGLRenderingContext</code> en utilisant la propriété <code>canvas</code> :</p> + +<pre class="brush: js">var canevas = document.getElementById('canevas'); +var gl = canevas.getContext('webgl'); +gl.canvas; // HTMLCanvasElement +</pre> + +<h3 id="Canevas_hors_écran">Canevas hors écran</h3> + +<p>Exemple d'utilisation de l'objet expérimental {{domxref("OffscreenCanvas")}}.</p> + +<pre class="brush: js">var horsEcran = new OffscreenCanvas(256, 256); +var gl = horsEcran.getContext('webgl'); +gl.canvas; // OffscreenCanvas</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', "#DOM-WebGLRenderingContext-canvas", "WebGLRenderingContext.canvas")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">La table de compatibilité de cette page est générée à 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.canvas")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("CanvasRenderingContext2D.canvas")}}</li> + <li>{{domxref("OffscreenCanvas")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/clear/index.html b/files/fr/web/api/webglrenderingcontext/clear/index.html new file mode 100644 index 0000000000..30ac2f90a7 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/clear/index.html @@ -0,0 +1,95 @@ +--- +title: WebGLRenderingContext.clear() +slug: Web/API/WebGLRenderingContext/clear +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/clear +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong><code>WebGLRenderingContext.clear()</code></strong> de <a href="/fr/docs/Web/API/WebGL_API">l'API WebGL</a> efface les tampons avec des valeurs prédéfinies.</p> + +<p>Ces valeurs prédéfinies peuvent être affectées par {{domxref("WebGLRenderingContext.clearColor", "clearColor()")}}, {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} ou {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}}.</p> + +<p>Les masques d'écriture, de détourage, de tramage et de tampon peuvent affecter la méthode <code>clear()</code>.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var>gl</var>.clear(<var>masque</var>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>masque</code></dt> + <dd>Un masque OU par bits {{domxref("GLbitfield")}} qui indique les tampons à effacer. Les valeurs possibles sont : + <ul> + <li><code>gl.COLOR_BUFFER_BIT</code></li> + <li><code>gl.DEPTH_BUFFER_BIT</code></li> + <li><code>gl.STENCIL_BUFFER_BIT</code></li> + </ul> + </dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Aucune.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<p>Si <em>masque</em> n'est pas l'une des valeurs possibles listées, une erreur <code>gl.INVALID_ENUM</code> est déclenchée.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>La méthode <code>clear()</code> accepte des valeurs multiples.</p> + +<pre class="brush: js">gl.clear(gl.DEPTH_BUFFER_BIT); +gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT); +</pre> + +<p>Pour obtenir les valeurs d'effacement courantes, interrogez les constantes <code>COLOR_CLEAR_VALUE</code>, <code>DEPTH_CLEAR_VALUE</code> et <code>STENCIL_CLEAR_VALUE</code> grâce à la méthode <code>getParameter()</code>.</p> + +<pre class="brush: js">gl.getParameter(gl.COLOR_CLEAR_VALUE); +gl.getParameter(gl.DEPTH_CLEAR_VALUE); +gl.getParameter(gl.STENCIL_CLEAR_VALUE); +</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.11", "clear")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glClear.xml", "glClear")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page man de l'API OpenGL.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">Le tableau de compatibilité de cetee page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, regardez<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.clear")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.clearColor()")}}</li> + <li>{{domxref("WebGLRenderingContext.clearDepth()")}}</li> + <li>{{domxref("WebGLRenderingContext.clearStencil()")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/compileshader/index.html b/files/fr/web/api/webglrenderingcontext/compileshader/index.html new file mode 100644 index 0000000000..4ed08424b7 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/compileshader/index.html @@ -0,0 +1,87 @@ +--- +title: WebGLRenderingContext.compileShader() +slug: Web/API/WebGLRenderingContext/compileShader +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/compileShader +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong>WebGLRenderingContext.compileShader()</strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> compile un shader GLSL en données binaires, de sorte qu'il puisse être utilisé par un {{domxref("WebGLProgram")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var><em>gl</em>.compileShader</var><var>(shader);</var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>shader</code></dt> + <dd>Un {{domxref("WebGLShader")}} de fragments ou de sommets.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">var shader = gl.createShader(gl.VERTEX_SHADER); +gl.shaderSource(shader, sourceShader); +gl.compileShader(shader); +</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.9", "compileShader")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glCompileShader.xml", "glCompileShader")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page man OpenGL.</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ée. Si vous souhaitez contribuer eux 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.compileShader")}}</p> + +<h2 id="Voire_aussi">Voire aussi</h2> + +<ul> + <li>{{domxref("WebGLProgram")}}</li> + <li>{{domxref("WebGLShader")}}</li> + <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.createShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.isShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/createbuffer/index.html b/files/fr/web/api/webglrenderingcontext/createbuffer/index.html new file mode 100644 index 0000000000..90ed1bac1e --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/createbuffer/index.html @@ -0,0 +1,77 @@ +--- +title: WebGLRenderingContext.createBuffer() +slug: Web/API/WebGLRenderingContext/createBuffer +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/createBuffer +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong><code>WebGLRenderingContext.createBuffer() </code></strong>de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> crée et initialise un {{domxref ("WebGLBuffer")}} stockant des données telles que des sommets ou des couleurs.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">WebGLBuffer <var>gl</var>.createBuffer(); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<p>Aucun.</p> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Un {{domxref("WebGLBuffer")}} stockant des données telles que des sommets ou des couleurs.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Création_d'un_tampon">Création d'un tampon</h3> + +<pre class="brush: js">var canevas = document.getElementById('canevas'); +var gl = canevas.getContext('webgl'); +var tampon = gl.createBuffer(); +</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.5", "createBuffer")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td> + <p>Définition initiale.</p> + </td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGenBuffers.xml", "glGenBuffers")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td> + <p>Page man de l’API OpenGL (similaire).</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.createBuffer")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li> + <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/createprogram/index.html b/files/fr/web/api/webglrenderingcontext/createprogram/index.html new file mode 100644 index 0000000000..2cf95743c7 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/createprogram/index.html @@ -0,0 +1,87 @@ +--- +title: WebGLRenderingContext.createProgram() +slug: Web/API/WebGLRenderingContext/createProgram +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/createProgram +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <code><strong>WebGLRenderingContext.createProgram()</strong></code> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> crée et initialise un objet {{domxref("WebGLProgram")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">WebGLProgram <var>gl</var>.createProgram(); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<p>Aucun.</p> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Un objet {{domxref("WebGLProgram")}} qui est une combinaison de deux {{domxref("WebGLShader")}}s compilés, constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ceux-ci sont ensuite liés en un programme utilisable.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Création_d'un_programme_WebGL">Création d'un programme WebGL</h3> + +<pre class="brush: js">var programme = gl.createProgram(); + +// Attacher les shaders pré-existants +gl.attachShader(programme, shaderDeSommet); +gl.attachShader(programme, shaderDeFragment); + +gl.linkProgram(programme); + +if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) { + var info = gl.getProgramInfoLog(program); + throw 'Impossible de compiler le programme WebGL. \n\n' + info; +} +</pre> + +<p>Voir {{domxref ("WebGLShader")}} pour plus d'informations sur la création du <code>shaderDeSommet</code> et du <code>shaderDeFragment</code> dans l'exemple ci-dessus.</p> + +<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.9", "createProgram")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glCreateProgram.xml", "glCreateProgram")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page man de l'API OpenGL (similaire).</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.createProgram")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/createshader/index.html b/files/fr/web/api/webglrenderingcontext/createshader/index.html new file mode 100644 index 0000000000..2d6f836232 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/createshader/index.html @@ -0,0 +1,87 @@ +--- +title: WebGLRenderingContext.createShader() +slug: Web/API/WebGLRenderingContext/createShader +tags: + - API + - Graphiques + - Méthode + - Reference + - Shader + - WebGL +translation_of: Web/API/WebGLRenderingContext/createShader +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong>WebGLRenderingContext.createShader() de l'</strong><a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> crée un {{domxref("WebGLShader")}}, qui peut alors être configuré davantage en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}} et {{domxref("WebGLRenderingContext.compileShader()")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">WebGLShader <var><em>gl</em>.</var>createShader<var>(type);</var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>type</code></dt> + <dd>Soit <code>gl.VERTEX_SHADER</code>, soit <code>gl.FRAGMENT_SHADER</code></dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<p>Voir {{domxref("WebGLShader")}} pour l'utilisation et des exemples.</p> + +<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.9", "createShader")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glCreateShader.xml", "glCreateShader")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page man OpenGL.</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.createShader")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLProgram")}}</li> + <li>{{domxref("WebGLShader")}}</li> + <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</li> + <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.createShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.isShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li> + <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/createtexture/index.html b/files/fr/web/api/webglrenderingcontext/createtexture/index.html new file mode 100644 index 0000000000..a2ea8939ab --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/createtexture/index.html @@ -0,0 +1,78 @@ +--- +title: WebGLRenderingContext.createTexture() +slug: Web/API/WebGLRenderingContext/createTexture +tags: + - API + - Méthode + - Reference + - Textures + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/createTexture +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong><code>WebGLRenderingContext.createTexture()</code></strong> de l'API WebGL crée et initialise un objet {{domxref("WebGLTexture")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">WebGLTexture <var>gl</var>.createTexture(); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<p>Aucun.</p> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Un objet {{domxref("WebGLTexture")}} auquel des images peuvent être liées.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Voir aussi le <a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial">tutoriel WebGL</a> sur l'<a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Utilisation de textures en WebGL</a>.</p> + +<h3 id="Création_d'une_texture">Création d'une texture</h3> + +<pre class="brush: js">var canevas = document.getElementById('canevas'); +var gl = canevas.getContext('webgl'); +var texture = gl.createTexture(); +</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.8", "createTexture")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td> + <p>Définition initiale.</p> + </td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGenTextures.xml", "glGenTextures")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page man de l’API OpenGL (similaire).</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.createTexture")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteTexture()")}}</li> + <li>{{domxref("WebGLRenderingContext.isTexture()")}}</li> + <li>{{domxref("WebGLRenderingContext.texImage2D()")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/deletebuffer/index.html b/files/fr/web/api/webglrenderingcontext/deletebuffer/index.html new file mode 100644 index 0000000000..a7bc9b857a --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/deletebuffer/index.html @@ -0,0 +1,79 @@ +--- +title: WebGLRenderingContext.deleteBuffer() +slug: Web/API/WebGLRenderingContext/deleteBuffer +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/deleteBuffer +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong><code>WebGLRenderingContext.deleteBuffer()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> supprime le {{domxref ("WebGLBuffer")}} indiqué. Cette méthode n'a aucun effet si le tampon a déjà été supprimé.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var>gl</var>.deleteBuffer(<em>tampon</em>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt>tampon</dt> + <dd>Un objet {{domxref("WebGLBuffer")}} à supprimer.</dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Aucune.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Suppression_d'un_tampon">Suppression d'un tampon</h3> + +<pre class="brush: js">var canevas = document.getElementById('canevas'); +var gl = canevas.getContext('webgl'); +var tampon = gl.createBuffer(); + +// ... + +gl.deleteBuffer(tampon);</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.5", "deleteBuffer")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glDeleteBuffers.xml", "glDeleteBuffers")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page man de l’API OpenGL (similaire).</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.deleteBuffer")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li> + <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/deleteshader/index.html b/files/fr/web/api/webglrenderingcontext/deleteshader/index.html new file mode 100644 index 0000000000..935c400d56 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/deleteshader/index.html @@ -0,0 +1,72 @@ +--- +title: WebGLRenderingContext.deleteShader() +slug: Web/API/WebGLRenderingContext/deleteShader +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/deleteShader +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong><code>WebGLRenderingContext.deleteShader()</code></strong> de l'API WebGL marque l'objet {{domxref("WebGLShader")}} indiqué pour suppression. Il sera ensuite supprimé dès que le shader ne sera plus utilisé. Cette méthode n'a aucun effet si le shader a déjà été supprimé, et le {{domxref ("WebGLShader")}} est automatiquement marqué pour la suppression lorsqu'il est détruit par le garbage collector.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var>gl</var>.deleteShader(<var>shader</var>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt>shader</dt> + <dd>Un objet {{domxref("WebGLShader")}} à détruire.</dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Aucune.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Suppression_d'un_shader">Suppression d'un shader</h3> + +<pre class="brush: js">gl.deleteShader(shader);</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.9", "deleteShader")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glDeleteShader.xml", "glDeleteShader")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page man de l'API OpenGL (similaire).</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">Le tbleau de compatibilité de cette page est généré à partir de données structurée. 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.deleteShader")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.isShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/drawarrays/index.html b/files/fr/web/api/webglrenderingcontext/drawarrays/index.html new file mode 100644 index 0000000000..7822633a54 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/drawarrays/index.html @@ -0,0 +1,101 @@ +--- +title: WebGLRenderingContext.drawArrays() +slug: Web/API/WebGLRenderingContext/drawArrays +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/drawArrays +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong><code>WebGLRenderingContext.drawArrays()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> dessine des primitives à partir de données tabulaires.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var>gl</var>.drawArrays(<var>mode</var>, <em>premier</em>, <var>compte</var>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>mode</code></dt> + <dd>Un {{domxref ("GLenum")}} indiquant la primitive de type à dessiner. Les valeurs possibles sont : + <ul> + <li><code>gl.POINTS</code> : dessine un seul point ;</li> + <li><code>gl.LINE_STRIP</code> : dessine une ligne droite jusqu'au sommet suivant ;</li> + <li><code>gl.LINE_LOOP</code> : dessine une ligne droite jusqu'au sommet suivant, et relie le dernier sommet au premier ;</li> + <li><code>gl.LINES</code> : dessine une ligne entre une paire de sommets ;</li> + <li><code><a href="https://en.wikipedia.org/wiki/Triangle_strip">gl.TRIANGLE_STRIP</a></code></li> + <li><code><a href="https://en.wikipedia.org/wiki/Triangle_fan">gl.TRIANGLE_FAN</a></code></li> + <li><code>gl.TRIANGLES</code> : dessine un triangle pour un groupe de trois sommets.</li> + </ul> + </dd> + <dt><code>premier</code></dt> + <dd>Un {{domxref("GLint")}} indiquant de l'indice de départ dans le tableau des points des vecteurs.</dd> + <dt><code>compte</code></dt> + <dd>Un {{domxref("GLsizei")}} indiquant le nombre d'indices à dessiner.</dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>None.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<ul> + <li>Si <code>mode</code> n'est pas l'une des valeurs acceptables, une erreur <code>gl.INVALID_ENUM</code> est déclenchée.</li> + <li>Si <code>premier</code> ou <code>compte</code> sont négatifs, une erreur <code>gl.INVALID_VALUE</code> est déclenchée.</li> + <li>Si <code>gl.CURRENT_PROGRAM</code> est {{jsxref("null")}}, une erreur <code>gl.INVALID_OPERATION</code> est déclenchée.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">gl.drawArrays(gl.POINTS, 0, 8); +</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.11", "drawArrays")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td> + <p> </p> + Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glDrawArrays.xml", "glDrawArrays")}}</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.drawArrays")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.drawElements()")}}</li> + <li>{{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}}</li> + <li>{{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}</li> + <li>{{domxref("ANGLE_instanced_arrays.vertexAttribDivisorANGLE()", "ext.vertexAttribDivisorANGLE()")}}</li> + <li>{{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}</li> + <li>{{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}</li> + <li>{{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.html b/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.html new file mode 100644 index 0000000000..c9fca5e6f6 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.html @@ -0,0 +1,123 @@ +--- +title: WebGLRenderingContext.enableVertexAttribArray() +slug: Web/API/WebGLRenderingContext/enableVertexAttribArray +tags: + - 3D + - API + - API WebGL + - Attributs des Sommets + - Graphiques + - Méthode + - Reference + - Tableau des Attributs + - WebGL + - WebGLRenderingContext + - enableVertexAttribArray + - shader de sommet + - sommet +translation_of: Web/API/WebGLRenderingContext/enableVertexAttribArray +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode {{domxref ("WebGLRenderingContext")}} <strong><code>enableVertexAttribArray()</code> -</strong> qui fait partie de l'API WebGL - active le tableau générique des attributs de sommet à l'indice spécifié dans la liste des tableaux d'attributs.</p> + +<div class="note"> +<p>Vous pouvez désactiver le tableau d'attributs en appelant {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}.</p> +</div> + +<p>Dans WebGL, les valeurs s'appliquant à un sommet particulier sont stockées dans des attributs. Ceux-ci ne sont disponibles que pour le code JavaScript et le shader de sommet. Les attributs sont référencés par un numéro d'indice dans la liste des attributs gérés par la GPU. Certains indices d'attributs de sommet peuvent avoir des buts prédéfinis, suivant la plate-forme et/ou la GPU. D'autres sont affectés par la couche WebGL lorsque vous créez les attributs.</p> + +<p>De toute façon, puisque les attributs ne peuvent pas être utilisés sauf s'ils sont activés, et ils sont activés par défaut, vous devez appeler <code>enableVertexAttribArray()</code> pour activer les attributs individuels, afin qu'ils puissent être utilisés. Ceci fait, d'autres méthodes peuvent être utilisées pour accéder à l'attribut, y compris {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}, {{domxref("WebGLRenderingContext.vertexAttrib", "vertexAttrib*()")}}, et {{domxref("WebGLRenderingContext.getVertexAttrib"," getVertexAttrib()")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var>gl</var>.enableVertexAttribArray(<var>indice</var>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>indice</code></dt> + <dd>Un {{domxref("GLuint")}} indiquant le numéro d'indice identifiant de façon unique l'attribut de sommet à activer. Si vous connaissez le nom de l'attribut mais pas son indice, vous pouvez obtenir l'indice en appelant {{domxref ("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.</dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p><code>undefined</code>.</p> + +<h3 id="Erreurs">Erreurs</h3> + +<p>Pour vérifier d'éventuelles erreurs après l'appel à <code>enableVertexAttribArray()</code>, appelez {{domxref("WebGLRenderingContext.getError", "getError()")}}.</p> + +<dl> + <dt><code>WebGLRenderingContext.INVALID_VALUE</code></dt> + <dd>L'<code>indice</code> spécifié est invalide, c'est-à-dire qu'il est supérieur ou égal au nombre maximal d'entrées autorisées dans la liste des attributs de sommet du contexte, comme indiqué par la valeur de <code>WebGLRenderingContext.MAX_VERTEX_ATTRIBS</code>.</dd> +</dl> + +<h2 id="Exemple">Exemple</h2> + +<p>Ce code — un extrait de l'exemple complet <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example">Un exemple d'animation 2D WebGL de base</a> — montre l'utilisation de <code>enableVertexArray()</code> pour activer l'attribut qui sera utilisé par la couche WebGL pour passer des sommets individuels depuis le tampon des sommets à la fonction shader de sommet.</p> + +<pre class="brush: js highlight[6]">gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); + +aVertexPosition = + gl.getAttribLocation(programmeShader, "aVertexPosition"); + +gl.enableVertexAttribArray(aVertexPosition); +gl.vertexAttribPointer(aVertexPosition, vertexNumComponents, + gl.FLOAT, false, 0, 0); + +gl.drawArrays(gl.TRIANGLES, 0, vertexCount);</pre> + +<div class="callout-box">Cet extrait de code provient de <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene">la fonction animateScene()</a> dans "Un exemple d'animation WebGL 2D de base". Voir cet article pour l'exemple complet et pour voir l'animation résultante en action.</div> + +<p> </p> + +<p>Ce code définit le tampon des sommets qui sera utilisé pour dessiner les triangles de la forme en appelant {{domxref("WebGLRenderingContext.bindBuffer", "bindBuffer()")}}. Ensuite, l'indice de l'attribut de position des sommets est obtenu à partir du programme shader en appelant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.</p> + +<p>Avec l'indice de l'attribut de position des sommets maintenant disponible dans <code>aVertexPosition</code>, nous appelons <code>enableVertexAttribArray()</code> pour activer l'attribut de position afin qu'il puisse être utilisé par le programme shader (en particulier, par le shader de sommet).</p> + +<p>Le tampon des sommets est alors lié à l'attribut <code>aVertexPosition</code> en appelant {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}. Cette étape n'est pas évidente, puisque cette liaison est presque un effet de biais. Mais cela a pour résultat qu'un accès à <code>aVertexPosition</code> récupére désormais des données à partir du tampon des sommets.</p> + +<p>Avec l'association définie entre le tampon des sommets de notre forme et l'attribut <code>aVertexPosition</code> utilisé pour fournir les sommets un par un dans le shader de sommet, nous sommes prêts à dessiner la forme en appelant {{domxref ("WebGLRenderingContext.drawArrays", "drawArrays()")}}.</p> + +<p> </p> + +<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", "enableVertexAttribArray")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glEnableVertexAttribArray.xml", "glEnableVertexAttribArray")}}</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.enableVertexAttribArray")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr-FR/docs/Web/API/WebGL_API/Data">Données en WebGL</a></li> + <li><a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">Ajout de contenu 2D à un contexte WebGL</a></li> + <li><a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example">Un exemple d'animation WebGL 2D de base</a></li> + <li>{{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/generatemipmap/index.html b/files/fr/web/api/webglrenderingcontext/generatemipmap/index.html new file mode 100644 index 0000000000..cd07f92c21 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/generatemipmap/index.html @@ -0,0 +1,93 @@ +--- +title: WebGLRenderingContext.generateMipmap() +slug: Web/API/WebGLRenderingContext/generateMipmap +tags: + - API + - Méthode + - Reference + - Textures + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/generateMipmap +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong><code>WebGLRenderingContext.generateMipmap()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> génère un ensemble de mipmaps pour un objet {{domxref("WebGLTexture")}}.</p> + +<p>Les mipmaps sont utilisées pour créer de la distance avec des objets. Une mipmap de haute résolution est utilisée pour les objets qui sont proches, et une mipmap de résolution inférieure est utilisée pour les objets qui sont plus éloignés. Elles commencent avec la résolution de l'image de texture, puis la résolution est divisée par deux jusqu'à ce qu'une image de texture de dimension 1x1 soit créée.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var>gl</var>.generateMipmap(<em>cible</em>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt>cible</dt> + <dd>Un {{domxref("GLenum")}} indiquant le point de liaison (cible) de la texture active dont les mipmaps seront générées. Valeurs possibles : + <ul> + <li><code>gl.TEXTURE_2D</code> : une texture bi-dimensionnelle.</li> + <li><code>gl.TEXTURE_CUBE_MAP</code> : une texture appliquée sur un cube.</li> + <li>Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : + <ul> + <li><code>gl.TEXTURE_3D</code> : une texture tri-dimensionnelle.</li> + <li><code>gl.TEXTURE_2D_ARRAY</code> : une texture bi-dimensionnelle en tableau.</li> + </ul> + </li> + </ul> + </dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Aucune.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">gl.generateMipmap(gl.TEXTURE_2D); +</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.8", "generateMipmap")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale pour WebGL.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGenerateMipmap.xml", "glGenerateMipmap")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page man de l'API (similaire) d'OpenGL ES 2.0.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glGenerateMipmap.xhtml", "glGenerateMipmap")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>Page man de l'API (similaire) d'OpenGL ES 3.0<br> + Ajoute : <code>gl.TEXTURE_3D</code> et <code>gl.TEXTURE_2D_ARRAY</code></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.generateMipmap")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li> + <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li> + <li>{{domxref("WebGLRenderingContext.getTexParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}</li> + <li>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/getattriblocation/index.html b/files/fr/web/api/webglrenderingcontext/getattriblocation/index.html new file mode 100644 index 0000000000..a5977cc61f --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/getattriblocation/index.html @@ -0,0 +1,71 @@ +--- +title: WebGLRenderingContext.getAttribLocation() +slug: Web/API/WebGLRenderingContext/getAttribLocation +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/getAttribLocation +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong><code>WebGLRenderingContext.getAttribLocation()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> retourne l'emplacement d'une variable d'attribut dans le {{domxref("WebGLProgram")}} indiqué.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">GLint <var>gl</var>.getAttribLocation(<var>programme</var>, <var>nom</var>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt>programme</dt> + <dd>Un {{domxref("WebGLProgram")}} contenant la variable d'attribut.</dd> + <dt>nom</dt> + <dd>Un {{domxref("DOMString")}} indiquant le nom de la variable d'attribut dont l'emplacement est à retourner.</dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Un nombre {{domxref("GLint")}} indiquant l'emplacement du nom de la variable si trouvé. Retourne -1 sinon.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">gl.getAttribLocation(programme, 'vColor'); +</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", "getAttribLocation")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGetAttribLocation.xml", "glGetAttribLocation")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page principale de l'API OpenGL.</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.getAttribLocation")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/geterror/index.html b/files/fr/web/api/webglrenderingcontext/geterror/index.html new file mode 100644 index 0000000000..aca512ff06 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/geterror/index.html @@ -0,0 +1,107 @@ +--- +title: WebGLRenderingContext.getError() +slug: Web/API/WebGLRenderingContext/getError +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/getError +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong><code>WebGLRenderingContext.getError()</code></strong> de l'<a href="/fr-Fr/docs/Web/API/WebGL_API">API WebGL</a> retourne des informations d'erreur.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">GLenum <var>gl</var>.getError(); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<p>Aucun.</p> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Constante</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>gl.NO_ERROR</code></td> + <td>Aucune erreur n'a été enregistrée. La valeur de cette constante est 0.</td> + </tr> + <tr> + <td><code>gl.INVALID_ENUM</code></td> + <td>Une valeur non acceptable a été spécifiée pour un argument énuméré. La commande est ignorée et l'indicateur d'erreur est positionné.</td> + </tr> + <tr> + <td><code>gl.INVALID_VALUE</code></td> + <td>Un argument numérique est hors de sa plage. La commande est ignorée et l'indicateur d'erreur est positionné.</td> + </tr> + <tr> + <td><code>gl.INVALID_OPERATION</code></td> + <td>La commande indiquée n'est pas permise dans l'état courant. La commande est ignorée et l'indicateur d'erreur est positionné.</td> + </tr> + <tr> + <td><code>gl.INVALID_FRAMEBUFFER_OPERATION</code></td> + <td>Le tampon d'images actuellement lié n'est pas complet lors d'une tentative de rendu ou de relecture.</td> + </tr> + <tr> + <td><code>gl.OUT_OF_MEMORY</code></td> + <td>Plus assez de mémoire restante pour exécuter la commande.</td> + </tr> + <tr> + <td><code>gl.CONTEXT_LOST_WEBGL</code></td> + <td>Si le contexte WebGL est perdu, cette erreur est retournée lors du premier appel à <code>getError</code>. Après cela et jusqu'à ce que le contexte soit restauré, elle retourne <code>gl.NO_ERROR</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">gl.getError(); // gl.NO_ERROR (0) + +gl.enable(gl.MACHINTRUC); +gl.getError(); // gl.INVALID_ENUM; +</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.3", "getError")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGetError.xml", "glGetError")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page man de l'API OpenGL.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">Le tableau de compatibilité dans 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.getError")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext")}}</li> + <li>{{domxref("WebGLContextEvent")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.html b/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.html new file mode 100644 index 0000000000..8d5b2d3599 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.html @@ -0,0 +1,77 @@ +--- +title: WebGLRenderingContext.getShaderParameter() +slug: Web/API/WebGLRenderingContext/getShaderParameter +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/getShaderParameter +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <code>WebGLRenderingContext.getShaderParameter()</code> de l'API WebGL retourne des informations sur le shader donné.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">quelconque <var>gl</var>.getShaderParameter(<var>shader</var>, <var>nomp</var>); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt>shader</dt> + <dd>Un {{domxref("WebGLShader")}} depuis lequel obtenir une information de paramètre.</dd> + <dt>nomp</dt> + <dd>Un {{domxref("Glenum")}} indiquant l'information à retrouver. Valeurs possibles : + <ul> + <li><code>gl.DELETE_STATUS</code> : retourne un {{domxref("GLboolean")}} indicating si le shader est marqué pour suppression ou non.</li> + <li><code>gl.COMPILE_STATUS</code> : retourne un {{domxref("GLboolean")}} indiquant si la dernière compilation du shader a réussi ou non.</li> + <li><code>gl.SHADER_TYPE</code> : retourne un {{domxref("GLenum")}} indiquant si le shader est un objet shader de sommets (<code>gl.VERTEX_SHADER</code>) ou shader de fragment (<code>gl.FRAGMENT_SHADER</code>).</li> + </ul> + </dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Retourne l'information de shader demandée (telle qu'indiquée par <code>nomp</code>).</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">gl.getShaderParameter(shader, gl.SHADER_TYPE); +</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.9", "getShaderParameter")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGetShaderiv.xml", "glGetShaderiv")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page man de l'API OpenGL (similaire).</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">Le tableau de compatibilité dans 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.getShaderParameter")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/gettexparameter/index.html b/files/fr/web/api/webglrenderingcontext/gettexparameter/index.html new file mode 100644 index 0000000000..ecce9e54ee --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/gettexparameter/index.html @@ -0,0 +1,201 @@ +--- +title: WebGLRenderingContext.getTexParameter() +slug: Web/API/WebGLRenderingContext/getTexParameter +tags: + - API + - Méthode + - Reference + - Textures + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/getTexParameter +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong><code>WebGLRenderingContext.getTexParameter()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> retourne des informations concernant la texture indiquée.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">quelconque <var>gl</var>.getTexParameter(<var>cible</var>, <var>nomp</var>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt>cible</dt> + <dd>Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : + <ul> + <li><code>gl.TEXTURE_2D</code> : une texture bi-dimensionnelle.</li> + <li><code>gl.TEXTURE_CUBE_MAP</code> : une texture appliquée à un cube.</li> + <li>Lorsqu' un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : + <ul> + <li><code>gl.TEXTURE_3D</code> : une texture tri-dimensionnelle.</li> + <li><code>gl.TEXTURE_2D_ARRAY</code> : une texture bi-dimensionnelle en tableau.</li> + </ul> + </li> + </ul> + </dd> + <dt>nomp</dt> + <dd>Un {{domxref("Glenum")}} indiquant l'information à obtenir. Valeurs possibles : + <table class="standard-table"> + <thead> + <tr> + <th scope="col">nomp</th> + <th scope="col">Type retourné</th> + <th scope="col">Description</th> + <th scope="col">Valeurs retournées possibles</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4">Disponible dans un contexte WebGL 1</th> + </tr> + <tr> + <td><code>gl.TEXTURE_MAG_FILTER</code></td> + <td>{{domxref("GLenum")}}</td> + <td>Filtre de grossissement de texture</td> + <td><code>gl.LINEAR</code> (valeur par défaut), <code>gl.NEAREST</code>.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_MIN_FILTER</code></td> + <td>{{domxref("GLenum")}}</td> + <td>Filtre de réduction de texture</td> + <td><code>gl.LINEAR</code>, <code>gl.NEAREST</code>, <code>gl.NEAREST_MIPMAP_NEAREST</code>, <code>gl.LINEAR_MIPMAP_NEAREST</code>, <code>gl.NEAREST</code>_MIPMAP_LINEAR (valeur par défaut), <code>gl.LINEAR_MIPMAP_LINEAR</code>.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_WRAP_S</code></td> + <td>{{domxref("GLenum")}}</td> + <td>Fonction d'emballage pour la coordonnée de texture <code>s</code></td> + <td><code>gl.REPEAT</code> (valeur par défaut), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_WRAP_T</code></td> + <td>{{domxref("GLenum")}}</td> + <td>Fonction d'emballage pour la coordonnée de texture <code>t</code></td> + <td><code>gl.REPEAT</code> (valeur par défaut), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td> + </tr> + <tr> + <th colspan="4">Disponible en outre lorsque l'extension {{domxref("EXT_texture_filter_anisotropic")}} est utilisée</th> + </tr> + <tr> + <td><code>ext.TEXTURE_MAX_ANISOTROPY_EXT</code></td> + <td>{{domxref("GLfloat")}}</td> + <td>Anisotropie maximum pour une texture</td> + <td>Toutes valeurs float.</td> + </tr> + <tr> + <th colspan="4">Disponible en outre lorsqu'un contexte WebGL 2 est utilisé</th> + </tr> + <tr> + <td><code>gl.TEXTURE_BASE_LEVEL</code></td> + <td>{{domxref("GLint")}}</td> + <td>Niveau de mipmap de texture</td> + <td>Toutes valeurs int.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_COMPARE_FUNC</code></td> + <td>{{domxref("GLenum")}}</td> + <td>Fonction de comparaison</td> + <td><code>gl.LEQUAL</code> (valeurs par défaut), <code>gl.GEQUAL</code>, <code>gl.LESS</code>, <code>gl.GREATER</code>, <code>gl.EQUAL</code>, <code>gl.NOTEQUAL</code>, <code>gl.ALWAYS</code>, <code>gl.NEVER</code>.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_COMPARE_MODE</code></td> + <td>{{domxref("GLenum")}}</td> + <td>Mode de comparaison de texture</td> + <td><code>gl.NONE</code> (valeur par défaut), <code>gl.COMPARE_REF_TO_TEXTURE</code>.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_IMMUTABLE_FORMAT</code></td> + <td>{{domxref("GLboolean")}}</td> + <td>Immuabilité du format et de la taille de la texture</td> + <td>true ou false.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_IMMUTABLE_LEVELS</code></td> + <td>{{domxref("GLuint")}}</td> + <td>?</td> + <td>Toutes valeurs uint.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_MAX_LEVEL</code></td> + <td>{{domxref("GLint")}}</td> + <td>Niveau maximum de mipmap de texture en tableau</td> + <td>Toutes valeurs int.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_MAX_LOD</code></td> + <td>{{domxref("GLfloat")}}</td> + <td>Valeur de niveau-de-détail maximum de texture</td> + <td>Toutes valeurs float.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_MIN_LOD</code></td> + <td>{{domxref("GLfloat")}}</td> + <td>Valeur de niveau-de-détail minimum de texture</td> + <td>Toutes valeurs float.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_WRAP_R</code></td> + <td>{{domxref("GLenum")}}</td> + <td>Fonction d'emballage pour la coordonnée de texture <code>r</code></td> + <td><code>gl.REPEAT</code> (valeur par défaut), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Retourne l'information de texture demandée (telle qu'indiquée par <code>nomp</code>). Si une erreur se produit, {{jsxref("null")}} est retourné.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">gl.getTexParameter(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER); +</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.8", "getTexParameter")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale pour WebGL.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGetTexParameter.xml", "glGetTexParameter")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page man de l'API OpenGL ES 2.0 (similaire).</td> + </tr> + <tr> + <td>{{SpecName('WebGL2', "#3.7.6", "getTexParameter")}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td>Définition mise à jour pour WebGL.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glGetTexParameter.xhtml", "glGetTexParameter")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>Page man de l'API OpenGL ES 3.0 (similaire).</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.getTexParameter")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}</li> + <li>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}</li> + <li>{{domxref("EXT_texture_filter_anisotropic")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.html b/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.html new file mode 100644 index 0000000000..17eeec89cc --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.html @@ -0,0 +1,142 @@ +--- +title: WebGLRenderingContext.getUniformLocation() +slug: Web/API/WebGLRenderingContext/getUniformLocation +tags: + - API + - Méthode + - Reference + - Uniform Variables + - Uniforms + - Variables + - Variables en WebGL + - WebGL + - WebGLRenderingContext + - getUniformLocation +translation_of: Web/API/WebGLRenderingContext/getUniformLocation +--- +<div>{{APIRef("WebGL")}}</div> + +<div>Faisant partie de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a>, la méthode {{domxref("WebGLRenderingContext")}} <code><strong>getUniformLocation()</strong></code> retourne l'emplacement d'une variable <strong>uniform</strong> particulière appartenant au {{domxref ("WebGLProgram")}} indiqué. La variable uniform est retournée sous la forme d'un objet {{domxref("WebGLUniformLocation")}}, qui est un identificateur opaque utilisé pour indiquer où se trouve la variable uniform dans la mémoire de la GPU.</div> + +<div> </div> + +<div>Une fois que vous avez l'emplacement de l'uniform, vous pouvez accéder à l'uniform lui-même en utilisant l'une des autres méthodes d'accès uniform, en passant l'emplacement de l'uniform comme l'une des entrées :</div> + +<div> </div> + +<dl> + <dt><span class="seoSummary">{{domxref ("WebGLRenderingContext.getUniform", "getUniform()")}}</span></dt> + <dd><span class="seoSummary">Retourne la valeur de l'uniform à l'emplacement indiqué.</span></dd> + <dt><br> + <span class="seoSummary">{{domxref ("WebGLRenderingContext.uniform", "uniform[1234] [fi] [v]()")}}</span></dt> + <dd><span class="seoSummary">Affecte à la valeur de l'uniform la valeur spécifiée, qui peut être un nombre flottant ou entier unique, ou un vecteur de 2 à 4 composantes spécifié soit comme une liste de valeurs, soit comme un {{jsxref ("Float32Array")}} ou un {{ jsxref ("Int32Array")}}.</span></dd> + <dt><br> + <span class="seoSummary">{{domxref ("WebGLRenderingContext.uniformMatrix", "uniformMatrix[234][fv]()")}}</span></dt> + <dd><span class="seoSummary">Affecte à la valeur de l'uniforme la matrice spécifiée, éventuellement avec transposition. La valeur est représentée comme une suite de valeurs GLfloat ou comme un Float32Array.</span></dd> +</dl> + +<p><br> + <span class="seoSummary">L'uniform lui-même est déclaré dans le programme shader en utilisant GLSL.</span></p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>WebGLUniformLocation</em> = <em>WebGLRenderingContext</em>.getUniformLocation(<em>programme</em>, <em>nom</em>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>programme</code></dt> + <dd>Le {{domxref ("WebGLProgram")}} dans lequel localiser la variable uniform indiquée.</dd> + <dt><code>nom</code></dt> + <dd>Une {{domxref ("DOMString")}} indiquant le nom de la variable uniform dont l'emplacement doit être retourné. Le nom ne peut contenir aucun espace, et vous ne pouvez pas utiliser cette fonction pour obtenir l'emplacement d'aucun uniform commençant par la chaîne réservée <code>"gl_"</code>, du fait que ceux-ci sont internes à la couche WebGL.</dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Une valeur {{domxref ("WebGLUniformLocation")}} indiquant l'emplacement de la variable nommée, si elle existe. Si la variable indiquée n'existe pas, {{jsxref("null")}} est retourné à la place.</p> + +<p><code>WebGLUniformLocation</code> est une valeur opaque utilisée pour identifier de manière unique l'emplacement dans la mémoire de la GPU auquel se trouve la variable uniform. Avec cette valeur en main, vous pouvez appeler d'autres méthodes WebGL pour accéder à la valeur de la variable uniform.</p> + +<div class="note"> +<p>Le type <code>WebGLUniformLocation</code> est compatible avec le type <code>GLint</code> pour indiquer l'indice ou l'emplacement d'un attribut uniform.</p> +</div> + +<h3 id="Erreurs">Erreurs</h3> + +<p>Les erreurs suivantes peuvent se produire ; pour vérifier les erreurs après le retour de getUniformLocation(), appelez {{domxref ("WebGLRenderingContext.getError", "getError()")}}.</p> + +<dl> + <dt>GL_INVALID_VALUE</dt> + <dd>Le paramètre <code>programme</code> n'est pas une valeur ou un objet généré par WebGL.</dd> + <dt>GL_INVALID_OPERATION</dt> + <dd>Le paramètre <code>programme</code> ne correspond pas à un programme GLSL généré par WebGL, ou le programme indiqué n'a pas été lié avec succès.</dd> +</dl> + +<h2 id="Exemple">Exemple</h2> + +<p>Dans cet exemple, extrait de la méthode <code>animateScene()</code> dans l'article <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene">Un exemple d'animation 2D WebGL de base</a>, retrouve les emplacements de trois uniforms du programme d'ombrage, puis définit la valeur de chacun des trois uniforms.</p> + +<pre class="brush: js highlight[3-8]">gl.useProgram(programmeShader); + +uScalingFactor = + gl.getUniformLocation(programmeShader, "uScalingFactor"); +uGlobalColor = + gl.getUniformLocation(programmeShader, "uGlobalColor"); +uRotationVector = + gl.getUniformLocation(programmeShader, "uRotationVector") + +gl.uniform2fv(uScalingFactor, currentScale); +gl.uniform2fv(uRotationVector, currentRotation); +gl.uniform4fv(uGlobalColor, [0.1, 0.7, 0.2, 1.0]);</pre> + +<div class="callout-box">Cet extrait de code provient de <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene">la fonction animateScene()</a> dans "Un exemple d'animation WebGL 2D de base". Voir cet article pour l'exemple complet et pour voir l'animation résultante en action.</div> + +<p>Après avoir défini le programme d'ombrage en cours comme <code>programmeShader</code>, ce code récupère les trois uniforms <code>"uScalingFactor"</code>, <code>"uGlobalColor"</code> et <code>"uRotationVector"</code>, en appelant <code>getUniformLocation()</code> une fois pour chaque uniform.</p> + +<p>Ensuite, les valeurs des trois uniforms sont définies :</p> + +<ul> + <li>L'uniform <code>uScalingFactor</code> - un sommet à 2 composantes - reçoit les facteurs d'échelle horizontale et verticale à partir de la variable <code>currentScale</code>.</li> + <li>L'uniform <code>uRotationVector</code> reçoit le contenu de la variable <code>currentRotation</code>. C'est également un sommet à deux composantes.</li> + <li>Enfin, l'uniform <code>uGlobalColor</code> reçoit la couleur <code>[0.1, 0.7, 0.2, 1.0]</code>, les composants de ce vecteur à quatre composants représentant respectivement les valeurs rouge, vert, bleu et alpha.</li> +</ul> + +<p>Cela fait, la prochaine fois que les fonctions d'ombrage seront appelées, leurs propres variables nommées <code>uScalingFactor</code>, <code>uGlobalColor</code> et <code>uRotationVector</code> auront toutes les valeurs fournies par le code JavaScript.</p> + +<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", "getUniformLocation")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td> + <p>Définition initiale.</p> + </td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glGetUniformLocation.xml", "glGetUniformLocation")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page man de l’API OpenGL.</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.getUniformLocation")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.getAttribLocation()")}}</li> + <li>{{domxref("WebGLUniformLocation")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/index.html b/files/fr/web/api/webglrenderingcontext/index.html new file mode 100644 index 0000000000..e44f406e7c --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/index.html @@ -0,0 +1,369 @@ +--- +title: WebGLRenderingContext +slug: Web/API/WebGLRenderingContext +tags: + - NeedsTranslation + - TopicStub + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext +--- +<div>{{APIRef("WebGL")}}</div> + +<div>L'interface <strong>WebGLRenderingContext</strong> fournit le contexte de rendu OpenGL ES 2.0 pour le dessin d'une suface dans un élément HTML {{HTMLElement("canvas")}}<strong>.</strong></div> + +<div> </div> + +<p>Pour obtenir une instance de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <code><canvas></code>, en spécifiant "webgl" en paramètre :</p> + +<pre class="brush: js">var canvas = document.getElementById('myCanvas'); +var gl = canvas.getContext('webgl'); +</pre> + +<p>Une fois que avez le contexte de rendu WebGL, vous pouvez dessiner à l'intérieur.</p> + +<p>Le <a href="/fr/docs/Web/API/WebGL_API/Tutorial" title="Tutoriel WebGL">tutoriel WebGL</a> contient plus d'informations, d'exemples, et de ressources sur comment débuter en WebGL.</p> + +<h2 id="Constants">Constants</h2> + +<p>See the <a href="/en-US/docs/Web/API/WebGL_API/Constants">WebGL constants</a> page.</p> + +<h2 id="The_WebGL_context">The WebGL context</h2> + +<p>The following properties and methods provide general information and functionality to deal with the WebGL context:</p> + +<dl> + <dt>{{domxref("WebGLRenderingContext.canvas")}}</dt> + <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd> + <dt>{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}</dt> + <dd> + <p>Pushes frames back to the original {{domxref("HTMLCanvasElement")}}, if the context is not directly fixed to a specific canvas.</p> + </dd> + <dt>{{domxref("WebGLRenderingContext.drawingBufferWidth")}}</dt> + <dd>The read-only width of the current drawing buffer. Should match the width of the canvas element associated with this context.</dd> + <dt>{{domxref("WebGLRenderingContext.drawingBufferHeight")}}</dt> + <dd>The read-only height of the current drawing buffer. Should match the height of the canvas element associated with this context.</dd> + <dt>{{domxref("WebGLRenderingContext.getContextAttributes()")}}</dt> + <dd>Returns a <code>WebGLContextAttributes</code> object that contains the actual context parameters. Might return {{jsxref("null")}}, if the context is lost.</dd> + <dt>{{domxref("WebGLRenderingContext.isContextLost()")}}</dt> + <dd>Returns <code>true</code> if the context is lost, otherwise returns <code>false</code>.</dd> +</dl> + +<h2 id="Viewing_and_clipping">Viewing and clipping</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.scissor()")}}</dt> + <dd>Defines the scissor box.</dd> + <dt>{{domxref("WebGLRenderingContext.viewport()")}}</dt> + <dd>Sets the viewport.</dd> +</dl> + +<h2 id="State_information">State information</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.activeTexture()")}}</dt> + <dd>Selects the active texture unit.</dd> + <dt>{{domxref("WebGLRenderingContext.blendColor()")}}</dt> + <dd>Sets the source and destination blending factors.</dd> + <dt>{{domxref("WebGLRenderingContext.blendEquation()")}}</dt> + <dd>Sets both the RGB blend equation and alpha blend equation to a single equation.</dd> + <dt>{{domxref("WebGLRenderingContext.blendEquationSeparate()")}}</dt> + <dd>Sets the RGB blend equation and alpha blend equation separately.</dd> + <dt>{{domxref("WebGLRenderingContext.blendFunc()")}}</dt> + <dd>Defines which function is used for blending pixel arithmetic.</dd> + <dt>{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}</dt> + <dd>Defines which function is used for blending pixel arithmetic for RGB and alpha components separately.</dd> + <dt>{{domxref("WebGLRenderingContext.clearColor()")}}</dt> + <dd>Specifies the color values used when clearing color buffers.</dd> + <dt>{{domxref("WebGLRenderingContext.clearDepth()")}}</dt> + <dd>Specifies the depth value used when clearing the depth buffer.</dd> + <dt>{{domxref("WebGLRenderingContext.clearStencil()")}}</dt> + <dd>Specifies the stencil value used when clearing the stencil buffer.</dd> + <dt>{{domxref("WebGLRenderingContext.colorMask()")}}</dt> + <dd>Sets which color components to enable or to disable when drawing or rendering to a {{domxref("WebGLFramebuffer")}}.</dd> + <dt>{{domxref("WebGLRenderingContext.cullFace()")}}</dt> + <dd>Specifies whether or not front- and/or back-facing polygons can be culled.</dd> + <dt>{{domxref("WebGLRenderingContext.depthFunc()")}}</dt> + <dd>Specifies a function that compares incoming pixel depth to the current depth buffer value.</dd> + <dt>{{domxref("WebGLRenderingContext.depthMask()")}}</dt> + <dd>Sets whether writing into the depth buffer is enabled or disabled.</dd> + <dt>{{domxref("WebGLRenderingContext.depthRange()")}}</dt> + <dd>Specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.</dd> + <dt>{{domxref("WebGLRenderingContext.disable()")}}</dt> + <dd>Disables specific WebGL capabilities for this context.</dd> + <dt>{{domxref("WebGLRenderingContext.enable()")}}</dt> + <dd>Enables specific WebGL capabilities for this context.</dd> + <dt>{{domxref("WebGLRenderingContext.frontFace()")}}</dt> + <dd>Specifies whether polygons are front- or back-facing by setting a winding orientation.</dd> + <dt>{{domxref("WebGLRenderingContext.getParameter()")}}</dt> + <dd>Returns a value for the passed parameter name.</dd> + <dt>{{domxref("WebGLRenderingContext.getError()")}}</dt> + <dd>Returns error information.</dd> + <dt>{{domxref("WebGLRenderingContext.hint()")}}</dt> + <dd>Specifies hints for certain behaviors. The interpretation of these hints depend on the implementation.</dd> + <dt>{{domxref("WebGLRenderingContext.isEnabled()")}}</dt> + <dd>Tests whether a specific WebGL capability is enabled or not for this context.</dd> + <dt>{{domxref("WebGLRenderingContext.lineWidth()")}}</dt> + <dd>Sets the line width of rasterized lines.</dd> + <dt>{{domxref("WebGLRenderingContext.pixelStorei()")}}</dt> + <dd>Specifies the pixel storage modes</dd> + <dt>{{domxref("WebGLRenderingContext.polygonOffset()")}}</dt> + <dd>Specifies the scale factors and units to calculate depth values.</dd> + <dt>{{domxref("WebGLRenderingContext.sampleCoverage()")}}</dt> + <dd>Specifies multi-sample coverage parameters for anti-aliasing effects.</dd> + <dt>{{domxref("WebGLRenderingContext.stencilFunc()")}}</dt> + <dd>Sets the both front and back function and reference value for stencil testing.</dd> + <dt>{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}</dt> + <dd>Sets the front and/or back function and reference value for stencil testing.</dd> + <dt>{{domxref("WebGLRenderingContext.stencilMask()")}}</dt> + <dd>Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.</dd> + <dt>{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}</dt> + <dd>Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.</dd> + <dt>{{domxref("WebGLRenderingContext.stencilOp()")}}</dt> + <dd>Sets both the front and back-facing stencil test actions.</dd> + <dt>{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}</dt> + <dd>Sets the front and/or back-facing stencil test actions.</dd> +</dl> + +<h2 id="Buffers">Buffers</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.bindBuffer()")}}</dt> + <dd>Binds a <code>WebGLBuffer</code> object to a given target.</dd> + <dt>{{domxref("WebGLRenderingContext.bufferData()")}}</dt> + <dd>Updates buffer data.</dd> + <dt>{{domxref("WebGLRenderingContext.bufferSubData()")}}</dt> + <dd>Updates buffer data starting at a passed offset.</dd> + <dt>{{domxref("WebGLRenderingContext.createBuffer()")}}</dt> + <dd>Creates a <code>WebGLBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</dt> + <dd>Deletes a <code>WebGLBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.getBufferParameter()")}}</dt> + <dd>Returns information about the buffer.</dd> + <dt>{{domxref("WebGLRenderingContext.isBuffer()")}}</dt> + <dd>Returns a Boolean indicating if the passed buffer is valid.</dd> +</dl> + +<h2 id="Framebuffers">Framebuffers</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</dt> + <dd>Binds a <code>WebGLFrameBuffer</code> object to a given target.</dd> + <dt>{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}</dt> + <dd>Returns the status of the framebuffer.</dd> + <dt>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</dt> + <dd>Creates a <code>WebGLFrameBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</dt> + <dd>Deletes a <code>WebGLFrameBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}</dt> + <dd>Attaches a <code>WebGLRenderingBuffer</code> object to a <code>WebGLFrameBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}</dt> + <dd>Attaches a textures image to a <code>WebGLFrameBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}</dt> + <dd>Returns information about the framebuffer.</dd> + <dt>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</dt> + <dd>Returns a Boolean indicating if the passed <code>WebGLFrameBuffer</code> object is valid.</dd> + <dt>{{domxref("WebGLRenderingContext.readPixels()")}}</dt> + <dd>Reads a block of pixels from the <code>WebGLFrameBuffer</code>.</dd> +</dl> + +<h2 id="Renderbuffers">Renderbuffers</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}</dt> + <dd>Binds a <code>WebGLRenderBuffer</code> object to a given target.</dd> + <dt>{{domxref("WebGLRenderingContext.createRenderbuffer()")}}</dt> + <dd>Creates a <code>WebGLRenderBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}</dt> + <dd>Deletes a <code>WebGLRenderBuffer</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}</dt> + <dd>Returns information about the renderbuffer.</dd> + <dt>{{domxref("WebGLRenderingContext.isRenderbuffer()")}}</dt> + <dd>Returns a Boolean indicating if the passed <code>WebGLRenderingBuffer</code> is valid.</dd> + <dt>{{domxref("WebGLRenderingContext.renderbufferStorage()")}}</dt> + <dd>Creates a renderbuffer data store.</dd> +</dl> + +<h2 id="Textures">Textures</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.bindTexture()")}}</dt> + <dd>Binds a <code>WebGLTexture</code> object to a given target.</dd> + <dt>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</dt> + <dd>Specifies a 2D texture image in a compressed format.</dd> + <dt>{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}</dt> + <dd>Specifies a 2D texture sub-image in a compressed format.</dd> + <dt>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</dt> + <dd>Copies a 2D texture image.</dd> + <dt>{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}</dt> + <dd>Copies a 2D texture sub-image.</dd> + <dt>{{domxref("WebGLRenderingContext.createTexture()")}}</dt> + <dd>Creates a <code>WebGLTexture</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.deleteTexture()")}}</dt> + <dd>Deletes a <code>WebGLTexture</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.generateMipmap()")}}</dt> + <dd>Generates a set of mipmaps for a <code>WebGLTexture</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.getTexParameter()")}}</dt> + <dd>Returns information about the texture.</dd> + <dt>{{domxref("WebGLRenderingContext.isTexture()")}}</dt> + <dd>Returns a Boolean indicating if the passed <code>WebGLTexture</code> is valid.</dd> + <dt>{{domxref("WebGLRenderingContext.texImage2D()")}}</dt> + <dd>Specifies a 2D texture image.</dd> + <dt>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</dt> + <dd>Updates a sub-rectangle of the current <code>WebGLTexture</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}</dt> + <dd>Sets texture parameters.</dd> + <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}</dt> + <dd>Sets texture parameters.</dd> +</dl> + +<h2 id="Programs_and_shaders">Programs and shaders</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.attachShader()")}}</dt> + <dd>Attaches a <code>WebGLShader</code> to a <code>WebGLProgram</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</dt> + <dd>Binds a generic vertex index to a named attribute variable.</dd> + <dt>{{domxref("WebGLRenderingContext.compileShader()")}}</dt> + <dd>Compiles a <code>WebGLShader</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.createProgram()")}}</dt> + <dd>Creates a <code>WebGLProgram</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.createShader()")}}</dt> + <dd>Creates a <code>WebGLShader</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.deleteProgram()")}}</dt> + <dd>Deletes a <code>WebGLProgram</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.deleteShader()")}}</dt> + <dd>Deletes a <code>WebGLShader</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.detachShader()")}}</dt> + <dd>Detaches a <code>WebGLShader</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</dt> + <dd>Returns a list of <code>WebGLShader</code> objects attached to a <code>WebGLProgram</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</dt> + <dd>Returns information about the program.</dd> + <dt>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</dt> + <dd>Returns the information log for a <code>WebGLProgram</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</dt> + <dd>Returns information about the shader.</dd> + <dt>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</dt> + <dd>Returns a <code>WebGLShaderPrecisionFormat</code> object describing the precision for the numeric format of the shader.</dd> + <dt>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</dt> + <dd>Returns the information log for a <code>WebGLShader</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.getShaderSource()")}}</dt> + <dd>Returns the source code of a <code>WebGLShader</code> as a string.</dd> + <dt>{{domxref("WebGLRenderingContext.isProgram()")}}</dt> + <dd>Returns a Boolean indicating if the passed <code>WebGLProgram</code> is valid.</dd> + <dt>{{domxref("WebGLRenderingContext.isShader()")}}</dt> + <dd>Returns a Boolean indicating if the passed <code>WebGLShader</code> is valid.</dd> + <dt>{{domxref("WebGLRenderingContext.linkProgram()")}}</dt> + <dd>Links the passed <code>WebGLProgram</code> object.</dd> + <dt>{{domxref("WebGLRenderingContext.shaderSource()")}}</dt> + <dd>Sets the source code in a <code>WebGLShader</code>.</dd> + <dt>{{domxref("WebGLRenderingContext.useProgram()")}}</dt> + <dd>Uses the specified <code>WebGLProgram</code> as part the current rendering state.</dd> + <dt>{{domxref("WebGLRenderingContext.validateProgram()")}}</dt> + <dd>Validates a <code>WebGLProgram</code>.</dd> +</dl> + +<h2 id="Uniforms_and_attributes">Uniforms and attributes</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}</dt> + <dd>Disables a vertex attribute array at a given position.</dd> + <dt>{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}</dt> + <dd>Enables a vertex attribute array at a given position.</dd> + <dt>{{domxref("WebGLRenderingContext.getActiveAttrib()")}}</dt> + <dd>Returns information about an active attribute variable.</dd> + <dt>{{domxref("WebGLRenderingContext.getActiveUniform()")}}</dt> + <dd>Returns information about an active uniform variable.</dd> + <dt>{{domxref("WebGLRenderingContext.getAttribLocation()")}}</dt> + <dd>Returns the location of an attribute variable.</dd> + <dt>{{domxref("WebGLRenderingContext.getUniform()")}}</dt> + <dd>Returns the value of a uniform variable at a given location.</dd> + <dt>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</dt> + <dd>Returns the location of a uniform variable.</dd> + <dt>{{domxref("WebGLRenderingContext.getVertexAttrib()")}}</dt> + <dd>Returns information about a vertex attribute at a given position.</dd> + <dt>{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}</dt> + <dd>Returns the address of a given vertex attribute.</dd> + <dt>{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}</dt> + <dd>Specifies a value for a uniform variable.</dd> + <dt>{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}</dt> + <dd>Specifies a matrix value for a uniform variable.</dd> + <dt>{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}</dt> + <dd>Specifies a value for a generic vertex attribute.</dd> + <dt>{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}</dt> + <dd>Specifies the data formats and locations of vertex attributes in a vertex attributes array.</dd> +</dl> + +<h2 id="Drawing_buffers">Drawing buffers</h2> + +<dl> + <dt>{{domxref("WebGLRenderingContext.clear()")}}</dt> + <dd>Clears specified buffers to preset values.</dd> + <dt>{{domxref("WebGLRenderingContext.drawArrays()")}}</dt> + <dd>Renders primitives from array data.</dd> + <dt>{{domxref("WebGLRenderingContext.drawElements()")}}</dt> + <dd>Renders primitives from element array data.</dd> + <dt>{{domxref("WebGLRenderingContext.finish()")}}</dt> + <dd>Blocks execution until all previously called commands are finished.</dd> + <dt>{{domxref("WebGLRenderingContext.flush()")}}</dt> + <dd>Empties different buffer commands, causing all commands to be executed as quickly as possible.</dd> +</dl> + +<h2 id="Working_with_extensions">Working with extensions</h2> + +<p>These methods manage WebGL extensions:</p> + +<dl> + <dt>{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}</dt> + <dd>Returns an {{jsxref("Array")}} of {{domxref("DOMString")}} elements with all the supported WebGL extensions.</dd> + <dt>{{domxref("WebGLRenderingContext.getExtension()")}}</dt> + <dd>Returns an extension object.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="WebGL_context_feature_detection">WebGL context feature detection</h3> + +<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "summary")}}</p> + +<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}</p> + +<p>{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}</p> + +<h3 id="Effect_of_canvas_size_on_rendering_with_WebGL">Effect of canvas size on rendering with WebGL</h3> + +<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}</p> + +<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}</p> + +<p>{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/isbuffer/index.html b/files/fr/web/api/webglrenderingcontext/isbuffer/index.html new file mode 100644 index 0000000000..907a86ab2d --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/isbuffer/index.html @@ -0,0 +1,79 @@ +--- +title: WebGLRenderingContext.isBuffer() +slug: Web/API/WebGLRenderingContext/isBuffer +tags: + - API + - Méthode + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/isBuffer +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong><code>WebGLRenderingContext.isBuffer()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> renvoie <code>true</code> si le {{domxref ("WebGLBuffer")}} passé est valide et <code>false</code> dans le cas contraire.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">GLboolean <var>gl</var>.isBuffer(<var>tampon</var>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt>tampon</dt> + <dd>Un {{domxref("WebGLBuffer")}} à vérifier.</dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Un {{domxref("GLboolean")}} indiquant si le tampon est ou non valide.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Création_d'un_tampon">Création d'un tampon</h3> + +<pre class="brush: js">var canevas = document.getElementById('canevas'); +var gl = canevas.getContext('webgl'); +var tampon = gl.createBuffer(); + +gl.isBuffer(tampon); +</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.5", "isBuffer")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glIsBuffer.xml", "glIsBuffer")}}</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.isBuffer")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li> + <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/shadersource/index.html b/files/fr/web/api/webglrenderingcontext/shadersource/index.html new file mode 100644 index 0000000000..fb65393984 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/shadersource/index.html @@ -0,0 +1,76 @@ +--- +title: WebGLRenderingContext.shaderSource() +slug: Web/API/WebGLRenderingContext/shaderSource +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/shaderSource +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong><code>WebGLRenderingContext.shaderSource()</code></strong> de l'<a href="/en-US/docs/Web/API/WebGL_API">API WebGL</a> définit le code source d'un {{domxref("WebGLShader")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var>gl</var>.shaderSource(<var>shader</var>, <var>source</var>); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt>shader</dt> + <dd>Un objet {{domxref("WebGLShader")}} dans lequel définir le code source.</dd> + <dt>source</dt> + <dd>Une {{domxref("DOMString")}} contenant le code source GLSL à définir.</dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Aucune.</p> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js">var shader = gl.createShader(gl.VERTEX_SHADER); +gl.shaderSource(shader, originalSource); + +var source = gl.getShaderSource(shader);</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.9", "shaderSource")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glShaderSource.xml", "glShaderSource")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page man de l'API OpenGL (similaire).</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.shaderSource")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.isShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li> + <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/teximage2d/index.html b/files/fr/web/api/webglrenderingcontext/teximage2d/index.html new file mode 100644 index 0000000000..902985faf4 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/teximage2d/index.html @@ -0,0 +1,249 @@ +--- +title: WebGLRenderingContext.texImage2D() +slug: Web/API/WebGLRenderingContext/texImage2D +tags: + - API + - Méthode + - Reference + - Textures + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/texImage2D +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong><code>WebGLRenderingContext.texImage2D()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> spécifie une image de texture bidimensionnelle.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">// WebGL1: +void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var>, <var>format</var>, <var>type</var>, ArrayBufferView? <var>pixels</var>); +void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, ImageData? <var>pixels</var>); +void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, HTMLImageElement? <var>pixels</var>); +void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, HTMLCanvasElement? <var>pixels</var>); +void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, HTMLVideoElement? <var>pixels</var>); +void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, ImageBitmap? <var>pixels</var>); + +// WebGL2: +void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var>, <var>format</var>, <var>type</var>, GLintptr <em>decalage</em>); +void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var>, <var>format</var>, <var>type</var>, HTMLCanvasElement <em>source</em>); +void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var>, <var>format</var>, <var>type</var>, HTMLImageElement <em>source</em>); +void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var><em>, format, type</em>, HTMLVideoElement <em>source</em>); +void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var><em>, format, type</em>, ImageBitmap <em>source</em>); +void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var><em>, format, type</em>, ImageData <em>source</em>); +void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var><em>, format, type</em>, ArrayBufferView <em>donneesSrc</em>, <em>decalageSrc</em>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>cible</code></dt> + <dd>Un {{domxref ("GLenum")}} indiquant le point de liaison (cible) de la texture active. Valeurs possibles : + <ul> + <li><code>gl.TEXTURE_2D</code> : une texture bidimensionnelle ;</li> + <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_X</code> : face X positive pour une texture mappée sur un cube ;</li> + <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_X</code> : face X négative pour une texture mappée sur un cube ;</li> + <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_Y</code> : face Y positive pour une texture mappée sur un cube ;</li> + <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_Y</code> : face Y négative pour une texture mappée sur un cube ;</li> + <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_Z</code> : face Z positive pour une texture mappée sur un cube ;</li> + <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_Z</code> : face Z négative pour une texture mappée sur un cube.</li> + </ul> + </dd> +</dl> + +<dl> + <dt><code>niveau</code></dt> + <dd>Un {{domxref ("GLint")}} indiquant le niveau de détail. Le niveau 0 est le niveau de l'image de base et le niveau n est le n-ième niveau de réduction du mipmap.</dd> + <dt><code>formatinterne</code></dt> + <dd>Un {{domxref ("GLint")}} indiquant les composantes de couleur dans la texture. Valeurs possibles : + <ul> + <li><code>gl.ALPHA</code> : ignore les composantes rouge, vert et bleu, et lit la composante alpha ;</li> + <li><code>gl.RGB</code> : ignore la composante alpha et lit les composantes rouge, vert et bleu ;</li> + <li><code>gl.RGBA</code> : les composantes rouge, vert, bleu et alpha sont lues à partir du tampon des couleurs ;</li> + <li><code>gl.LUMINANCE</code> : chaque composante de couleur est une composante de luminance, alpha vaut 1,0 ;</li> + <li><code>gl.LUMINANCE_ALPHA</code> : chaque composante est une composante de luminance/alpha ;</li> + <li>lors de l'utilisation de l'extension {{domxref("WEBGL_depth_texture")}} : + <ul> + <li><code>gl.DEPTH_COMPONENT</code></li> + <li><code>gl.DEPTH_STENCIL</code></li> + </ul> + </li> + <li>lors de l'utilisation de l'extension {{domxref("EXT_sRGB")}} : + <ul> + <li><code>ext.SRGB_EXT</code></li> + <li><code>ext.SRGB_ALPHA_EXT</code></li> + </ul> + </li> + <li>Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : + <ul> + <li><code>gl.R8</code></li> + <li><code>gl.R16F</code></li> + <li><code>gl.R32F</code></li> + <li><code>gl.R8UI</code></li> + <li><code>gl.RG8</code></li> + <li><code>gl.RG16F</code></li> + <li><code>gl.RG32F</code></li> + <li><code>gl.RG8UI</code></li> + <li><code>gl.RG16UI</code></li> + <li><code>gl.RG32UI</code></li> + <li><code>gl.RGB8</code></li> + <li><code>gl.SRGB8</code></li> + <li><code>gl.RGB565</code></li> + <li><code>gl.R11F_G11F_B10F</code></li> + <li><code>gl.RGB9_E5</code></li> + <li><code>gl.RGB16F</code></li> + <li><code>gl.RGB32F</code></li> + <li><code>gl.RGB8UI</code></li> + <li><code>gl.RGBA8</code></li> + <li><code>gl.SRGB8_APLHA8</code></li> + <li><code>gl.RGB5_A1</code></li> + <li><code>gl.RGB10_A2</code></li> + <li><code>gl.RGBA4</code></li> + <li><code>gl.RGBA16F</code></li> + <li><code>gl.RGBA32F</code></li> + <li><code>gl.RGBA8UI</code></li> + </ul> + </li> + </ul> + </dd> + <dt><code>largeur</code></dt> + <dd>Un {{domxref ("GLsizei")}} indiquant la largeur de la texture.</dd> + <dt><code>hauteur</code></dt> + <dd>Un {{domxref ("GLsizei")}} indiquant la hauteur de la texture.</dd> + <dt><code>bordure</code></dt> + <dd>Un {{domxref("GLint")}} indiquant la largeur de la bordure. Doit être 0.</dd> + <dt><code>format</code></dt> + <dd>Un {{domxref("GLenum")}} indiquant le format des données de texel. En WebGL 1, cela doit être identique à <code>formatinterne</code> (voir ci-dessus). En WebGL 2, les combinaisons sont répertoriées dans <a href="https://www.khronos.org/registry/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE">ce tableau</a>.</dd> + <dt><code>type</code></dt> + <dd>Un {{domxref("GLenum")}} indiquant le type de données des données de texel. Valeurs possibles : + <ul> + <li><code>gl.UNSIGNED_BYTE</code> : 8 bits par canal pour <code>gl.RGBA</code> ;</li> + <li><code>gl.UNSIGNED_SHORT_5_6_5</code> : 5 bits de rouge, 6 bits de vert, 5 bits de bleu ;</li> + <li><code>gl.UNSIGNED_SHORT_4_4_4_4</code> : 4 bits de rouge, 4 bits de vert, 4 bits de bleu, 4 bits d'alpha ;</li> + <li><code>gl.UNSIGNED_SHORT_5_5_5_1</code> : 5 bits de rouge, 5 bits de vert, 5 bits de bleu, 1 bit d'alpha ;</li> + <li>lors de l'utilisation de l'extension {{domxref ("WEBGL_depth_texture")}} : + <ul> + <li><code>gl.UNSIGNED_SHORT</code></li> + <li><code>gl.UNSIGNED_INT</code></li> + <li><code>ext.UNSIGNED_INT_24_8_WEBGL</code> (constante fournie par l'extension)</li> + </ul> + </li> + <li>lors de l'utilisation de l'extension {{domxref("OES_texture_float")}} : + <ul> + <li><code>gl.FLOAT</code></li> + </ul> + </li> + <li>lors de l'utilisation de l'extension {{domxref("OES_texture_half_float")}} : + <ul> + <li><code>ext.HALF_FLOAT_OES</code> (constante fournie par l'extension)</li> + </ul> + </li> + <li>lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : + <ul> + <li><code>gl.BYTE</code></li> + <li><code>gl.UNSIGNED_SHORT</code></li> + <li><code>gl.SHORT</code></li> + <li><code>gl.UNSIGNED_INT</code></li> + <li><code>gl.INT</code></li> + <li><code>gl.HALF_FLOAT</code></li> + <li><code>gl.FLOAT</code></li> + <li><code>gl.UNSIGNED_INT_2_10_10_10_REV</code></li> + <li><code>gl.UNSIGNED_INT_10F_11F_11F_REV</code></li> + <li><code>gl.UNSIGNED_INT_5_9_9_9_REV</code></li> + <li><code>gl.UNSIGNED_INT_24_8</code></li> + <li><code>gl.FLOAT_32_UNSIGNED_INT_24_8_REV</code> (les pixels doivent être {{jsxref("null")}})</li> + </ul> + </li> + </ul> + </dd> + <dt><code>pixels</code></dt> + <dd>L'un des objets suivants peut être utilisé comme source de pixels pour la texture : + <ul> + <li>{{domxref("ArrayBufferView")}}, + <ul> + <li>un {{jsxref("Uint8Array")}} doit être utilisé si <code>type</code> est <code>gl.UNSIGNED_BYTE</code> ;</li> + <li>un {{jsxref("Uint16Array")}} doit être utilisé si <code>type</code> est <code>gl.UNSIGNED_SHORT_5_6_5</code>, <code>gl.UNSIGNED_SHORT_4_4_4_4</code>, <code>gl.UNSIGNED_SHORT_5_5_5_1</code>, <code>gl.UNSIGNED_SHORT</code> ou <code>ext.HALF_FLOAT_OES</code> ;</li> + <li>un {{jsxref("Uint32Array")}} doit être utilisé si <code>type</code> est <code>gl.UNSIGNED_INT</code> ou <code>ext.UNSIGNED_INT_24_8_WEBGL</code> ;</li> + <li>un {{jsxref("Float32Array")}} doit être utilisé si <code>type</code> est <code>gl.FLOAT</code> ;</li> + </ul> + </li> + <li>{{domxref("ImageData")}},</li> + <li>{{domxref("HTMLImageElement")}},</li> + <li>{{domxref("HTMLCanvasElement")}},</li> + <li>{{domxref("HTMLVideoElement")}},</li> + <li>{{domxref("ImageBitmap")}}.</li> + </ul> + </dd> + <dt><code><strong>decalage</strong></code></dt> + <dd>(WebGL 2 seulement) Un décalage en octets {{domxref("GLintptr")}} dans le magasin de données du {{domxref("WebGLBuffer")}}. Utilisé pour télécharger des données vers la {{domxref ("WebGLTexture")}} liée, depuis le <code>WebGLBuffer</code> lié à la cible <code>PIXEL_UNPACK_BUFFER</code>.</dd> + <dd> + <ul> + </ul> + </dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Aucune.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); +</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.8", "texImage2D")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td> + <p>Définition initiale pour WebGL.</p> + </td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glTexImage2D.xml", "glTexImage2D")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td> + <p>Page man de l’API OpenGL ES 2.0 (similaire).</p> + </td> + </tr> + <tr> + <td>{{SpecName('WebGL2', "#3.7.6", "texImage2D")}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td>Définition mise à jour pour WebGL.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glTexImage2D.xhtml", "glTexImage2D")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>Page man de l’API OpenGL ES 3.0 (similaire).</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.texImage2D")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li> + <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li> + <li>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</li> + <li>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</li> + <li>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</li> + <li>{{domxref("WebGLRenderingContext.getTexParameter()")}}</li> + <li>{{domxref("WEBGL_depth_texture")}}</li> + <li>{{domxref("OES_texture_float")}}</li> + <li>{{domxref("OES_texture_half_float")}}</li> + <li>{{domxref("EXT_sRGB")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/texparameter/index.html b/files/fr/web/api/webglrenderingcontext/texparameter/index.html new file mode 100644 index 0000000000..221c3fdae9 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/texparameter/index.html @@ -0,0 +1,179 @@ +--- +title: 'WebGLRenderingContext.texParameter[fi]()' +slug: Web/API/WebGLRenderingContext/texParameter +tags: + - API + - Méthode + - Reference + - Textures + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/texParameter +--- +<div>{{APIRef("WebGL")}}</div> + +<p>Les méthodes <strong><code>WebGLRenderingContext.texParameter[fi]()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> définissent les paramètres de texture.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var>gl</var>.texParameterf(GLenum <var>cible</var>, GLenum <var>nomp</var>, GLfloat <var>param</var>); +void <var>gl</var>.texParameteri(GLenum <var>cible</var>, GLenum <var>nomp</var>, GLint <var>param</var>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt>cible</dt> + <dd>Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : + <ul> + <li><code>gl.TEXTURE_2D</code> : une texture bi-dimensionelle.</li> + <li><code>gl.TEXTURE_CUBE_MAP</code> : une texte appliquée sur un cube.</li> + <li>Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : + <ul> + <li><code>gl.TEXTURE_3D</code> : une texture tri-dimensionnelle.</li> + <li><code>gl.TEXTURE_2D_ARRAY</code> : une texture bi-dimensionnelle en tableau.</li> + </ul> + </li> + </ul> + </dd> +</dl> + +<p>Le paramètre <code>nomp</code> est un {{domxref("Glenum")}} indiquant le paramètre de texture à définir. Le paramètre <code>param</code> est un {{domxref("GLfloat")}} ou un {{domxref("GLint")}} indiquant la valeur pour le paramètre <code>nomp</code> indiqué.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><code>pnom</code></th> + <th scope="col">Description</th> + <th scope="col"><code>param</code></th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="3">Disponible en WebGL 1</th> + </tr> + <tr> + <td><code>gl.TEXTURE_MAG_FILTER</code></td> + <td>Filtre de grossissement de texture</td> + <td><code>gl.LINEAR</code> (valeur par défaut), <code>gl.NEAREST</code>.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_MIN_FILTER</code></td> + <td>Filtre de réduction de texture</td> + <td><code>gl.LINEAR</code>, <code>gl.NEAREST</code>, <code>gl.NEAREST_MIPMAP_NEAREST</code>, <code>gl.LINEAR_MIPMAP_NEAREST</code>, <code>gl.NEAREST_MIPMAP_LINEAR</code> (valeur par défaut), <code>gl.LINEAR_MIPMAP_LINEAR</code>.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_WRAP_S</code></td> + <td>Fonction d'emballage pour la coordonnée de texture <code>s</code></td> + <td><code>gl.REPEAT</code> (valeur par défaut),<code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_WRAP_T</code></td> + <td>Fonction d'emballage pour la coordonnée de texture <code>t</code></td> + <td><code>gl.REPEAT</code> (valeur par défaut),<code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td> + </tr> + <tr> + <th colspan="3">Disponible en outre quand l'extension {{domxref("EXT_texture_filter_anisotropic")}} est utilisée</th> + </tr> + <tr> + <td><code>ext.TEXTURE_MAX_ANISOTROPY_EXT</code></td> + <td>Anisotropie maximum pour une texture</td> + <td>Une valeur {{domxref("GLfloat")}}.</td> + </tr> + <tr> + <th colspan="3">Disponible en outre quand un contexte WebGL 2 est utilisé</th> + </tr> + <tr> + <td><code>gl.TEXTURE_BASE_LEVEL</code></td> + <td>Niveau de mipmap de texture</td> + <td>Toutes valeurs int.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_COMPARE_FUNC</code></td> + <td>Fonction de comparaison de texture</td> + <td><code>gl.LEQUAL</code> (valeur par défaut), <code>gl.GEQUAL</code>, <code>gl.LESS</code>, <code>gl.GREATER</code>, <code>gl.EQUAL</code>, <code>gl.NOTEQUAL</code>, <code>gl.ALWAYS</code>, <code>gl.NEVER</code>.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_COMPARE_MODE</code></td> + <td>Mode de comparaison de texture</td> + <td><code>gl.NONE</code> (valeur défaut), <code>gl.COMPARE_REF_TO_TEXTURE</code>.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_MAX_LEVEL</code></td> + <td>Niveau maximum de mipmap de texture en tableau</td> + <td>Toutes valeurs int.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_MAX_LOD</code></td> + <td> + <p>Valeur de niveau-de-détail maximum de texture</p> + </td> + <td>Toutes valeurs float.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_MIN_LOD</code></td> + <td>Valeur de niveau-de-détail minimum de texture</td> + <td>Toutes valeurs float.</td> + </tr> + <tr> + <td><code>gl.TEXTURE_WRAP_R</code></td> + <td>Fonction d'emballage pour la coordonnée de texture <code>r</code></td> + <td><code>gl.REPEAT</code> (valeur par défaut), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td> + </tr> + </tbody> +</table> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Aucune.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); +gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST); +</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.8", "texParameter[fi]")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale pour WebGL.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glTexParameter.xml", "glTexParameter")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page man de l’API OpenGL ES 2.0 API (similaire).</td> + </tr> + <tr> + <td>{{SpecName('WebGL2', "#3.7.6", "texParameter[fi]")}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td>Définition mise à jour pour WebGL.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0', "glTexParameter.xhtml", "glTexParameter")}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td>Page man de l’API OpenGL ES 3.0 API (similaire).</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.texParameterf")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.getTexParameter()")}}</li> + <li>{{domxref("EXT_texture_filter_anisotropic")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/uniform/index.html b/files/fr/web/api/webglrenderingcontext/uniform/index.html new file mode 100644 index 0000000000..56c97559ed --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/uniform/index.html @@ -0,0 +1,99 @@ +--- +title: 'WebGLRenderingContext.uniform[1234][fi][v]()' +slug: Web/API/WebGLRenderingContext/uniform +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/uniform +--- +<div>{{APIRef("WebGL")}}</div> + +<p>Les méthodes <strong><code>WebGLRenderingContext.uniform[1234][fi][v]()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> indiquent les valeurs des variables uniform.</p> + +<div class="note"> +<p>Beaucoup des fonctions décrites ici ont des interfaces WebGL 2 étendues, qui peuvent être trouvées en {{domxref("WebGL2RenderingContext.uniform","WebGL2RenderingContext.uniform[1234][uif][v]()")}}.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var>gl</var>.uniform1f(<var>emplacement</var>, <var>v0</var>); +void <var>gl</var>.uniform1fv(<var>emplacement</var>, <var>valeur</var>); +void <var>gl</var>.uniform1i(<var>emplacement</var>, <var>v0</var>); +void <var>gl</var>.uniform1iv(<var>emplacement</var>, <var>valeur</var>); + +void <var>gl</var>.uniform2f(<var>emplacement</var>, <var>v0</var>, <var>v1</var>); +void <var>gl</var>.uniform2fv(<var>emplacement</var>, <var>valeur</var>); +void <var>gl</var>.uniform2i(<var>emplacement</var>, <var>v0</var>, <var>v1</var>); +void <var>gl</var>.uniform2iv(<var>emplacement</var>, <var>valeur</var>); + +void <var>gl</var>.uniform3f(<var>emplacement</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>); +void <var>gl</var>.uniform3fv(<var>emplacement</var>, <var>valeur</var>); +void <var>gl</var>.uniform3i(<var>emplacement</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>); +void <var>gl</var>.uniform3iv(<var>emplacement</var>, <var>valeur</var>); + +void <var>gl</var>.uniform4f(<var>emplacement</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>, <var>v3</var>); +void <var>gl</var>.uniform4fv(<var>emplacement</var>, <var>valeur</var>); +void <var>gl</var>.uniform4i(<var>emplacement</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>, <var>v3</var>); +void <var>gl</var>.uniform4iv(<var>emplacement</var>, <var>valeur</var>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt>emplacement</dt> + <dd>Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier.</dd> + <dt><code>valeur, v0, v1, v2, v3</code></dt> + <dd>La nouvelle valeur à utiliser pour la variable uniform. Types possibles : + <ul> + <li>Un {{jsxref("Number")}} flottant pour les valeurs flottantes (méthodes avec "f").</li> + <li>Une suite de nombres flottants (par exemple, un {{jsxref("Float32Array")}} ou un {{jsxref("Array")}} de nombres) pour les méthodes de vecteurs de flottants (méthodes avec "fv").</li> + <li>Un {{jsxref("Number")}} entier pour les valeurs entières (méthodes avec "i").</li> + <li>Un {{jsxref("int32Array")}} pour les méthodes de vecteur d'entiers (méthodes avec "iv").</li> + </ul> + </dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Aucune.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">gl.uniform1f(u_alpha, 0.8);</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", "uniform")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page man de l'API OpenGL.</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.uniform1f")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.uniformMatrix()")}}</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.html b/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.html new file mode 100644 index 0000000000..ec173f0e68 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.html @@ -0,0 +1,90 @@ +--- +title: 'WebGLRenderingContext.uniformMatrix[234]fv()' +slug: Web/API/WebGLRenderingContext/uniformMatrix +tags: + - API + - Matrice + - Reference + - Uniforms + - Variables Uniform + - WebGL + - WebGLAPI + - WebGLRenderingContext + - matrices + - uniformMatrix2fv + - uniformMatrix3fv + - uniformMatrix4fv +translation_of: Web/API/WebGLRenderingContext/uniformMatrix +--- +<div>{{APIRef("WebGL")}}</div> + +<p>Les méthodes <strong><code>WebGLRenderingContext.uniformMatrix[234]fv()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> définissent des valeurs matricielles pour les variables uniform.</p> + +<p>Les trois versions de cette méthode (<code>uniformMatrix2fv()</code>, <code>uniformMatrix3fv()</code> et <code>unifomMatrix4fv()</code>) prennent comme valeur d'entrée des vecteurs à 2, 3 et 4 composantes, respectivement.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>WebGLRenderingContext</em>.uniformMatrix2fv(<em>emplacement</em>, <em>transposer</em>, <em>valeur</em>); +<em>WebGLRenderingContext</em>.uniformMatrix3fv(<em>emplacement</em>, <em>transposer</em>, <em>valeur</em>); +<em>WebGLRenderingContext</em>.uniformMatrix4fv(<em>emplacement</em>, <em>transposer</em>, <em>valeur</em>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>emplacement</code></dt> + <dd>Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier. L'emplacement est obtenu en utilisant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.</dd> + <dt><code>transposer</code></dt> + <dd>Un {{domxref("GLboolean")}} indiquant si la matrice doit être transposée. Doit être <code>false</code>.</dd> + <dt><code>valeur</code></dt> + <dd> + <p>Un {{jsxref("Float32Array")}} ou une suite de valeurs <code>GLfloat</code>.</p> + </dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p><code>undefined</code></p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">gl.uniformMatrix2fv(loc, false, [2.1, 2.2]);</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", "uniformMatrix")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td> + <p>Définition initiale.</p> + </td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}</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.uniformMatrix2fv")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.uniform()")}}</li> + <li>{{domxref("WebGL2RenderingContext.uniformMatrix()")}} – versions WebGL 2 de ces méthodes.</li> +</ul> diff --git a/files/fr/web/api/webglrenderingcontext/useprogram/index.html b/files/fr/web/api/webglrenderingcontext/useprogram/index.html new file mode 100644 index 0000000000..fe6f54a90c --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/useprogram/index.html @@ -0,0 +1,82 @@ +--- +title: WebGLRenderingContext.useProgram() +slug: Web/API/WebGLRenderingContext/useProgram +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/useProgram +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong><code>WebGLRenderingContext.useProgram()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> définit le {{domxref("WebGLProgram")}} spécifié comme faisant partie de l'état de rendu en cours.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var>gl</var>.useProgram(<var>programme</var>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt>programme</dt> + <dd>Un {{domxref("WebGLProgram")}} à utiliser.</dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Aucune.</p> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: js">var programme = gl.createProgram(); + +// Attacher les shaders pré-existants +gl.attachShader(programme, vertexShader); +gl.attachShader(programme, fragmentShader); + +gl.linkProgram(programme); +gl.useProgram(programme); +</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.9", "useProgram")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glUseProgram.xml", "glUseProgram")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page man de l'API OpenGL.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibilité_des_navigateurs">Browser 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.useProgram")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li> + <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li> +</ul> 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> diff --git a/files/fr/web/api/webglrenderingcontext/viewport/index.html b/files/fr/web/api/webglrenderingcontext/viewport/index.html new file mode 100644 index 0000000000..48458a42c5 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/viewport/index.html @@ -0,0 +1,94 @@ +--- +title: WebGLRenderingContext.viewport() +slug: Web/API/WebGLRenderingContext/viewport +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/viewport +--- +<div>{{APIRef("WebGL")}}</div> + +<p>La méthode <strong><code>WebGLRenderingContext.viewport()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> définit le viewport, qui indique la transformation affine de x et de y, de coordonnées d'appareil normalisées en coordonnées de fenêtre.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var><em>void gl</em>.viewport</var><var>(x, y, largeur, hauteur);</var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un {{domxref("GLint")}} indiquant la coordonnée horizontale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0.</dd> + <dt><code>y</code></dt> + <dd>Un {{domxref("GLint")}} indiquant la coordonnée verticale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0.</dd> + <dt>largeur</dt> + <dd>Un {{domxref("Glsizei")}} non négatif indiquant la largeur du viewport. Valeur par défaut : la largeur du canevas.</dd> + <dt>height</dt> + <dd>Un {{domxref("Glsizei")}} non négatif indiquant la hauteur du viewport. Valeur par défaut : la hauteur du canevas.</dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Aucune.</p> + +<h3 id="Erreurs_déclenchées">Erreurs déclenchées</h3> + +<p>Si <em>largeur</em> ou <em>hauteur</em> est une valeur négative, une erreur <code>gl.INVALID_VALUE</code> est déclenchée.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Lorsque vous créez un contexte WebGL pour la première fois, la taille de la fenêtre correspondra à celle du canevas. Toutefois, si vous redimensionnez le canevas, vous devrez indiquer au contexte de WebGL une nouvelle définition de viewport. Dans cette situation, vous pouvez utiliser <code>gl.viewport</code>.</p> + +<pre class="brush: js">gl.viewport(0, 0, canevas.width, canevas.height); +</pre> + +<p>La largeur et la hauteur de la fenêtre sont limitées à une plage dépendante de l'implémentation. Pour obtenir cette plage, vous pouvez utiliser la constante <code>MAX_VIEWPORT_DIMS</code>, qui renvoie un {{jsxref ("Int32Array")}}.</p> + +<pre class="brush: js">gl.getParameter(gl.MAX_VIEWPORT_DIMS); +// Par ex., Int32Array[16384, 16384] +</pre> + +<p>Pour obtenir le viewport en cours, faites une requête sur la constante <code>VIEWPORT</code>.</p> + +<pre class="brush: js">gl.getParameter(gl.VIEWPORT); +// e.g. Int32Array[0, 0, 640, 480] +</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.4", "viewport")}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0', "glViewport.xml", "glViewport")}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td>Page man de l'API OpenGL.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">La table de compatibilité dans cette page est générée à 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.viewport")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("WebGLRenderingContext.scissor()")}}</li> + <li>{{domxref("WebGLRenderingContext.getParameter()")}}</li> +</ul> |