2d:null 2e:["$","title",null,{"children":"Basic Modelling: Non-Indexed Geometry | Introduction to Computer Graphics MSState | Observable"}] 33:T8ab,geom_fig = { const geom = html`

Two triangles. In non-indexed geometry, the red and green points are repeated.

`; return geom; }34:[] 31:{"id":"3f3b9b179266ce5d","slug":"basic-modelling-non-indexed-geometry","title":"Basic Modelling: Non-Indexed Geometry","thumbnail":"a130dd657c8859c425fdf60db19ac0f287c2f4fd6668f6a3a7ec301179b84a9f","access_level":"public","create_time":"$D2022-09-20T14:41:06.291Z","update_time":"$D2022-09-21T21:28:59.814Z","view_time":null,"first_public_time":"$D2022-09-21T19:52:27.543Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState","avatar_url":"https://avatars-next.observableusercontent.com/343b1e48cbb2480c08063f107b4631944c5bb97a5258576dd939a5be852f30bc","tier":"pro_2024"},"version":428,"publish_version":428,"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}],"members":[{"type":"individual","id":"e83a97795d4ad3a2","login":"infowantstobeseen","name":"T.J. Jankun-Kelly","avatar_url":"https://avatars-next.observableusercontent.com/df9d7f817f9ad92a763b56ee2e891ca0716a6c2f6c398811547f89f0448fa181","tier":null,"role":"editor"},{"type":"team","id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState","avatar_url":"https://avatars-next.observableusercontent.com/343b1e48cbb2480c08063f107b4631944c5bb97a5258576dd939a5be852f30bc","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"b392a3d6fa4ecd2f","slug":"interactive-notes","title":"Polygonal Rendering Notes","owner":{"id":"7c0dab8b587e2ed2","login":"cse4413msstate","name":"Introduction to Computer Graphics MSState"}},"type":"notebook","body":{"title":"Basic Modelling: Non-Indexed Geometry","cells":[{"id":0,"value":"md`# Basic Modelling: Non-Indexed Geometry\n\nTo render anything, we must provide geometry (positions & topology) to the GPU. In OpenGL and descendants, we do by creating, binding, and loading a vertex buffer object with vertex array data with an optional element buffer object with an elements array. There are two ways to process geometry: Non-indexed, or indexed. Indexed geometry will be discussed in the next note.\n\n\n## Non-Indexed Geometry\n\n*Non-indexed* geometry presents every vertex for every triangle. If a triangle shares one or more vertices, then that vertex is repeated, even if they share the same location and attributes. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"geometry_2tris_noindex = 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 1,\n 0,\n 0,\n 1,\n 0, // x1, y1 again, same attrs\n 0,\n 0,\n 1,\n 0,\n 0, // x0,y0 again, same attrs\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","output":"$undefined","database":"$undefined"},{"id":249,"value":"This defines six vertices, but two pair of them are the same (the second and third vertices are the same as the fifth and fourth respectively). Note that the vertex and attribute data are *interleaved*: The format of the buffer is *data0-attributes0*, *data1-attributes1*, etc. Non-interleaved data in the form of *data0, data1, attributes0, attributes1* exists, but is less efficiency on the GPU.\n\n### Binding the Buffer\nTo use the data, we have to upload it to the GPU. We do this by creating and binding an *array buffer* (also called a *vertex buffer* or *vertex buffer object (VBO)*):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"vertexBuffer_2tris_noindex = {\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_noindex, 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","output":"$undefined","database":"$undefined"},{"id":264,"value":"`ARRAY_BUFFER` tells WebGL that the buffer is vertex data, as opposed to indices, textures, or other buffer types. The call to `bufferData` binds the `geometry_2tris_noindex` array to the currently active array buffer (set via the pervious `bindBuffer` call); always be aware of which buffers are active when performing operations to make sure state is correct.\n\nNote that we always must deallocate the GPU memory used by our buffers; this is done via appropriate `deleteBuffer` calls. In Observable, we execute our clean-up when a cell is invalidated; in other languages, you can clean up on exit.\n\n### Binding the Attributes\n\nThough the buffer is loaded, WebGL does not know which parts are vertex data, which are attributes (and which attribute is which if there is more than one). Each attribute (including the vertices, a special attribute) must be bound to a *vertex attribute array* that specifies which elements of the array buffer are used:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":270,"value":"{\n // Make sure we are updating the correct buffer\n gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer_2tris_noindex);\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 non-indexed rendering.`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"The binding occurs in `vertexAttribPointer`, which takes as arguments the attribute to be modified (by index), how many elements of the array are used per attribute (2 for the points, 3 for the color), a normalization flag (`false` here), how much memory to skip after each attribute (5 elements the size of `FLoat32`), and the offset after the skip to read (none for the positions, two for the colors). Here, `FLOAT_SIZE` defines the size is bytes for the data type used (`Float32`s). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":275,"value":"FLOAT_SIZE = Float32Array.BYTES_PER_ELEMENT","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"### Drawing the Buffer\n\nTo draw the buffer, we will need a vertex program, and fragment program, a shader program to combine them, and then to call the shader program whenever we need to draw. We will always need these three things. In this example, the three programs are very simple. You may find them in the [Implementation](#implementation \"Implementation\") section of the note.\n\nTo actually draw our triangles, we first clear the buffer via `clear()`, bind our vertex attribute arrays to our program (telling which parts of the buffer map onto which variables names), and then call for them to be drawn via `drawArrays()`. In this case, we are drawing triangles, starting at the first vertex, and rendering 6 total vertices (and thus two triangles).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":146,"value":"function draw() {\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n\n gl.bindAttribLocation(program, 0, \"position\");\n gl.bindAttribLocation(program, 1, \"color\");\n\n gl.drawArrays(gl.TRIANGLES, 0, 6);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"viewof gl = {\n const canvas = DOM.canvas(\n ewidth * devicePixelRatio,\n height * devicePixelRatio\n );\n canvas.style.width = `${ewidth}px`;\n canvas.style.height = `${height}px`;\n const gl = (canvas.value = canvas.getContext(\"webgl\"));\n gl.viewport(0, 0, canvas.width, canvas.height);\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"implementation = md`## Implementation\n\nHere, we put things which are needed to for this notebook to work. It has the cells which define the parts needed for WebGL to create the image area above.\n\n### Vertex Shader\n\nThe vertex shader has the two attributes as inputs (\\`position\\` and \\`color\\`) and writes out them out unmodified (\\`position_out\\` and \\`color_out\\`). The shader is compiled into \\`vertexShader\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"vertexShaderCode = `\nprecision highp float;\n\nattribute vec2 position; // in\nattribute vec3 color;\n\nvarying vec3 color_out; // out\n\nvoid main(void)\n{\n gl_Position = vec4(position, 0.0, 1.0);\n color_out = color;\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"vertexShader = {\n const shader = gl.createShader(gl.VERTEX_SHADER);\n gl.shaderSource(shader, vertexShaderCode);\n gl.compileShader(shader);\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))\n throw gl.getShaderInfoLog(shader);\n invalidation.then(() => gl.deleteShader(shader));\n return shader;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"### Fragment Shader \nThe fragment shader updates the color; in this case, it just uses the interpolated color from the rasterizer `color_out` (outputs from the vertex shader have the same name as inputs to the fragment shader is nothing special is done). Note, the final output color is a `vec4`, so we have to convert our input `vec3` color via a constructor. The compiled shader is stored in `fragmentShader`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"fragmentShaderCode = `\nprecision highp float;\n\nvarying vec3 color_out;\n\nvoid main()\n{\n gl_FragColor = vec4(color_out, 1.);\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"fragmentShader = {\n const shader = gl.createShader(gl.FRAGMENT_SHADER);\n gl.shaderSource(shader, fragmentShaderCode);\n gl.compileShader(shader);\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))\n throw gl.getShaderInfoLog(shader);\n invalidation.then(() => gl.deleteShader(shader));\n return shader;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"### Graphics Program\n\nWe attach and link the two shaders together to form the active graphics program `program`. It works for both the indexed and non-indexed form of the data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"program = {\n const program = gl.createProgram();\n gl.attachShader(program, vertexShader);\n gl.attachShader(program, fragmentShader);\n gl.linkProgram(program);\n if (!gl.getProgramParameter(program, gl.LINK_STATUS))\n throw gl.getProgramInfoLog(program);\n invalidation.then(() => gl.deleteProgram(program));\n return program;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"### Setup\n\nTo render, a few variables are needed. We set the effective width `ewidth` and `height` for the canvas (defined [above](#gl \"The WebGL canvas\")), as well as code that needs to be executed once to set the graphics viewport (how much of the canvas the graphics takes—in this case, the whole thing).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"ewidth = Math.min(600, width)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"height = ewidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"setup = {\n // One time setup\n gl.viewport(0, 0, viewof gl.width, viewof gl.height);\n gl.useProgram(program);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"### Rendering Loop\n\nFinally, the `renderloop` code below calls the appropriate draw function repeatedly. Given that there is no animation, this not necessary (we could only draw when something changed), but it is common practice for more interactive programs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"renderloop = {\n while (true) {\n draw();\n yield md`The renderloop code.`;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"