WebGLRenderingContext.vertexAttribPointer()

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

Syntax

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

Parameters

index

A GLuint specifying the index of the vertex attribute that is to be modified.

size

A GLint specifying the number of components per vertex attribute. Must be 1, 2, 3, or 4.

type

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

normalized

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.

stride

A GLsizei specifying the offset in bytes between the beginning of consecutive vertex attributes. Cannot be larger than 255.

offset

A GLintptr specifying an offset in bytes of the first component in the vertex attribute array. Must be a multiple of type.

Return value

None.

Exceptions

• 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).

Description

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().

Examples

/* For this example, each vertex is described with 20 bytes as follows:
   [     Position      ][        Normal        ][Texture coords]
   [float][float][float][byte][byte][byte][byte][ushort][ushort]
    [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);
gl.enableVertexAttribArray(0);
//2. normal vector, normalized to [-1, 1]
gl.vertexAttribPointer(1, 4, gl.BYTE, true, 20, 12);
gl.enableVertexAttribArray(1);
//3. texture coordinates, normalized to [0, 1]
gl.vertexAttribPointer(2, 2, gl.UNSIGNED_SHORT, true, 20, 16);
gl.enableVertexAttribArray(2);
//Connect to attributes from the vertex shader
gl.bindAttribLocation(shaderProgram, 0, "position");
gl.bindAttribLocation(shaderProgram, 1, "normal");
gl.bindAttribLocation(shaderProgram, 2, "texUV");

Specifications

Browser compatibility

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.

See also

• WebGLRenderingContext.getVertexAttribOffset()
• WebGL2RenderingContext.vertexAttribIPointer()