WebGLRenderingContext: bufferData()-Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die WebGLRenderingContext.bufferData()-Methode der WebGL API initialisiert und erstellt den Datenspeicher des Pufferobjekts.

Syntax

bufferData(target, size, usage)
bufferData(target, srcData, usage)

Parameter

target

Ein GLenum, der den Bindepunkt (Ziel) spezifiziert. Mögliche Werte:

gl.ARRAY_BUFFER: Puffer, der Vertex-Attribute enthält, wie z. B. Vertex-Koordinaten, Texturkoordinatendaten oder Vertex-Farbwerte.
gl.ELEMENT_ARRAY_BUFFER: Puffer, der für Elementindizes verwendet wird.

Bei Verwendung eines WebGL 2-Kontextes stehen zusätzlich die folgenden Werte zur Verfügung:

gl.COPY_READ_BUFFER: Puffer zum Kopieren von einem Pufferobjekt zu einem anderen.
gl.COPY_WRITE_BUFFER: Puffer zum Kopieren von einem Pufferobjekt zu einem anderen.
gl.TRANSFORM_FEEDBACK_BUFFER: Puffer für Transform-Feedback-Operationen.
gl.UNIFORM_BUFFER: Puffer zur Speicherung von Uniform-Blöcken.
gl.PIXEL_PACK_BUFFER: Puffer, der für Pixelübertragungsoperationen verwendet wird.
gl.PIXEL_UNPACK_BUFFER: Puffer, der für Pixelübertragungsoperationen verwendet wird.

size

Ein GLsizeiptr, der die Größe in Bytes des Datenspeichers des Pufferobjekts festlegt.

srcData Optional

Ein TypedArray oder ein DataView, das ein ArrayBuffer oder SharedArrayBuffer betrachtet, das in den Datenspeicher kopiert wird. Wenn null, wird ein Datenspeicher trotzdem erstellt, aber der Inhalt ist nicht initialisiert und undefiniert.

usage

Ein GLenum, der das beabsichtigte Verwendungsmuster des Datenspeichers für Optimierungszwecke angibt. Mögliche Werte:

gl.STATIC_DRAW: Der Inhalt soll einmalig von der Anwendung angegeben und häufig als Quelle für WebGL-Zeichnungs- und Bildspezifikationsbefehle verwendet werden.
gl.DYNAMIC_DRAW: Der Inhalt soll wiederholt von der Anwendung neu angegeben und häufig als Quelle für WebGL-Zeichnungs- und Bildspezifikationsbefehle verwendet werden.
gl.STREAM_DRAW: Der Inhalt soll einmalig von der Anwendung angegeben und höchstens einige Male als Quelle für WebGL-Zeichnungs- und Bildspezifikationsbefehle verwendet werden.

Bei Verwendung eines WebGL 2-Kontextes stehen zusätzlich die folgenden Werte zur Verfügung:

gl.STATIC_READ: Der Inhalt soll einmalig durch das Lesen von Daten aus WebGL angegeben und häufig von der Anwendung abgefragt werden.
gl.DYNAMIC_READ: Der Inhalt soll wiederholt durch das Lesen von Daten aus WebGL neu angegeben und häufig von der Anwendung abgefragt werden.
gl.STREAM_READ: Der Inhalt soll einmalig durch das Lesen von Daten aus WebGL angegeben und höchstens einige Male von der Anwendung abgefragt werden.
gl.STATIC_COPY: Der Inhalt soll einmalig durch das Lesen von Daten aus WebGL angegeben und häufig als Quelle für WebGL-Zeichnungs- und Bildspezifikationsbefehle verwendet werden.
gl.DYNAMIC_COPY: Der Inhalt soll wiederholt durch das Lesen von Daten aus WebGL neu angegeben und häufig als Quelle für WebGL-Zeichnungs- und Bildspezifikationsbefehle verwendet werden.
gl.STREAM_COPY: Der Inhalt soll einmalig durch das Lesen von Daten aus WebGL angegeben und höchstens einige Male als Quelle für WebGL-Zeichnungs- und Bildspezifikationsbefehle verwendet werden.

Rückgabewert

Keiner (undefined).

Ausnahmen

Ein gl.OUT_OF_MEMORY Fehler wird ausgelöst, wenn der Kontext nicht in der Lage ist, einen Datenspeicher mit der angegebenen size zu erstellen.
Ein gl.INVALID_VALUE Fehler wird ausgelöst, wenn size negativ ist.
Ein gl.INVALID_ENUM Fehler wird ausgelöst, wenn target oder usage nicht einer der erlaubten Enums sind.

Beispiele

Verwendung von bufferData

const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW);

Abrufen von Pufferinformationen

Um die aktuelle Puffernutzung und Puffergröße zu überprüfen, verwenden Sie die WebGLRenderingContext.getBufferParameter()-Methode.

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

Berechnung der Größe eines typisierten Arrays

Um den Größenparameter für ein typisiertes Array zu berechnen.

const dataArray = new Float32Array([1, 2, 3, 4]);
const sizeInBytes = dataArray.length * dataArray.BYTES_PER_ELEMENT;

Spezifikationen

Specification
WebGL Specification # 5.14.5