What is the purpose of vertexAttribPointer?

Question

I am writing a game engine using javascript and webgl. To test it out I have written a program that draws a cube. For this program to work vertexAttribPointer must be called after I have called bind buffers but before I call draw triangles. I was wondering what exactly this method did and why I have to call these methods in this order?

My best guess is that it initializes the attribute but I don't understand why it must be called on the client side if that is the case.

I have include some of the source below. Everything is written in typescript. For the full source see github.com/dkellycollins/nemesis

Setting up the shader:

var cubeShader = new shaderProgram();
cubeShader.addShader(shaders.colorVertexShader);
cubeShader.addShader(shaders.colorFragmentShader);
cubeShader.init();
cubeShader.enableAttrib("position", 3, 4 * (3 + 3), 0);
cubeShader.enableAttrib("color", 3, 4 * (3 + 3), 3 * 4);

ShaderProgram:

class shaderProgram {
    constructor() {
        this.Id = gl.createProgram();
    }

    public Id;

    public addShader(shader:WebGLShader[]):void {
        if(shader instanceof Array) {
            shader.forEach(s => {
                gl.attachShader(this.Id, s);
            });
        } else {
            gl.attachShader(this.Id, shader);
        }
    }

    public init():void {
        gl.linkProgram(this.Id);
    }

    public setActive() {
        gl.useProgram(this.Id);
    }

    public enableAttrib(attribName: string, index: number, stride:number, offset: number) {
        var attrib = gl.getAttribLocation(this.Id, attribName);
        gl.enableVertexAttribArray(attrib);
        gl.vertexAttribPointer(attrib, index, gl.FLOAT, false, stride, offset);
    }

    public setFloatAttrib(attribName:string, value:number) {
        var attrib = gl.getAttribLocation(this.Id, attribName);
        gl.vertexAttrib1f(attrib, value);
    }

    public setMatrix(uniName: string, value: number[]) {
        var uniform = gl.getUniformLocation(this.Id, uniName);
        gl.uniformMatrix4fv(uniform, false, value);
    }
}

Rendering the cube:

public render():void {
    gl.drawElements(gl.TRIANGLES, this._triangles, gl.UNSIGNED_SHORT, 0);
}

Vertex shader source:

attribute vec3 position; //the position of the point
uniform mat4 Pmatrix;
uniform mat4 Vmatrix;
uniform mat4 Mmatrix;
attribute vec3 color; //the color of the point
varying vec3 vColor;
void main(void) { //pre-built function
    gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(position, 1.); //0. is the z, and 1 is w
    vColor=color;
}

Answer 1

it tells WebgL how to interpret the data:

gl.vertexAttribPointer(attrib, index, gl.FLOAT, false, stride, offset);

this means: for attribute attrib there are index components of type gl.FLOAT that are not normalized starting at offset and stride apart in the gl.ARRAY_BUFFER bound at the time of this call.

The client is free to set its data anyway it wishes as long as they can be described as above.

Answer 2

According to this WebGl2 Fundamentals tutorial this is necessary to specify how to pull the data out. Also:

A hidden part of gl.vertexAttribPointer is that it binds the current ARRAY_BUFFER to the attribute. In other words now this attribute is bound to positionBuffer. That means we're free to bind something else to the ARRAY_BUFFER bind point. The attribute will continue to use positionBuffer.