2b:null 2c:["$","title",null,{"children":"Image histogram using the buffer in WebGL | Chuncheng | Observable"}] 31:T5d9,/** * 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]), position: new Int8Array([-1, 0, 1, 0, -1, 1, 1, 1]), // position: [0, 1, 2, 3], // position: new Int8Array([-0.1, 0.1, 1, 0, -1, 1, 0, 1]), fbo: { buffer: buffer, divisor: 1 } }, uniforms: { uSampler: texture, alpha2 }, blend, primitive: "points", //"triangle strip", depth: { enable: false }, instances: () => width * height, count: 4 }); drawTriangle(); statsMonitor.update(); } drawTheImage(shaderSourceDrawImage); drawWhat(shaderSourceDrawWhat); }32:T400,customGlsl = ({ useStandardDerivatives: ` #extension GL_OES_standard_derivatives : enable `, constants: ` #define PI 3.141592653589793238 #define HALF_PI 1.57079632679 #define HALF_PI_INV 0.15915494309 #define LOG_2 0.69314718056 #define C_ONE (vec2(1.0, 0.0)) #define C_I (vec2(0.0, 1.0)) #define TO_RADIANS 0.01745329251 `, precision: ` precision highp float; `, dist: ` float dist(vec2 d) { return sqrt(pow(d.x, 2.0) + pow(d.y, 2.0)); } float dist(vec2 a, vec2 b) { vec2 d = a - b; return dist(d); } `, hsv2rgb: ` vec3 hsv2rgb(vec3 c) { vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); } `, wireframe: ` float wireframe (vec3 parameter, float width, float feather) { float w1 = width - feather * 0.5; vec3 d = fwidth(parameter); vec3 looped = 0.5 - abs(mod(parameter, 1.0) - 0.5); vec3 a3 = smoothstep(d * w1, d * (w1 + feather), looped); return min(min(a3.x, a3.y), a3.z); } ` })33:[] 2f:{"id":"471ccbe2d4fad6f2","slug":"image-histogram-using-the-buffer-in-webgl","title":"Image histogram using the buffer in WebGL","thumbnail":"c3277d96c2ff266cf174fa65fda6c9e78f7868ef858e080f47a429d0072e97e4","access_level":"public","create_time":"$D2023-09-23T01:58:17.566Z","update_time":"$D2023-09-23T12:23:47.003Z","view_time":null,"first_public_time":"$D2023-09-23T01:58:17.566Z","fork":false,"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":464,"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":null,"type":"notebook","body":{"title":"Image histogram using the buffer in WebGL","cells":[{"id":0,"value":"# Image histogram using the buffer in WebGL","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.1], {\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":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":"

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":123,"value":"updateDivForREGL(shaderSourceDrawImage)","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\n#pragma glslify: snoise = require('glsl-noise/simplex/4d')\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;\nattribute vec2 position;\nattribute vec4 fbo;\nvarying vec2 v_position;\nvarying vec4 v_fbo;\nvarying vec4 v4;\n\nvoid main () {\n v_position = position;\n v_fbo = fbo;\n\n v4 = texture2D(uSampler, vec2(fbo));\n\n // v_position.y = (1.0 - v_position.y);\n\n gl_Position = vec4(position, 0.0, 0.0);\n\n gl_Position = (v4 - 0.5) * 2.0;\n gl_PointSize = 2.0;\n}\n`,\n frag = await glsl`\n${customGlsl.useStandardDerivatives}\n${customGlsl.precision}\n\n#pragma glslify: snoise = require('glsl-noise/simplex/4d')\n\nvarying vec2 v_position;\nvarying vec4 v_fbo;\nvarying vec4 v4;\nuniform float alpha2;\n\nvoid main () {\n // float rnd = snoise(vec4(v_position * 5.0, 0, 0));\n // // gl_FragColor = vec4(vec3(rnd), 1.0);\n // gl_FragColor = vec4(v_position, 0.0, 1.0);\n // gl_FragColor = vec4(0.5, 0.0, 0.0, 0.5);\n gl_FragColor = vec4(vec3(v4), alpha2);\n\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":"$31","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":"createTextureArray(10, 20, 4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"createTextureArray = (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, iStride = 0; iStride < n; i++, iStride += stride) {\n out[iStride] = ((i % w) + 0.5) / w;\n out[iStride + 1] = (((i / w) | 0) + 0.5) / h;\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":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"