3e:null 3f:["$","title",null,{"children":"Basic Modelling: Indexed Geometry | Introduction to Computer Graphics MSState | Observable"}] 45:T793,geom_fig = { const geom = html`

Two triangles, vertices indicated by their index.

`; return geom; }46:[] 43:{"id":"d53ceee5901988bf","slug":"basic-modelling-indexed-geometry","title":"Basic Modelling: Indexed Geometry","thumbnail":"9817a0d3b891d2c57aa8b463f08efc781e8566ab9b32bebfd6ee7bdf7f04784b","access_level":"public","create_time":"$D2022-09-21T21:15:23.097Z","update_time":"$D2022-09-22T16:22:44.748Z","view_time":null,"first_public_time":"$D2022-09-22T16:23:17.916Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState","avatar_url":"https://avatars-next.observableusercontent.com/343b1e48cbb2480c08063f107b4631944c5bb97a5258576dd939a5be852f30bc","tier":"education_2026","bio":"Course notebooks for CSE 4/6413: Introduction to Computer Graphics as Mississippi State University. Course notes, assignments, and similar."},"version":103,"publish_version":103,"role":null,"authored":false,"authors":[{"type":"individual","id":"e83a97795d4ad3a2","login":"infowantstobeseen","name":"T.J. Jankun-Kelly","avatar_url":"https://avatars-next.observableusercontent.com/df9d7f817f9ad92a763b56ee2e891ca0716a6c2f6c398811547f89f0448fa181","tier":null,"bio":"Scientist, Designer, and Teacher. Assoc Prof of CompSci in visualization at Mississippi State University. Believes information wants to be seen. Loves Python. @dr_tj"}],"members":[{"type":"individual","id":"e83a97795d4ad3a2","login":"infowantstobeseen","name":"T.J. Jankun-Kelly","avatar_url":"https://avatars-next.observableusercontent.com/df9d7f817f9ad92a763b56ee2e891ca0716a6c2f6c398811547f89f0448fa181","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"b392a3d6fa4ecd2f","slug":"interactive-notes","title":"Polygonal Rendering Notes","owner":{"id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState"}},"type":"notebook","body":{"titling":"auto","title":"Basic Modelling: Indexed Geometry","cells":[{"id":0,"value":"# Basic Modelling: Indexed Geometry\n\n[Non-indexed geometry](https://observablehq.com/@cse4413msstate/basic-modelling-non-indexed-geometry \"Basic Modelling: Non-indexed Geometry\") allows us to load vertex and attribute data into a buffer; however, it is wasteful in the fact that vertices with the same data are uploaded more then they have to. For large models, there may be a significant percentage of shared vertices, and thus non-indexed geometry can be wasteful. *Indexed geometry* addresses this by keeping the positions and the topology separate.\n\n## The Index Buffer\n\nIndexed geometry has two parts: A vertex buffer for the vertices and attributes and an *index buffer* (called an *element buffer* in WebGL) that stores the indices that link together triangles. Consider our two triangles again, but this time the labels correspond to their location in the vertex buffer: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"In this example, the two triangles would be described by their indices: ${tex`\\Delta\\textcolor{red}{0}\\textcolor{green}{1}\\textcolor{blue}{2}`} and ${tex`\\Delta\\textcolor{green}{1}\\textcolor{red}{0}\\textcolor{blue}{3}`}:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"indices_2tris = new Uint8Array([\n 0,\n 1,\n 2, // triangle 1\n 1,\n 0,\n 3\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"The corresponding vertex array just has a copy of each vertex (and their attributes) once:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"geometry_2tris_indexed = new Float32Array(\n [\n 0,\n 0,\n 1,\n 0,\n 0, // x0,y0 r0,g0,b0\n 1,\n 0,\n 0,\n 1,\n 0, // x1,y1 r1,g1,b1\n 0.5,\n 1,\n 0,\n 0,\n 1, // x2,y2 r2,g2,b2\n 0.5,\n -1,\n 0,\n 0,\n 1\n ] // x3,y3, r3,g3,b3\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"Constructing the vertex buffer object is the same as before; we just used the modified set of vertices:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"vertexBuffer_2tris_indexex = {\n // Create and bind the appropriate buffer type\n const buffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n\n // Load the buffer data\n gl.bufferData(gl.ARRAY_BUFFER, geometry_2tris_indexed, gl.STATIC_DRAW);\n\n // Some clean-up for Observable: Make sure buffer deleted when done.\n invalidation.then(() => gl.deleteBuffer(buffer));\n\n return buffer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"What is different is that we have to create the additional index buffer object:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"indexBuffer_2tris_indexex = {\n // Create and bind the appropriate buffer type\n const buffer = gl.createBuffer();\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);\n\n // Load the buffer data\n gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices_2tris, gl.STATIC_DRAW);\n\n // Some clean-up for Observable: Make sure buffer deleted when done.\n invalidation.then(() => gl.deleteBuffer(buffer));\n\n return buffer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"Instead of an `ARRAY_BUFFER`, we create an `ELEMENT_ARRAY_BUFFER`. Generally, the data for the index buffer will be an unsigned integer type.\n\n## Drawing Indexed Geometry\n\nAfter the index buffer has been created, we still have to bind the attributes. But note that the structure of the vertex buffer has not changed: It is still the two positions components followed by the three color components. Thus, that part does not change:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"{\n // Make sure we are updating the correct buffer\n gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer_2tris_indexex);\n\n // Enable the two attributes (vertex & color)\n gl.enableVertexAttribArray(0);\n gl.enableVertexAttribArray(1);\n\n // Bind the array parts to the attributes\n gl.vertexAttribPointer(0, 2, gl.FLOAT, false, FLOAT_SIZE * 5, 0);\n gl.vertexAttribPointer(1, 3, gl.FLOAT, false, FLOAT_SIZE * 5, FLOAT_SIZE * 2);\n\n return md`Updating the buffers for indexed rendering.`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"In fact, as the data sent to the graphics program is the same as before, neither the vertex shader, fragment shader, not the program differ from the previous note. What does change is how we draw: Instead of walking through the vertex array point-by-point, we walk through the indices: `drawElements` uses the specified primitive type (in this case, triangles), the number of indices to use (so, some multiple of three for triangles), the size of the memory used for each index (an unsigned byte), and the memory offset into the array (in this case, 0) to gather the needed vertices to send to the GPU:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"function draw() {\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer_2tris_indexex);\n\n gl.bindAttribLocation(program, 0, \"position\");\n gl.bindAttribLocation(program, 1, \"color\");\n\n gl.drawElements(\n gl.TRIANGLES,\n 6,\n gl.UNSIGNED_BYTE,\n Uint8Array.BYTES_PER_ELEMENT * 0\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"viewof gl","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {\n ewidth,\n height,\n FLOAT_SIZE,\n viewof gl,\n vertexShader,\n fragmentShader,\n program\n} from \"@cse4413msstate/basic-modelling-non-indexed-geometry\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"setup = {\n // One time setup\n gl.viewport(0, 0, viewof gl.width, viewof gl.height);\n gl.useProgram(program);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"renderloop = {\n while (true) {\n draw();\n yield md`The renderloop code.`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"