2c:null 2d:["$","title",null,{"children":"Image histogram using the buffer in WebGL (II) | Chuncheng | Observable"}] 32:T56f,/** * Draw the triangle using regl */ { const { regl, blend } = reglDrawer; const { texture, buffer, width, height } = myImage; // Object.assign(reglDrawer.canvas, { width, height }); function drawTheImage(source) { const { vert, frag } = source; regl.clear({ color: [0, 0, 0, 1] }); // Example of position parameter const position = [ [-4, -1], [1, -1], [1, 4] ]; const drawTriangle = regl({ vert, frag, attributes: { position }, uniforms: { uSampler: texture, alpha1 }, count: position.length, blend, depth: { enable: false } }); drawTriangle(); statsMonitor.update(); } function drawWhat(source) { const { vert, frag } = source; const drawTriangle = regl({ vert, frag, attributes: { position: new Int8Array([-1, 0, 1, 0, -1, 1, 1, 1]), bo: { buffer: buffer, divisor: 1 } }, uniforms: { uSampler: texture, alpha2, positionMixRate }, blend, // primitive: "points", // count: 1, primitive: "triangle strip", count: 4, depth: { enable: false }, instances: () => width * height }); drawTriangle(); statsMonitor.update(); } drawTheImage(shaderSourceDrawImage); drawWhat(shaderSourceDrawWhat); }33:[] 30:{"id":"a90915e0794391a7","slug":"image-histogram-using-the-buffer-in-webgl-ii","title":"Image histogram using the buffer in WebGL (II)","thumbnail":"1753541d5f9668863c85b252ed44cd6aaefa9e5dd7b91b3649715489a5a38f6a","access_level":"public","create_time":"$D2023-09-23T14:53:42.908Z","update_time":"$D2023-09-27T11:50:42.660Z","view_time":null,"first_public_time":"$D2023-09-23T14:53:42.908Z","fork":{"id":"471ccbe2d4fad6f2","slug":"image-histogram-using-the-buffer-in-webgl","title":"Image histogram using the buffer in WebGL","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":725,"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":2,"collection":{"id":"1a3bf472363b1040","slug":"webgl-baby-step","title":"WebGL baby steps","owner":{"id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng"}},"type":"notebook","body":{"title":"Image histogram using the buffer in WebGL (II)","cells":[{"id":0,"value":"# Image histogram using the buffer in WebGL (II)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"viewof select = Inputs.select(srcs, { label: \"Select one Picture\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"srcs = {\n button;\n const srcs = [\n \"https://source.unsplash.com/random\" +\n `?sport,city&seed=${performance.now()}`,\n \"https://images.unsplash.com/photo-1694109898714-04f408d7b605?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80\",\n \"https://images.unsplash.com/photo-1694420085542-86fdd9873952?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80\",\n \"https://images.unsplash.com/photo-1694384512183-5d51407b08cc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw2OHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60\"\n ];\n return srcs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"viewof backgroundColor = Inputs.color({\n label: \"Background Color\",\n value: \"#505a62\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"viewof alpha1 = Inputs.range([0, 1], {\n label: \"Alpha1\",\n step: 0.01,\n value: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"viewof alpha2 = Inputs.range([0, 0.2], {\n label: \"Alpha2\",\n step: 0.001,\n value: 0.05\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"viewof positionMixRate = Inputs.range([0, 1], {\n label: \"Position mix rate\",\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"viewof button = Inputs.button(\"Click me\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"statsMonitor.dom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"reglDrawer.canvas","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":123,"value":"updateDivForREGL(shaderSourceDrawWhat)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"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":77,"value":"shaderSourceDrawImage = {\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 v_position.y = (1.0 - v_position.y);\n\n gl_Position = vec4(position, 0.0, 1.0);\n}\n`,\n frag = await glsl`\n${customGlsl.useStandardDerivatives}\n${customGlsl.precision}\n\nuniform sampler2D uSampler;\n\nvarying vec2 v_position;\nuniform float alpha1;\n\nvoid main () {\n vec4 tex = texture2D(uSampler, v_position);\n gl_FragColor = vec4(vec3(tex), alpha1);\n}\n`;\n\n return { vert, frag };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"shaderSourceDrawWhat = {\n const vert = `\n${customGlsl.precision}\n\nuniform sampler2D uSampler;\nuniform float positionMixRate;\nattribute vec2 position;\nattribute vec4 bo;\nvarying vec2 v_position;\nvarying vec4 vColor4;\nvarying vec4 v_bo;\n\nvoid main () {\n v_position = position;\n v_bo = bo;\n\n vColor4 = texture2D(uSampler, vec2(bo));\n\n v_bo -= 0.5;\n v_bo.y *= -1.0;\n\n v_bo.xy *= 1.5;\n\n v_bo.xy += v_position * 0.01;\n\n gl_Position = mix((vColor4 - 0.5) * 2.0, vec4(vec2(v_bo), 0.0, 1.0), positionMixRate);\n\n gl_PointSize = 2.0;\n}\n`,\n frag = await glsl`\n${customGlsl.useStandardDerivatives}\n${customGlsl.precision}\n\nvarying vec4 vColor4;\nuniform float alpha2;\n\nvoid main () {\n gl_FragColor = vec4(vec3(vColor4), alpha2);\n}\n`;\n\n return { vert, frag };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"---\n\n## Image resource","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":205,"value":"reglDrawer = myImage.reglDrawer","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"myImage = await showMeTheImage()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"showMeTheImage = () => {\n return new Promise((resolve) => {\n const src = select,\n image = new Image();\n image.src = src;\n image.crossOrigin = \"anonymous\";\n\n image.onload = () => {\n const r = image.width / image.height;\n\n if (r > 1.0) {\n image.width = sizeLimit;\n image.height = image.width / r;\n } else {\n image.height = sizeLimit;\n image.width = image.height * r;\n }\n\n const reglDrawer = mkReglDrawer(image.width, image.height),\n { regl, blend } = reglDrawer,\n texture = regl.texture(image),\n buffer = regl.buffer(createTextureArray(width, height, 4));\n\n Object.assign(image, { texture, buffer, reglDrawer });\n\n resolve(image);\n };\n\n // resolve(image);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"mkReglDrawer = (width, height) => {\n const canvas = DOM.canvas(width || sizeLimit, height || sizeLimit),\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 // Object.assign(canvas, { width, height });\n\n return { canvas, regl, blend };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"cta = createTextureArray(myImage.width, myImage.height, 4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"/**\n * Create w x h x stride sized texture array, stride usually equals to 4.\n */\ncreateTextureArray = (w, h, stride) => {\n stride = stride || 2;\n\n var n = w * h * stride;\n\n var 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 }\n\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"---\n## Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"sizeLimit = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"width = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"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":9,"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":5,"value":"wrapREGL = require(\"regl\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"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":79,"value":"import { glsl, glslify } from \"@aman-tiwari/glslify\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"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":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"