1d:{"title":"Adaptive Contouring in Fragment Shaders","cells":[{"id":3639,"value":"# Adaptive Contouring in Fragment Shaders","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":2815,"value":"$1f","pinned":false,"hidden":false,"mode":"md"},{"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*).`}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$20","pinned":false,"hidden":false,"mode":"ojs"},{"id":2595,"value":"contours = md`## Screen-space-scaled raster contours\n\nVector graphics have many desirable properties, but in this notebook we explore lines as a raster image effect. Particular benefits are that the workload is independent of the complexity of the contours, and that we may avoid computing, storing, updating, and rendering explicit contour line geometry, commonly computed via [marching squares](https://en.wikipedia.org/wiki/Marching_squares).\n\nWe start by plotting the log of the magnitude of a complex function using a repeating triangle-wave colormap.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3497,"value":"viewof complexSampleFunctionGLSL = glslEditor(\n `vec2 complexSampleFunction (vec2 z, vec2 zMouse) {\n return cmul(\n cdiv(z - vec2(1, 0), z + vec2(1, 0)),\n z - zMouse\n );\n}`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2288,"value":"viewof logStripesGLSL = glslEditor(\n `float logStripesColormap (float f, float spacing) {\n return 2.0 * (0.5 - abs(fract(log2(abs(f)) / spacing) - 0.5));\n}`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3073,"value":"md`Adjust the threshold below and observe that although we can draw bands, we can't yet draw uniform-width lines.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2598,"value":"viewof regl0 = {\n const ctx = createREGLContext(smallCanvas);\n const fig = html`\n

\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"},{"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"},{"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"},{"id":2601,"value":"$21","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":2940,"value":"html`

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

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"$22","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"viewof logContoursGLSL = glslEditor(\n `float logContours (float f, float spacing, float width, float antialiasWidth) {\n float plotVar = log2(abs(f)) * spacing;\n float screenSpaceGradient = hypot(vec2(dFdx(f), dFdy(f))) / abs(f) * spacing;\n return linearstep(\n width + 0.5 * antialiasWidth,\n width - 0.5 * antialiasWidth,\n (0.5 - abs(fract(plotVar) - 0.5)) / screenSpaceGradient\n );\n}`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":836,"value":"md`The figures below illustrate usage of this function, first for an increasing function of one variable and then for a two-dimensional function. Modify the slider values and observe how the function is transformed into equally-spaced, antialiased contours.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"$23","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"viewof contourSpacing = slider({\n min: 0.5,\n max: 10,\n step: 0.01,\n value: 1.0,\n description: \"Contour spacing\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"viewof lineWidth = slider({\n min: 0.5,\n max: 3,\n step: 0.1,\n value: 1,\n description: 'Line width'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"viewof lineFeather = slider({\n min: 0,\n max: 2,\n step: 0.1,\n value: 1.0,\n description: 'Antialiasing width'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"viewof regl1 = {\n const ctx = createREGLContext(smallCanvas);\n const fig = html`\n

\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 `;\n fig.value = ctx.value;\n return fig;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"drawLoop1 = {\n drawCmds1.configureMouse.taint();\n const frame = regl1.frame(() => {\n drawCmds1.configureView(() => {\n drawCmds1.configureBlit(() => {\n drawCmds1.configureMouse(ctx => {\n if (!ctx.dirty) return;\n drawCmds1.drawField({ lineWidth, lineFeather, contourSpacing });\n });\n });\n });\n });\n invalidation.then(() => frame.cancel());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"$24","pinned":false,"hidden":false,"mode":"ojs"},{"id":1976,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"$25","pinned":false,"hidden":false,"mode":"ojs"},{"id":938,"value":"$26","pinned":false,"hidden":false,"mode":"ojs"},{"id":2316,"value":"md`Change the parameters below and observe the effect on the contours. Note in particular that changing the minimum contour spacing does not affect the position of the contours. Instead, it only affects the location of the thresholds between the octaves.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1015,"value":"viewof baselineSpacing = slider({\n min: 2,\n max: 40,\n step: 1,\n value: 15,\n description: 'Minimum contour spacing, in pixels'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1009,"value":"viewof octaveDivisions = slider({\n min: 2,\n max: 8,\n step: 1,\n value: 2,\n description: 'Divisions per octave'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3584,"value":"Inputs.bind(\n Inputs.radio([\"Logarithmic\", \"Linear\"], {\n value: \"Logarithmic\"\n }),\n viewof scalingType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3478,"value":"viewof debugColor = checkbox({\n options: ['Visualize octave with color']\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"viewof regl2 = {\n const ctx = createREGLContext(largeCanvas);\n const fig = html`\n

\n ${ctx}\n

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

\n `;\n fig.value = ctx.value;\n return fig;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":932,"value":"drawLoop2 = {\n drawCmds2.configureMouse.taint();\n const frame = regl2.frame(() => {\n drawCmds2.configureView(() => {\n drawCmds2.configureBlit(() => {\n drawCmds2.configureMouse(ctx => {\n if (!ctx.dirty) return;\n drawCmds2.drawField({\n lineWidth: 1.5,\n lineFeather: 1.5,\n contourSpacing,\n octaveDivisions,\n baselineSpacing,\n debugColor\n });\n });\n });\n });\n });\n invalidation.then(() => frame.cancel());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":929,"value":"$27","pinned":false,"hidden":false,"mode":"ojs"},{"id":1980,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1035,"value":"blending = md`## Blending over octaves\n\nWe've made progress, except we have sharp transitions between successive contour spacings. The final major trick is to blend these contours over a number of octaves, starting at the finest spacing relative to pixels and increasing the size until contours would cover the entire image, at which point further octaves have no use.\n\nThis approach is not unlike a [Shepard tone](https://en.wikipedia.org/wiki/Shepard_tone), which appears to increase infinitely, fading out tones as they leave the upper end of the auditory range and replacing them with new tones at the bottom end of the auditory range. Similarly, we fade out contours as they leave the desirable range, becoming either too densely spaced or too spread out.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"value":"$28","pinned":false,"hidden":false,"mode":"ojs"},{"id":1157,"value":"viewof baselineSpacing2 = slider({\n min: 1,\n max: 5,\n step: 0.1,\n value: 2,\n description: 'Minimum contour spacing, in pixels'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1164,"value":"viewof octaveDivisions2 = slider({\n min: 2,\n max: 8,\n step: 1,\n value: 6,\n description: 'Divisons per octave'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1144,"value":"viewof octaveCount = slider({\n min: 1,\n max: 8,\n step: 1,\n value: 4,\n description: 'Octaves'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3568,"value":"Inputs.bind(\n Inputs.radio([\"Logarithmic\", \"Linear\"], {\n value: \"Logarithmic\"\n }),\n viewof scalingType\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1038,"value":"viewof regl3 = {\n const ctx = createREGLContext(largeCanvas);\n const fig = html`\n

\n ${ctx}\n

Locally-scaled contours, blended across multiple octaves.

\n `;\n fig.value = ctx.value;\n return fig;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1043,"value":"drawLoop3 = {\n drawCmds3.configureMouse.taint();\n const frame = regl3.frame(() => {\n drawCmds3.configureView(() => {\n drawCmds3.configureBlit(() => {\n drawCmds3.configureMouse(ctx => {\n if (!ctx.dirty) return;\n drawCmds3.drawField({\n lineWidth: 1.5,\n lineFeather: 1.5,\n contourSpacing,\n octaveDivisions: octaveDivisions2,\n baselineSpacing: baselineSpacing2\n });\n });\n });\n });\n });\n invalidation.then(() => frame.cancel());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1046,"value":"$29","pinned":false,"hidden":false,"mode":"ojs"},{"id":2634,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"shading = md`## Shaded contouring\n\nWe've so far spent all of our time on line contours. Next, we repurpose the exact same concepts for shaded regions.\n\nSince shading fills entire regions, it may at first appear that our screen-space trick for relating function values to pixel widths has no place here. However, if we smoothly shade regions from a value of zero to one with a sharp jump back to zero, we'll encounter aliasing at the threshold.\n\nTo antialias, we use the above screen-space derivative trick to produce a function that goes smoothly from zero to one then back to zero *over a given number of pixels*.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2438,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":2386,"value":"viewof antialiasing4 = slider({\n min: 0,\n max: 2,\n step: 0.1,\n value: 1,\n description: 'Antialiasing width'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2502,"value":"md`Of course we may not want our coloring to go *linearly* from zero to one. In the style of [unsharp masking](https://en.wikipedia.org/wiki/Unsharp_masking), we can distribute the slope toward the edges of the ramp to increase the perceived contrast. The plot below shows a simple single-parameter contrast ramp layered over multiple octaves.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2508,"value":"viewof contrastFunctionGLSL = glsl.open`\nfloat contrastFunction(float x, float power) {\n x = 2.0 * x - 1.0;\n return 0.5 + 0.5 * pow(abs(x), power) * sign(x);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2513,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":2557,"value":"viewof rampPower4 = slider({\n min: 1,\n max: 4,\n step: 0.01,\n value: 2,\n description: 'Contrast ramp power'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2372,"value":"viewof octaveCount4 = slider({\n min: 1,\n max: 8,\n step: 1,\n value: 4,\n description: 'Octaves'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2370,"value":"viewof octaveDivisions4 = slider({\n min: 2,\n max: 8,\n step: 1,\n value: 5,\n description: 'Divisons per octave'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2367,"value":"viewof contourSpacing4 = slider({\n min: 1,\n max: 5,\n step: 0.1,\n value: 1,\n description: 'Minimum contour spacing, in pixels'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2498,"value":"viewof antialiasing5 = slider({\n min: 0,\n max: 2,\n step: 0.1,\n value: 1,\n description: 'Antialiasing width'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3559,"value":"viewof scalingType = Inputs.radio([\"Logarithmic\", \"Linear\"], {\n value: \"Logarithmic\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2330,"value":"viewof regl4 = {\n const ctx = createREGLContext(largeCanvas);\n const fig = html`\n

\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"},{"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"},{"id":2325,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":2334,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":2649,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":249,"value":"defs = md`## Common definitions`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":381,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":639,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"md`## External imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"createREGL = require('regl')","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"Plotly = require('https://cdn.plot.ly/plotly-basic-latest.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":3494,"value":"import { Editor } from '@cmudig/editor'","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":3020,"value":"import { rangeSlider } from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"import { glsl } from '@stwind/glsl-chunk-tag'","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"import {\n mat3invert,\n mat3multiply,\n mat3create,\n mat3ortho\n} from '@rreusser/gl-mat3'","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"import { slider, checkbox, radio } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":874,"value":"import { glslComplex } from '@rreusser/glsl-complex'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1"}