WebGLRenderingContext.bufferData() - Web APIs | MDN

The WebGLRenderingContext.bufferData() method of the WebGL API initializes and creates the buffer object's data store. SkiptomaincontentSkiptosearchSkiptoselectlanguageReferencesWebAPIsWebGLRenderingContextWebGLRenderingContext.bufferData()ArticleActionsEnglish(US)SyntaxExamplesSpecificationsBrowsercompatibilitySeealsoRelatedTopicsWebGLAPIWebGLRenderingContextPropertiescanvasdrawingBufferHeightdrawingBufferWidthMethodsactiveTexture()attachShader()bindAttribLocation()bindBuffer()bindFramebuffer()bindRenderbuffer()bindTexture()blendColor()blendEquation()blendEquationSeparate()blendFunc()blendFuncSeparate()bufferData()bufferSubData()checkFramebufferStatus()clear()clearColor()clearDepth()clearStencil()colorMask() Experimental commit()compileShader()compressedTexImage[23]D()compressedTexSubImage2D()copyTexImage2D()copyTexSubImage2D()createBuffer()createFramebuffer()createProgram()createRenderbuffer()createShader()createTexture()cullFace()deleteBuffer()deleteFramebuffer()deleteProgram()deleteRenderbuffer()deleteShader()deleteTexture()depthFunc()depthMask()depthRange()detachShader()disable()disableVertexAttribArray()drawArrays()drawElements()enable()enableVertexAttribArray()finish()flush()framebufferRenderbuffer()framebufferTexture2D()frontFace()generateMipmap()getActiveAttrib()getActiveUniform()getAttachedShaders()getAttribLocation()getBufferParameter()getContextAttributes()getError()getExtension()getFramebufferAttachmentParameter()getParameter()getProgramInfoLog()getProgramParameter()getRenderbufferParameter()getShaderInfoLog()getShaderParameter()getShaderPrecisionFormat()getShaderSource()getSupportedExtensions()getTexParameter()getUniform()getUniformLocation()getVertexAttrib()getVertexAttribOffset()hint()isBuffer()isContextLost()isEnabled()isFramebuffer()isProgram()isRenderbuffer()isShader()isTexture()lineWidth()linkProgram()makeXRCompatible()pixelStorei()polygonOffset()readPixels()renderbufferStorage()sampleCoverage()scissor()shaderSource()stencilFunc()stencilFuncSeparate()stencilMask()stencilMaskSeparate()stencilOp()stencilOpSeparate()texImage2D()texParameter[fi]()texSubImage2D()uniform[1234][fi][v]()uniformMatrix[234]fv()useProgram()validateProgram()vertexAttrib[1234]f[v]()vertexAttribPointer()viewport()RelatedpagesforWebGLANGLE_instanced_arraysEXT_blend_minmaxEXT_color_buffer_half_floatEXT_disjoint_timer_queryEXT_frag_depthEXT_sRGBEXT_shader_texture_lodEXT_texture_filter_anisotropicOES_element_index_uintOES_standard_derivativesOES_texture_floatOES_texture_float_linearOES_texture_half_floatOES_texture_half_float_linearOES_vertex_array_objectWEBGL_color_buffer_floatWEBGL_compressed_texture_atcWEBGL_compressed_texture_etc1WEBGL_compressed_texture_pvrtcWEBGL_compressed_texture_s3tcWEBGL_compressed_texture_s3tc_srgbWEBGL_debug_renderer_infoWEBGL_debug_shadersWEBGL_depth_textureWEBGL_draw_buffersWEBGL_lose_contextWebGL2RenderingContextWebGLActiveInfoWebGLBufferWebGLContextEventWebGLFramebufferWebGLObjectWebGLProgramWebGLQueryWebGLRenderbufferWebGLSamplerWebGLShaderWebGLShaderPrecisionFormatWebGLSyncWebGLTextureWebGLTransformFeedbackWebGLUniformLocationWebGLVertexArrayObjectSyntaxExamplesSpecificationsBrowsercompatibilitySeealsoWebGLRenderingContext.bufferData() TheWebGLRenderingContext.bufferData()methodoftheWebGLAPIinitializesandcreatesthe bufferobject'sdatastore. Syntax//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) Parameters target AGLenumspecifyingthebindingpoint(target).Possiblevalues: gl.ARRAY_BUFFER:Buffercontainingvertexattributes,suchas vertexcoordinates,texturecoordinatedata,orvertexcolordata. gl.ELEMENT_ARRAY_BUFFER:Bufferusedforelementindices. WhenusingaWebGL2context,thefollowingvaluesareavailableadditionally: gl.COPY_READ_BUFFER:Bufferforcopyingfromone bufferobjecttoanother. gl.COPY_WRITE_BUFFER:Bufferforcopyingfromone bufferobjecttoanother. gl.TRANSFORM_FEEDBACK_BUFFER:Bufferfortransform feedbackoperations. gl.UNIFORM_BUFFER:Bufferusedforstoringuniform blocks. gl.PIXEL_PACK_BUFFER:Bufferusedforpixeltransfer operations. gl.PIXEL_UNPACK_BUFFER:Bufferusedforpixel transferoperations. size AGLsizeiptrsettingthesizeinbytesofthebufferobject'sdata store. srcDataOptional AnArrayBuffer,SharedArrayBufferoroneofthe ArrayBufferViewtypedarraytypesthatwillbecopiedintothedata store.Ifnull,adatastoreisstillcreated,butthecontentis uninitializedandundefined. usage AGLenumspecifyingtheintendedusagepatternofthedatastore foroptimizationpurposes.Possiblevalues: gl.STATIC_DRAW:Thecontentsareintendedtobespecified oncebytheapplication,andusedmanytimesasthesourceforWebGL drawingandimagespecificationcommands. gl.DYNAMIC_DRAW:Thecontentsareintendedtoberespecified repeatedlybytheapplication,andusedmanytimesasthesourceforWebGL drawingandimagespecificationcommands. gl.STREAM_DRAW:Thecontentsareintendedtobespecified oncebytheapplication,andusedatmostafewtimesasthesourcefor WebGLdrawingandimagespecificationcommands. WhenusingaWebGL2context,thefollowingvaluesareavailableadditionally: gl.STATIC_READ:Thecontentsareintendedtobe specifiedoncebyreadingdatafromWebGL,andqueriedmanytimes bytheapplication. gl.DYNAMIC_READ:Thecontentsareintendedtobe respecifiedrepeatedlybyreadingdatafromWebGL,andqueried manytimesbytheapplication. gl.STREAM_READ:Thecontentsareintendedtobe specifiedoncebyreadingdatafromWebGL,andqueriedatmosta fewtimesbytheapplication gl.STATIC_COPY:Thecontentsareintendedtobe specifiedoncebyreadingdatafromWebGL,andusedmanytimesas thesourceforWebGLdrawingandimagespecificationcommands. gl.DYNAMIC_COPY:Thecontentsareintendedtobe respecifiedrepeatedlybyreadingdatafromWebGL,andusedmany timesasthesourceforWebGLdrawingandimagespecification commands. gl.STREAM_COPY:Thecontentsareintendedtobe specifiedoncebyreadingdatafromWebGL,andusedatmostafew timesasthesourceforWebGLdrawingandimagespecification commands. srcOffset AGLuintspecifyingtheelementindexoffsetwheretostartreading thebuffer. lengthOptional AGLuintdefaultingto0. ReturnvalueNone(undefined).Exceptions Agl.OUT_OF_MEMORYerroristhrownifthecontextisunabletocreate adatastorewiththegivensize. Agl.INVALID_VALUEerroristhrownifsizeisnegative. Agl.INVALID_ENUMerroristhrowniftargetor usagearenotoneoftheallowedenums. ExamplesUsingbufferDatavarcanvas=document.getElementById('canvas'); vargl=canvas.getContext('webgl'); varbuffer=gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,buffer); gl.bufferData(gl.ARRAY_BUFFER,1024,gl.STATIC_DRAW); Gettingbufferinformation Tocheckthecurrentbufferusageandbuffersize,usethe WebGLRenderingContext.getBufferParameter()method. gl.getBufferParameter(gl.ARRAY_BUFFER,gl.BUFFER_SIZE); gl.getBufferParameter(gl.ARRAY_BUFFER,gl.BUFFER_USAGE); GettingsizeofatypedarrayTocalculatesizeparameterforatypedarray. vardataArray=newFloat32Array([1,2,3,4]); varsizeInBytes=dataArray.length*dataArray.BYTES_PER_ELEMENT; SpecificationsSpecificationWebGLSpecification#5.14.5BrowsercompatibilityBCDtablesonlyloadinthebrowserSeealso WebGLRenderingContext.createBuffer() WebGLRenderingContext.bufferSubData() Otherbuffers:WebGLFramebuffer,WebGLRenderbuffer Foundaproblemwiththispage?EditonGitHubSourceonGitHubReportaproblemwiththiscontentonGitHubWanttofixtheproblemyourself?SeeourContributionguide.Lastmodified:May4,2022,byMDNcontributors