2d:null 2e:["$","title",null,{"children":"WebGL vs. 2D Canvas: Countries | Ondřej Žára | Observable"}] 33: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}; }34:[] 31:{"id":"805c1e14c23e6f50","slug":"webgl-vs-2d-canvas-countries","title":"WebGL vs. 2D Canvas: Countries","thumbnail":"8863b15e861e40b18711f5a420ec436d66ff0fc23138e04a3e59ce985ee824d1","access_level":"public","create_time":"$D2018-07-04T14:41:16.233Z","update_time":"$D2019-09-02T10:04:21.434Z","view_time":null,"first_public_time":"$D2018-07-26T20:00:14.856Z","has_unpublished_edits":null,"fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"684af9aa3582e037","login":"ondras","name":"Ondřej Žára","avatar_url":"https://avatars-next.observableusercontent.com/e16e55e1b9bec7e9364e0c9e0f11636f268397300d09d92a82c9f18d75d3a69a","tier":"starter_2024"},"version":262,"publish_version":262,"role":null,"authored":false,"authors":[{"type":"individual","id":"e816d8f021aae566","login":"ondras","name":"Ondřej Žára","avatar_url":"https://avatars-next.observableusercontent.com/e16e55e1b9bec7e9364e0c9e0f11636f268397300d09d92a82c9f18d75d3a69a","tier":null}],"members":[{"type":"individual","id":"e816d8f021aae566","login":"ondras","name":"Ondřej Žára","avatar_url":"https://avatars-next.observableusercontent.com/e16e55e1b9bec7e9364e0c9e0f11636f268397300d09d92a82c9f18d75d3a69a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":12,"collection":{"id":"71f9e740f3834095","slug":"webgl","title":"WebGL","owner":{"id":"684af9aa3582e037","login":"ondras","name":"Ondřej Žára"}},"type":"notebook","body":{"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","output":"$undefined","database":"$undefined"},{"id":91,"value":"form = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"canvases = html`\n\n${Object.assign(DOM.canvas(width, height), {\n style: `max-width: ${width}px`\n})}\n\n${Object.assign(\n DOM.canvas(width * devicePixelRatio, height * devicePixelRatio),\n {\n style: `max-width: ${width}px`\n }\n)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"div","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":14,"value":"projection = d3.geoMercator().translate([width/2, height/2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"colors = d3.schemePaired","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"html`

2D stuff

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"canvas2d = canvases.querySelectorAll(\"canvas\")[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"context2d = canvas2d.getContext(\"2d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"path = d3.geoPath(projection, context2d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"html`

3D stuff

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"import { createProgram } from \"@ondras/webgl-utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"d3GeoProjection = require(\"d3-geo-projection\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"canvas3d = canvases.querySelectorAll(\"canvas\")[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"gl = canvas3d.getContext(\"webgl2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":168,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":157,"value":"earcut = require(\"earcut/dist/earcut.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"html`

Common stuff

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"import {div} from \"@ondras/fps\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"topojson = require(\"topojson-client/dist/topojson-client.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"world = d3.json(resolve(\"world-atlas/countries-50m.json\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"countries = topojson.feature(world, world.objects.countries).features","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"