2a:null 2b:["$","title",null,{"children":"Indexed vs Non-Indexed Drawing | VIDI Intro Graphics | Observable"}] 30:T63e,## WebGL Fundamentals # Indexed vs Non-Indexed Drawing The GPU doesn't care whether vertices are duplicated or referenced by indices, but memory efficiency and consistency do. In WebGL, we can draw geometry in two main ways: *non-indexed* (with `drawArrays`) and *indexed* (with `drawElements`). - **Non-Indexed (`drawArrays`)**: the GPU reads vertices sequentially from the buffers. If a vertex is used in multiple primitives, it **must be duplicated** in the buffer. - **Indexed (`drawElements`)**: the GPU uses a separate index buffer (**IBO**) to reference vertices in the **VBO**(s). Shared vertices don't need to be duplicated, thus, reduces memory usage and ensures consistency across primitives. Both approaches produce the same visual result, but in practice, indexed drawing is the standard choice in real engines, especially for complex meshes. ### Key Distinction - **VBO (Vertex Buffer Object)**: stores actual vertex data (position, color, normal, etc.). - **EBO or IBO (Element/Index Buffer Object)**: stores integer indices that reference vertices in the VBO. - **EBO** is the specific terminology used in the OpenGL API. - **IBO** is a more general term used across various APIs. This notebook compares both approaches side by side. The left viewport uses **`drawArrays()`**, duplicating vertices, while the right viewport uses **`drawElements()`**, reusing vertices via an index buffer. Look into **`drawWithoutEBO()`** and **`drawWithEBO()`** to see how the setup differs behind the scenes, and try moving vertices around, notice how shared vertices behave differently!31:T72c,drawWithoutEBO = () => { const VERTEX_COUNT = 6; // total 6 vertices in the scene const POS_SIZE = 3; // 3 floats (x, y, z) per vertex const COLOR_SIZE = 3; // 3 floats (r, g, b) per vertex const VERTEX_SIZE = 6; // 6 floats (3 pos + 3 color) per vertex const POS_OFFSET = 0; // position data begins at the 0th float of each vertex block const COLOR_OFFSET = 3; // color data begins at the 3rd float of each vertex block const FLOAT_SIZE = 4; // bytes per float const positionsAndColors = [ // positions // colors -0.5, 0.5, 0, 1, 0, 0, // p0 and c0 (x, y, z, r, g, b) 0.5, 0.5, 0, 1, 1, 1, // p1 and c1 0.5, -0.5, 0, 0, 1, 0, // p2 and c2 -0.5, 0.5, 0, 1, 0, 0, // p3 and c3 (duplicated p0 and c0) 0.5, -0.5, 0, 0, 1, 0, // p4 and c4 (duplicated p2 and c2) -0.5, -0.5, 0, 0, 0, 1, // p5 and c5 ]; // --- Allocate and upload interleaved positions and colors to GPU memory --- const posColorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, posColorBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positionsAndColors), gl.STATIC_DRAW); // --- enable attributes --- gl.enableVertexAttribArray(shaderProgram.aPositionLoc); gl.enableVertexAttribArray(shaderProgram.aColorLoc); gl.bindBuffer(gl.ARRAY_BUFFER, posColorBuffer); // --- Specify memory layout and stride for the vertex attribute in the shader --- gl.vertexAttribPointer(shaderProgram.aPositionLoc, POS_SIZE, gl.FLOAT, false, VERTEX_SIZE * FLOAT_SIZE, POS_OFFSET * FLOAT_SIZE); // --- Specify memory layout and stride for the color attribute in the shader --- gl.vertexAttribPointer(shaderProgram.aColorLoc, COLOR_SIZE, gl.FLOAT, false, VERTEX_SIZE * FLOAT_SIZE, COLOR_OFFSET * FLOAT_SIZE); gl.drawArrays(gl.TRIANGLES, 0, VERTEX_COUNT); }32:T811,drawWithEBO = () => { const VERTEX_COUNT = 6; // total 6 vertices in the scene const POS_SIZE = 3; // 3 floats (x, y, z) per vertex const COLOR_SIZE = 3; // 3 floats (r, g, b) per vertex const VERTEX_SIZE = 6; // 6 floats (3 pos + 3 color) per vertex const POS_OFFSET = 0; // position data begins at the 0th float of each vertex block const COLOR_OFFSET = 3; // color data begins at the 3rd float of each vertex block const FLOAT_SIZE = 4; // bytes per float const positionsAndColors = [ // positions // colors -0.5, 0.5, 0, 1, 0, 0, // p0 and c0 (x, y, z, r, g, b) 0.5, 0.5, 0, 1, 1, 1, // p1 and c1 0.5, -0.5, 0, 0, 1, 0, // p2 and c2 -0.5, -0.5, 0, 0, 0, 1, // p3 and c3 ]; const indices = [ 0, 1, 2, // vertices of triangle 0 0, 2, 3, // vertices of triangle 1 ]; // --- Allocate and upload interleaved positions and colors to GPU memory --- const posColorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, posColorBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positionsAndColors), gl.STATIC_DRAW); // --- Allocate and upload index data to GPU memory --- const indexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); // --- enable attributes --- gl.enableVertexAttribArray(shaderProgram.aPositionLoc); gl.enableVertexAttribArray(shaderProgram.aColorLoc); gl.bindBuffer(gl.ARRAY_BUFFER, posColorBuffer); // --- Specify memory layout and stride for the vertex attribute in the shader --- gl.vertexAttribPointer(shaderProgram.aPositionLoc, POS_SIZE, gl.FLOAT, false, VERTEX_SIZE * FLOAT_SIZE, POS_OFFSET * FLOAT_SIZE); // --- Specify memory layout and stride for the color attribute in the shader --- gl.vertexAttribPointer(shaderProgram.aColorLoc, COLOR_SIZE, gl.FLOAT, false, VERTEX_SIZE * FLOAT_SIZE, COLOR_OFFSET * FLOAT_SIZE); gl.drawElements(gl.TRIANGLES, VERTEX_COUNT, gl.UNSIGNED_SHORT, 0); }33:[{"id":"8fda73161dd56974f64de341699e112195ba8a8f67726532b4a6e09b618d12587d7cc7b329872ca1c8bfdf1dd939740fbecdf0de33a098618172f6f834f02197","href":"https://static.observableusercontent.com/files/8fda73161dd56974f64de341699e112195ba8a8f67726532b4a6e09b618d12587d7cc7b329872ca1c8bfdf1dd939740fbecdf0de33a098618172f6f834f02197","name":"indexedDrawingExample.png","type":"image/png","lastModified":1767910099709.43,"size":16888},{"id":"2951d3350891fd82f9399ce5ed3a3919c52f3a1d6652b3ed935e793e2113dbdac7479daf3d0605283f24b2173e0ebfa641862fb40248ebd226614628128fa4e3","href":"https://static.observableusercontent.com/files/2951d3350891fd82f9399ce5ed3a3919c52f3a1d6652b3ed935e793e2113dbdac7479daf3d0605283f24b2173e0ebfa641862fb40248ebd226614628128fa4e3","name":"non-indexedDrawingExample.png","type":"image/png","lastModified":1767910099805.202,"size":13197},{"id":"986ebc9015d7f4cdc4024fc7b66e8cf084f2d3aff0e8d3dc314a5d83ee9bb19f88a04f05ee497e73fe07f263fc4ae02288a25ce959cb821fe1089cb579159e01","href":"https://static.observableusercontent.com/files/986ebc9015d7f4cdc4024fc7b66e8cf084f2d3aff0e8d3dc314a5d83ee9bb19f88a04f05ee497e73fe07f263fc4ae02288a25ce959cb821fe1089cb579159e01","name":"indexedDrawingExample@1.png","type":"image/png","lastModified":1767916367700.76,"size":18374},{"id":"e0006d111c2b4642397d0fb33a27565545ebe610531a135c691c7de0ca286bb1930044067da8c0c5e4436987233dbdd59a4932fb9edf9d0fe282166fa8b89ad6","href":"https://static.observableusercontent.com/files/e0006d111c2b4642397d0fb33a27565545ebe610531a135c691c7de0ca286bb1930044067da8c0c5e4436987233dbdd59a4932fb9edf9d0fe282166fa8b89ad6","name":"non-indexedDrawingExample@1.png","type":"image/png","lastModified":1767916379041.802,"size":17999}] 2e:{"id":"75aaceb59a3bf094","slug":"indexed-vs-non-indexed-drawing","title":"Indexed vs Non-Indexed Drawing","thumbnail":"e220bf5e8f4e5c6491cbfb054758c9aa86b5cb48dabaa79a3bdbf0fba0d142c5","access_level":"public","create_time":"$D2025-08-26T06:29:08.880Z","update_time":"$D2026-05-29T21:37:53.855Z","view_time":null,"first_public_time":"$D2025-08-26T08:01:08.684Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6a2979fe0c58caa8","login":"vidi-intro-graphics","name":"VIDI Intro Graphics","avatar_url":"https://avatars-next.observableusercontent.com/45b660a2d93636af360abe7822040f466ffa17dd2a472fd91fa891a7b544a83c","tier":"starter_2024"},"version":164,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3cd8e5f7dd364e3","login":"eroisk","name":"Set Paing","avatar_url":"https://avatars-next.observableusercontent.com/24cc62fc242e5de882ce3ce002c7a093b22513123bd01ac4ec35a17f48595a12","tier":null}],"members":[{"type":"individual","id":"c3cd8e5f7dd364e3","login":"eroisk","name":"Set Paing","avatar_url":"https://avatars-next.observableusercontent.com/24cc62fc242e5de882ce3ce002c7a093b22513123bd01ac4ec35a17f48595a12","tier":null,"role":"editor"},{"type":"team","id":"6a2979fe0c58caa8","login":"vidi-intro-graphics","name":"VIDI Intro Graphics","avatar_url":"https://avatars-next.observableusercontent.com/45b660a2d93636af360abe7822040f466ffa17dd2a472fd91fa891a7b544a83c","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"13d45957abcd3e98","slug":"webgl-fundamentals","title":"WebGL Fundamentals","owner":{"id":"6a2979fe0c58caa8","login":"vidi-intro-graphics","name":"VIDI Intro Graphics"}},"type":"notebook","body":{"title":"Indexed vs Non-Indexed Drawing","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9,"value":"canvasContainer = html`

\n\n

with IBO

without IBO

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"render();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"___\n## Rendering","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":16,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"render = () => {\n gl.clearColor(0, 0, 0, 1); // Black background\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n\n // left viewport\n gl.viewport(0, 0, canvas.width / 2 - 1, canvas.height);\n drawWithoutEBO();\n\n // right viewport\n gl.viewport(canvas.width / 2 + 1, 0, canvas.width / 2 - 1, canvas.height);\n drawWithEBO();\n\n // middle separator\n gl.viewport(canvas.width / 2 - 1, 0, 2, canvas.height);\n drawWhiteBlock();\n return \"Render OK\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":138,"value":"___\n## Visuals","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":140,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"___\n### The code below handles the necessary setup for the notebook. You can skip it if the thought of setup code gives you deja vu from past homework.\n___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":25,"value":"___\n## GLSL Shaders","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":28,"value":"shaderProgram = {\n let shaderv = gl.createShader(gl.VERTEX_SHADER);\n let shaderf = gl.createShader(gl.FRAGMENT_SHADER);\n\n gl.shaderSource(shaderv, vert_glsl);\n gl.compileShader(shaderv);\n if (!gl.getShaderParameter(shaderv, gl.COMPILE_STATUS)) {\n throw gl.getShaderInfoLog(shaderv);\n }\n\n gl.shaderSource(shaderf, frag_glsl);\n gl.compileShader(shaderf);\n if (!gl.getShaderParameter(shaderf, gl.COMPILE_STATUS)) {\n throw gl.getShaderInfoLog(shaderf);\n }\n\n let shaderProgram = gl.createProgram();\n gl.attachShader(shaderProgram, shaderv);\n gl.attachShader(shaderProgram, shaderf);\n gl.linkProgram(shaderProgram);\n \n if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {\n throw \"Could not initialise shaders\";\n }\n\n gl.useProgram(shaderProgram);\n\n shaderProgram.aPositionLoc = gl.getAttribLocation(shaderProgram, \"a_Position\");\n \n shaderProgram.aColorLoc = gl.getAttribLocation(shaderProgram, \"a_Color\");\n\n return shaderProgram;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"viewof vert_glsl = mdGLSL_toggle(`#version 300 es\nprecision highp float;\n\nin vec3 a_Position;\nin vec3 a_Color;\n\nout vec3 v_Color;\n\nvoid main() {\n gl_Position = vec4(a_Position, 1.0);\n v_Color = a_Color;\n}\n`, \"Vertex shader\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"viewof frag_glsl = mdGLSL_toggle(`#version 300 es\nprecision highp float;\n\nin vec3 v_Color;\n\nout vec4 fragColor;\n\nvoid main() {\n fragColor = vec4(v_Color, 1.0);\n}\n`, \"Fragment shader\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"___\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":42,"value":"width = 800;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"height = 400;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"canvas = canvasContainer.querySelector(\"#canvas00\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"gl = {\n let ctx = canvas.getContext(\"webgl2\");\n if (!ctx) {\n throw \"Could not get WebGL context!\";\n }\n return ctx;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"drawWhiteBlock = () => {\n const posAndCol = [\n -1, 1, 0, 1, 1, 1,\n 1, 1, 0, 1, 1, 1,\n 1, -1, 0, 1, 1, 1,\n -1, -1, 0, 1, 1, 1,\n ];\n const indices = [ 0, 1, 2, 0, 2, 3 ];\n\n gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(posAndCol), gl.STATIC_DRAW);\n gl.vertexAttribPointer(shaderProgram.aPositionLoc, 3, gl.FLOAT, false, 24, 0);\n gl.vertexAttribPointer(shaderProgram.aColorLoc, 3, gl.FLOAT, false, 24, 12);\n\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());\n gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);\n\n gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"import { mdGLSL_toggle, style } from \"@vidi-intro-graphics/resources\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"style;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"