Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All
Expand Minimize

vertexAttribPointer method

Specifies the data formats and locations of attributes in a vertex attributes array.




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


index [in]

Type: Number

Index of target attribute in the buffer bound to gl.ARRAY_BUFFER.

size [in]

Type: Number

The number of components per attribute. Must be 1,2,3,or 4. Default is 4.

type [in]

Type: Number

Specifies the data type of each component in the array. Use one of the following values:

  • gl.FLOAT (default)
  • gl.FIXED
normalized [in]

Type: boolean


Values are converted to fixed point values when accessed.


Values are normalized when accessed.


stride [in]

Type: Number

Specifies the offset in bytes between the beginning of consecutive vertex attributes. Default value is 0, maximum is 255. Must be a multiple of type.

offset [in]

Type: Number

Specifies an offset in bytes of the first component of the first vertex attribute in the array. Default is 0 which means that vertex attributes are tightly packed. Must be a multiple of type.

Return value

This method does not return a value.


WebGL errorDescription
  • If size isn't between 1 and 4.
  • If stride is negative.
  • If offset is negative.
  • If stride or offset are not a multiple of type.
  • If no WebGL array buffer is bound.
gl.INVALID_ENUMIf type isn't an accepted value.


vertexAttribPointer can specify UNSIGNED_BYTE, BYTE, SHORT and UNSIGNED_SHORT for both normalized and un-normalized formats (all component types, 1 through 4, are supported) in Internet Explorer 11 using WebGL renderer version 0.93 and later.

Note  WebGL renderer version 0.93 does not cache transformations across calls to vertexAttribPointer.


The following example uses vertexAttribPointer to tell WebGL about a vertex attribute in either a line or a photo rendering app. For more info on this example, see Get started with WebGL.

//  Clear color buffer and set it to light gray
    gl.clearColor(1.0, 1.0, 1.0, 0.5);
// This draws either the grid or the photo for stretching
    if (document.getElementById("renderLines").checked)
      gl.bindBuffer(gl.ARRAY_BUFFER, this.texCoordBuffer2);


      gl.uniform2fv(gl.getUniformLocation(this.lineprogram, "p1"), p1);
      gl.uniform2fv(gl.getUniformLocation(this.lineprogram, "p2"), p2);

      gl.vertexAttribPointer(this.texCoordLocation2, 2, gl.FLOAT, false, 0, 0);


      gl.drawArrays(gl.LINES, 0, resolution * resolution * 10);
      gl.bindBuffer(gl.ARRAY_BUFFER, this.texCoordBuffer);

      gl.uniform2fv(gl.getUniformLocation(this.pictureprogram, "p1"), p1);
      gl.uniform2fv(gl.getUniformLocation(this.pictureprogram, "p2"), p2);

      gl.vertexAttribPointer(this.texCoordLocation, 2, gl.FLOAT, false, 0, 0);


      gl.drawArrays(gl.TRIANGLES, 0, resolution * resolution * 2 * 3);

See also




© 2015 Microsoft