29:null 2a:["$","title",null,{"children":"Webgl2 image processing | Claudio Esperança | Observable"}] 2f:T408,viewof grainShader = shaderShow( `#version 300 es precision highp float; uniform float noiseSeed; uniform float noiseAmount; uniform float jitterAmount; uniform sampler2D tex; out vec4 fragColor; float hash13(vec3 p3) { p3 = fract(p3 * .1031); p3 += dot(p3, p3.zyx + 31.32); return fract((p3.x + p3.y) * p3.z); } void main() { vec3 n = noiseAmount * (0.5 - vec3(hash13(vec3(gl_FragCoord.xy, noiseSeed+0.01413)), hash13(vec3(gl_FragCoord.xy, noiseSeed+0.0297)), hash13(vec3(gl_FragCoord.xy, noiseSeed+0.01235)))); vec2 iResolution = vec2(textureSize(tex, 0)); float ang = 6.2832 * hash13(vec3(gl_FragCoord.xy, noiseSeed+0.033)); float r = hash13(vec3(gl_FragCoord.xy, noiseSeed+0.041)); vec2 uv = (gl_FragCoord.xy + jitterAmount * vec2(r*cos(ang),r*sin(ang))) / iResolution; vec3 texColor = texture(tex,uv).xyz; fragColor = vec4(texColor+n, 1.); } `, { label: "grainShader" } )30:T82c,viewof noiseGrainShader = shaderShow( `#version 300 es precision highp float; uniform float noiseSeed; uniform float grainAmount; uniform float grainScale; uniform float jitterAmount; uniform float jitterScale; uniform sampler2D tex; out vec4 fragColor; vec3 hash( vec3 p ) // replace this by something better { p = vec3( dot(p,vec3(127.1,311.7, 74.7)), dot(p,vec3(269.5,183.3,246.1)), dot(p,vec3(113.5,271.9,124.6))); return -1.0 + 2.0*fract(sin(p)*43758.5453123); } float noise( in vec3 p ) { vec3 i = floor( p ); vec3 f = fract( p ); vec3 u = f*f*(3.0-2.0*f); return mix( mix( mix( dot( hash( i + vec3(0.0,0.0,0.0) ), f - vec3(0.0,0.0,0.0) ), dot( hash( i + vec3(1.0,0.0,0.0) ), f - vec3(1.0,0.0,0.0) ), u.x), mix( dot( hash( i + vec3(0.0,1.0,0.0) ), f - vec3(0.0,1.0,0.0) ), dot( hash( i + vec3(1.0,1.0,0.0) ), f - vec3(1.0,1.0,0.0) ), u.x), u.y), mix( mix( dot( hash( i + vec3(0.0,0.0,1.0) ), f - vec3(0.0,0.0,1.0) ), dot( hash( i + vec3(1.0,0.0,1.0) ), f - vec3(1.0,0.0,1.0) ), u.x), mix( dot( hash( i + vec3(0.0,1.0,1.0) ), f - vec3(0.0,1.0,1.0) ), dot( hash( i + vec3(1.0,1.0,1.0) ), f - vec3(1.0,1.0,1.0) ), u.x), u.y), u.z ); } void main() { vec2 iResolution = vec2(textureSize(tex, 0)); vec3 n = grainAmount * (0.3 - vec3 (noise (grainScale * vec3(gl_FragCoord.xy, noiseSeed*1000.+1331.)), noise (grainScale * vec3(gl_FragCoord.xy, noiseSeed*1139.+2135.)), noise (grainScale * vec3(gl_FragCoord.xy, noiseSeed*1313.+7713.)))); float ang = 6.2832 * noise(jitterScale * vec3(gl_FragCoord.xy, noiseSeed*1831.+3762.)); float r = noise(jitterScale * vec3(gl_FragCoord.xy, noiseSeed*1385.+5137.)); vec2 uv = (gl_FragCoord.xy + jitterAmount * vec2(r*cos(ang),r*sin(ang))) / iResolution; vec3 texColor = texture(tex,uv).xyz; fragColor = vec4(texColor+n, 1.); } `, { label: "noiseGrainShader" } )31:T117e,viewof toonShader = shaderShow( `#version 300 es precision highp float; uniform sampler2D tex0; uniform float mouse_x_offset; // 0.5 vec2 pixelSize; in vec2 uv; out vec4 FragColor; uniform float edge_thres; // 0.2; uniform float edge_thres2; // 5.0; #define HueLevCount 6 #define SatLevCount 7 #define ValLevCount 4 float[HueLevCount] HueLevels = float[] (0.0,140.0,160.0,240.0,240.0,360.0); float[SatLevCount] SatLevels = float[] (0.0,0.15,0.3,0.45,0.6,0.8,1.0); float[ValLevCount] ValLevels = float[] (0.0,0.3,0.6,1.0); vec3 RGBtoHSV( float r, float g, float b) { float minv, maxv, delta; vec3 res; minv = min(min(r, g), b); maxv = max(max(r, g), b); res.z = maxv; // v delta = maxv - minv; if( maxv != 0.0 ) res.y = delta / maxv; // s else { // r = g = b = 0 // s = 0, v is undefined res.y = 0.0; res.x = -1.0; return res; } if( r == maxv ) res.x = ( g - b ) / delta; // between yellow & magenta else if( g == maxv ) res.x = 2.0 + ( b - r ) / delta; // between cyan & yellow else res.x = 4.0 + ( r - g ) / delta; // between magenta & cyan res.x = res.x * 60.0; // degrees if( res.x < 0.0 ) res.x = res.x + 360.0; return res; } vec3 HSVtoRGB(float h, float s, float v ) { int i; float f, p, q, t; vec3 res; if( s == 0.0 ) { // achromatic (grey) res.x = v; res.y = v; res.z = v; return res; } h /= 60.0; // sector 0 to 5 i = int(floor( h )); f = h - float(i); // factorial part of h p = v * ( 1.0 - s ); q = v * ( 1.0 - s * f ); t = v * ( 1.0 - s * ( 1.0 - f ) ); switch(i) { case 0: res.x = v; res.y = t; res.z = p; break; case 1: res.x = q; res.y = v; res.z = p; break; case 2: res.x = p; res.y = v; res.z = t; break; case 3: res.x = p; res.y = q; res.z = v; break; case 4: res.x = t; res.y = p; res.z = v; break; default: // case 5: res.x = v; res.y = p; res.z = q; break; } return res; } float nearestLevel(float col, int mode) { int levCount; if (mode==0) levCount = HueLevCount; if (mode==1) levCount = SatLevCount; if (mode==2) levCount = ValLevCount; for (int i =0; i= HueLevels[i] && col <= HueLevels[i+1]) { return HueLevels[i+1]; } } if (mode==1) { if (col >= SatLevels[i] && col <= SatLevels[i+1]) { return SatLevels[i+1]; } } if (mode==2) { if (col >= ValLevels[i] && col <= ValLevels[i+1]) { return ValLevels[i+1]; } } } } // averaged pixel intensity from 3 color channels float avg_intensity(vec4 pix) { return (pix.r + pix.g + pix.b)/3.; } vec4 get_pixel(vec2 coords, float dx, float dy) { return texture(tex0,coords + vec2(dx, dy)); } // returns pixel color float IsEdge(in vec2 coords) { float dxtex = pixelSize.x ; float dytex = pixelSize.y; float pix[9]; int k = -1; float delta; // read neighboring pixel intensities for (int i=-1; i<2; i++) { for(int j=-1; j<2; j++) { k++; pix[k] = avg_intensity(get_pixel(coords,float(i)*dxtex, float(j)*dytex)); } } // average color differences around neighboring pixels delta = (abs(pix[1]-pix[7])+ abs(pix[5]-pix[3]) + abs(pix[0]-pix[8])+ abs(pix[2]-pix[6]) )/4.; //return clamp(5.5*delta,0.0,1.0); return clamp(edge_thres2*delta,0.0,1.0); } void main() { pixelSize = 1.0 / vec2 (textureSize(tex0,0)); vec4 tc = vec4(1.0, 0.0, 0.0, 1.0); if (uv.x > (mouse_x_offset+0.002)) { vec3 colorOrg = texture(tex0, uv).rgb; vec3 vHSV = RGBtoHSV(colorOrg.r,colorOrg.g,colorOrg.b); vHSV.x = nearestLevel(vHSV.x, 0); vHSV.y = nearestLevel(vHSV.y, 1); vHSV.z = nearestLevel(vHSV.z, 2); float edg = IsEdge(uv); vec3 vRGB = (edg >= edge_thres)? vec3(0.0,0.0,0.0):HSVtoRGB(vHSV.x,vHSV.y,vHSV.z); tc = vec4(vRGB.x,vRGB.y,vRGB.z, 1); } else if (uv.x < (mouse_x_offset-0.002)) { tc = texture(tex0, uv); } FragColor = tc; } `, { label: "toonShader" } )32:T45b,viewof barrelShader = shaderShow( `#version 300 es // https://www.shadertoy.com/view/MlSXR3 precision highp float; uniform sampler2D iChannel0; // positive values of K1 give barrel distortion, negative give pincushion uniform float barrelDistortion1; // K1 in text books uniform float barrelDistortion2; // K2 in text books uniform float zoom; uniform vec2 iMouse; out vec4 FragColor; vec2 brownConradyDistortion(vec2 uv) { float r2 = uv.x*uv.x + uv.y*uv.y; uv *= 1.0 + barrelDistortion1 * r2 + barrelDistortion2 * r2 * r2; // tangential distortion (due to off center lens elements) // is not modeled in this function, but if it was, the terms would go here return uv; } void main( ) { vec2 iResolution = vec2(textureSize(iChannel0,0)); vec2 translation = iMouse.xy / iResolution.xy; vec2 uv = gl_FragCoord.xy / iResolution.xy ; uv = (uv * 2.0 - 1.0) ; translation = (translation * 2. - 1.0) * vec2(1.,-1.); uv = (brownConradyDistortion((uv-translation) / zoom )+translation) / 1.0; uv = (uv + 1.0) * 0.5; FragColor = texture(iChannel0, uv); } `, { label: "barrelShader" } )33:T752,viewof freiChenShader = shaderShow( `#version 300 es // From https://www.rastergrid.com/blog/2011/01/frei-chen-edge-detector/ precision highp float; uniform sampler2D image; vec2 pixelSize; uniform float threshold1; uniform float threshold2; out vec4 FragmentColor; const mat3 G[9] = mat3[]( 1.0/(2.0*sqrt(2.0)) * mat3( 1.0, sqrt(2.0), 1.0, 0.0, 0.0, 0.0, -1.0, -sqrt(2.0), -1.0 ), 1.0/(2.0*sqrt(2.0)) * mat3( 1.0, 0.0, -1.0, sqrt(2.0), 0.0, -sqrt(2.0), 1.0, 0.0, -1.0 ), 1.0/(2.0*sqrt(2.0)) * mat3( 0.0, -1.0, sqrt(2.0), 1.0, 0.0, -1.0, -sqrt(2.0), 1.0, 0.0 ), 1.0/(2.0*sqrt(2.0)) * mat3( sqrt(2.0), -1.0, 0.0, -1.0, 0.0, 1.0, 0.0, 1.0, -sqrt(2.0) ), 1.0/2.0 * mat3( 0.0, 1.0, 0.0, -1.0, 0.0, -1.0, 0.0, 1.0, 0.0 ), 1.0/2.0 * mat3( -1.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0, 0.0, -1.0 ), 1.0/6.0 * mat3( 1.0, -2.0, 1.0, -2.0, 4.0, -2.0, 1.0, -2.0, 1.0 ), 1.0/6.0 * mat3( -2.0, 1.0, -2.0, 1.0, 4.0, 1.0, -2.0, 1.0, -2.0 ), 1.0/3.0 * mat3( 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0 ) ); void main() { pixelSize = 1. / vec2(textureSize(image,0)); mat3 I; float cnv[9]; /* fetch the 3x3 neighbourhood and use the RGB vector's length as intensity value */ for (int i=0; i<3; i++) for (int j=0; j<3; j++) { vec2 uv = (gl_FragCoord.xy + vec2(i-1,j-1)) * pixelSize; vec3 color = texture(image,uv).rgb; float lum = 0.299 * color.r + 0.587*color.g + 0.114 * color.b; I[i][j] = lum; } /* calculate the convolution values for all the masks */ for (int i=0; i<9; i++) { float dp3 = dot(G[i][0], I[0]) + dot(G[i][1], I[1]) + dot(G[i][2], I[2]); cnv[i] = dp3 * dp3; } float M = (cnv[0] + cnv[1]) + (cnv[2] + cnv[3]); float S = (cnv[4] + cnv[5]) + (cnv[6] + cnv[7]) + (cnv[8] + M); float edge = sqrt(M/S); float gray = smoothstep (threshold1, threshold2, edge); FragmentColor = vec4(vec3(gray),1.0); } `, { label: "freiChenShader" } )34:T465,viewof illumShader = shaderShow( `#version 300 es precision highp float; uniform sampler2D tex; uniform sampler2D bumpmap; uniform vec3 lightVec; uniform float ambientCoef; uniform float diffuseCoef; uniform float specularCoef; uniform float specularShininess; uniform float bumpFactor; vec3 eyeVec = vec3 (0., 0., 1.); out vec4 fragColor; float lum (vec2 uv) { vec3 color = texture(bumpmap, uv).xyz; return 0.299 * color.r + 0.587*color.g + 0.114 * color.b; } void main(void) { vec2 iResolution = vec2(textureSize(tex,0)); vec2 uv = gl_FragCoord.xy/iResolution.xy; vec2 d = 0.5 / iResolution.xy; vec3 normal = normalize (vec3 (lum (uv - vec2(d.x, 0.)) - lum (uv + vec2 (d.x, 0.)), lum (uv - vec2(0., d.y)) - lum (uv + vec2 (0., d.y)), 1.0-bumpFactor)); float diffuse = diffuseCoef * max(dot(lightVec, normal), 0.0); vec3 highlight = specularCoef * vec3(pow(max(dot(eyeVec, reflect(-lightVec, normal)), 0.0), specularShininess)); vec3 color = texture(tex,uv).xyz * (diffuse + ambientCoef) + highlight; fragColor = vec4(color,1.); } `, { label: "illumShader" } )35:[{"id":"3da81e1bef1ec20bb7719e756a09c9d35a11bb175bedbeb9139e14ee166d9a1b6fc47d76b29ae6f6e9ff9b1fb2a1d670fb5914b15ac7d3217379d4cfaa3dbbbb","href":"https://static.observableusercontent.com/files/3da81e1bef1ec20bb7719e756a09c9d35a11bb175bedbeb9139e14ee166d9a1b6fc47d76b29ae6f6e9ff9b1fb2a1d670fb5914b15ac7d3217379d4cfaa3dbbbb","name":"test.jpeg","type":"image/jpeg","lastModified":1695484266685.575,"size":93901}] 2d:{"id":"bf5f641143839447","slug":"webgl2-image-processing","title":"Webgl2 image processing","thumbnail":"7bc603da4a7025d213e897f74090c750c19b88c97d8b56824e9b4aa8186f982b","access_level":"public","create_time":"$D2023-09-23T15:51:06.685Z","update_time":"$D2023-10-07T21:33:33.676Z","view_time":null,"first_public_time":"$D2023-10-03T01:03:47.664Z","has_unpublished_edits":null,"fork":true,"stars":26,"starred":false,"owner":{"type":"team","id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":"starter_2024"},"version":1048,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}],"members":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"Webgl2 image processing","cells":[{"id":178,"value":"# Webgl2 image processing\n\nCollected useful image-processing shaders. Pick and choose...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":971,"value":"toc({ selector: \"h2\", heading: \"Go to:\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"
\n## Grain/jitter shader ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":260,"value":"viewof grainParam = Inputs.form({\n noiseAmount: Inputs.range([0, 1], {\n value: 0.1,\n step: 0.01,\n label: \"noise amount\"\n }),\n jitterAmount: Inputs.range([0, 100], {\n value: 5,\n step: 0.1,\n label: \"jitter amount\"\n }),\n noiseSeed: Inputs.range([0, 1], {\n value: 0,\n step: 0.01,\n label: \"random seed\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"grainResult = grainApp\n .clear()\n .uniform(\"noiseAmount\", grainParam.noiseAmount)\n .uniform(\"jitterAmount\", grainParam.jitterAmount)\n .uniform(\"noiseSeed\", grainParam.noiseSeed)\n .draw().canvas","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"grainApp = gl2helper({\n fragmentShader: grainShader,\n textures: {\n tex: testImg\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"
\n## Noise grain/jitter shader\n\nThe same idea as above, but using gradient noise rather than white noise. Noise implementation \nlifted from [this shadertoy](https://www.shadertoy.com/view/XdXGW8).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1020,"value":"viewof noiseGrainParam = Inputs.form({\n grainAmount: Inputs.range([0, 1], {\n value: 0.1,\n step: 0.01,\n label: \"grain amount\"\n }),\n grainScale: Inputs.range([-8, 0], {\n value: -3,\n step: 0.1,\n label: \"grain scale (log 2)\"\n }),\n jitterAmount: Inputs.range([0, 100], {\n value: 10,\n step: 0.1,\n label: \"jitter amount\"\n }),\n jitterScale: Inputs.range([-8, 0], {\n value: -3,\n step: 0.1,\n label: \"jitter scale (log 2)\"\n }),\n noiseSeed: Inputs.range([0, 1], {\n value: 0,\n step: 0.01,\n label: \"random seed\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"noiseGrainResult = noiseGrainApp\n .clear()\n .uniform(\"grainAmount\", noiseGrainParam.grainAmount)\n .uniform(\"jitterAmount\", noiseGrainParam.jitterAmount)\n .uniform(\"noiseSeed\", noiseGrainParam.noiseSeed)\n .uniform(\"grainScale\", 2 ** noiseGrainParam.grainScale)\n .uniform(\"jitterScale\", 2 ** noiseGrainParam.jitterScale)\n .draw().canvas","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1014,"value":"noiseGrainApp = gl2helper({\n fragmentShader: noiseGrainShader,\n textures: {\n tex: testImg\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"
\n## Toon shader\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":344,"value":"viewof toonParam = Inputs.form({\n edgeMin: Inputs.range([0, 1], {\n value: 0.2,\n step: 0.01,\n label: \"edge threshold min\"\n }),\n edgeMax: Inputs.range([0, 1], {\n value: 0.5,\n step: 0.01,\n label: \"edge threshold max\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"toonResult = {\n const canvas = toonApp.canvas;\n canvas.onmousemove = canvas.onmousedown = (e) => {\n if (e.buttons) mutable toonMouse = [e.offsetX, e.offsetY];\n };\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"mutable toonMouse = [400, 300]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"toonApp\n .clear()\n .uniform(\"mouse_x_offset\", toonMouse[0] / 800)\n .uniform(\"edge_thres\", toonParam.edgeMin)\n .uniform(\"edge_thres2\", toonParam.edgeMax)\n .draw()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"toonApp = gl2helper({\n fragmentShader: toonShader,\n textures: {\n tex0: testImg\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"
\n## Barrel / pincushion / zoom distortion\n\n`k1` and `k2` control the barrel (positive values) or pincushion (negative values) deformation strength.\n\nUse the mouse to shift the center of deformation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":410,"value":"viewof barrelParam = Inputs.form({\n k1: Inputs.range([-5, 5], {\n value: 0.4,\n step: 0.01,\n label: \"k1\"\n }),\n k2: Inputs.range([-5, 5], {\n value: 0,\n step: 0.01,\n label: \"k2\"\n }),\n zoom: Inputs.range([-5, 5], {\n value: 1,\n step: 0.01,\n label: \"zoom (log2)\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"barrelResult = {\n const canvas = barrelApp.canvas;\n canvas.onmousemove = canvas.onmousedown = (e) => {\n if (e.buttons) mutable barrelMouse = [e.offsetX, e.offsetY];\n };\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"mutable barrelMouse = [400, 300]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"barrelApp\n .clear()\n .uniform(\"iResolution\", [800, 600])\n .uniform(\"barrelDistortion1\", barrelParam.k1)\n .uniform(\"barrelDistortion2\", barrelParam.k2)\n .uniform(\"iMouse\", barrelMouse)\n .uniform(\"zoom\", 2 ** barrelParam.zoom)\n .draw()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"barrelApp = gl2helper({\n fragmentShader: barrelShader,\n textures: {\n iChannel0: testImg\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"
\n## Cross hatching","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":499,"value":"viewof hatchingParam = Inputs.form({\n grid_size: Inputs.range([3, 20], {\n value: 8,\n step: 0.5,\n label: \"grid cell size\"\n }),\n y_offset: Inputs.range([0, 10], {\n value: 4,\n step: 0.5,\n label: \"y offset\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"hatchingResult = hatchingApp.canvas","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"hatchingApp\n .clear()\n .uniform(\"grid_size\", hatchingParam.grid_size)\n .uniform(\"hatch_y_offset\", hatchingParam.y_offset)\n .draw()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"hatchingApp = gl2helper({\n fragmentShader: hatchingShader,\n textures: {\n tex: testImg\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"viewof hatchingShader = shaderShow(\n `#version 300 es\nprecision highp float;\nuniform float hatch_y_offset; // 5.0\nuniform float grid_size; // 10\nuniform sampler2D tex;\nin vec2 uv;\nout vec4 fragColor;\n\nvoid main() { \n vec3 tc = vec3(1.0, 1.0, 1.0);\n vec3 color = texture(tex,uv).rgb;\n float lum = 0.299 * color.r + 0.587*color.g + 0.114 * color.b;\n \n if (lum < 0.8) {\n if (mod(gl_FragCoord.x + gl_FragCoord.y, grid_size)< 0.05) \n tc = vec3(0.0, 0.0, 0.0);\n } \n \n if (lum < 0.6) {\n if (mod(gl_FragCoord.x - gl_FragCoord.y, grid_size)< 0.05) \n tc = vec3(0.0, 0.0, 0.0);\n } \n\n if (lum < 0.4) {\n if (mod(gl_FragCoord.x + gl_FragCoord.y - hatch_y_offset, grid_size) < 0.05) \n tc = vec3(0.0, 0.0, 0.0);\n } \n \n if (lum < 0.2) {\n if (mod(gl_FragCoord.x - gl_FragCoord.y - hatch_y_offset, grid_size) < 0.05) \n tc = vec3(0.0, 0.0, 0.0);\n }\n \n fragColor = vec4(tc, 1.0);\n}\n`,\n { label: \"hatchingShader\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"
\n## Frosted glass\n\nFrom https://www.geeks3d.com/20101228/shader-library-frosted-glass-post-processing-shader-glsl/2/\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":602,"value":"viewof frostedParam = Inputs.form({\n v1: vectorInput({\n label: \"v1\",\n max: 100,\n size: 80,\n value: [0, -50]\n }),\n v2: vectorInput({\n label: \"v2\",\n max: 100,\n size: 80,\n value: [50, 0]\n }),\n rnd_factor: Inputs.range([0, 1], {\n value: 0.05,\n step: 0.01,\n label: \"rnd_factor\"\n }),\n rnd_scale: Inputs.range([0, 10], {\n value: 1,\n step: 0.01,\n label: \"rnd_scale\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"frostedResult = frostedApp\n .clear()\n .uniform(\"v1\", frostedParam.v1)\n .uniform(\"v2\", frostedParam.v2)\n .uniform(\"rnd_factor\", frostedParam.rnd_factor)\n .uniform(\"rnd_scale\", frostedParam.rnd_scale)\n .draw().canvas","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"frostedApp = gl2helper({\n fragmentShader: frostedShader,\n textures: {\n tex: testImg\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"viewof frostedShader = shaderShow(\n `#version 300 es\n// From https://www.geeks3d.com/20101228/shader-library-frosted-glass-post-processing-shader-glsl/2/\nprecision highp float;\nuniform sampler2D tex; // 0\nuniform float rnd_factor;\nuniform float rnd_scale;\nuniform vec2 v1;\nuniform vec2 v2;\nin vec2 uv;\nout vec4 fragColor;\n\nfloat rand(vec2 co)\n{\n return fract(sin(dot(co.xy ,v1)) + cos(dot(co.xy ,v2)) * rnd_scale);\n}\n\nvoid main() \n{ \n vec3 tc = vec3(0.0, 0.0, 0.0);\n vec2 rnd = vec2(rand(uv.xy),rand(uv.yx)); \n tc = texture(tex, uv+rnd*rnd_factor).rgb; \n fragColor = vec4(tc, 1.0);\n}\n`,\n { label: \"frostedShader\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"
\n## Frei-Chen edge detection\n\nReference: https://www.rastergrid.com/blog/2011/01/frei-chen-edge-detector/\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":669,"value":"viewof freiChenParam = Inputs.form({\n threshold1: Inputs.range([0, 1], {\n value: 0.3,\n step: 0.01,\n label: \"threshold1\"\n }),\n threshold2: Inputs.range([0, 1], {\n value: 0.4,\n step: 0.01,\n label: \"threshold2\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"freiChenResult = freiChenApp\n .clear()\n .uniform(\"threshold1\", freiChenParam.threshold1)\n .uniform(\"threshold2\", freiChenParam.threshold2)\n .draw().canvas","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"freiChenApp = gl2helper({\n fragmentShader: freiChenShader,\n textures: {\n image: testImg\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"
\n## Gaussian blur\n\nA linear and a discrete implementation are available. The linear version is more performant. Reference: https://www.rastergrid.com/blog/2010/09/efficient-gaussian-blur-with-linear-sampling/\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":849,"value":"viewof blurImplementation = Inputs.radio([\"linear\", \"discrete\"], {\n label: \"blur implementation\",\n value: \"linear\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"viewof blurPasses = Inputs.range([1, 200], {\n label: \"blur passes\",\n step: 1,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":798,"value":"gaussianBlurResult = {\n const { vApp, hApp } = blurApps;\n for (let i = 0; i < blurPasses; i++) {\n if (i == 0) {\n vApp.useFbo(0).texture(\"tex\", vApp.textureObjects[\"tex\"]).draw();\n } else {\n vApp\n .useFbo(0)\n .texture(\"tex\", hApp.fboObjects[0].colorAttachments[0])\n .draw();\n }\n if (i == blurPasses - 1) {\n hApp\n .useFbo(null)\n .texture(\"tex\", vApp.fboObjects[0].colorAttachments[0])\n .draw();\n } else {\n hApp\n .useFbo(0)\n .texture(\"tex\", vApp.fboObjects[0].colorAttachments[0])\n .draw();\n }\n }\n return blurApps.vApp.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"blurApps = {\n let vApp = gl2helper({\n fragmentShader:\n blurImplementation == \"linear\"\n ? verticalBlurShader\n : verticalDiscreteShader,\n textures: {\n tex: testImg\n },\n fbos: [1] //\n });\n\n let hApp = gl2helper({\n app: vApp.app,\n fragmentShader:\n blurImplementation == \"linear\"\n ? horizontalBlurShader\n : horizontalDiscreteShader,\n fbos: [1]\n });\n\n return { vApp, hApp };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"viewof verticalBlurShader = shaderShow(\n `#version 300 es\n// From https://www.geeks3d.com/20100909/shader-library-gaussian-blur-post-processing-filter-in-glsl/\nprecision highp float;\n\nuniform sampler2D tex; \n\nfloat offset[3] = float[]( 0.0, 1.3846153846, 3.2307692308 );\nfloat weight[3] = float[]( 0.2270270270, 0.3162162162, 0.0702702703 );\n\nout vec4 fragColor;\n\nvoid main() { \n vec2 iResolution = vec2(textureSize(tex,0));\n vec2 uv = gl_FragCoord.xy/iResolution.xy;\n vec3 tc = texture(tex, uv).rgb * weight[0];\n for (int i=1; i<3; i++) {\n tc += texture(tex, (gl_FragCoord.xy + vec2(0.0, offset[i]))/iResolution).rgb * weight[i];\n tc += texture(tex, (gl_FragCoord.xy - vec2(0.0, offset[i]))/iResolution).rgb * weight[i];\n }\n fragColor = vec4(tc, 1.0);\n}\n`,\n { label: \"verticalBlurShader\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"viewof horizontalBlurShader = shaderShow(\n `#version 300 es\n// From https://www.geeks3d.com/20100909/shader-library-gaussian-blur-post-processing-filter-in-glsl/\nprecision highp float;\n\nuniform sampler2D tex; \n\nfloat offset[3] = float[]( 0.0, 1.3846153846, 3.2307692308 );\nfloat weight[3] = float[]( 0.2270270270, 0.3162162162, 0.0702702703 );\n\nout vec4 fragColor;\n\nvoid main() {\n vec2 iResolution = vec2(textureSize(tex,0));\n vec2 uv = gl_FragCoord.xy/iResolution.xy;\n vec3 tc = texture(tex, uv).rgb * weight[0];\n for (int i=1; i<3; i++) {\n tc += texture(tex, (gl_FragCoord.xy + vec2(offset[i], 0.))/iResolution).rgb * weight[i];\n tc += texture(tex, (gl_FragCoord.xy - vec2(offset[i], 0.))/iResolution).rgb * weight[i];\n }\n fragColor = vec4(tc, 1.0);\n}\n`,\n { label: \"horizontalBlurShader\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"viewof verticalDiscreteShader = shaderShow(\n `#version 300 es\nprecision highp float;\n\nuniform sampler2D tex;\n\nfloat offset[5] = float[]( 0.0, 1.0, 2.0, 3.0, 4.0 );\nfloat weight[5] = float[]( 0.2270270270, 0.1945945946, 0.1216216216, 0.0540540541, 0.0162162162 );\n\nout vec4 fragColor;\n\nvoid main(void)\n{\n vec2 iResolution = vec2(textureSize(tex,0));\n\tvec2 uv = gl_FragCoord.xy/iResolution.xy;\n fragColor = texture( tex, uv ) * weight[0];\n\tfor (int i=1; i<5; i++) {\n\t\tfragColor += texture( tex, ( gl_FragCoord.xy +vec2(0.0, offset[i]) )/iResolution ) * weight[i];\n\t\tfragColor += texture( tex, ( gl_FragCoord.xy -vec2(0.0, offset[i]) )/iResolution ) * weight[i];\n\t}\n}\n\n`,\n { label: \"verticalDiscreteShader\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"viewof horizontalDiscreteShader = shaderShow(\n `#version 300 es\nprecision highp float;\n\nuniform sampler2D tex;\n\nfloat offset[5] = float[]( 0.0, 1.0, 2.0, 3.0, 4.0 );\nfloat weight[5] = float[]( 0.2270270270, 0.1945945946, 0.1216216216, 0.0540540541, 0.0162162162 );\n\nout vec4 fragColor;\n\nvoid main(void)\n{\n vec2 iResolution = vec2(textureSize(tex,0));\n\tvec2 uv = gl_FragCoord.xy/iResolution.xy;\n fragColor = texture( tex, uv ) * weight[0];\n\tfor (int i=1; i<5; i++) {\n\t\tfragColor += texture( tex, ( gl_FragCoord.xy +vec2(offset[i], 0.) )/iResolution ) * weight[i];\n\t\tfragColor += texture( tex, ( gl_FragCoord.xy -vec2(offset[i], 0.) )/iResolution ) * weight[i];\n\t}\n}\n\n`,\n { label: \"horizontalDiscreteShader\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"
\n## Illumination\n\nHere we create a bump map using the Frei-Chen edge detector, which is then illuminated using a simple Phong model shader for 1 directional light source.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":921,"value":"viewof illumParam = Inputs.form({\n threshold1: Inputs.range([0, 1], {\n value: 0,\n step: 0.01,\n label: \"edge threshold1\"\n }),\n threshold2: Inputs.range([0, 1], {\n value: 0.3,\n step: 0.01,\n label: \"edge threshold2\"\n }),\n ambientCoef: Inputs.range([0, 1], {\n label: \"ambient coef.\",\n step: 0.01,\n value: 0.5\n }),\n diffuseCoef: Inputs.range([0, 1], {\n label: \"diffuse coef.\",\n step: 0.01,\n value: 1\n }),\n specularCoef: Inputs.range([0, 1], {\n label: \"specular coef.\",\n step: 0.01,\n value: 1\n }),\n specularShininess: Inputs.range([1, 50], {\n label: \"spec. shininess\",\n step: 1,\n value: 10\n }),\n bumpFactor: Inputs.range([0, 1], {\n label: \"bump factor.\",\n step: 0.01,\n value: 0.9\n }),\n lightDir: vectorInput({\n label: \"light xy direction\",\n max: 1,\n step: 0.01,\n size: 80,\n value: [1, 1]\n }),\n lightHeight: Inputs.range([0, 1], {\n label: \"light altitude (z)\",\n step: 0.01,\n value: 0.5\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"illumResult = {\n const { freichen, illum } = illumApps;\n freichen\n .uniform(\"threshold1\", illumParam.threshold1)\n .uniform(\"threshold2\", illumParam.threshold2)\n .useFbo(0)\n .draw();\n let lightVec = [...illumParam.lightDir, illumParam.lightHeight];\n let norm = Math.hypot(...lightVec);\n lightVec = lightVec.map((x) => x / norm);\n illum\n .useFbo(null)\n .uniform(\"lightVec\", lightVec)\n .uniform(\"ambientCoef\", illumParam.ambientCoef)\n .uniform(\"diffuseCoef\", illumParam.diffuseCoef)\n .uniform(\"specularCoef\", illumParam.specularCoef)\n .uniform(\"specularShininess\", illumParam.specularShininess)\n .uniform(\"bumpFactor\", illumParam.bumpFactor)\n .draw();\n yield illum.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"illumApps = {\n const freichen = gl2helper({\n fragmentShader: freiChenShader,\n fbos: [1],\n textures: {\n image: testImg\n }\n });\n\n const illum = gl2helper({\n app: freichen.app,\n fragmentShader: illumShader,\n textures: {\n tex: testImg\n }\n });\n illum.texture(\"bumpmap\", freichen.fboObjects[0].colorAttachments[0]);\n return { freichen, illum };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"
\n## Collage","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":955,"value":"collage([\n grainResult,\n noiseGrainResult,\n barrelResult,\n hatchingResult,\n frostedResult,\n toonResult,\n freiChenResult,\n gaussianBlurResult,\n illumResult\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"function collage(images, options = {}) {\n const { width = 800, height = 600 } = options;\n const canvas = DOM.canvas(width, height);\n const ctx = canvas.getContext(\"2d\");\n ctx.shadowColor = \"black\";\n ctx.shadowBlur = 20;\n const delta = width / images.length;\n let x = 0;\n for (let img of images) {\n ctx.drawImage(img, x, 0, width, height, x, 0, width, height);\n x += delta;\n }\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"
\n## Test image","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"testImg = FileAttachment(\"test.jpeg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"
\n## Shader display utility","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":272,"value":"function shaderShow(shader, options = {}) {\n let { show = false, label = null } = options;\n const display = md`\\`\\`\\`glsl\\n${shader}\\`\\`\\``;\n const button = htl.html`