44:["$","title",null,{"children":"Simple WebGL example | Anand Thakker | Observable"}] 4c:[] 48:{"id":"311085c3e28cd2bf","slug":"simple-webgl-example","title":"Simple WebGL example","thumbnail":"576e95ee60ac0866ca392631b0e4ab727221ab6dc7261be6c8e0948ae352ea6f","access_level":"public","create_time":"$D2021-03-19T13:12:05.089Z","update_time":"$D2021-03-19T17:10:13.581Z","view_time":null,"first_public_time":"$D2021-03-19T17:10:22.632Z","has_unpublished_edits":null,"fork":{"id":"dee7adae589cb4d2","slug":"webgl-rendering-illustration","title":"WebGL rendering illustration","owner":{"id":"4dafab78a0ba3c55","login":"anandthakker","name":"Anand Thakker"}},"stars":1,"starred":false,"owner":{"type":"team","id":"4dafab78a0ba3c55","login":"anandthakker","name":"Anand Thakker","avatar_url":"https://avatars-next.observableusercontent.com/a797ebd766058f350bfa8bfc73d818d72c58831289f057450e42f73243402cdd","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1026,"publish_version":1026,"role":null,"authored":false,"authors":[{"type":"individual","id":"62e1d83104678cb6","login":"anandthakker","name":"Anand Thakker","avatar_url":"https://avatars-next.observableusercontent.com/a797ebd766058f350bfa8bfc73d818d72c58831289f057450e42f73243402cdd","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"62e1d83104678cb6","login":"anandthakker","name":"Anand Thakker","avatar_url":"https://avatars-next.observableusercontent.com/a797ebd766058f350bfa8bfc73d818d72c58831289f057450e42f73243402cdd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Simple WebGL example","cells":[{"id":0,"value":"md`# Simple WebGL example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"md`### Geometry and color data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"function buildGeometry() {\n // Build a simple octahedron geometry \n const basePoints = [\n [1, 0, 0],\n [0, 0, 1],\n [-1, 0, 0],\n [0, 0, -1]\n ];\n const positions = [];\n const faces = [];\n const pushTriangle = (A, B, C) => {\n const nextIndex = positions.length;\n // add the vertex coordinates\n positions.push(A, B, C);\n // add a triple of indices of the three vertices we just added to represent a triangle\n faces.push([nextIndex, nextIndex + 1, nextIndex + 2]);\n }\n \n for (let i = 0; i < basePoints.length; i++) {\n const A = basePoints[i];\n const B = basePoints[(i + 1) % basePoints.length];\n pushTriangle(A, B, [0, 1, 0]);\n pushTriangle(A, B, [0, -1, 0]);\n }\n \n return {\n positions,\n faces\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"// (note, \"name = {...}\" is syntactic sugar in this notebook format, but it's basically just Javscript)\ngeometry = buildGeometry()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"// assign a color for each vertex\ncolors = {\n const C1 = [1,0,0];\n const C2 = [0,0,1];\n const faceColors = [C1, C2, C2, C1, C1, C2, C2, C1];\n const result = [];\n for (let i = 0; i < faceColors.length; i++) {\n for (const vertexIndex of geometry.faces[i]) {\n result[vertexIndex] = faceColors[i];\n }\n }\n if (result.length !== geometry.positions.length) {\n throw new Error(`colors.length=${result.length} != vertex count=${geometry.positions.length}`);\n }\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":818,"value":"md`## Transformations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"md`### World\n\nThis matrix transforms geometry coordinates from whatever space they're defined in into a camera-relative coordinate system, often called \"world space\".`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"viewof world = {\n const m = transform({\n translate: [0,0,-1.75],\n scale: [0.7, 0.7, 0.7],\n rotate: {\n rad: 10 * Math.PI / 180,\n axis: [0, 1, 0]\n }\n });\n transform({\n rotate: {\n rad: 10 * Math.PI / 180,\n axis: [1, 0, 0]\n }\n }, m, m)\n return showMatrix(m)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"md`### Projection\nThe projection matrix further transforms world space coordinates into normalized screen space, in which you can think of the xy plane (or any z-constant plane) as being parallel to the screen.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"viewof projection = showMatrix(mat4.perspective([],\n 60 * Math.PI / 180, // fov\n 1, // aspect\n 0.1, // near\n 100 // far\n));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"md`## Shaders`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"md`#### Vertex shader`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"viewof vertexShader = glsl(`\nprecision mediump float;\n\n// This shader is executed once for each vertex. The attribute values for the vertex we're on are\n// pulled from the big position and color arrays that we set up and uploaded at initialization\n// time.\nattribute vec3 a_position;\nattribute vec3 a_color;\n\n// Globals that we'll set before each draw call\nuniform mat4 u_world;\nuniform mat4 u_projection;\n\n// A \"varying\" is a value that we want to export to the fragment shader.\nvarying vec3 v_color;\n\nvoid main() {\n // Multiply our transformation matrices to set the vertex's position in screen space.\n gl_Position = u_projection * u_world * vec4(a_position, 1.0);\n\n // Export the v_color varying to just be the color that we assigned for this vertex.\n v_color = a_color;\n}\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"md`#### Fragment shader`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"viewof fragmentShader = glsl(`\nprecision mediump float;\n\n// This shader is executed once for each \"fragment\"--essentially once for each pixel's 'view' of\n// a triangle's face. The varying values for the fragment we're on are linearly interpolated from\n// the three values exported by the vertices of the triangle.\n\n// A more complex fragment shader might also take a varying for the normal vector and use it to\n// calculate lighting-based color.\nvarying vec3 v_color;\n\nvoid main() {\n gl_FragColor = vec4(v_color, 1.0);\n}`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":993,"value":"// Putting this together into the data and shaders that WebGL (via the regl wrapper lib)\n// will need to do its stuff.\nfunction tetrahedronSpec(regl) {\n return {\n attributes: {\n a_position: geometry.positions,\n a_color: colors\n },\n uniforms: {\n // regl.prop says that we'll take these as parameters at draw time\n u_world: regl.prop('world'),\n u_projection: regl.prop('projection')\n },\n elements: geometry.faces, \n vert: vertexShader,\n frag: fragmentShader\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":936,"value":"{\n const draw = new Draw(tetrahedronSpec); \n draw.draw({\n world,\n projection\n });\n return draw.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1008,"value":"md`And now to animate it, we just need to update the world matrix each frame:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1012,"value":"function calculateWorldMatrix(frame) {\n const rotationSpeed = 5; // degrees per frame\n const rad = rotationSpeed * frame * Math.PI / 180;\n \n const m = transform({\n translate: [0,0,-1.75],\n scale: [0.7, 0.7, 0.7],\n rotate: {\n rad: 10 * Math.PI / 180,\n axis: [1, 0, 0]\n }\n });\n transform({\n rotate: {\n rad,\n axis: [0, 1, 0]\n }\n }, m, m)\n return m;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"animationCanvas = html`