Le WebGLProgram fait partie de l'API WebGL et il est une combinaison de deux WebGLShader compilés constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ces dernier sont ensuite liés dans un programme utilisable.
var programme = gl.createProgram();
// Lier 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(programme);
throw 'Impossible de compiler le program WebGL.\n\n' + info;
}
Voir WebGLShader pour des informations sur la création de shaderDeSommet et de shaderDeFragment dans le programme ci-dessus.
Exemples
Utilisation du programme
Les étapes pour travailler effectivement avec le programme impliquent d'indiquer à la GPU d'utiliser le programme, de lier les données et les options de configuration appropriées, et enfin, de dessiner quelque chose à l'écran.
// Utiliser le programme gl.useProgram(programme); // Lier les données d'attribut existantes gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.enableVertexAttribArray(attributeLocation); gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0); // Dessiner un unique triangle gl.drawArrays(gl.TRIANGLES, 0, 3);
Suppression du programme
S'il y a une erreur lors de l'édition de liens du programme, ou si vous voulez supprimer un programme existant, alors c'est tout simple, il suffit d'exécuter WebGLRenderingContext.deleteProgram(). Cela libère la mémoire du programme lié.
gl.deleteProgram(programme);
Spécifications
| Spécification | Statut | Commentaire |
|---|---|---|
| WebGL 1.0 La définition de 'WebGLProgram' dans cette spécification. |
Recommendation | Définition initale. |
Compatibilité des navigateurs
La table de compatibilité dans cette page est générée à partir de données structurées. Si vous voulez contribuer aux données, jettez un œil à https://github.com/mdn/browser-compat-data et envoyez nous une pull request.
| Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 9 | 12 | 4 | 11 | 12 | 5.1 |
| Available in workers | Non | Non | 441 | Non | Non | Non |
| Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Support simple | Oui | 25 | Oui | Oui | 12 | 8.1 | Oui |
| Available in workers | Non | Non | Non | Non | Non | Non | Non |
1. From version 44: this feature is behind the gfx.offscreencanvas.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Voir aussi
WebGLShaderWebGLRenderingContext.attachShader()WebGLRenderingContext.compileShader()WebGLRenderingContext.createProgram()WebGLRenderingContext.createShader()WebGLRenderingContext.deleteProgram()WebGLRenderingContext.deleteShader()WebGLRenderingContext.detachShader()WebGLRenderingContext.getAttachedShaders()WebGLRenderingContext.getProgramParameter()WebGLRenderingContext.getProgramInfoLog()WebGLRenderingContext.getShaderParameter()WebGLRenderingContext.getShaderPrecisionFormat()WebGLRenderingContext.getShaderInfoLog()WebGLRenderingContext.getShaderSource()WebGLRenderingContext.isProgram()WebGLRenderingContext.isShader()WebGLRenderingContext.linkProgram()WebGLRenderingContext.shaderSource()WebGLRenderingContext.useProgram()WebGLRenderingContext.validateProgram()