103                 function bindBuffer(buffer, attribute, size, type, stride, offset)
104                 {
105                     // Lookup a shader attribute location
106                     var vertexPositionLocation = gl.getAttribLocation(program, attribute);
107                     // enable that attribute (location) to receive data from an array
108                     // The vertexPositionBuffer, defined above, is used because it is the currently bound buffer.
109                     gl.enableVertexAttribArray(vertexPositionLocation);
110                     // Each element in the vector contains size floating point entries, they should not be normalized,
111                     // there are stride bytes between the start of successive attribute values.and the first element is at position
112                     // offset in the array.
113                     gl.vertexAttribPointer(vertexPositionLocation, size, gl.FLOAT, false, stride, offset);
114                 }

Notes

First, lookup the index of the attribute by name with gl.getAttribLocation.

Then enable the attribute for input by passing that index to gl.enableVertexAttribArray.

Finally, vertexAttribPointer describes exactly how to map the currently bound buffer to the attibute.

• We use the buffer most recently passed into gl.bindBuffer.
• We map the array to the attribute passed in as attribute.
• Size gives the number of elemements read from the buffer into the attribute. To fill in a vec3 attribute, such as position, 3 entries will be used.
• Each entry is a 32bit floating point number
• Entries are not normalized - the actual provided value is used.
• There are stride bytes start to start for successive values. For a vec3, it will be 4 bytes/float * 3 floats = 12 bytes.
• Start reading data at offset bytes, 0 for the initial examples.

As we will soon see, it is common to put values for more than one attribute into a buffer. With more than one attribute in the same buffer, the stride and offset become very important.