บัฟเฟอร์ดัชนีคืออะไรและเกี่ยวข้องกับบัฟเฟอร์จุดสุดยอดอย่างไร

ฉันมีบัฟเฟอร์จุดสุดยอดเช่นนี้

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.LINESโดยใช้ WebGL หมายถึงหลายส่วนของบรรทัดที่คั่น

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

ดูเหมือนว่าจะเปิดใช้งานการวาดภาพของส่วนของเส้นหลาย ๆ อันในการเรียกใช้การดึงครั้งเดียวใน WebGL

ใครบางคนสามารถ ELI5 ให้ฉันสิ่งที่บัฟเฟอร์ดัชนีและวิธีการที่เกี่ยวข้องกับจุดสุดยอดบัฟเฟอร์? จะสร้างบัฟเฟอร์ดัชนีจากพื้นฐานได้อย่างไร

ใครบางคนสามารถ ELI5 ให้ฉันสิ่งที่บัฟเฟอร์ดัชนีและวิธีการที่เกี่ยวข้องกับจุดสุดยอดบัฟเฟอร์

บัฟเฟอร์จุดสุดยอดของคุณมีพิกัด X และ Y 5 จุด พวกเขาคือ:

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 ค่าแสดงดัชนีของจุดยอดสามจุดในบัฟเฟอร์จุดสุดยอดเช่น

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);

ซึ่งผลลัพธ์ในภาพเดียวกัน:

สังเกตความซ้ำซ้อนขนาดใหญ่ในจุดยอดที่เก็บไว้