यदि आपके पास इस तरह एक शीर्ष बफर है:
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
]
उन रेखाओं को खींचना संभव है जो बार-बार एक ही कोने को काटते हैं। यह अतिरेक को कम करता है। यदि आप सूचकांक बफ़र को बांधते हैं और जीपीयू को अनिर्णय सरणी में निर्दिष्ट आदेश द्वारा कोने को जोड़ने वाले रेखाखंडों को आकर्षित करने के लिए कहते हैं:
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);
जो एक ही छवि में परिणाम:
संग्रहीत कार्यक्षेत्र में विशाल अतिरेक पर ध्यान दें।