44:["$","title",null,{"children":"WebGL vs. 2D Canvas: Countries | Alexander Milevski | Observable"}] 4c:T41b,function createPolyBuffers(polys) { let vertexLength = 0; let triangleLength = 0; polys.forEach(poly => { vertexLength += poly.vertices.length; triangleLength += poly.indices.length; }); let vertexData = new Float32Array(vertexLength); let triangleData = new Uint32Array(triangleLength); let vertexOffset = 0; let triangleOffset = 0; polys.forEach(poly => { let vertexCount = poly.vertices.length/2; vertexData.set(poly.vertices, 2*vertexOffset); // copy vertex data poly.indices.forEach((index, i) => { // append and offset triangle data triangleData[i + triangleOffset] = index + vertexOffset; }); vertexOffset += vertexCount; triangleOffset += poly.indices.length; }); let vertex = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertex); gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW); let triangle = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangle); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, triangleData, gl.STATIC_DRAW); return {vertex, triangle, triangleLength}; }4d:[] 48:{"id":"a4fcdb076d5fb2fd","slug":"webgl-vs-2d-canvas-countries","title":"WebGL vs. 2D Canvas: Countries","thumbnail":"1eb88dadf8e5d1af6f006dee1fbf220bb68899727f0b1de17b528fc41cdb8576","access_level":"public","create_time":"$D2018-12-30T10:27:40.719Z","update_time":"$D2019-09-01T17:17:12.795Z","view_time":null,"first_public_time":"$D2019-09-01T17:19:44.720Z","has_unpublished_edits":null,"fork":{"id":"805c1e14c23e6f50","slug":"webgl-vs-2d-canvas-countries","title":"WebGL vs. 2D Canvas: Countries","owner":{"id":"684af9aa3582e037","login":"ondras","name":"Ondřej Žára"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b3eb5708e41b6afb","login":"w8r","name":"Alexander Milevski","avatar_url":"https://avatars-next.observableusercontent.com/e14440659e459b817b9640058b94b4a860991303ddea273790cf99a2c0f87f1e","tier":"starter_2024","bio":"Maps, visual art, crowdsourcing, image processing","followed_by_you":false,"follows_you":false},"version":261,"publish_version":261,"role":null,"authored":false,"authors":[{"type":"individual","id":"7bb9e15c92240905","login":"w8r","name":"Alexander Milevski","avatar_url":"https://avatars-next.observableusercontent.com/e14440659e459b817b9640058b94b4a860991303ddea273790cf99a2c0f87f1e","tier":null,"bio":"Maps, visual art, crowdsourcing, image processing","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"7bb9e15c92240905","login":"w8r","name":"Alexander Milevski","avatar_url":"https://avatars-next.observableusercontent.com/e14440659e459b817b9640058b94b4a860991303ddea273790cf99a2c0f87f1e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"WebGL vs. 2D Canvas: Countries","cells":[{"id":0,"value":"md`# WebGL vs. 2D Canvas: Countries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"form = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"canvases = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"div","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"update = {\n let type = new window.FormData(form).get(\"render\");\n let scale = 1 + 0.1 * Math.sin(now / 1000);\n switch (type) {\n case \"2d\":\n canvas2d.style.display = \"\";\n canvas3d.style.display = \"none\";\n render2d(scale);\n break;\n case \"3d\":\n canvas2d.style.display = \"none\";\n canvas3d.style.display = \"\";\n renderWebGL(scale);\n break;\n }\n canvases.dispatchEvent(new CustomEvent(\"update\"));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"function render2d(scale) {\n context2d.setTransform(1, 0, 0, 1, 0, 0);\n context2d.clearRect(0, 0, width, height);\n context2d.scale(scale, scale);\n countries.forEach((c, i) => {\n context2d.beginPath();\n path(c);\n context2d.fillStyle = colors[i % colors.length];\n context2d.fill();\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"function renderWebGL(scale) {\n gl.clear(gl.COLOR_BUFFER_BIT);\n gl.uniform1f(gl.getUniformLocation(program, \"scale\"), scale);\n\n buffers.forEach((buffers, i) => {\n let color = d3.color(colors[i % colors.length]);\n gl.uniform3fv(gl.getUniformLocation(program, \"color\"), [color.r/255, color.g/255, color.b/255]);\n\n gl.bindBuffer(gl.ARRAY_BUFFER, buffers.vertex);\n gl.vertexAttribPointer(gl.getAttribLocation(program, \"position\"), 2, gl.FLOAT, false, 0, 0);\n\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.triangle);\n gl.drawElements(gl.TRIANGLES, buffers.triangleLength, gl.UNSIGNED_INT, 0);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"projection = d3GeoProjection.geoBonne().precision(1).parallel(17.5).translate([width/2, height/2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"colors = d3.schemePaired","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"html`

2D stuff

3D stuff

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"import { createProgram } from \"@ondras/webgl-utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"d3GeoProjection = require(\"d3-geo-projection\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"canvas3d = canvases.querySelectorAll(\"canvas\")[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"gl = canvas3d.getContext(\"webgl2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"program = {\n const p = createProgram(gl, vs, fs);\n gl.useProgram(p);\n gl.uniform2fv(gl.getUniformLocation(p, \"port\"), [width, height]);\n gl.enableVertexAttribArray(0);\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"buffers = countries.map(feature => d3GeoProjection.geoProject(feature, projection)).map(createBuffers)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"function createBuffers(feature) {\n let g = feature.geometry;\n let coords = g.coordinates;\n switch (g.type) {\n case \"Polygon\":\n\t\t\tlet {vertices, holes} = earcut.flatten(coords);\n\t\t\tlet indices = earcut(vertices, holes)\n\t\t\tlet polygon = {vertices, holes, indices};\n\t\t\treturn createPolyBuffers([polygon]);\n break;\n case \"MultiPolygon\":\n \t\t\tlet polygons = coords.map(coords => {\n\t\t\t\tlet {vertices, holes} = earcut.flatten(coords);\n\t\t\t\tlet indices = earcut(vertices, holes);\n\t\t\t\treturn {vertices, holes, indices};\n\t\t\t});\n\t\t return createPolyBuffers(polygons);\n break;\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"vs = `\n#version 300 es\nin vec2 position;\n\nuniform float scale;\nuniform vec2 port;\n\nvoid main(void) {\n vec2 px = position * scale;\n vec2 screen = px * 2.0 / port - 1.0;\n screen.y *= -1.0;\n gl_Position = vec4(screen, 0.0, 1.0);\n}\n`.trim()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"fs = `\n#version 300 es\n\nprecision mediump float;\nuniform vec3 color;\nout vec4 fragColor;\n\nvoid main(void) {\n fragColor = vec4(color, 1.0);\n}\n\t`.trim()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"earcut = require(\"earcut/dist/earcut.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"html`

2D stuff

3D stuff

Common stuff