Как gl.drawElements находит соответствующий буфер массива вершин?

drawArray использовать только одну или несколько ARRAY_BUFFER откуда рисуются вершины в порядке их расположения в буферах, из параметра first для параметра count.

drawElements используйте один или несколько ARRAY_BUFFER И ELEMENT_ARRAY_BUFFER, которые содержат индексы, указывающие на ARRAY_BUFFER вершины для рисования. В drawElements параметр count указывает количество индексов для чтения в ELEMENT_ARRAY_BUFFER, а offset указывает смещение в байтах, с которого начинается чтение ELEMENT_ARRAY_BUFFER (обычно FirstIndex*sizeof(type), где type может быть UNSIGNED_BYTE (1 байт), UNSIGNED_SHORT (2 байта) или UNSIGNED_INT (4 байта).

ELEMENT_ARRAY_BUFFER:

[0][1][2][1][2][0][1][2][3][3][1][2][3][4][5][...

ARRAY_BUFFER:

|   0   |   1    |    2   |    3   |    4   | ...
[x][y][z][x][y][z][x][y][z][x][y][z][x][y][z][...

Для правильной работы размер offset + count*sizeof(type) не должен превышать размер ELEMENT_ARRAY_BUFFER в байтах. Кроме того, индекс элементов в ELEMENT_ARRAY_BUFFER должен быть меньше количества вершин, содержащихся в ARRAY_BUFFER.

Как и drawArray, drawElements использует текущий связанный буфер (буферы) (с настроенными указателями атрибутов) в качестве источника данных. Разница с drawElements заключается в том, что вы должны указать буфер дополнительных элементов (индексов), используя цель ELEMENT_ARRAY_BUFFER, например:

gl.bindBuffer(gl.ARRAY_BUFFER, myVerticesA);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, myIndicesA);
// configure attributes pointers here
gl.drawElements(gl.TRIANGLES, 12345, gl.UNSIGNED_SHORT, 0);

«Как» drawElements будет принимать атрибуты в буфере(ах) ARRAY_BUFFER в соответствии с индексами, хранящимися в ELEMENT_ARRAY_BUFFER, зависит от того, как вы настроили указатели атрибутов.

Предположим, что у вас есть следующий буфер вершин с чередующимися позициями, нормалями и координатами текстуры:

|    p0    ||    n0    ||  t0  ||    p1    ||    n1    ||  t1  |
[px][py][pz][nx][ny][nz][tu][tv][px][py][pz][nx][ny][nz][tu][tv][...

Мы определяем указатели атрибутов следующим образом:

let stride = 8*4;  // 8*float (8 * 4 bytes)
let offp = 0;   // positions at beginning
let offn = 3*4; // normals after 3*float position.
let offt = 6*4; // tex coords after 3*float position + 3*float normal 
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, stride, offp);
gl.vertexAttribPointer(1, 3, gl.FLOAT, false, stride, offn);
gl.vertexAttribPointer(2, 2, gl.FLOAT, false, stride, offt);

Используя буфер элементов (индексов), GL просто сдвигает позиции указателей в соответствии с индексами, хранящимися в буфере ELEMENT_ARRAY_BUFFER:

 // pseudo-code
 for(let i = start_elem; i < start_elem+count_elem; i++) {

   let index = ELEMENT_ARRAY_BUFFER[i];

   attrib[0] = ARRAY_BUFFER[(index*stride)+offp];
   attrib[1] = ARRAY_BUFFER[(index*stride)+offn];
   attrib[2] = ARRAY_BUFFER[(index*stride)+offt];

 }

Код, который вы разместили, не является WebGL. Вы используете какую-то библиотеку, которая ясна из кода. Такие вещи, как Program, IndexBuffer, ArrayBuffer, являются частью библиотеки, которую вы используете. То, как эта библиотека работает, зависит от этой библиотеки.

В общем, WebGL имеет шейдеры, вершинный шейдер, работа которого состоит в том, чтобы установить gl_Position в координату пространства отсечения для каждой вершины, и фрагментный шейдер, работа которого состоит в том, чтобы установить gl_FragColor в цвет для каждого пикселя.

Вершинный шейдер обычно получает данные о позициях из атрибутов. Атрибуты обычно получают свои данные из буферов. Вы указываете атрибуту, из какого буфера получать данные, сначала привязывая буфер к точке привязки ARRAY_BUFFER с помощью gl.bindBuffer(gl.ARRAY_BUFFER, someBuffer), а затем вызывая gl.vertexAttribPointer, который сообщает WebGL, как вы хотите получить данные из этого буфера (какого типа данные, сколько значений в нем). приходится на вершину, сколько байт пропускать между вершинами, как далеко в буфере начинать). gl.vertexAttribPointer сохраняет всю эту информацию для данного атрибута и ссылку на текущий буфер, который был привязан к точке привязки ARRAY_BUFFER, поэтому вы можете свободно привязывать там другой буфер для настройки другого атрибута.

При вызове gl.drawArrays данные будут извлекаться из буферов, как вы указали в атрибутах шейдера, один набор значений для каждой итерации шейдера

Что касается gl.drawElements, то он занимает еще один буфер, привязанный к ELEMENT_ARRAY_BUFFER, и когда вы вызываете gl.drawElements, вы сообщаете ему тип данных в этом буфере (gl.UNSIGNED_BYTE или gl.UNSIGNED_SHORT). Затем он использует значения этого буфера для извлечения значений из буфера атрибутов.

gl.drawElements точно такое же, как gl.drawArrays, если вы поместите простое возрастающее значение в буфер. Пример

 const offset  = 0;
 const numVerts = 100;

 // process 100 vertices from the buffers pointed to by the attributes
 // in order 0 to 99
 gl.drawArrays(gl.POINTS, offset, numVerts)

Фактически такой же, как

 // fill a buffer with numbers 0 to 99 (0 to numVerts)
 const numVerts = 100;
 const indexData = new Uint16Array(numVerts);
 for (let i = 0; i < numVerts; ++i) {
   indexData[i] = i;
 }
 const indexBuffer = gl.createBuffer();
 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);

 // process 100 vertices from the buffers pointed to by the attributes
 // in order 0 to 99
 const offset  = 0;
 gl.drawElements(gl.POINTS, numVerts, gl.UNSIGNED_SHORT, offset);

но, конечно, поскольку во втором случае вы предоставили indexData, он не должен быть последовательным.

Я бы посоветовал прочитать другие учебники по webgl