在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

WebGLRenderingContext.bufferData() 方法在 WebGL API initializes and creates the buffer object's data store.

句法

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

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.
• 当使用 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

GLsizeiptr setting the size in bytes of the buffer object's data store.

srcData 可选

ArrayBuffer , SharedArrayBuffer or one of the ArrayBufferView typed array types 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 : The contents are intended to be specified once by the application, and used many times as the source for WebGL drawing and image specification commands.
• gl.DYNAMIC_DRAW : The contents are intended to be respecified repeatedly by the application, and used many times as the source for WebGL drawing and image specification commands.
• gl.STREAM_DRAW : The contents are intended to be specified once by the application, and used at most a few times as the source for WebGL drawing and image specification commands.
• 当使用 WebGL 2 context , the following values are available additionally:
  • 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

GLuint specifying the element index offset where to start reading the buffer.

length 可选

GLuint defaulting to 0.

返回值

None.

异常

• A gl.OUT_OF_MEMORY error is thrown if the context is unable to create a data store with the given size .
• A gl.INVALID_VALUE error is thrown if size 为负。
• A gl.INVALID_ENUM error is thrown if target or usage are not one of the allowed enums.

范例

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

Getting buffer information

To check the current buffer usage and buffer size, use the WebGLRenderingContext.getBufferParameter() 方法。

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

Getting size of a typed array

To calculate size parameter for a typed array.

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

规范

规范	状态	注释
WebGL 1.0 The definition of 'bufferData' in that specification.	推荐	初始定义。
OpenGL ES 2.0 The definition of 'glBufferData' in that specification.	标准	Man page of the OpenGL API.
OpenGL ES 3.0 The definition of 'glBufferData' in that specification.	标准	Man page of the (similar) OpenGL ES 3 API. Adds new target buffers: gl.COPY_READ_BUFFER , gl.COPY_WRITE_BUFFER , gl.TRANSFORM_FEEDBACK_BUFFER , gl.UNIFORM_BUFFER , gl.PIXEL_PACK_BUFFER , gl.PIXEL_UNPACK_BUFFER Adds new usage hints: gl.STATIC_READ , gl.DYNAMIC_READ , gl.STREAM_READ , gl.STATIC_COPY , gl.DYNAMIC_COPY , gl.STREAM_COPY .

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
bufferData	Chrome 9	Edge 12	Firefox 4	IE 11	Opera 12	Safari 5.1	WebView Android Yes	Chrome Android 25	Firefox Android Yes	Opera Android 12	Safari iOS 8	Samsung Internet Android 1.5
WebGL2	Chrome 56	Edge 79	Firefox 51	IE No	Opera 43	Safari No	WebView Android 58	Chrome Android 58	Firefox Android 51	Opera Android 43	Safari iOS No	Samsung Internet Android 7.0

图例

完整支持

完整支持

不支持

不支持

另请参阅

• WebGLRenderingContext.createBuffer()
• WebGLRenderingContext.bufferSubData()
• Other buffers: WebGLFramebuffer , WebGLRenderbuffer

元数据

• 最后修改： Feb 26, 2020

相关话题

1. WebGL API
2. WebGLRenderingContext
3. 特性

   1. canvas
   2. drawingBufferHeight
   3. drawingBufferWidth
4. 方法

   1. activeTexture()
   2. attachShader()
   3. bindAttribLocation()
   4. bindBuffer()
   5. bindFramebuffer()
   6. bindRenderbuffer()
   7. bindTexture()
   8. blendColor()
   9. blendEquation()
   10. blendEquationSeparate()
   11. blendFunc()
   12. blendFuncSeparate()
   13. bufferData()
   14. bufferSubData()
   15. checkFramebufferStatus()
   16. clear()
   17. clearColor()
   18. clearDepth()
   19. clearStencil()
   20. colorMask()
   21. commit()
   22. compileShader()
   23. compressedTexImage[23]D()
   24. compressedTexSubImage2D()
   25. copyTexImage2D()
   26. copyTexSubImage2D()
   27. createBuffer()
   28. createFramebuffer()
   29. createProgram()
   30. createRenderbuffer()
   31. createShader()
   32. createTexture()
   33. cullFace()
   34. deleteBuffer()
   35. deleteFramebuffer()
   36. deleteProgram()
   37. deleteRenderbuffer()
   38. deleteShader()
   39. deleteTexture()
   40. depthFunc()
   41. depthMask()
   42. depthRange()
   43. detachShader()
   44. disable()
   45. disableVertexAttribArray()
   46. drawArrays()
   47. drawElements()
   48. enable()
   49. enableVertexAttribArray()
   50. finish()
   51. flush()
   52. framebufferRenderbuffer()
   53. framebufferTexture2D()
   54. frontFace()
   55. generateMipmap()
   56. getActiveAttrib()
   57. getActiveUniform()
   58. getAttachedShaders()
   59. getAttribLocation()
   60. getBufferParameter()
   61. getContextAttributes()
   62. getError()
   63. getExtension()
   64. getFramebufferAttachmentParameter()
   65. getParameter()
   66. getProgramInfoLog()
   67. getProgramParameter()
   68. getRenderbufferParameter()
   69. getShaderInfoLog()
   70. getShaderParameter()
   71. getShaderPrecisionFormat()
   72. getShaderSource()
   73. getSupportedExtensions()
   74. getTexParameter()
   75. getUniform()
   76. getUniformLocation()
   77. getVertexAttrib()
   78. getVertexAttribOffset()
   79. hint()
   80. isBuffer()
   81. isContextLost()
   82. isEnabled()
   83. isFramebuffer()
   84. isProgram()
   85. isRenderbuffer()
   86. isShader()
   87. isTexture()
   88. lineWidth()
   89. linkProgram()
   90. pixelStorei()
   91. polygonOffset()
   92. readPixels()
   93. renderbufferStorage()
   94. sampleCoverage()
   95. scissor()
   96. shaderSource()
   97. stencilFunc()
   98. stencilFuncSeparate()
   99. stencilMask()
   100. stencilMaskSeparate()
   101. stencilOp()
   102. stencilOpSeparate()
   103. texImage2D()
   104. texParameter[fi]()
   105. texSubImage2D()
   106. uniform[1234][fi][v]()
   107. uniformMatrix[234]fv()
   108. useProgram()
   109. validateProgram()
   110. vertexAttrib[1234]f[v]()
   111. vertexAttribPointer()
   112. viewport()
5. WebGL 相关页面

   1. ANGLE_instanced_arrays
   2. EXT_blend_minmax
   3. EXT_color_buffer_half_float
   4. EXT_disjoint_timer_query
   5. EXT_frag_depth
   6. EXT_sRGB
   7. EXT_shader_texture_lod
   8. EXT_texture_filter_anisotropic
   9. OES_element_index_uint
   10. OES_standard_derivatives
   11. OES_texture_float
   12. OES_texture_float_linear
   13. OES_texture_half_float
   14. OES_texture_half_float_linear
   15. OES_vertex_array_object
   16. WEBGL_color_buffer_float
   17. WEBGL_compressed_texture_atc
   18. WEBGL_compressed_texture_etc1
   19. WEBGL_compressed_texture_pvrtc
   20. WEBGL_compressed_texture_s3tc
   21. WEBGL_compressed_texture_s3tc_srgb
   22. WEBGL_debug_renderer_info
   23. WEBGL_debug_shaders
   24. WEBGL_depth_texture
   25. WEBGL_draw_buffers
   26. WEBGL_lose_context
   27. WebGL2RenderingContext
   28. WebGLActiveInfo
   29. WebGLBuffer
   30. WebGLContextEvent
   31. WebGLFramebuffer
   32. WebGLObject
   33. WebGLProgram
   34. WebGLQuery
   35. WebGLRenderbuffer
   36. WebGLSampler
   37. WebGLShader
   38. WebGLShaderPrecisionFormat
   39. WebGLSync
   40. WebGLTexture
   41. WebGLTransformFeedback
   42. WebGLUniformLocation
   43. WebGLVertexArrayObject