We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

WebGLRenderingContext.bufferData()

La méthode WebGLRenderingContext.bufferData() de l'API WebGL initialise et crée le magasin de données de l'objet tampon.

Syntaxe

// 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);

Paramètres

cible
Un GLenum spécifiant le point de liaison (cible). Valeurs possibles :
  • gl.ARRAY_BUFFER : 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 ;
  • gl.ELEMENT_ARRAY_BUFFER : tampon utilisé pour les indices d'éléments ;
  • lors de l'utilisation d'un WebGL context 2, les valeurs suivantes sont en outre disponibles :
    • gl.COPY_READ_BUFFER : tampon pour la copie d'un objet tampon à un autre ;
    • gl.COPY_WRITE_BUFFER : tampon pour la copie d'un objet tampon à un autre ;
    • gl.TRANSFORM_FEEDBACK_BUFFER : tampon pour les opérations de retour de transformation ;
    • gl.UNIFORM_BUFFER : tampon utilisé pour stocker des blocs uniform ;
    • gl.PIXEL_PACK_BUFFER : tampon utilisé pour les opérations de transfert de pixels ;
    • gl.PIXEL_UNPACK_BUFFER : tampon utilisé pour les opérations de transfert de pixels.
taille
Un GLsizeiptr définissant la taille du magasin de données de l'objet tampon.
donneesSrc Facultatif
Un ArrayBufferSharedArrayBuffer ou l'un des types de tableau typés ArrayBufferView à copier dans le magasin de données. Si null, un magasin de données est quand même créé, mais son contenu n'est ni initialisé, ni défini.
utilisation
Un GLenum indiquant le modèle d'utilisation du magasin de données. Valeurs possibles :
  • gl.STATIC_DRAW : 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 ;
  • gl.DYNAMIC_DRAW : le contenu du tampon est susceptible d'être souvent utilisé et de changer souvent ; du contenu est écrit dans le tampon, mais non lu ;
  • gl.STREAM_DRAW : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est écrit dans le tampon, mais non lu ;
  • lors de l'utilisation d'un WebGL 2 context, les valeurs suivantes the following values sont en outre disponibles :
    • gl.STATIC_READ : 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 ;
    • gl.DYNAMIC_READ : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; du contenu est lu depuis le tampon, mais non écrit ;
    • gl.STREAM_READ : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est lu depuis le tampon, mais non écrit ;
    • gl.STATIC_COPY : 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 ;
    • gl.DYNAMIC_COPY : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ;
    • gl.STREAM_COPY : 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.
decalageSrc
Un GLuint indiquant le décalage d'indice d'élément où commencer à lire dans le tampon.
longueur Facultatif
Un GLuint valant 0 par défaut.

Valeur retournée

Aucune.

Exceptions

  • Une erreur gl.OUT_OF_MEMORY est déclenchée si le contexte ne peut pas créer un magasin de données de la taille indiquée.
  • Une erreurgl.INVALID_VALUE est déclenchée si taille est négative.
  • Une erreur gl.INVALID_ENUM est déclenchée si cible ouutilisation ne sont pas l'un des enums autorisés.

Exemples

Utilisation de bufferData

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);

Récupération de l'information de tampon

Pour vérifier l'utilisation du tampon en cours et la taille du tampon, utiliser la méthode WebGLRenderingContext.getBufferParameter().

gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE);
gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_USAGE);

Spécifications

Spécification Statut Commentaire
WebGL 1.0
La définition de 'bufferData' dans cette spécification.
Recommendation Définition initiale.
OpenGL ES 2.0
La définition de 'glBufferData' dans cette spécification.
Standard

Page man de l’API OpenGL.

OpenGL ES 3.0
La définition de 'glBufferData' dans cette spécification.
Standard

Page man de l’API OpenGL ES 3 (similaire).

Ajoute les noouveaux tampons cible :
gl.COPY_READ_BUFFER,
gl.COPY_WRITE_BUFFER,
gl.TRANSFORM_FEEDBACK_BUFFER,
gl.UNIFORM_BUFFER,
gl.PIXEL_PACK_BUFFER,
gl.PIXEL_UNPACK_BUFFER

Ajoute les nouvelles indications d'utilisation :
gl.STATIC_READ,
gl.DYNAMIC_READ,
gl.STREAM_READ,
gl.STATIC_COPY,
gl.DYNAMIC_COPY,
gl.STREAM_COPY.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple912411125.1
WebGL256 Non51 Non43 Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui25 Oui Oui128.1 Oui
WebGL25858 Non5143 Non7.0

Voir aussi

Étiquettes et contributeurs liés au document

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