2a:null 2b:["$","title",null,{"children":"Vertex Buffer Layout | VIDI Intro Graphics | Observable"}] 30:T439,## WebGL Fundamentals # Vertex Buffer Layout The GPU doesn't care how you organize, pack, and send your vertex data to it, but performance and flexibility do. In WebGL, we can pass in different kinds of geometry attributes to the shaders in two main ways: *separate buffers* and *interleaved buffers*. - **Separate Buffers**: each attribute (position, color, etc.) has its own buffer. - **Interleaved Buffers**: all attributes for a vertex are stored consecutively in a single buffer. Both approaches are valid, with their own trade-offs. Separate buffers are simpler and easier to understand, which makes them great for learning. Interleaved buffers are more common in real engines, since they give better memory locality and performance. This notebook shows both layouts side by side: the left viewport uses **separate buffers**, and the right viewport uses an **interleaved buffer**. The output looks the same (since the geometry is identical), but look at **`drawSeparateBuffers()`** and **`drawInterleavedBuffers()`** to see how the attribute setup differs under the hood.31:T649,drawSeparateBuffers = () => { 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 positions = [ -0.8, -0.26, 0, // v0 (x, y, z) -0.2, -0.26, 0, // v1 -0.5, 0.26, 0, // v2 0.2, -0.26, 0, // v3 0.8, -0.26, 0, // v4 0.5, 0.26, 0, // v5 ]; const colors = [ 1, 0, 0, // c0 (r, g, b) 0, 1, 0, // c1 0, 0, 1, // c2 0, 1, 1, // c3 1, 0, 1, // c4 1, 1, 0, // c5 ]; // --- Allocate and upload positions to GPU memory --- const posBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); // --- Allocate and upload colors to GPU memory --- const colorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); // --- enable attributes --- gl.enableVertexAttribArray(shaderProgram.aPositionLoc); gl.enableVertexAttribArray(shaderProgram.aColorLoc); // --- Specify memory layout for the position attribute in the shader --- gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer); gl.vertexAttribPointer(shaderProgram.aPositionLoc, POS_SIZE, gl.FLOAT, false, 0, 0); // --- Specify memory layout for the color attribute in the shader --- gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); gl.vertexAttribPointer(shaderProgram.aColorLoc, COLOR_SIZE, gl.FLOAT, false, 0, 0); gl.drawArrays(gl.TRIANGLES, 0, VERTEX_COUNT); }32:T70d,drawInterleavedBuffers = () => { 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.8, -0.26, 0, 1, 0, 0, // v0 and c0 (x, y, z, r, g, b) -0.2, -0.26, 0, 0, 1, 0, // v1 and c1 -0.5, 0.26, 0, 0, 0, 1, // v2 and c2 0.2, -0.26, 0, 0, 1, 1, // v3 and c3 0.8, -0.26, 0, 1, 0, 1, // v4 and c4 0.5, 0.26, 0, 1, 1, 0, // v5 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); }33:[{"id":"518280c08df74b206a34d7a3de98d064d305078e437447d66d77a83a9ba7e6b298a5ef5b758d2306078e49f6fb53d46301e10643ad040a56392d0072a4e1043d","href":"https://static.observableusercontent.com/files/518280c08df74b206a34d7a3de98d064d305078e437447d66d77a83a9ba7e6b298a5ef5b758d2306078e49f6fb53d46301e10643ad040a56392d0072a4e1043d","name":"separateBufferLayoutExample.png","type":"image/png","lastModified":1756188562758.321,"size":36022},{"id":"61590d382b0f07094b29e334504bd0ae09a2bc8ea6248a777ed6123e87935a52f8b0b7d6d358cd242d95b2fa132df1df4aa5ae5f133650e154ec89990b397c48","href":"https://static.observableusercontent.com/files/61590d382b0f07094b29e334504bd0ae09a2bc8ea6248a777ed6123e87935a52f8b0b7d6d358cd242d95b2fa132df1df4aa5ae5f133650e154ec89990b397c48","name":"interleavedBufferLayoutExample.png","type":"image/png","lastModified":1756188562810.194,"size":43720}] 2e:{"id":"c37a68dabc61df16","slug":"vertex-buffer-layout","title":"Vertex Buffer Layout","thumbnail":"66a3f39b2c2469eb80b576d44235312889de34452fbbf1fe983eca95fc6929d1","access_level":"public","create_time":"$D2025-08-25T22:40:00.951Z","update_time":"$D2026-01-09T04:33:39.363Z","view_time":null,"first_public_time":"$D2025-08-26T08:01:03.566Z","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":267,"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":"Vertex Buffer Layout","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"canvasContainer = html`

\n\n

Separate buffers

Interleaved buffers

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"render();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"___\n## Rendering","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":52,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"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 drawSeparateBuffers();\n\n // right viewport\n gl.viewport(canvas.width / 2 + 1, 0, canvas.width / 2 - 1, canvas.height);\n drawInterleavedBuffers();\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":179,"value":"___\n## Visuals","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":181,"value":"html`

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

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":228,"value":"___\n### The code below handles the necessary setup for the notebook. You can skip it if reading through setup code isn't your cup of tea today.\n___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":17,"value":"___\n## GLSL Shaders","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":30,"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":20,"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":24,"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":8,"value":"___\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":11,"value":"width = 800;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"height = 400;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"value":"canvas = canvasContainer.querySelector(\"#canvas00\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"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":64,"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":28,"value":"import { mdGLSL_toggle, style } from \"@vidi-intro-graphics/resources\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"style;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"