WebGLRenderingContext.bufferData()

这篇翻译不完整。请帮忙从英语翻译这篇文章

WebGL API 的WebGLRenderingContext.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

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() 方法检查当前缓冲区的使用情况和缓冲区大小。

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

规范

规范 状态 备注
WebGL 1.0
bufferData
Recommendation 初次定义
OpenGL ES 2.0
glBufferData
Standard OpenGL API的手册页
OpenGL ES 3.0
glBufferData
Standard OpenGL ES 3 API 的手册页

新增 target 可取的buffer值:
gl.COPY_READ_BUFFER,
gl.COPY_WRITE_BUFFER,
gl.TRANSFORM_FEEDBACK_BUFFER,
gl.UNIFORM_BUFFER,
gl.PIXEL_PACK_BUFFER,
gl.PIXEL_UNPACK_BUFFER

新增 usage 提示:
gl.STATIC_READ,
gl.DYNAMIC_READ,
gl.STREAM_READ,
gl.STATIC_COPY,
gl.DYNAMIC_COPY,
gl.STREAM_COPY.

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support912411125.1
WebGL256 No51 No43 No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes25 Yes Yes128.1 Yes
WebGL25858 No5143 No7.0

更多

文档标签和贡献者

此页面的贡献者: totoro
最后编辑者: totoro,