30:[] 2e:{"title":"WebGL vs. 2D Canvas test","cells":[{"id":0,"value":"md`# WebGL vs. 2D Canvas test`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"form = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"canvases = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"div","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":27,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"import {div} from \"@ondras/fps\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"import { createProgram, createTexture, createQuad, resize } from \"@ondras/webgl-utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"canvas2d = canvases.querySelectorAll(\"canvas\")[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"context2d = canvas2d.getContext(\"2d\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":230,"value":"function radians(degrees) { return Math.PI * degrees / 180; }","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"gl = canvas3d.getContext(\"webgl2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"canvas3d = canvases.querySelectorAll(\"canvas\")[1]","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"}],"files":"$W30","stdlib":"1","titling":"auto"}