2b:null 2c:["$","title",null,{"children":"Accumulate in the framebuffer | Chuncheng | Observable"}] 31:T5b2,/** * Draw the triangle using regl */ { const { regl, blend } = reglDrawer; const position = [ [-1, -1], [3, -1], [-1, 3] ]; function drawFrame(secs = 0, src, dst) { const { vert, frag } = shaderSourceCompute, draw = regl({ vert, frag, attributes: { position }, uniforms: { secs, spatialZoom, speedUp, src }, // framebuffer: dst, blend, count: position.length, depth: { enable: false } }); draw(); } function drawImageByTriangle(secs = 0, src) { const { vert, frag } = shaderSourceTriangle, draw = regl({ vert, frag, attributes: { position }, uniforms: { secs, spatialZoom, speedUp, src }, blend, count: position.length, depth: { enable: false } }); draw(); } var secs = 0, secsNext = 0; function draw(secs) { regl.clear({ color: [1, 0, 1, 0.1] }); stateFbos[1].fbo.use(() => { if (secs > secsNext) { regl.clear({ color: [0, 0, 0, 0.8] }); secsNext = secs + 10; } drawFrame(secs, stateFbos[0].color); }); drawImageByTriangle(secs, stateFbos[1].fbo); statsMonitor.update(); } draw(secs); for (;;) { secs = parseFloat((performance.now() / 1000) % 10000); draw(secs); yield secs; } }32:[] 2f:{"id":"475675c198a73547","slug":"accumulate-in-the-framebuffer","title":"Accumulate in the framebuffer","thumbnail":"701552fcd80e5cb9c705f46b5362a810036be6a8de286b1e34f792be2ca9734a","access_level":"public","create_time":"$D2023-11-15T13:58:45.586Z","update_time":"$D2023-11-16T11:28:52.490Z","view_time":null,"first_public_time":"$D2023-11-15T13:58:45.586Z","fork":{"id":"3505e56dcd1555d6","slug":"webgl-template","title":"WebGL Template","owner":{"id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng"}},"stars":0,"starred":false,"owner":{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024"},"version":532,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null}],"members":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"1a3bf472363b1040","slug":"webgl-baby-step","title":"WebGL baby steps","owner":{"id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng"}},"type":"notebook","body":{"title":"Accumulate in the framebuffer","cells":[{"id":0,"value":"# Accumulate in the framebuffer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":267,"value":"viewof spatialZoom = Inputs.range([0.1, 10], {\n label: \"Spatial zoom\",\n step: 0.1,\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"viewof speedUp = Inputs.range([0.1, 2], {\n label: \"Speed up\",\n step: 0.1,\n value: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"viewof colorMapName = Inputs.select(\n [\n \"jet\",\n \"hsv\",\n \"hot\",\n \"cool\",\n \"spring\",\n \"summer\",\n \"autumn\",\n \"winter\",\n \"bone\",\n \"copper\",\n \"greys\",\n \"yignbu\",\n \"greens\",\n \"yiorrd\",\n \"bluered\",\n \"rdbu\",\n \"picnic\",\n \"rainbow\",\n \"portland\",\n \"blackbody\",\n \"earth\",\n \"electric\",\n \"alpha\",\n \"viridis\",\n \"inferno\",\n \"magma\",\n \"plasma\",\n \"warm\",\n \"rainbow-soft\",\n \"bathymetry\",\n \"cdom\",\n \"chlorophyll\",\n \"density\",\n \"freesurface-blue\",\n \"freesurface-red\",\n \"oxygen\",\n \"par\",\n \"phase\",\n \"salinity\",\n \"temperature\",\n \"turbidity\",\n \"velocity-blue\",\n \"velocity-green\",\n \"cubehelix\"\n ],\n {\n label: \"Color map name\",\n value: \"bone\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"statsMonitor.dom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"reglDrawer.canvas","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"

\n [Vert div for regl...]\n

\n [Frag div for regl...]\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":133,"value":"shaderSourceTriangle = {\n const vert = `\n${customGlsl.precision}\n\nattribute vec2 position;\n\nvarying vec2 v_position;\n\nvoid main () {\n v_position = position*0.5+0.5;\n\n gl_Position = vec4(position, 0.0, 1.0);\n}\n`,\n frag = await glsl`\n${customGlsl.useStandardDerivatives}\n${customGlsl.precision}\n\n#pragma glslify: snoise = require('glsl-noise/simplex/3d')\n#pragma glslify: colormap = require('glsl-colormap/${colorMapName}')\n\nvarying vec2 v_position;\nuniform float secs, spatialZoom, speedUp;\nuniform sampler2D src;\n\nvoid main () {\n float v = 0.5 + 0.5 * snoise(vec3(v_position * spatialZoom, secs * speedUp));\n vec4 s = texture2D(src, v_position);\n gl_FragColor = colormap(v) + s;\n}\n`;\n\n return { vert, frag };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"shaderSourceCompute = {\n const vert = `\n${customGlsl.precision}\n\nattribute vec2 position;\nvarying vec2 v_position;\n\nvoid main () {\n v_position = position * 0.5 + 0.5;\n\n gl_Position = vec4(position, 0.0, 1.0);\n}\n`,\n frag = await glsl`\n${customGlsl.useStandardDerivatives}\n${customGlsl.precision}\n\n#pragma glslify: snoise = require('glsl-noise/simplex/3d')\n\nvarying vec2 v_position;\nuniform float secs, spatialZoom, speedUp;\n\nuniform sampler2D src;\n\nvoid main () {\n // vec4 v4 = texture2D(src, v_position);\n float v = 0.5 + 0.5 * snoise(vec3(v_position * spatialZoom, secs * speedUp));\n\n if (v > 0.8){\n gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n } else {\n gl_FragColor = vec4(0.0);\n }\n\n // gl_FragColor = vec4(v_position, 0.0, 1.0);\n}\n`;\n\n return { vert, frag };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"stateFbos = {\n const { regl } = reglDrawer;\n\n return [1, 2].map((d) => {\n const color = regl.texture({\n type: \"float\",\n width,\n height\n });\n return Object.assign(\n {},\n {\n color,\n fbo: regl.framebuffer({ color })\n }\n );\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"textureBuffer = reglDrawer.regl.buffer({ data: texture })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"texture = createTexture(width, height, 4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"---\n## Update div","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"updateDivForREGL(shaderSourceTriangle);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"updateDivForREGL = (shaderSource) => {\n const { vert, frag } = shaderSource;\n\n {\n const div = document.getElementById(\"vertDivForREGL\");\n div.innerHTML = \"

Vert for REGL

\";\n\n d3.select(div)\n .append(\"pre\")\n .attr(\"class\", \"prettyprint linenums lang-c\")\n .append(\"code\")\n .text(vert.trim());\n }\n\n {\n const div = document.getElementById(\"fragDivForREGL\");\n div.innerHTML = \"

Frag for REGL

\";\n\n d3.select(div)\n .append(\"pre\")\n .attr(\"class\", \"prettyprint linenums lang-c\")\n .append(\"code\")\n .text(frag.trim());\n }\n\n PR.prettyPrint();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"---\n## Texture","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":109,"value":"/**\n * Create w x h x stride sized texture array\n */\ncreateTexture = (w, h, stride) => {\n // stride = stride || 2;\n\n const rnd = d3.randomUniform(),\n n = w * h * stride,\n out = new Float32Array(n);\n\n for (var i = 0; i < n; i += stride) {\n // out[i] = (i % (w * stride)) / (w * stride);\n // out[i + 1] = (i - (i % (w * stride)) + 0.5) / n;\n out[i] = 1.0; // rnd() > 0.9 ? 1.0 : 0.0;\n }\n\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"width = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"reglDrawer = mkReglDrawer(width, height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"/**\n * Make canvas, regl and blend for WebGL\n */\nmkReglDrawer = (width, height) => {\n const canvas = DOM.canvas(width, height),\n pixelRatio = 2.0,\n extensions = [\n \"oes_standard_derivatives\",\n \"oes_texture_float\",\n \"angle_instanced_arrays\"\n ],\n regl = wrapREGL({\n canvas,\n pixelRatio,\n extensions\n }),\n blend = {\n enable: true,\n func: {\n srcRGB: \"src alpha\",\n srcAlpha: 1,\n dstRGB: \"one minus src alpha\",\n dstAlpha: 1\n },\n equation: {\n rgb: \"add\",\n alpha: \"add\"\n }\n };\n\n return { canvas, regl, blend };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"---\n## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"PR = require(\"https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"statsMonitor = {\n const stats = new Stats(),\n { dom } = stats;\n dom.style.position = \"relative\";\n\n return stats;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"Stats = require(\"https://cdn.jsdelivr.net/npm/stats-js@1.0.1/build/stats.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"wrapREGL = require(\"regl\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"import { glsl, glslify } from \"@listenzcc/glslify\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"customGlsl = ({\n useStandardDerivatives: `\n#extension GL_OES_standard_derivatives : enable\n`,\n constants: `\n#define PI 3.141592653589793238\n#define HALF_PI 1.57079632679\n#define HALF_PI_INV 0.15915494309\n#define LOG_2 0.69314718056\n#define C_ONE (vec2(1.0, 0.0))\n#define C_I (vec2(0.0, 1.0))\n#define TO_RADIANS 0.01745329251\n`,\n precision: `\nprecision lowp float;\n`,\n dist: `\nfloat dist(vec2 d) {\n return sqrt(pow(d.x, 2.0) + pow(d.y, 2.0));\n}\n\nfloat dist(vec2 a, vec2 b) {\n vec2 d = a - b;\n return dist(d);\n}\n`,\n hsv2rgb: `\nvec3 hsv2rgb(vec3 c) {\n vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);\n vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n}\n`,\n wireframe: `\nfloat wireframe (vec3 parameter, float width, float feather) {\n float w1 = width - feather * 0.5;\n vec3 d = fwidth(parameter);\n vec3 looped = 0.5 - abs(mod(parameter, 1.0) - 0.5);\n vec3 a3 = smoothstep(d * w1, d * (w1 + feather), looped);\n return min(min(a3.x, a3.y), a3.z);\n}\n`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"