webGL: vertexAttribPointer function understanding

MDN official definition

Tells the graphics card to read vertex data from the currently bound buffer (the buffer specified by bindBuffer() ).

grammar

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

parameter

• index
  Specifies the index of the vertex attribute to modify
• size
  Specifies the number of components for each vertex attribute, must be 1, 2, 3, or 4.
• type
  Specify the data type of each element in the array
• normalized
  Should integer values be normalized to a specific range when converting to float
• stride
  A GLsizei specifying the offset in bytes between the start of consecutive vertex attributes (i.e. the length of one row in the array). Cannot be greater than 255. If stride is 0, the attribute is assumed to be tightly packed, i.e. attributes are not interleaved, each attribute is in a separate block, and the attribute of the next vertex immediately follows the current vertex.
• offset
  GLintptr (en-US) specifies the byte offset of the first part of the vertex attribute array. Must be a multiple of the type's length in bytes

understand

Why use vertexAttribPointer

If you need to modify vertex positions and colors, then you need to create two buffers. Using vertexAttribPointer can store a variety of data, and different data are distinguished by offset, so that only one buffer data is needed.

Parameter understanding

• index
  Through the gl.getAttribLocation(gl.program, "a_Position") method, the index of the a_Position attribute can be returned, which is the data required by index

• size
  You need to fetch several data.
  E.g:

   const verties = new Float32Array([
      0.0, 0.5, -0.4, 0.19607843137254902, 0.8431372549019608, 0.8745098039215686, -0.5, -0.5, -0.4, 0.4, 1.0, 0.4, 0.5,
      -0.5, -0.4, 1.0, 0.4, 0.4, 0.5, 0.4, -0.2, 1.0, 0.4, 0.4, -0.5, 0.4,
      -0.2, 1.0, 1.0, 0.4, 0.0, -0.6, -0.2, 1.0, 1.0, 0.4, 0.0, 0.5, 0.0, 0.4,
      0.4, 1.0, -0.5, -0.5, 0.0, 0.4, 0.4, 1.0, 0.5, -0.5, 0.0, 1.0, 0.4, 0.4,
    ]);

  If the parameter is set to 3, that means 3 data is required.

• type
  Specify the data type, gl.FLOAT , gl.BYTE and other data types, generally gl.FLOAT
• normalized
  Invalid for parameter gl.FLOAT
• stride
  To set the offset, first get const FSIZE = verties.BYTES_PER_ELEMENT , which is the byte length of the array, and the offset must be a multiple of the byte length.

The key step is to set the interval when taking data each time, or take the above data as an example, set it to 1*FSIZE , then the data taken is:

`0.0, 0.5, -0.4`, 
`0.5, -0.4, 0.19607843137254902`, 
`-0.4, 0.19607843137254902, 0.8431372549019608,`

If it is set to 3*FSIZE , the data taken is:
0.0, 0.5, -0.4,
0.19607843137254902, 0.8431372549019608, 0.8745098039215686,
-0.5, -0.5, -0.4

• offset
  Need to cooperate with the previous parameter to understand,
  Example: gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 3*FSIZE);

  First, take 6 pieces of data at a time, of which the data offset by 3 units is needed, and size is equal to 3, so it can be confirmed that the data taken are the last 3 pieces,

  For example, the first time to get 6 units of data:
  0.0, 0.5, -0.4, 0.19607843137254902, 0.8431372549019608, 0.8745098039215686

  This time the real one got it was 0.19607843137254902, 0.8431372549019608, 0.8745098039215686