WebGLRenderingContext.bufferData()

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.

WebGL APIWebGLRenderingContext.bufferData() 方法创建并初始化了 Buffer 对象的数据存储区。

语法

// WebGL1:
void gl.bufferData(target, size, usage);
void gl.bufferData(target, ArrayBuffer? srcData, usage);
void gl.bufferData(target, ArrayBufferView srcData, usage);

// WebGL2:
void gl.bufferData(target, ArrayBufferView srcData, usage, srcOffset, length);

参数

target

GLenum 指定 Buffer 绑定点(目标)。可取以下值:

  • gl.ARRAY_BUFFER: 包含顶点属性的 Buffer,如顶点坐标,纹理坐标数据或顶点颜色数据。

  • gl.ELEMENT_ARRAY_BUFFER: 用于元素索引的 Buffer。

  • 当使用 WebGL 2 context 时,可以使用以下值:

    • gl.COPY_READ_BUFFER: 从一个 Buffer 对象复制到另一个 Buffer 对象。
    • gl.COPY_WRITE_BUFFER: 从一个 Buffer 对象复制到另一个 Buffer 对象。
    • gl.TRANSFORM_FEEDBACK_BUFFER: 用于转换反馈操作的 Buffer。
    • gl.UNIFORM_BUFFER: 用于存储统一块的 Buffer。
    • gl.PIXEL_PACK_BUFFER: 用于像素转换操作的 Buffer。
    • gl.PIXEL_UNPACK_BUFFER: 用于像素转换操作的 Buffer。
size

GLsizeiptr 设定 Buffer 对象的数据存储区大小。

srcData 可选

一个ArrayBufferSharedArrayBuffer 或者 ArrayBufferView 类型的数组对象,将被复制到 Buffer 的数据存储区。如果为null,数据存储区仍会被创建,但是不会进行初始化和定义。

usage

GLenum 指定数据存储区的使用方法。可取以下值:

  • gl.STATIC_DRAW: 缓冲区的内容可能经常使用,而不会经常更改。内容被写入缓冲区,但不被读取。

  • gl.DYNAMIC_DRAW: 缓冲区的内容可能经常被使用,并且经常更改。内容被写入缓冲区,但不被读取。

  • gl.STREAM_DRAW: 缓冲区的内容可能不会经常使用。内容被写入缓冲区,但不被读取。

  • 当使用 WebGL 2 context 时,可以使用以下值:

    • gl.STATIC_READ: 缓冲区的内容可能经常使用,而不会经常更改。内容从缓冲区读取,但不写入。
    • gl.DYNAMIC_READ: 缓冲区的内容可能经常使用,并且经常更改。内容从缓冲区读取,但不写入。
    • gl.STREAM_READ: 缓冲区的内容可能不会经常使用。内容从缓冲区读取,但不写入。
    • gl.STATIC_COPY: 缓冲区的内容可能经常使用,而不会经常更改。用户不会从缓冲区读取内容,也不写入。
    • gl.DYNAMIC_COPY: 缓冲区的内容可能经常使用,并且经常更改。用户不会从缓冲区读取内容,也不写入。
    • gl.STREAM_COPY: 缓冲区的内容可能不会经常使用。用户不会从缓冲区读取内容,也不写入。
srcOffset

GLuint 指定读取缓冲时的初始元素索引偏移量。

length 可选

GLuint 默认为 0。

返回值

None.

异常

  • 如果无法创建size指定大小的数据存储区,则会抛出gl.OUT_OF_MEMORY异常。
  • 如果size是负值,则会抛出gl.INVALID_VALUE异常。
  • 如果targetusage不属于枚举值之列,则会抛出gl.INVALID_ENUM异常。

示例

使用 bufferData

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

获取缓冲区信息

使用 WebGLRenderingContext.getBufferParameter() 方法检查当前缓冲区的使用情况和缓冲区大小。

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

规范

Specification
WebGL Specification
# 5.14.5

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
bufferData

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

更多