MDN’s new design is in Beta! A sneak peek:


The WebGLRenderingContext.vertexAttribPointer() method of the WebGL API specifies the memory layout of the buffer holding the vertex attributes.


void gl.vertexAttribPointer(index, size, type, normalized, stride, offset);


A GLuint specifying the index of the vertex attribute that is to be modified.
A GLint specifying the number of components per vertex attribute. Must be 1, 2, 3, or 4.
A GLenum specifying the data type of each component in the array. Possible values:
  • gl.BYTE: signed 8-bit integer, with values in [-128, 127]
  • gl.SHORT: signed 16-bit integer, with values in [-32768, 32767]
  • gl.UNSIGNED_BYTE: unsigned 8-bit integer, with values in [0, 255]
  • gl.UNSIGNED_SHORT: unsigned 16-bit integer, with values in [0, 65535]
  • gl.FLOAT: 32-bit floating point number
  • When using a WebGL 2 context, the following values are available additionally:
    • gl.HALF_FLOAT: 16-bit floating point number
A GLboolean specifying whether integer data values should be normalized when being casted to a float.
  • If true, signed integers are normalized to [-1, 1].
  • If true, unsigned integers are normalized to [0, 1].
  • For types gl.FLOAT and gl.HALF_FLOAT, this parameter has no effect.
A GLsizei specifying the offset in bytes between the beginning of consecutive vertex attributes. Cannot be larger than 255.
A GLintptr specifying an offset in bytes of the first component in the vertex attribute array. Must be a multiple of type.

Return value



  • A gl.INVALID_VALUE error is thrown if offset is negative.
  • A gl.INVALID_OPERATION error is thrown if stride and offset are not multiples of the size of the data type.
  • A gl.INVALID_OPERATION error is thrown if no WebGLBuffer is bound to the ARRAY_BUFFER target.
  • When using a WebGL 2 context, a gl.INVALID_OPERATION error is thrown if this vertex attribute is defined as a integer in the vertex shader (e.g. uvec4 or ivec4, instead of vec4).


The WebGLRenderingContext.vertexAttribPointer() method specifies the data type and location of each vertex attribute, as well as the stride, i.e. how many bytes are used to describe each vertex.

While the data types can be either integer or floating point, they will always be converted to a float when they are sent to the vertex shader. In order to use integers, either cast the float back to an integer in the vertex shader, or use WebGL2RenderingContext.vertexAttribIPointer().


/* For this example, each vertex is described with 20 bytes as follows:
   [     Position      ][        Normal        ][Texture coords]
    [0-3]  [4-7] [8-11]  [12]  [13]  [14]  [15]  [16-17] [18-19]

//Create buffer
var buffer = new ArrayBuffer(20 * numVertices);
//... fill buffer, e.g. by reading from a file

//Send buffer to GPU
var vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, buffer, gl.STATIC_DRAW);

//Describe the layout of the buffer:
//1. position, not normalized
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 20, 0);
//2. normal vector, normalized to [-1, 1]
gl.vertexAttribPointer(1, 4, gl.BYTE, true, 20, 12);
//3. texture coordinates, normalized to [0, 1]
gl.vertexAttribPointer(2, 2, gl.UNSIGNED_SHORT, true, 20, 16);

//Connect to attributes from the vertex shader
gl.bindAttribLocation(shaderProgram, 0, "position");
gl.bindAttribLocation(shaderProgram, 1, "normal");
gl.bindAttribLocation(shaderProgram, 2, "texUV");


Specification Status Comment
WebGL 1.0
The definition of 'vertexAttribPointer' in that specification.
Recommendation Initial definition.
OpenGL ES 2.0
The definition of 'glVertexAttribPointer' in that specification.
Standard Man page of the OpenGL API.

Browser compatibility

FeatureChromeFirefoxEdgeInternet ExplorerOperaSafari
Basic Support94.01211125.1
FeatureAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic Support(Yes)25(Yes)(Yes)11128.1

See also

Document Tags and Contributors

 Contributors to this page: fscholz, Jedipedia, teoli, David_Gilbertson
 Last updated by: fscholz,