2d:null 2e:["$","title",null,{"children":"WebGL vs. 2D Canvas test | Ondřej Žára | Observable"}] 33:[] 31:{"id":"750e5faf7689a570","slug":"webgl-test","title":"WebGL vs. 2D Canvas test","thumbnail":"23c4f65a03aa5b8571b524259da97da06735e1a9bb80dc6e2257ed96952e904a","access_level":"public","create_time":"$D2018-06-05T08:02:38.197Z","update_time":"$D2018-07-27T12:38:14.292Z","view_time":null,"first_public_time":"$D2018-06-05T13:37:20.513Z","has_unpublished_edits":null,"fork":false,"stars":2,"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":280,"publish_version":280,"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":0,"collection":{"id":"71f9e740f3834095","slug":"webgl","title":"WebGL","owner":{"id":"684af9aa3582e037","login":"ondras","name":"Ondřej Žára"}},"type":"notebook","body":{"title":"WebGL vs. 2D Canvas test","cells":[{"id":0,"value":"md`# WebGL vs. 2D Canvas test`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"form = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"canvases = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"div","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"source = {\n function r(a, b) {\n return a + Math.floor(Math.random()*(b-a));\n }\n let canvas = html`

`;\n let ctx = canvas.getContext(\"2d\");\n for (let i=0;i<250;i++) {\n ctx.fillStyle = `rgb(${r(50, 250)}, ${r(50, 250)}, ${r(50, 250)})`;\n ctx.fillRect(\n r(0, canvas.width),\n r(0, canvas.height),\n r(0, canvas.width/3),\n r(0, canvas.height/3)\n );\n }\n canvas2d.width = canvas.width;\n canvas2d.height = canvas.height;\n canvas2d.dispatchEvent(new CustomEvent(\"update\"));\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"update = {\n let type = new window.FormData(form).get(\"render\");\n switch (type) {\n case \"2d\":\n canvas2d.style.display = \"\";\n canvas3d.style.display = \"none\";\n update2d(now);\n break;\n case \"3d\": \n canvas3d.style.display = \"\";\n canvas2d.style.display = \"none\";\n updateWebGL(now);\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":221,"value":"function updateWebGL(n) {\n gl.clear(gl.COLOR_BUFFER_BIT);\n gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n gl.uniform1f(gl.getUniformLocation(program, \"time\"), n/2 % 360);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"function update2d(n) {\n n = n/2 % 360;\n\n const sourceData = source.getContext(\"2d\").getImageData(0, 0, source.width, source.height);\n let targetData = context2d.getImageData(0, 0, canvas2d.width, canvas2d.height);\n let i=0;\n while (i < targetData.data.length) {\n transferPixel(sourceData, targetData, i, n);\n i += 4;\n }\n context2d.putImageData(targetData, 0, 0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"import {div} from \"@ondras/fps\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"import { createProgram, createTexture, createQuad, resize } from \"@ondras/webgl-utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"canvas2d = canvases.querySelectorAll(\"canvas\")[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"context2d = canvas2d.getContext(\"2d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"function transferPixel(source, target, index, time) {\n let x = (index/4) % source.width;\n let y = Math.floor((index/4) / source.width);\n let cx = source.width/2;\n let cy = source.height/2;\n let dist = Math.sqrt((x-cx)**2 + (y-cy)**2);\n let value = 0.5 * Math.sin(radians(dist * 20.0 - time)) * Math.exp(-dist / 40.0);\n\n target.data[index+0] = source.data[index+0] + 255*value;\n target.data[index+1] = source.data[index+1] + 255*value;\n target.data[index+2] = source.data[index+2] + 255*value;\n target.data[index+3] = source.data[index+3];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"function radians(degrees) { return Math.PI * degrees / 180; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"gl = canvas3d.getContext(\"webgl2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"canvas3d = canvases.querySelectorAll(\"canvas\")[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"program = {\n resize(gl, source.width, source.height);\n \n createQuad(gl);\n const p = createProgram(gl, vs, fs);\n gl.useProgram(p);\n const t = createTexture(gl, source);\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"vs = `\n#version 300 es\nin vec2 position;\n\nvoid main() { gl_Position = vec4(position, 0.0, 1.0); }`.trim()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"fs = `\n#version 300 es\nprecision highp float;\n\nout vec4 fragColor;\nuniform sampler2D image;\nuniform float time;\n\nvoid main() {\n ivec2 center = textureSize(image, 0) / 2;\n float dist = distance(gl_FragCoord.xy, vec2(center));\n float value = 0.5 * sin(radians(dist * 20.0 - time)) * exp(-dist / 40.0);\n ivec2 px = ivec2(gl_FragCoord.xy);\n fragColor = texelFetch(image, px, 0) + vec4(value, value, value, 0);\n}`.trim()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"