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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 9Edge Support complet 12Firefox Support complet 4IE Support complet 11Opera Support complet 12Safari Support complet 5.1WebView Android Support complet OuiChrome Android Support complet 25Edge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet 12Safari iOS Support complet 8.1Samsung Internet Android Support complet Oui
Available in workers
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 44
Désactivée
Support complet 44
Désactivée
Désactivée 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.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : NemoNobobyPersonne
Dernière mise à jour par : NemoNobobyPersonne,