3e:null 3f:["$","title",null,{"children":"Adaptive Contouring in Fragment Shaders | Ricky Reusser | Observable"}] 45:T53a,This notebook walks through a strategy for adaptive contouring in a fragment shader, with particular application to domain coloring. [Domain coloring](https://en.wikipedia.org/wiki/Domain_coloring) is a simple and well-explored technique for visualizing functions in the complex plane using contours for magnitude and color for phase. Over the past few years and with particular help and inspiration from [Jacob Rus](https://observablehq.com/@jrus), I've slowly iterated on my approach to domain coloring. A couple of the core ideas have proved so useful and generally applicable that I've wanted to write them up carefully and clearly for a long time. In this notebook, rather than focusing on the math and interpretation of domain coloring, I'm going to focus on some of the core tricks I use for everything from domain coloring to [contour plots](https://observablehq.com/@rreusser/contour-plots-with-d3-regl-and-observable?collection=@rreusser/webgl), [wireframe meshes](https://github.com/rreusser/glsl-solid-wireframe), [3D surface visualization](https://observablehq.com/@rreusser/faking-transparency-for-3d-surfaces), [gridlines](http://rreusser.github.io/flamms-paraboloid/), [cartoon edges](http://rreusser.github.io/aligning-3d-scans/), and [trippy animated gifs](https://twitter.com/rickyreusser/status/1329489340158799872).46:T934,md` Even without working through the mathematical interpretation, the plot on the lefthand side above has two particularly obnoxious features (apart from the garrish colorscale). The first is that the lines have non-uniform width, and the second is that the contour spacing is also highly non-uniform, ranging from half the plot size in slowly varying regions to infinitely dense near zeros and poles. Most regions, if zoomed in, would appear as nothing but a solid color. [This technique from Inigo Quilez](https://www.shadertoy.com/view/WtScDt) is a wonderful way to resolve the aliasing problems which result from dense spacing, but ideally we'd like to control the uniformity of information a bit more thoughtfully. Remedying these problems is subject to one primary constraint: computing plots in a GPU shader is highly performant but means that—short of more advanced parallelization tricks—each pixel needs to be evaluated independently from all others. As a result, our ideal approach uses strictly *local* information to display lines and select contour spacing. In this notebook, the first in a couple-part series, we'll walk through the core techniques by which we can resolve the above challenges. We'll use screen-space derivatives to achieve uniform-width features and the graphical equivalent of a [Shepard tone](https://en.wikipedia.org/wiki/Shepard_tone) to achieve ideally-spaced contours. This notebook is presented in the following sections: - [Screen-space-scaled raster contours](#contours): Using screen-space derivatives to display uniform-width lines - [Local contour spacing](#localSpacing): Using the local gradient to select nice contour spacing - [Blending over octaves](#blending): Smoothly blending between locally scaled contouring - [Shaded contouring](#shading): Repurposing line contour techniques to achieve nicely antialiased shading The contour plots in this notebook are computed and displayed in WebGL via the provided GLSL shaders. And although I've used the [regl](https://github.com/regl-project/regl) library to create them, the techniques should be applicable to any sort of language, whether on the GPU or otherwise. To make understanding easier, I've tried to keep the plotting very simple at the cost of luxuries like interactions and axes. See the [Definitions](#defs) section for implementation. `47:T44b,drawCmds0 = ({ configureBlit: createBlitCmd(regl0), configureView: createConfigureViewCmd(regl0), configureMouse: createAttachMouseCmd(regl0, invalidation), drawField: regl0({ frag: ` #extension GL_OES_standard_derivatives : enable precision highp float; uniform float contourSpacing; uniform vec2 mouse; uniform vec2 threshold; varying vec2 xy; ${glslComplex} ${gammaCorrectGLSL} ${complexSampleFunctionGLSL} ${logStripesGLSL} // Equivalent to smoothstep, but with a hard edge float hardstep (float edge0, float edge1, float x) { return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0); } void main () { vec2 f = complexSampleFunction(xy, mouse); float contours = logStripesColormap(cabs(f), contourSpacing); contours = hardstep(threshold.x, threshold.y, contours); gl_FragColor = vec4(gammaCorrect(vec3(contours)), 1); }`, uniforms: { contourSpacing: regl0.prop('contourSpacing'), threshold: regl0.prop('gradientThreshold') } }) })48:Tce8,md` GPUs evaluate fragments in ${tex`2 \times 2`} blocks and offer horizontal and vertical differences between fragments as built-in functions. These differences are equivalent to first order [finite difference](https://en.wikipedia.org/wiki/Finite_difference) approximations of the derivative with units of *units per pixel*. Horizontal derivatives within a block are defined as ${tex.block` \begin{aligned} & \left.\frac{\partial f}{\partial i}\right|_{i, j} = \left.\frac{\partial f}{\partial i}\right|_{i + 1, j} \approx f_{i + 1, j} - f_{i, j} \\ & \left.\frac{\partial f}{\partial i}\right|_{i, j + 1} = \left.\frac{\partial f}{\partial i}\right|_{i + 1, j + 1} \approx f_{i + 1, j + 1} - f_{i, j + 1} \end{aligned} `} where ${tex`i`} and ${tex`j`} are pixel coordinates. Vertical derivatives are defined similarly. The screen-space gradient magnitude is then the sum of the squares of the ${tex`i-`} and ${tex`j-`}derivatives. ${tex.block`\left| \nabla f \right| = \sqrt{ \left(\frac{\partial f}{\partial i}\right)^2 + \left(\frac{\partial f}{\partial j}\right)^2}`} Of particular interest to us is that division of a function (*units*) by its screen-space gradient (*units per pixel*) has units of *pixels*. ${tex.block`\frac{(\mathrm{units})}{(\frac{\mathrm{units}}{\mathrm{pixel}})} = \mathrm{pixels}`} Thus, division of the above triangle wave gradient by the magnitude of the screen-space gradient at each point yields a new colormap which represents, *in units of pixels*, the distance from each contour line. From there, we simply apply a threshold, in units of pixels, and achieve a contour plot with uniform-width lines. Numerical derivatives, even though only accurate to the first order, will be adequate for us. We could of course compute derivatives by analytical methods like [automatic differentiation](https://en.wikipedia.org/wiki/Automatic_differentiation), but in practice, for the accuracy required to achieve the effects in this notebook, that proves to be [massive overkill](https://observablehq.com/@rreusser/glsl-complex-auto-differentiation). Note finally that this doesn't have to be a two-dimensional function. Since all other transforms, whether 2D, 3D, or otherwise happen before screen space differentiation, all of the techniques in this notebook can be used without modification, for example, to draw [wireframes or other function contours on 3D models](https://github.com/rreusser/glsl-solid-wireframe). As for implementation, WebGL offers the [\`OES_standard_derivatives\`](https://developer.mozilla.org/en-US/docs/Web/API/OES_standard_derivatives) extension with the following functions: - \`dFdx(f)\`: differences between horizontally adjacent values of \`f\` - \`dFdy(f)\`: differences between vertically adjacent values of \`f\` - \`fwidth(f)\`: sum of absolute values, \`abs(dFdx(f)) + abs(dFdy(f))\` The function \`fwidth\` is often used as a square-root-free proxy for the gradient magnitude but results in about a 40% anisotropy in diagonal directions (i.e. ${tex`\sqrt{2}`}), so that \`length(vec2(dFdx(f), dFdy(f)))\` is preferable for the best quality. The GLSL function below implements a contouring function that receives input \`f\` and returns 0.0 in the background and 1.0 on a contour, with a smooth fade between for antialiasing. `49:Tda2,viewof screenSpaceDerivsFigure = { // Reuse the div and use Plotly.react so that we only *modify* the plot // on each update, not redraw entirely. var gd = (this && this.value) || document.createElement("div"); var n = 401; const xmax = 60; const x = new Array(n).fill(0).map((d, i) => (i / (n - 1)) * xmax); const f = (x) => 0.002 * (20 * x + 0.5 * x * x); const dFdx = (x) => 0.002 * (20 + x); Plotly.react( gd, [ { mode: "lines", x: x, y: x.map((x) => (f(x) * contourSpacing) % 1), yaxis: "y3", line: { color: "#27c" }, showlegend: false }, { mode: "lines", x: [0, xmax], y: [lineWidth - 0.5 * lineFeather, lineWidth - 0.5 * lineFeather], line: { dash: "dash", color: "#bbb", width: 1 }, showlegend: false, yaxis: "y2" }, { mode: "lines", x: [0, xmax], y: [lineWidth + 0.5 * lineFeather, lineWidth + 0.5 * lineFeather], line: { dash: "dash", color: "#bbb", width: 1 }, showlegend: false, yaxis: "y2" }, { mode: "lines", x: [0, xmax], y: [lineWidth, lineWidth], line: { color: "black", width: 1 }, showlegend: false, yaxis: "y2" }, { x: x.concat([xmax, 0]), y: x .map((x) => Math.min( lineWidth, (0.5 - Math.abs(((f(x) * contourSpacing) % 1) - 0.5)) / dFdx(x) / contourSpacing ) ) .concat([lineWidth, lineWidth]), fill: "toself", yaxis: "y2", line: { color: "#27c", width: 0 }, showlegend: false }, { mode: "lines", x: x, y: x.map( (x) => (0.5 - Math.abs(((f(x) * contourSpacing) % 1) - 0.5)) / dFdx(x) / contourSpacing ), yaxis: "y2", line: { color: "#27c" }, showlegend: false }, { mode: "lines", x: x, y: x.map((x) => linearstep( 1 + (0.5 * Math.max(1e-4, lineFeather)) / lineWidth, 1 - (0.5 * Math.max(1e-4, lineFeather)) / lineWidth, (0.5 - Math.abs(((f(x) * contourSpacing) % 1) - 0.5)) / dFdx(x) / (lineWidth * contourSpacing) ) ), fill: "tozeroy", yaxis: "y1", line: { color: "#27c" }, showlegend: false } ], { width: smallCanvas.width, height: 400, yaxis3: { domain: [0.75, 1.0], range: [-0.1, 1.1] }, yaxis2: { domain: [0.39, 0.62], range: [0, 5] }, yaxis1: { domain: [0.0, 0.25], range: [-0.1, 1.1] }, margin: { t: 20, r: 20, b: 40, l: 40 }, annotations: ["c", "b", "a"].map((label, i) => ({ x: 0.5, xref: "paper", text: `(${label})`, showarrow: false, yref: "paper", y: -0.1 + 0.42 * i, align: "center" })) } ); const returnValue = html`

${gd}

The contouring function in one dimension (not to screen-space scale), showing (a) an input function divided by contour spacing, modulo 1, (b) the function turned into a triangle wave and scaled by the screen-space derivative, and (c) the function smoothly thresholded by the line width.

`; returnValue.value = gd; return returnValue; }4a:T41b,drawCmds1 = ({ configureBlit: createBlitCmd(regl1), configureView: createConfigureViewCmd(regl1), configureMouse: createAttachMouseCmd(regl1, invalidation), drawField: regl1({ frag: ` #extension GL_OES_standard_derivatives : enable precision highp float; uniform float lineWidth, lineFeather, contourSpacing; uniform vec2 mouse; varying vec2 xy; ${linearStepGLSL} ${glslComplex} ${gammaCorrectGLSL} ${logContoursGLSL} ${complexSampleFunctionGLSL} void main () { vec2 f = complexSampleFunction(xy, mouse); float contours = logContours(cabs(f), contourSpacing, lineWidth, lineFeather); // Awhite background with black contours gl_FragColor = vec4(gammaCorrect(vec3(1.0 - contours)), 1); }`, uniforms: { contourSpacing: regl1.prop('contourSpacing'), lineWidth: (ctx, props) => ctx.pixelRatio * props.lineWidth, lineFeather: (ctx, props) => Math.max(1e-4, ctx.pixelRatio * props.lineFeather) } }) })4b:T93c,localSpacing = md`## Local contour spacing ***Note: Gosh, this section just isn't written that clearly. For some further illumination of the motivation, see: [rreusser.github.io#29](https://github.com/rreusser/rreusser.github.io/issues/29).*** We now turn our attention to contour *spacing*. As successful as the above plot is, the spacing for this very tame function still varies from less than a pixel to more than a hundred. Our next observation is that we can use the same gradient to select a locally appropriate contour step size. We call regions of equal spacing *octaves*, and every time the octave increments, we split one division into ${tex`D`} divisions. To select the locally appropriate contour spacing octave, we use the equation ${tex.block` N_{octave} = \left \lceil \log_{D}{\left( m \frac{\left|\nabla f\right|}{|f|} \right)} \right \rceil `} where ${tex`N_{octave}`} is an integer indicating to which octave a given region belongs, ${tex`D`} is the number of divisions per octave, and ${tex`m`} is the minimum spacing, in pixels, between divisions. Note that the term in the inner parentheses is dimensionless. We then compute the contour spacing ${tex`\delta`} as ${tex.block` \delta = D^{N_{octave}}. `} We'll plot *logarithmically* spaced contours of the function, so in the equation above we've used the [logarithmic derivative](https://en.wikipedia.org/wiki/Logarithmic_derivative), recalling that the derivative of a logarithm is equal to the derivative of the function divided by its value, ${tex.block` \frac{d}{dx} \ln{f(x)} = \frac{1}{f(x)} \frac{d f(x)}{dx}. `} We may wish to place contours at evenly *linearly* spaced function values, in which case we would remove division of \`screenSpaceGrad\` in the function below by \`abs(f)\` then plot \`abs(f)\` instead of \`log2(abs(f))\`. Whether to place contours linearly or logarithmically is a bit of a subtle decision. Personally, I think linearly spaced contours make more sense, but I observe that when shading is applied, it's easier to tell the difference between roots and poles when contours are placed logarithmically. Fortunately they're both valid and we don't have to commit to a decision. The shader below implements a function which places contours at logarithmically spaced function values, adjusting the spacing to keep contours everywhere nicely spaced.`4c:T476,viewof locallyScaledLogContoursGLSL = glslEditor( `float locallyScaledLogContours (float f, float minSpacing, float divisions, float lineWidth, float antialiasWidth ) { float screenSpaceGrad = hypot(vec2(dFdx(f), dFdy(f)))${ scalingType === "Linear" ? "" : " / abs(f)" }; // Select which integer-valued octave a region falls into float localOctave = ceil(log2(screenSpaceGrad * minSpacing) / log2(divisions)); // An integer power of the divisions per octave float contourSpacing = pow(divisions, localOctave); // Plot contours at each multiple of the contour spacing float plotVar = ${ scalingType === "Logarithmic" ? "log2(abs(f))" : "abs(f)" } / contourSpacing; // A magic width scale to make the lines uniform float widthScale = 2.0 * contourSpacing / screenSpaceGrad${ scalingType === "Logarithmic" ? "" : " * 2.0" }; return linearstep( lineWidth + antialiasWidth, lineWidth - antialiasWidth, (0.5 - abs(fract(plotVar) - 0.5)) * widthScale ); }` )4d:T750,drawCmds2 = ({ configureBlit: createBlitCmd(regl2), configureView: createConfigureViewCmd(regl2), configureMouse: createAttachMouseCmd(regl2, invalidation), drawField: regl2({ frag: ` #extension GL_OES_standard_derivatives : enable precision highp float; uniform float lineWidth, lineFeather, octaveDivisions, baselineSpacing; uniform bool debugColor; uniform vec2 mouse; varying vec2 xy; ${linearStepGLSL} ${glslComplex} ${gammaCorrectGLSL} ${complexSampleFunctionGLSL} ${locallyScaledLogContoursGLSL} vec3 randomColor (float x) { return 0.5 + 0.5 * vec3(cos(x), cos(x - PI * 2.0 / 3.0), cos(x - PI * 4.0 / 3.0)); } vec3 octaveColor (float f, float minSpacing, float divisions) { float screenSpaceGrad = hypot(vec2(dFdx(f), dFdy(f)))${ scalingType === "Linear" ? "" : " / abs(f)" }; float localOctave = ceil(log2(screenSpaceGrad * minSpacing) / log2(divisions)); return randomColor(localOctave); } void main () { vec2 f = complexSampleFunction(xy, mouse); vec3 color = mix(vec3(1), octaveColor(cabs(f), baselineSpacing, octaveDivisions), debugColor ? 0.3 : 0.0); gl_FragColor = vec4(gammaCorrect(color * vec3( 1.0 - locallyScaledLogContours( cabs(f), baselineSpacing, octaveDivisions, lineWidth, lineFeather) )), 1); }`, uniforms: { debugColor: (ctx, props) => !!props.debugColor, octaveDivisions: regl2.prop("octaveDivisions"), baselineSpacing: (ctx, props) => props.baselineSpacing * ctx.pixelRatio, lineWidth: (ctx, props) => ctx.pixelRatio * props.lineWidth, lineFeather: (ctx, props) => Math.max(1e-4, ctx.pixelRatio * props.lineFeather) } }) })4e:T507,viewof blendedOctavesGLSL = glslEditor(`float blendedContours (float f, float minSpacing, float width, float antialiasing) { // Compile-time constants const int octaves = ${octaveCount}; const float n = ${octaveCount.toFixed(1)}; float screenSpaceGrad = hypot(vec2(dFdx(f), dFdy(f)))${ scalingType === "Linear" ? "" : " / abs(f)" };${scalingType === "Linear" ? "antialiasing /= 2.0;" : ""} float localOctave = log2(screenSpaceGrad * minSpacing) / log2(octaveDivisions); float contourSpacing = pow(octaveDivisions, ceil(localOctave)); float plotVar = ${ scalingType === "Logarithmic" ? "log2(abs(f))" : "abs(f)" } / contourSpacing; float widthScale = contourSpacing / screenSpaceGrad; float contourSum = 0.0; for(int i = 0; i < octaves; i++) { // A weight which fades in the smallest octave and fades out the largest float t = float(i + 1) - fract(localOctave); float weight = smoothstep(0.0, 1.0, t) * smoothstep(n, n - 1.0, t); contourSum += weight * linearstep( 0.5 * (width + antialiasing), 0.5 * (width - antialiasing), (0.5 - abs(fract(plotVar) - 0.5)) * widthScale ); // Rescale for the next octave widthScale *= octaveDivisions; plotVar /= octaveDivisions; } return contourSum / n; }`)4f:T45b,drawCmds3 = ({ configureBlit: createBlitCmd(regl3), configureView: createConfigureViewCmd(regl3), configureMouse: createAttachMouseCmd(regl3, invalidation), drawField: regl3({ frag: ` #extension GL_OES_standard_derivatives : enable precision highp float; uniform float lineWidth, lineFeather, octaveDivisions, baselineSpacing; uniform vec2 mouse; varying vec2 xy; ${linearStepGLSL} ${glslComplex} ${gammaCorrectGLSL} ${complexSampleFunctionGLSL} ${blendedOctavesGLSL} void main () { vec2 f = complexSampleFunction(xy, mouse); gl_FragColor = vec4( gammaCorrect( vec3(1.0 - 1.5 * blendedContours(hypot(f), baselineSpacing, lineWidth, lineFeather)) ), 1); }`, uniforms: { octaveDivisions: regl3.prop('octaveDivisions'), baselineSpacing: (ctx, props) => props.baselineSpacing * ctx.pixelRatio, lineWidth: (ctx, props) => ctx.pixelRatio * props.lineWidth, lineFeather: (ctx, props) => Math.max(1e-4, ctx.pixelRatio * props.lineFeather) } }) })50:T4fb,viewof antialiasingFigure = { // Reuse the div and use Plotly.react so that we only *modify* the plot // on each update, not redraw entirely. var gd = (this && this.value) || document.createElement('div'); var n = 401; const xmax = 30; Plotly.react( gd, [ { mode: 'lines+markers', x: [0, xmax], y: [0, 1], line: { color: '#27c' }, showlegend: false }, { mode: 'lines', x: [0, xmax], y: [xmax / antialiasing4, 0], line: { dash: 'dash', color: '#27c' }, showlegend: false }, { mode: 'lines', x: [0, xmax - antialiasing4 + antialiasing4 / xmax, xmax], y: [0, 1 - antialiasing4 / xmax, 0], line: { width: 0, color: '#27c' }, fill: 'tozeroy', showlegend: false } ], { width: smallCanvas.width, height: 300, yaxis: { range: [0, 1.5] }, margin: { t: 20, r: 20, b: 40, l: 40 } } ); const returnValue = html`

${gd}

A representation of shading from 0 to 1, here over 30 pixels, with a ${antialiasing4}-pixel transition back to zero for antialiasing.

`; returnValue.value = gd; return returnValue; }51:T4e6,viewof contrastFunctionFigure = { // Reuse the div and use Plotly.react so that we only *modify* the plot // on each update, not redraw entirely. var gd = (this && this.value) || document.createElement('div'); var n = 801; const xmax = 1; const x = new Array(n).fill(0).map((d, i) => i / (n - 1)); function ramp(x, power) { x = 2.0 * x - 1.0; return 0.5 + 0.5 * Math.pow(Math.abs(x), power) * Math.sign(x); } function f(x) { var scale = 1.0; var sum = 0.0; for (var i = 0; i < octaveCount4; i++) { sum += ramp((x * scale) % 1, rampPower4); scale *= octaveDivisions4; } return sum / octaveCount4; } Plotly.react( gd, [ { mode: 'lines', x: x, y: x.map(f), line: { color: '#27c', width: 1 }, fill: 'tozeroy', showlegend: false } ], { width: smallCanvas.width, height: 300, yaxis: { range: [0, 1] }, margin: { t: 20, r: 20, b: 40, l: 40 } } ); const returnValue = html`

${gd}

Contrast ramps layered over ${octaveCount4} octaves with ${octaveDivisions4} divisions per octave.

`; returnValue.value = gd; return returnValue; }52:T591,viewof shadedOctavesGLSL = glslEditor( `float shadedContours (float f, float minSpacing, float antialiasWidth, float rampPower) { // Compile-time constants const int octaves = ${octaveCount4}; const float fOctaves = ${octaveCount4.toFixed(1)}; float screenSpaceGrad = hypot(vec2(dFdx(f), dFdy(f)))${ scalingType === "Linear" ? "" : " / abs(f)" };${scalingType === "Linear" ? "antialiasWidth /= 2.0;" : ""} float localOctave = log2(screenSpaceGrad * minSpacing) / log2(octaveDivisions); float contourSpacing = pow(octaveDivisions, ceil(localOctave)); float plotVar = ${ scalingType === "Logarithmic" ? "log2(abs(f))" : "abs(f)" } / contourSpacing; float widthScale = contourSpacing / screenSpaceGrad; float contourSum = 0.0; for(int i = 0; i < octaves; i++) { // A weight which fades in the smallest octave and fades out the largest float t = float(i + 1) - fract(localOctave); float weight = smoothstep(0.0, 1.0, t) * smoothstep(fOctaves, fOctaves - 1.0, t); // Shading for this octave is the contrast ramp with a chunk cut out of the corner for antialiasing float y = fract(plotVar); contourSum += weight * min( contrastFunction(y, rampPower), (1.0 - y) * 0.5 * widthScale / antialiasWidth ); // Adjust scales for the next octave widthScale *= octaveDivisions; plotVar /= octaveDivisions; } return contourSum / fOctaves; }` )53:T42a,drawCmds4 = ({ configureBlit: createBlitCmd(regl4), configureView: createConfigureViewCmd(regl4), configureMouse: createAttachMouseCmd(regl4, invalidation), drawField: regl4({ frag: ` #extension GL_OES_standard_derivatives : enable precision highp float; uniform float antialiasWidth, octaveDivisions, baselineSpacing, rampPower; uniform vec2 mouse; varying vec2 xy; ${glslComplex} ${gammaCorrectGLSL} ${contrastFunctionGLSL} ${complexSampleFunctionGLSL} ${shadedOctavesGLSL} void main () { vec2 f = complexSampleFunction(xy, mouse); gl_FragColor = vec4(vec3( gammaCorrect(vec3(1.0 - shadedContours(hypot(f), baselineSpacing, antialiasWidth, rampPower))) ), 1); }`, uniforms: { octaveDivisions: regl4.prop('octaveDivisions'), rampPower: regl4.prop('rampPower'), baselineSpacing: (ctx, props) => props.baselineSpacing * ctx.pixelRatio, antialiasWidth: (ctx, props) => Math.max(1e-4, props.antialiasWidth) } }) })54:T54b,createAttachMouseCmd = function(regl, invalidation) { const canvas = regl._gl.canvas; let dirty = true; const mouseIJ = [canvas.clientWidth / 2, canvas.clientHeight / 2]; const mouseXYZ = [0, 0, 1]; const mouseXY = new Float32Array([0, 0]); function onMouseMove(event) { mouseIJ[0] = event.offsetX; mouseIJ[1] = event.offsetY; dirty = true; } const configureMouseCmd = regl({ context: { dirty: () => dirty, mouse: ctx => { const c = 2 * ctx.pixelRatio; mouseXYZ[0] = -1 + c * (mouseIJ[0] / ctx.viewportWidth); mouseXYZ[1] = 1 - c * (mouseIJ[1] / ctx.viewportHeight); mouseXYZ[2] = 1; mat3multiply(mouseXYZ, ctx.view, mouseXYZ); mouseXY[0] = mouseXYZ[0]; mouseXY[1] = mouseXYZ[1]; return mouseXY; } }, uniforms: { mouse: regl.context('mouse') } }); canvas.addEventListener('mousemove', onMouseMove); invalidation.then(() => { canvas.removeEventListener('mousemove', onMouseMove); }); const returnValue = function configureContext(callback) { configureMouseCmd(callback); dirty = false; }; returnValue.taint = function() { dirty = true; }; returnValue.reset = function() { mouseIJ[0] = canvas.clientWidth / 2; mouseIJ[1] = canvas.clientHeight / 2; }; return returnValue; }55:[{"id":"4f99a8dd4c605cb882fb526ab6c6a89b6cc9752efc1b6ce6e7b672e75b597adc656749f07d288d3fe42ad0c03afe61d9aba14ac4022fe8d0f02dc6cf4f11bea9","href":"https://static.observableusercontent.com/files/4f99a8dd4c605cb882fb526ab6c6a89b6cc9752efc1b6ce6e7b672e75b597adc656749f07d288d3fe42ad0c03afe61d9aba14ac4022fe8d0f02dc6cf4f11bea9","name":"new.jpg","type":"image/jpeg","lastModified":1605899870202.422,"size":89452},{"id":"a6a198b5dcb99e2c52de625367f3d41fa6f347013cb1dddbe20591648c3d19e8e2776160822aa79550fb08db069f0109ae8f13d273b37a8552a5e0e13d13c088","href":"https://static.observableusercontent.com/files/a6a198b5dcb99e2c52de625367f3d41fa6f347013cb1dddbe20591648c3d19e8e2776160822aa79550fb08db069f0109ae8f13d273b37a8552a5e0e13d13c088","name":"old@2.jpg","type":"image/jpeg","lastModified":1605901560021.854,"size":101106},{"id":"2e6c84af22acb132369d4925536fd743fb491708ad3e44ceb1be8165334c6bcdcafa577b87c4cfd2819f043d63c7659721c8708f42f5da25782f7c3a250e3511","href":"https://static.observableusercontent.com/files/2e6c84af22acb132369d4925536fd743fb491708ad3e44ceb1be8165334c6bcdcafa577b87c4cfd2819f043d63c7659721c8708f42f5da25782f7c3a250e3511","name":"fragments.jpg","type":"image/jpeg","lastModified":1605905424665.25,"size":75624}] 43:{"id":"7af54b83066db049","slug":"locally-scaled-domain-coloring-part-1-contour-plots","title":"Adaptive Contouring in Fragment Shaders","thumbnail":"e7ea89046ee7aa439028371c899fbf46c64c55341e3dcdd0f32c1aeee2f69575","access_level":"public","create_time":"$D2020-10-21T20:18:12.002Z","update_time":"$D2026-01-16T17:15:40.333Z","view_time":null,"first_public_time":"$D2020-11-20T23:32:43.185Z","has_unpublished_edits":null,"fork":false,"stars":117,"starred":false,"owner":{"type":"team","id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/49c18a2ac0092176d4ea8348a1dd538e0b460b086b89d602b8d21ffe0821d92e","tier":"starter_2024","bio":""},"version":3654,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null,"bio":""}],"members":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null,"role":"editor"}],"comments":[{"id":"6978e4f80818b9a6","reply_to_id":null,"content":"This is beautiful. Reminds me of something from Studio Ghibli.","create_time":"$D2020-11-25T01:01:09.338Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"c07159641cb246d6","login":"dunstan","name":"Dunstan Orchard","avatar_url":"https://avatars-next.observableusercontent.com/a6df95de5f8238993d112347a8772215ce2fdb0ffbbe6d6d6770138aa0c7a1f8","tier":null}},{"id":"54afad8c0d7d912d","reply_to_id":"6978e4f80818b9a6","content":":)","create_time":"$D2020-11-25T05:07:02.880Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":21,"collection":{"id":"dcd095ad05c2b722","slug":"writeups","title":"Fun Notebooks","owner":{"id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser"}},"type":"notebook","body":{"titling":"auto","title":"Adaptive Contouring in Fragment Shaders","cells":[{"id":3639,"value":"# Adaptive Contouring in Fragment Shaders","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3646,"value":"*[Read this notebook ➡️](https://rreusser.github.io/notebooks/adaptive-contouring-in-fragment-shaders/) on my personal website via [Observable Notebook Kit](https://observablehq.com/notebook-kit/kit).*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2815,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2819,"value":"html`

${md`A comparison of a Möbius transformation, ${tex`f(z) = \\frac{(z-a)(b-m)}{(z-b)(a-m)}`} with ${tex`a = -\\frac{3}{2} + \\frac{i}{2}`}, ${tex`b = \\frac{3}{2} - \\frac{i}{2}`}, and ${tex`m = 0`}, using my [older method for domain coloring](https://github.com/rreusser/glsl-domain-coloring) (*left*) and [the techniques from this notebook](https://observablehq.com/@rreusser/complex-function-plotter) (*right*).`}

\n ${ctx}\n

Our starting point: the log of the magnitude of a function, plotted with a triangle-wave color map. Adjust the threshold below and observe non-uniform lines that result.

\n `;\n fig.value = ctx.value;\n return fig;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3022,"value":"viewof gradientThreshold = rangeSlider({\n min: 0,\n max: 1,\n value: [0, 1],\n description: 'Colorscale threshold'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2607,"value":"drawLoop0 = {\n drawCmds0.configureMouse.taint();\n const frame = regl0.frame(() => {\n drawCmds0.configureView(() => {\n drawCmds0.configureBlit(() => {\n drawCmds0.configureMouse(ctx => {\n if (!ctx.dirty) return;\n drawCmds0.drawField({ contourSpacing: 1, gradientThreshold });\n });\n });\n });\n });\n invalidation.then(() => frame.cancel());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2601,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2962,"value":"md`\nApplying a threshold to the plot above produces bands, but of course the width is highly non-uniform. To achieve uniform pixel-width lines, we must select just the right threshold at every point.\n\nTo select this threshold, we use screen-space derivatives. As the name suggests, screen-space derivatives represent derivatives with respect to pixels on the screen. Computed as the difference between adjacent pixel values—in the context of GPUs called *fragments*—they're built into the GPU and are commonly used in [mipmapping](https://en.wikipedia.org/wiki/Mipmap) to avoid aliasing by gauging how fast a texture changes from fragment to fragment.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2940,"value":"html`

${md`A block of four adjacent fragments (pixels), from which GPU shaders may request screen-space derivatives.`}

\n ${ctx}\n

Contours of the log-magnitude of a sample function computed in a WebGL fragment shader with the screen-space derivatives technique.

\n ${ctx}\n

Log-distributed contours with spacing scaled by the local relative gradient of the function.

\n ${ctx}\n

Locally-scaled contours, blended across multiple octaves.

\n ${ctx}\n

The line contouring code, repurposed for shading. Adjust the zoom below and observe that the contours always adjust just right to produce the illusion of infinite detail.

\n `;\n fig.value = ctx.value;\n return fig;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3343,"value":"viewof zoom = {\n const s = slider({\n min: -3,\n max: 3,\n step: 0.001,\n precision: 3,\n value: 0, //2 * Math.sin(now / 3000),\n description: 'Zoom'\n });\n s.classList.add('wide');\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2325,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2332,"value":"drawLoop4 = {\n drawCmds4.configureMouse.taint();\n drawCmds4.configureMouse.reset();\n const frame = regl4.frame(() => {\n drawCmds4.configureView({ scale: Math.pow(10, -zoom) * 2.0 }, () => {\n drawCmds4.configureBlit(() => {\n drawCmds4.configureMouse(ctx => {\n if (!ctx.dirty) return;\n drawCmds4.drawField({\n antialiasWidth: antialiasing5,\n octaveDivisions: octaveDivisions4,\n baselineSpacing: contourSpacing4,\n rampPower: rampPower4\n });\n });\n });\n });\n });\n invalidation.then(() => frame.cancel());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2334,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2579,"value":"md`At this point, what we've created is sort of like a fractal pattern, carefully band-limited so that the smallest-scale pattern is pinned to the scale of just a few pixels. The number of octaves may be chosen by the user, but in fact there is a fairly concrete answer to the question of how many octaves should be used. The number of octaves should be chosen so that the largest scale pattern precisely covers the entire image.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2649,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3288,"value":"md`## Conclusions\n\nThis is where we'll leave it for now! These are the core components of my currently-favorite approach to domain coloring, and I've found many other uses for them. In a followup up post, I'll work through coloring by phase and applying these contours to the phase, finally arriving at a flexible, configurable shader for domain coloring.\n\nIn the mean time, though the code is messier than I'd like, you can play with domain coloring using my [Complex Function Plotter](https://observablehq.com/@rreusser/complex-function-plotter) notebook.\n\nAnd finally, I'd especially like to thank Observable for making this notebook possible, Mikola Lysenko for his excellent [regl](https://github.com/regl-project/regl) library, and Jacob Rus for help, thought and feedback along the way.\n\nFeel free to leave comments on this notebook or [contact me here](https://twitter.com/rickyreusser/status/1329935556717858816).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"defs = md`## Common definitions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"function createREGLContext(shape) {\n function createCanvas(width, height, dpi) {\n const el = DOM.canvas(Math.floor(width * dpi), Math.floor(height * dpi));\n el.style.width = `${width}px`;\n el.style.height = `${height}px`;\n return el;\n }\n\n const canvas = createCanvas(shape.width, shape.height, shape.pixelRatio);\n const regl = createREGL({\n pixelRatio: shape.pixelRatio,\n canvas,\n extensions: ['OES_standard_derivatives']\n });\n canvas.value = regl;\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"createBlitCmd = function(regl) {\n return regl({\n vert: `\n precision highp float;\n attribute vec2 uv;\n varying vec2 xy;\n uniform mat3 view;\n void main () {\n xy = (view * vec3(uv, 1)).xy;\n gl_Position = vec4(uv, 0, 1);\n }`,\n attributes: {\n uv: [-4, -4, 4, -4, 0, 4]\n },\n count: 3,\n depth: { enable: false }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"function createConfigureViewCmd(regl) {\n const view = mat3create();\n return regl({\n uniforms: {\n view: regl.context('view')\n },\n context: {\n view: (ctx, props) => {\n var aspect = ctx.framebufferWidth / ctx.framebufferHeight;\n var scale = !props || props.scale === undefined ? 2.0 : props.scale;\n return mat3ortho(\n view,\n -1 / (scale * aspect),\n 1 / (scale * aspect),\n -1 / scale,\n 1 / scale\n );\n }\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"smallCanvas = ({\n width: Math.min(640, width),\n height: Math.floor(Math.min(640, width) * 0.6),\n pixelRatio: devicePixelRatio\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1137,"value":"largeCanvas = ({\n width: width,\n height: Math.max(300, Math.floor(width * 0.6)),\n pixelRatio: devicePixelRatio\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"function linearstep(min, max, value) {\n return Math.max(0, Math.min(1, (value - min) / (max - min)));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3459,"value":"viewof linearStepGLSL = glsl`\nfloat linearstep(float edge0, float edge1, float x) {\n return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2728,"value":"viewof gammaCorrectGLSL = glsl`\nvec3 gammaCorrect(vec3 color) {\n // Quick approximate gamma correction\n return pow(color, vec3(0.454));\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"md`## External imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"createREGL = require('regl')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"Plotly = require('https://cdn.plot.ly/plotly-basic-latest.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3494,"value":"import { Editor } from '@cmudig/editor'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3527,"value":"function glslEditor(value) {\n return Editor({\n language: 'glsl',\n value,\n styles: `border: 1px solid #eee;\n background: #f8f8f8;\n font-family: Menlo,Consolas,monospace;\n font-size: 13px;\n padding: 10px;\n tab-size: 4;\n line-hieght: 1.4;\n overflow-wrap: break-word;`\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3020,"value":"import { rangeSlider } from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"import { glsl } from '@stwind/glsl-chunk-tag'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"import {\n mat3invert,\n mat3multiply,\n mat3create,\n mat3ortho\n} from '@rreusser/gl-mat3'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"import { slider, checkbox, radio } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"import { glslComplex } from '@rreusser/glsl-complex'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W55","stdlib":"1"}} 44:"$43:body"