인덱스 버퍼 란 무엇이며 버텍스 버퍼와 어떤 관련이 있습니까?

다음과 같은 정점 버퍼가 있습니다.

0.0, 0.0,
1.0, 0.0,
0.0, 0.6,
1.0, 0.6,
0.5, 1.0

다음 색인 버퍼가 있습니다.

0, 2,
2, 4,
4, 3,
3, 2,
2, 1,
1, 0,
0, 3,
3, 1

gl.LINESWebGL을 사용하여 그리기 를 원한다는 것을 알고 있습니다. 여러 개의 분리 된 선 세그먼트를 의미합니다.

gl.drawElements(gl.LINES, 16, gl.UNSIGNED_SHORT, indexBuffer);

WebGL에서 단일 그리기 호출로 여러 선 세그먼트를 그릴 수 있습니다.

누군가 나에게 ELI5를 제공 할 수 있습니까? 인덱스 버퍼는 무엇이며 버텍스 버퍼와 어떤 관련이 있습니까? 프리미티브에서 인덱스 버퍼를 생성하는 방법은 무엇입니까?

누군가 나에게 ELI5를 제공 할 수 있습니까, 인덱스 버퍼는 무엇이며 이것이 버텍스 버퍼와 어떤 관련이 있습니까?

정점 버퍼는 5 개의 정점의 X 및 Y 좌표를 포함합니다. 그들은:

index |  X  |  Y
  0   | 0.0 | 0.0 
  1   | 1.0 | 0.0
  2   | 0.0 | 0.6
  3   | 1.0 | 0.6
  4   | 0.5 | 1.0

인덱스 버퍼에는 이러한 정점 사이에 그릴 선에 대한 정보가 포함되어 있습니다. 정점 버퍼에있는 각 정점의 인덱스를 값으로 사용합니다.

선을 그리므로 색인 버퍼의 각 연속 값 쌍은 선 세그먼트를 나타냅니다. 예를 들어, 인덱스 버퍼가로 시작 0, 2하면 꼭짓점 배열에서 0 번째와 2 번째 정점 사이에 선을 그리는 것입니다.이 경우에는에서 [0.0, 0.0]로 가는 선이 그려 집니다 [0.0, 0.6].

다음 그래픽에서 각 인덱스 쌍은 나타내는 선과 색상이 조정됩니다.

마찬가지로 선 대신 삼각형을 그리는 경우 3 개의 연속 된 값이 정점 버퍼에있는 3 개의 정점의 인덱스를 나타내는 인덱스 버퍼를 제공해야합니다.

0, 1, 2,
2, 1, 3,
2, 3, 4,

다음과 같은 정점 버퍼가있는 경우 :

var vertices = [
  0.0, 0.0, 0.0,
  1.0, 0.0, 0.0,
  0.0, 0.6, 0.0,
  1.0, 0.6, 0.0,
  0.5, 1.0, 0.0
]

그리고 그대로 그대로 그립니다.

// Create an empty buffer object
var vertex_buffer = gl.createBuffer();

// Bind appropriate array buffer to it
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

// Pass the vertex data to the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

/* [...] */

// Draw the lines
gl.drawArrays(gl.LINES, 0, 5);

각 선분에 대해 두 개의 전용 좌표가 필요합니다. (가)와 함께 vertices위의 정의, 그것은 단지 가능한 것이 그리 두 줄을 :

다음 지수가 정의 된 경우 :

var indices = [
  0, 2,
  2, 4,
  4, 3,
  3, 2,
  2, 1,
  1, 0,
  0, 3,
  3, 1
]

동일한 꼭짓점을 반복해서 교차하는 선을 그릴 수 있습니다. 이것은 중복성을 줄입니다. 인덱스 버퍼를 바인딩하고 GPU가 indecies 배열에 지정된 순서로 정점을 연결하는 선분을 그리도록 지시하는 경우 :

var index_buffer = gl.createBuffer();

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

// draw geometry lines by indices
gl.drawElements(gl.LINES, 16, gl.UNSIGNED_SHORT, index_buffer);

동일한 정점을 반복해서 재정의하지 않고도 복잡한 그림을 그릴 수 있습니다. 결과는 다음과 같습니다.

인덱스없이 동일한 결과를 얻으려면 정점 버퍼는 다음과 같아야합니다.

var vertices = [
  0.0, 0.0, 0.0,
  0.0, 0.6, 0.0,
  0.0, 0.6, 0.0,
  0.5, 1.0, 0.0,
  0.5, 1.0, 0.0,
  1.0, 0.6, 0.0,
  1.0, 0.6, 0.0,
  0.0, 0.6, 0.0,
  0.0, 0.6, 0.0,
  1.0, 0.0, 0.0,
  1.0, 0.0, 0.0,
  0.0, 0.0, 0.0,
  0.0, 0.0, 0.0,
  1.0, 0.6, 0.0,
  1.0, 0.6, 0.0,
  1.0, 0.0, 0.0
]

/* [...] */

// Draw the lines
gl.drawArrays(gl.LINES, 0, 16);

동일한 이미지가 생성됩니다.

저장된 정점의 큰 중복성을 주목하십시오.