The WebGLRenderingContext.bufferData()
method of the WebGL API initializes and creates the buffer object's data store.
The WebGLRenderingContext.bufferData()
method of the WebGL API initializes and creates the buffer object's data store.
js
// WebGL1 bufferData(target, usage) bufferData(target, size, usage) bufferData(target, srcData, usage) // WebGL2 bufferData(target, usage, srcOffset) bufferData(target, srcData, usage, srcOffset) bufferData(target, srcData, usage, srcOffset, length)
target
A GLenum
specifying the binding point (target). Possible values:
gl.ARRAY_BUFFER
Buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data.
gl.ELEMENT_ARRAY_BUFFER
Buffer used for element indices.
When using a WebGL 2 context, the following values are available additionally:
gl.COPY_READ_BUFFER
Buffer for copying from one buffer object to another.
gl.COPY_WRITE_BUFFER
Buffer for copying from one buffer object to another.
gl.TRANSFORM_FEEDBACK_BUFFER
Buffer for transform feedback operations.
gl.UNIFORM_BUFFER
Buffer used for storing uniform blocks.
gl.PIXEL_PACK_BUFFER
Buffer used for pixel transfer operations.
gl.PIXEL_UNPACK_BUFFER
Buffer used for pixel transfer operations.
size
A GLsizeiptr
setting the size in bytes of the buffer object's data store.
srcData
Optional
An ArrayBuffer
, SharedArrayBuffer
, a TypedArray
or a DataView
that will be copied into the data store. If null
, a data store is still created, but the content is uninitialized and undefined.
usage
A GLenum
specifying the intended usage pattern of the data store for optimization purposes. Possible values:
gl.STATIC_DRAW
gl.DYNAMIC_DRAW
gl.STREAM_DRAW
gl.STATIC_READ
The contents are intended to be specified once by reading data from WebGL, and queried many times by the application.
gl.DYNAMIC_READ
The contents are intended to be respecified repeatedly by reading data from WebGL, and queried many times by the application.
gl.STREAM_READ
The contents are intended to be specified once by reading data from WebGL, and queried at most a few times by the application
gl.STATIC_COPY
The contents are intended to be specified once by reading data from WebGL, and used many times as the source for WebGL drawing and image specification commands.
gl.DYNAMIC_COPY
The contents are intended to be respecified repeatedly by reading data from WebGL, and used many times as the source for WebGL drawing and image specification commands.
gl.STREAM_COPY
The contents are intended to be specified once by reading data from WebGL, and used at most a few times as the source for WebGL drawing and image specification commands.
srcOffset
A GLuint
specifying the element index offset where to start reading the buffer.
length
Optional
A GLuint
defaulting to 0.
None (undefined
).
gl.OUT_OF_MEMORY
error is thrown if the context is unable to create a data store with the given size
. gl.INVALID_VALUE
error is thrown if size
is negative.gl.INVALID_ENUM
error is thrown if target
or usage
are not one of the allowed enums. js
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);
To check the current buffer usage and buffer size, use the WebGLRenderingContext.getBufferParameter()
method.
js
gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE); gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_USAGE);
To calculate size parameter for a typed array.
js
const dataArray = new Float32Array([1, 2, 3, 4]); const sizeInBytes = dataArray.length * dataArray.BYTES_PER_ELEMENT;
Specification |
---|
WebGL Specification # 5.14.5 |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
bufferData |
9 | 12 | 4 | 11 | 12 | 5.1 | 4.4.3 | 25 | 4 | 12 | 8 | 1.5 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bufferData