In the past two months or so, I spent some time making tiny GLSL demos. I wrote an article about the first one, Red Alp. There, I went into details about the whole process, so I recommend to check it out first if you're not familiar with the field. We will look at 4 demos: Moonlight, Entrance 3, Archipelago, and Cutie. But this time, for each demo, we're going to cover one or two things I learned from it. It won't be a deep dive into every aspect because it would be extremely redundant. Instead, I'll take you along a journey of learning experiences. Moonlight Moonlight demo in 460 characters // Moonlight [460] by bµg // License: CC BY-NC-SA 4.0 void main(){vec3 o,p,u=vec3((P+P-R)/R.y,1),Q;Q++;for(float d,a,m,i,t;i++<1e2;p=t<7.2?Q:vec3(2,1,0),d=abs(d)*.15+.1,o+=p/m+(t>9.?d=9.,Q:p/d),t+=min(m,d))for(p=normalize(u)*t,p.z-=5e1,m=max(length(p)-1e1,.01),p.z+=T,d=5.-length(p.xy*=mat2(cos(t*.2+vec4(0,33,11,0)))),a=.01;a<1.;a+=a)p.xz*=mat2(8,6,-6,8)*.1,d-=abs(dot(sin(p/a*.6-T*.3),p-p+a)),m+=abs(dot(sin(p/a/5.),p-p+a/5.));o/=4e2;O=vec4(tanh(mix(vec3(-35,-15,8),vec3(118,95,60),o-o*length(u.xy*.5))*.01),1);} Note See it on its official page, or play with the code on its Shadertoy portage. In Red Alp, I used volumetric raymarching to go through the clouds and fog, and it took quite a significant part of the code to make the absorption and emission convincing. But there is an alternative technique that is surprisingly simpler. In the raymarching loop, the color contribution at each iteration becomes 1/d or c/d where d is the density of the material at the current ray position, and c an optional color tint if you don't want to work in grayscale level. Some variants exist, for example 1/d^2, but we'll focus on 1/d. 1/d explanation Let's see how it looks in practice with a simple cube raymarch where we use this peculiar contribution: One glowing and rotating cube void main() { float d, t; vec3 o, p, u = normalize(vec3(P+P-R,R.y)); // screen to world coordinate for (int i = 0; i < 30; i++) { p = u * t; // ray position p.z -= 3.; // take a step back // Rodriguez rotation with an arbitrary angle of π/2 // and unaligned axis vec3 a = normalize(cos(T+vec3(0,2,4))); p = a*dot(a,p)-cross(a,p); // Signed distance function of a cube of size 1 p = abs(p)-1.; d = length(max(p,0.)) + min(max(p.x,max(p.y,p.z)),0.); // Maxed out to not enter the solid d = max(d,.001); t += d; // stepping forward by that distance // Our mysterious contribution to the output o += 1./d; } // Arbitrary scale within visible range O = vec4(o/200., 1); } Note The signed function of the cube is from the classic Inigo Quilez page. For the rotation you can refer to Xor or Blackle article. For the general understanding of the code, see my previous article on Red Alp. The first time I saw it, I wondered whether it was a creative take, or if it was backed by physical properties. Let's simplify the problem with the following figure: A ray passing by a radiating object The glowing object sends photons that spread all around it. The further we go from the object, the more spread these photons are, basically following the inverse square law 1/r^2, which gives the photons density, where r is the distance to the target object. Let's say we send a ray and want to know how many photons are present along the whole path. We have to "sum", or rather integrate, all these photons density measures along the ray. Since we are doing a discrete sampling (the dots on the figure), we need to interpolate the photons density between each sampling point as well. Given two arbitrary sampling points and their corresponding distance d_n and d_{n+1}, any intermediate distance can be linearly interpolated with r=\mathrm{mix}(d_n,d_{n+1},t) where t is within [0,1]. Applying the inverse square law from before (1/r^2), the integrated photons density between these 2 points can be expressed with this formula (in t range): t being normalized, the \Delta t is here to covers the actual segment distance. With the help of Sympy we can do the integration: >>> a, b, D, t = symbols('a b D t', real=True) >>> mix = a*(1-t) + b*t >>> D * integrate(1/mix**2, (t,0,1)).simplify() D ─── a⋅b So the result of this integration is: Now the key is that in the loop, \Delta t stepping is actually d_{n+1}, so we end up with: And we find back our mysterious 1/d. It's "physically correct", assuming vacuum space. Of course, reality is more complex, and we don't even need to stick to that formula, but it was nice figuring out that this simple fraction is a fairly good model of reality. Going through the object In the cube example we didn't go through the object, using max(d, .001). But if we were to add some transparency, we could have used d = A*abs(d)+B instead, where A could be interpreted as absorption and B the pass-through, or transparency. One glowing, transparent, and rotating cube; A=0.4, B=0.1 I first saw this formula mentioned in Xor article on volumetric. To understand it a bit better, here is my intuitive take: the +B causes a potential penetration into the solid at the next iteration, which wouldn't happen otherwise (or only very marginally). When inside the solid, the abs(d) causes the ray to continue further (by the amount of the distance to the closest edge). Then the multiplication by A makes sure we don't penetrate too fast into it; it's the absorption, or "damping". This is basically the technique I used in Moonlight to avoid the complex absorption/emission code. Entrance 3 Entrance 3 demo in 465 characters // Entrance 3 [465] by bµg // License: CC BY-NC-SA 4.0 #define V for(s++;d<l&&s>.001;q=abs(p+=v*s)-45.,b=abs(p+vec3(mod(T*5.,80.)-7.,45.+sin(T*10.)*.2,12))-vec3(1,7,1),d+=s=min(max(p.y,-min(max(abs(p.y+28.)-17.,abs(p.z+12.)-4.),max(q.x,max(q.y,q.z)))),max(b.x,max(b.y,b.z)))) void main(){float d,s,r=1.7,l=2e2;vec3 b,v=b-.58,q,p=mat3(r,0,-r,-1,2,-1,b+1.4)*vec3((P+P-R)/R.y*20.4,30);V;r=exp(-d*d/1e4)*.2;l=length(v=-vec3(90,30,10)-p);v/=l;d=1.;V;r+=50.*d/l/l;O=vec4(pow(mix(vec3(0,4,9),vec3(80,7,2),r*r)*.01,p-p+.45),1);} Note See it on its official page, or play with the code on its Shadertoy portage. This demo was probably one of the most challenging, but I'm pretty happy with its atmospheric vibe. It's kind of different than the usual demos for this size. I initially tried with some voxels, but I couldn't make it work with the light under 512 characters (the initialization code was too large, not the branchless DDA stepping). It also had annoying limitations (typically the animation was unit bound), so I fell back to a classic raymarching. The first thing I did differently was to use an L-∞ norm instead of an euclidean norm for the distance function: every solid is a cube so it's appropriate to use simpler formulas. For the light, it's not an illusion, it's an actual light: after the first raymarch to a solid, the ray direction is reoriented toward the light and the march runs again (it's the V macro). Hitting a solid or not defines if the fragment should be lighten up or not. Mobile bugs A bad surprise of this demo was uncovering two driver bugs on mobile: One with tricky for-loop compounds on Snapdragon/Adreno because I was trying hard to avoid the macros and functions. One with chained assignments on Imagination/PowerVR (typically affect Google Pixel Pro 10). The first was worked around with the V macro (actually saved 3 characters in the process), but the 2nd one had to be unpacked and made me lose 2 characters. Isometry Another thing I studied was how to set up the camera in a non-perspective isometric or dimetric view. I couldn't make sense of the maths from the Wikipedia page (it just didn't work), but Sympy rescued me again: # Counter-clockwise rotation a, ax0, ax1, ax2 = symbols('a ax0:3') c, s = cos(a), sin(a) k = 1-c rot = Matrix(3,3, [ # col 1 col 2 # col 3 ax0*ax0*k + c, ax0*ax1*k + ax2*s, ax0*ax2*k - ax1*s, # row 1 ax1*ax0*k - ax2*s, ax1*ax1*k + c, ax1*ax2*k + ax0*s, # row 2 ax2*ax0*k + ax1*s, ax2*ax1*k - ax0*s, ax2*ax2*k + c # row 3 ]) # Rotation by 45° on the y-axis m45 = rot.subs({a:rad(-45), ax0:0, ax1:1, ax2:0}) # Apply the 2nd rotation on the x-axis to get the transform matrices for two # classic projections # Note: asin(tan(rad(30))) is the same as atan(sin(rad(45))) isometric = m45 * rot.subs({a:asin(tan(rad(30))), ax0:1, ax1:0, ax2:0}) dimetric = m45 * rot.subs({a: rad(30), ax0:1, ax1:0, ax2:0}) Inspecting the matrices and factoring out the common terms, we obtain the following transform matrices: The ray direction is common to all fragments, so we use the central UV coordinate (0,0) as reference point. We push it forward for convenience: (0,0,1), and transform it with our matrix. This gives the central screen coordinate in world space. Since the obtained point coordinate is relative to the world origin, to go from that point to the origin, we just have to flip its sign. The ray direction formula is then: To get the ray origin of every other pixel, the remaining question is: what is the smallest distance we need to step back the screen coordinates such that, when applying the transformation, the view wouldn't clip into the ground at y=0. This requirement can be modeled with the following expression: The -1 being the lowest y-screen coordinate (which we don't want into the ground). The lazy bum in me just asks Sympy to solve it for me: x, z = symbols("x z", real=True) u = m * Matrix([x, -1, z]) uz = solve(u[1] > 0, z) We get z>\sqrt{2} for isometric, and z>\sqrt{3} for dimetric. With an arbitrary scale S of the coordinate we end up with the following: const float S = 50.; vec2 u = (P+P-R)/R.y * S; // scaled screen coordinates float A=sqrt(2.), B=sqrt(3.); // Isometric vec3 rd = -vec3(1)/B, ro = mat3(B,0,-B,-1,2,-1,A,A,A)/A/B * vec3(u, A*S + eps); // Dimetric vec3 rd = -vec3(B,A,B)/A/2., ro = mat3(2,0,-2,-1,A*B,-1,B,A,B)/A/2. * vec3(u, B*S + eps); The eps is an arbitrary small value to make sure the y-coordinate ends up above 0. In Entrance 3, I used a rough approximation of the isometric setup. Archipelago Archipelago demo in 472 characters // Archipelago [472] by bµg // License: CC BY-NC-SA 4.0 #define r(a)*=mat2(cos(a+vec4(0,11,33,0))), void main(){vec3 p,q,k;for(float w,x,a,b,i,t,h,e=.1,d=e,z=.001;i++<50.&&d>z;h+=k.y,w=h-d,t+=d=min(d,h)*.8,O=vec4((w>z?k.zxx*e:k.zyz/20.)+i/1e2+max(1.-abs(w/e),z),1))for(p=normalize(vec3(P+P-R,R.y))*t,p.zy r(1.)p.z+=T+T,p.x+=sin(w=T*.4)*2.,p.xy r(cos(w)*e)d=p.y+=4.,h=d-2.3+abs(p.x*.2),q=p,k-=k,a=e,b=.8;a>z;a*=.8,b*=.5)q.xz r(.6)p.xz r(.6)k.y+=abs(dot(sin(q.xz*.4/b),R-R+b)),k.x+=w=a*exp(sin(x=p.x/a*e+T+T)),p.x-=w*cos(x),d-=w;} Note See it on its official page, or play with the code on its Shadertoy portage. For this infinite procedurally generated Japan, I wanted to mark a rupture with my red/orange obsession. Technically speaking, it's actually fairly basic if you're familiar with Red Alp. I used the same noise for the mountains/islands, but the water uses a different noise. The per octave noise curve is w=exp(sin(x)), with the particularity of shifting the x coordinate with its derivative: x-=w*cos(x). This is some form of domain warping that gives the nice effect here. When I say x, I'm really referring to the x-axis position. It is not needed to work with the z-component (xz forms the flat plane) because each octave of the fbm has a rotation that "mixes" both axis, so z is actually backed in x. w=exp(sin(x)) Note I didn't come up with the formula, but found it first one this video by Acerola. I don't know if he's the original author, but I've seen the formula being replicated in various places. Cutie Cutie demo in 616 characters // Cutie [616] by bµg // License: CC BY-NC-SA 4.0 #define V vec3 #define L length(p #define C(A,B,X,Y)k=L-A)-X,e=L-B)-Y,h=max(.8-abs(k-e),z),d=min(d,min(k,e)-h*h/3.2) #define H(Z)S,k=fract(T*1.5+s),a=V(1.3,.2,Z),b=V(1,.3*max(1.-abs(3.*k-1.),z),Z*.75+3.*max(-k*S,k-1.)),q=b*S,q+=a+sqrt(1.-dot(q,q))*normalize(V(-b.y,b.x,0)),C(a,q,.7,S),C(q,a-b,S,.4) void main(){float i,t,k,e,h,z,s,S=.5,d=S;for(V p,q,a,b;i++<5e1&&d>.001;t+=d=min(d,e=L+V(S-2.*p.x,-1,S))-S))p=normalize(V(P+P-R,R.y))*t,p.z-=5.,p.zy*=mat2(cos(vec4(1,12,34,1))),p.xz*=mat2(cos(sin(T)+vec4(0,11,33,0))),d=1.+p.y,C(z,V(z,z,1.2),1.5,1.2),s=p.x<z?p.x=-p.x,z:H(z),s+=H(1.);O=vec4(V(exp(-i/(e>d?1e2:9.))),1);} Note See it on its official page, or play with the code on its Shadertoy portage. Here I got cocky and thought I could manage to fit it in 512 chars. I failed, by more than 100 characters. I did use the smoothmin operator for the first time: every limb of the body of Cutie is composed of two spheres creating a rounded cone (two sphere of different size smoothly merged like metaballs). 2 spheres merging using the smin operator Then I used simple IK kinetics for the animation. Using leg parts with a size of 1 helped simplifying the formula and make it shorter. You may be wondering about the smooth visuals itself: I didn't use the depth map but simply the number of iterations. Due to the nature of the raymarching algorithm, when a ray passes close to a shape, it slows down significantly, increasing the number of iterations. This is super useful because it exaggerate the contour of the shapes naturally. It's wrapped into an exponential, but i defines the output color directly. What's next I will continue making more of those, keeping my artistic ambition low because of the 512 characters constraint I'm imposing on myself. You may be wondering why I keep this obsession about 512 characters, and many people called me out on this one. There are actually many arguments: A tiny demo has to focus on one or two very scoped aspects of computer graphics, which makes it perfect as a learning support. It's part of the artistic performance: it's not just techniques and visuals, the wizardry of the code is part of why it's so impressive. We're in an era of visuals, people have been fed with the craziest VFX ever. But have they seen them with a few hundreds bytes of code? The constraint helps me finish the work: when making art, there is always this question of when to stop. Here there is an intractable point where I just cannot do more and I have to move on. Similarly, it prevents my ambition from tricking me into some colossal project I will never finish or even start. That format has a ton of limitations, and that's its strength. Working on such a tiny piece of code for days/weeks just brings me joy. I do feel like a craftsperson, spending an unreasonable amount of time perfecting it, for the beauty of it. I'm trying to build a portfolio, and it's important for me to keep it consistent. If the size limit was different, I would have done things differently, so I can't change it now. If I had hundreds more characters, Red Alp might have had birds, the sky opening to lit a beam of light on the mountains, etc. Why 512 in particular? It happens to be the size of a toot on my Mastodon instance so I can fit the code there, and I found it to be a good balance.

Text rendering is cursed. Anyone who has worked on text will tell you the same; whether it's about layout, bi-directional, shaping, Unicode, or the rendering itself, it's never a completely solved problem. In my personal case, I've been working on trying to render text in the context of a compositing engine for creative content. I needed crazy text effects, and I needed them to be reasonably fast, which implied working with the GPU as much as possible. The distance field was an obvious requirement because it unlocks anti-aliasing and the ability to make many great effects for basically free. In this article, we will see how to compute signed distance field on the GPU because it's much faster than doing it on the CPU, especially when targeting mobile devices. We will make the algorithm decently fast, then after lamenting about the limitations, we will see what kind of effects this opens up. Progressive build of the 'あ' glyph from the Mochiy Pop One font Extraction of glyph outlines Non-bitmap fonts contain glyphs defined by outlines made of closed sequences of lines and (quadratic or cubic) Bézier curves. Extracting them isn't exactly complicated: FreeType or ttf-parser typically expose a way to do that. For the purpose of this article, we're going to hard code the list of the Bézier curves inside the shader, but of course in a more serious setup those would be uploaded through storage buffers or similar. Using this tiny program, a glyph can be dumped as series of outlines into a fixed size array: struct Bezier { vec2 p0; // start point vec2 p1; // control point 1 vec2 p2; // control point 2 vec2 p3; // end point }; #define N 42 #define NC 2 const int glyph_A_count[2] = int[](33, 9); const Bezier glyph_A[42] = Bezier[]( Bezier(vec2( 0.365370, -0.570817), vec2( 0.374708, -0.631518), vec2( 0.332685, -0.687549), vec2( 0.339689, -0.748249)), Bezier(vec2( 0.339689, -0.748249), vec2( 0.339689, -0.748249), vec2( 0.344358, -0.764591), vec2( 0.351362, -0.771595)), Bezier(vec2( 0.351362, -0.771595), vec2( 0.384047, -0.822957), vec2( 0.402724, -0.855642), vec2( 0.442412, -0.885992)), // ... ); glyph_A_count contains how many Bézier curves there is for each sub-shape composing the glyph, and glyph_A contains that list of Bézier cubic curves. Even though glyphs are also composed of lines and quadratic curves, we expand them all into cubics: "who can do more can do less". We use these formulas to respectively expand lines and quadratics into cubics: Where P_n are the Bézier control points. For simplicity and because we want to make sure the most complex case is well tested, we will stick to this approach in this article. But it also means there is a lot of room for further optimizations. Since solving linear and quadratics is much simpler, this is left as an exercise for the reader. Warning You may be tempted to upload the polynomial form of these curves directly to save some computation in the shader. Don't. You will lose the exact stitching property because one evaluated polynomial end B_n(1) will not necessary match the next polynomial start B_{n+1}(0). This makes artificial "precision holes" that will break rendering in obscure ways. Signed distance to the shape In the previous article, we saw how to get the distance to a cubic Bézier curve. Each glyph being composed of multiple outlines, we can simply run over all of them and pick the shortest distance. float get_distance(vec2 p, Bezier buf[N], int counts[NC]) { int base = 0; float dist = 1e38; for (int j = 0; j < NC; j++) { int count = counts[j]; for (int i = 0; i < count; i++) { Bezier b = buf[base + i]; float d = bezier_sq(p, b.p0, b.p1, b.p2, b.p3); dist = min(dist, d); } base += count; } return sqrt(dist); } Where bezier_sq() is the distance to the Bézier curve, squared, as defined in the previous article. Distance to the 'A' glyph from the Virgil font This works just fine, but as you can imagine, it's not cheap to solve so many distances per pixel. A first straightforward optimization would be to ignore any curve with a bounding box further than our currently best distance, because none of them can give a shorter one: Box distance optimization Where each box encloses a Bézier curve like this: Most naive/conservative bounding box We could use a tighter bound but it would require more computation so this felt like a good trade-off. Implementing this in the inner loop is pretty simple: for (int i = 0; i < count; i++) { Bezier b = buf[base + i]; vec2 p0=b.p0, p1=b.p1, p2=b.p2, p3=b.p3; // Distance to box (0 if inside), squared vec2 q0 = min(p0, min(p1, min(p2, p3))); vec2 q1 = max(p0, max(p1, max(p2, p3))); vec2 v = max(abs(q0+q1-p-p)-q1+q0, 0.)*.5; float h = dot(v,v); // We can't get a shorter distance than h if we were to compute the // distance to that curve if (h > dist) continue; float d = bezier_sq(p, p0, p1, p2, p3); dist = min(dist, d); } The distance to the bounding box formula comes from this explicative video by Inigo Quilez (the basic one, without the inside distance), adapted to the Bézier control point coordinates. This saves a lot of computation in certain cases, but the worst case is still pretty terrible, as shown by the heat map of this 'C' glyph: Heat map of how many distances are evaluated Indeed sometimes, it takes a long time to reach a good Bézier curve that is small enough to disregard most of the others. We observe it the further we go away from the beginning of the shape. So the next step is to find a good initial candidate. One cheap way to do that is to first compute the distance to the center point of each curve, and pick the smallest: // Find a good initial guess int best = 0; float boxd = 1e38; for (int i = 0; i < count; i++) { Bezier b = buf[base + i]; vec2 p0=b.p0, p1=b.p1, p2=b.p2, p3=b.p3; vec2 q0 = min(p0, min(p1, min(p2, p3))); vec2 q1 = max(p0, max(p1, max(p2, p3))); vec2 v = (q0+q1)*.5 - p; float h = dot(v,v); if (h < boxd) best=i, boxd=h; } // Initial guess Bezier bb = buf[base + best]; dist = min(dist, bezier_sq(p, bb.p0, bb.p1, bb.p2, bb.p3)); for (int i = 0; i < count; i++) { if (i == best) // We already computed this one continue; Bezier b = buf[base + i]; vec2 p0=b.p0, p1=b.p1, p2=b.p2, p3=b.p3; // ... This optimization is immediately reflected on the heat map, where only the central point seems to become a critical point (this glyph is a pathological case as it forms a circle): Heat map with a rough initial guess Winding number The last step is to figure out whether we are inside or outside the shape. There are two schools here, the even-odd and the non-zero rules. We'll pick the latter because that's the expectation in the case of font rendering. In deconstructing Bézier curves, we explained the theory of that specific algorithm so we're not going to dive into the details again. The basic idea is to strike a ray in one direction from our current position, and get how many times we cross a given curve. Here we will arbitrarily choose a horizontal ray line y = P_y where P is our current coordinate. The topology of each curve can hint us on whether it's worth considering it or not. For example, if every control point is above or below our current position, it can be ignored. We can store all the signs in a mask and bail out as soon as the ray is either completely below or completely above the bounding box of the curve: int signs = int(p0.y < p.y) | int(p1.y < p.y) << 1 | int(p2.y < p.y) << 2 | int(p3.y < p.y) << 3; if (signs == 0 || signs == 15) // all signs are identical return 0; Each sign indicates the position of the control point with regard to the ray. We can use the relative position of the starting point as a reference for the overall orientation (if there is a crossing, we know it will come from below or above): int inc = (signs & 1) == 0 ? 1 : -1; We also need to convert the Bézier curves to the usual polynomial at^3+bt^2+ct+d: vec2 a = -p0 + 3.*(p1 - p2) + p3, b = 3. * (p0 - 2.*p1 + p2), c = 3. * (p1 - p0), d = p0 - p; Then we can find the y-roots and check every point on the x-axis. For every crossing point (at most 3), we switch the sign: float r[5]; int count = root_find3(r, a.y, b.y, c.y, d.y); vec3 t = vec3(r[0], r[1], r[2]); vec3 v = ((a.x*t + b.x)*t + c.x)*t + d.x; if (count > 0 && v.x >= 0.) w += inc; if (count > 1 && v.y >= 0.) w -= inc; if (count > 2 && v.z >= 0.) w += inc; Since we already have a 5th degree root finder from the previous article, we just have to build a tiny version for the 3rd degree: int root_find3(out float r[5], float a, float b, float c, float d) { float r2[5]; int n = root_find2(r2, 3.*a, b+b, c); return cy_find5(r, r2, n, 0., 0., a, b, c, d); } Note Our root finder doesn't return roots outside [0,1] so no filtering is required. To summarize: int bezier_winding(vec2 p, vec2 p0, vec2 p1, vec2 p2, vec2 p3) { int w = 0; int signs = int(p0.y < p.y) | int(p1.y < p.y) << 1 | int(p2.y < p.y) << 2 | int(p3.y < p.y) << 3; if (signs == 0 || signs == 15) return 0; int inc = (signs & 1) == 0 ? 1 : -1; vec2 a = -p0 + 3.*(p1 - p2) + p3, b = 3. * (p0 - 2.*p1 + p2), c = 3. * (p1 - p0), d = p0 - p; float r[5]; int count = root_find3(r, a.y, b.y, c.y, d.y); vec3 t = vec3(r[0], r[1], r[2]); vec3 v = ((a.x*t + b.x)*t + c.x)*t + d.x; if (count > 0 && v.x >= 0.) w += inc; if (count > 1 && v.y >= 0.) w -= inc; if (count > 2 && v.z >= 0.) w += inc; return w; } For every sub-shape, we can accumulate the winding number, and use it at the end to decide whether we're inside or outside: float get_distance(vec2 p, Bezier buf[N], int counts[NC]) { int w = 0; int base = 0; float dist = 1e38; for (int j = 0; j < NC; j++) { int count = counts[j]; // Get the sign of the distance for (int i = 0; i < count; i++) { Bezier b = buf[base + i]; w += bezier_winding(p, b.p0, b.p1, b.p2, b.p3); } // ... } // Positive outside, negative inside return (w != 0 ? -1. : 1.) * sqrt(dist); } And voilà: Signed distance to the 'A' glyph from the Virgil font Warning This winding number logic might be too fragile: it doesn't cover potential degenerate cases such as horizontal tangents / duplicated roots. But for some reason, while I fought these issues for years, none of the weird corner cases seemed to glitch in my extensive tests, probably because the root finder is more resilient than what I was using before. Limitations Wicked curves This may look satisfying, but it's only the beginning of the problems. For example, variadic fonts are typically following chaotic patterns: The glyph 'e' in the Quicksand font In addition to the self overlapping part, notice the reverse folding triangle on the right. This completely wreck the distance field: Glyph with a broken SDF due to overlaps Even with a simple character display (meaning something that doesn't exploit the wide range of effects available with an SDF), it starts to glitch: Glitching glyph due to broken SDF Little "cracks" should appears around the overlaps. This can be mitigated by lowering the distance by a tiny constant to avoid the zero-crossing, but it impacts the overall glyph (it gets more bold). And it's not just because of variadic problem, sometimes designers rely on overlaps for simplicity: The glyph 't' in the Quicksand font And sometimes... well let's say they have a legitimate reason to do it: A Bengali glyph This is not something that can be addressed easily. For example, take these two overlapping shapes: Distance inside two overlapping shapes We see that the actual distance (white circle) is not the smallest distance to either shape, and it's not even the smallest distance to any edge: it is at an intersection point between two curves, which we do not have. Here we're dealing with line segments, but with cubic curves, the problem explodes in complexity. At this point, we need another strategy, like feeding the GPU renderer with preprocessed outline-only curves. Many people rely on curves flattening to address this issue. This is unfortunately yet another field of research that we're not going to explore this time. Inigo talked about the combination of signed distance if you want some ideas, but aside from the first one (giving up), none seems particularly applicable here. Atlas and overlapping distances Some effects such as blur or glow expand beyond the boundaries of the characters, so the distance field needs to be larger than the glyph itself. This means when an effect spread too large, there will be an overlap. If we're making an effect on a word, the distance field must be the unified version of all the word glyphs (or sometimes even the sentence). The classic approach of an atlas of glyph distances will not work reliably. In the following illustration, a geometry per glyph is used, each geometry is enlarged to account for the larger distance field, and we end up with potential overlaps when applying effects. Overlapping character geometries due to larger distance Rounded corners Like all distance maps, it suffers from the same limitations. The most common one is the rounded corners problem. This is typically addressed using a multi-channel signed distance field generator, but it's hard for me to tell how accessible it is for a portage on the GPU. msdfgen demonstration of corners improvement Note This problem only appears with intermediate textures. When computing exact distances like here directly in the shaders, this is not an issue. Effects Despite all these limitations, we can already do so much, so let's close this article on a positive note. This is not done here, but all of these effects are free as soon as we have the distance field stored in an intermediate texture. First, we have anti-aliasing / blur: AA / blur effect I wrote a dedicated article on the subject of AA (and blur) on SDF if you want more information on how to achieve that. The shape can also be drastically altered with a simple operator such as "rounding": d -= rounding; Rounding effect This is the same technique we suggested to cover up for the overlap glitch earlier, just rebranded as an effect. In the same spirit we can also create an outline stroke (on the outer edge to preserve the original glyph design): Outline effect This is sooo useful because it makes it possible for our text to be visible no matter what the background is. So many editors don't have this feature because it's hard and expensive to do correctly. Given a distance field though, all we have to do is this (which also includes anti-aliasing on every border): float aa = fwidth(d); // pixel width estimates float w = aa * .5; // half diffuse width vec2 b = vec2(0,1)*outline - d; // inner and outer boundaries; vec2(-1,0) for inner, vec2(-.5,.5) for centered float inner_mask = smoothstep(-w, w, b.x); // cut-off between the outline and the outside (whole shape w/ outline) float outer_mask = smoothstep(-w, w, b.y); // cut-off between the fill color and the outline (whole shape w/o outline) float outline_mask = outer_mask - inner_mask; vec3 o = (inner_color*inner_mask + outline_color*outline_mask) * outer_mask; We can also dig into our character with d = abs(d)-ring: Ring effect And maybe apply some glow to create a neon effect: Ring combined with a neon/glow effect float glow_power = glow * exp(-max(d, 0.) * 10.); o += glow_color * glow_power; We could also do drop shadows, all sorts of distortions, or so many other creative way exploiting this distance. You get the idea: it is fundamental as soon as you want fast visual effects. Conclusion This article is the last of the series on 2D rendering for me. I've wanted to share this experience and knowledge after many years of struggling (mostly alone) on these issues. I wish I could have succeeded in providing a good free and open-source text effects rendering engine to compete with the industry standards. (Un)fortunately for me, the adventure stops here, but I hope this will benefit creators and future tinkerers interested in the subject.

Bézier curves are a core building block of text and 2D shapes rendering. There are several approaches to rendering them, but one especially challenging problem, both mathematically and technically, is computing the distance to a Bézier curve. For quadratic curves (one control point), this is fairly accessible, but for cubic (two control points) we're going to see why it is so hard. A glyph from the Virgil font, composed of multiple Bézier curves Having this distance field opens up many rendering possibilities. It's hard, but it's possible; here is a live proof: Distance to a cubic Bézier curve In this visualization, I'm borrowing your device resources to compute the distance to the curve for every single pixel. The yellow points are the control points of the curve (in white) and the blue zone is a representation of the distance field. Note All the demos and code in this article are self-contained GLSL fragment shaders. Most of the code can be found in the article, but feel free to inspect the source code of any of these WebGL demo for the complete code. They can be run verbatim using ShaderWorkshop. The basic maths In a previous article, we explained that a Bézier curve can be expressed as a polynomial. In our case, a cubic polynomial: Where a, b, c and d are the vector coefficients derived from the start (P_0), end (P_3), and control points (P_1, P_2) using the following formulas (you can refer to the previous article for details): For a given point p in 2D space, the distance to that Bézier curve can be expressed as a length between our curve and p: Our goal is to find the t value where d(t) is the smallest. The length formula has an annoying square root, so we start with the distance squared for simplicity, which we are going to unroll: The derivative of that function will allow us to identify critical points: that is, points where the distance starts growing or reducing. Said differently, solving D'(t)=0 will identify all the maximums and minimums (we're interested in the latter) of D(t) (and thus d(t) as well). It is a bit convoluted in our case but straightforward to compute: A polynomial, this time of degree 5, emerges here. For conciseness, we can express D'(t) polynomial coefficients as a bunch of dot products: Finally, we notice that solving D'(t)=0 is equivalent to solving D'(t)/2 = 0, so we simplify the expression: Assuming we are able to solve this equation, we will get at most 5 values of t, among which we should find the shortest distance from p to the curve. Since t is bound within 0 and 1 (start and end of the curve), we will also have to test the distance at these locations. Note We could also compute the 2nd derivative in order to differentiate minimums from maximums, but simply evaluating the 5(+2) potential t values and keeping the smallest works just fine. Distance from a random point to critical testing points of the curve The red dot in the blue field is a random point in space. The red lines show which distances are evaluated (at most 5+2) to find the smallest one. Translated to GLSL code Transposing these formulas into code gives us this base template code: float bezier_distance(vec2 p, vec2 p0, vec2 p1, vec2 p2, vec2 p3) { // Start by testing the distance to the boundary points at t=0 (p0) and t=1 (p3) vec2 dp0 = p0 - p, dp3 = p3 - p; float dist = min(dot(dp0, dp0), dot(dp3, dp3)); // Bezier cubic points to polynomial coefficients vec2 a = -p0 + 3.0*(p1 - p2) + p3, b = 3.0 * (p0 - 2.0*p1 + p2), c = 3.0 * (p1 - p0), d = p0; // Solve D'(t)=0 where D(t) is the distance squared vec2 dmp = d - p; float da = 3.0 * dot(a, a), db = 5.0 * dot(a, b), dc = 4.0 * dot(a, c) + 2.0 * dot(b, b), dd = 3.0 * (dot(a, dmp) + dot(b, c)), de = 2.0 * dot(b, dmp) + dot(c, c), df = dot(c, dmp); float roots[5]; int count = root_find5(roots, da, db, dc, dd, de, df); for (int i = 0; i < count; i++) { float t = roots[i]; // Evaluate the distance to our point p and keep the smallest vec2 dp = ((a * t + b) * t + c) * t + dmp; dist = min(dist, dot(dp, dp)); } // We've been working with the squared distance so far, it's time to get its // square root return sqrt(dist); } Note dot(dp,dp) is a shorthand for the length squared, of course cheaper than computing length() which contains a square root. Warning We assume here the root finder only returns the roots that are within [0,1]. root_find5() is our 5th degree root finder, that is the function that gives us all the t (at most 5) which satisfy: But before we are able to solve that, we need to study the simpler 2nd degree polynomial solving: Solving quadratic polynomial equations Diving into the rabbit hole of solving polynomial numerically will lead you to insanity. But we still have to scratch the surface because superior degree solvers usually rely on it. My favorite quadratic root finding formula is the super simple one introduced by 3Blue1Brown, which involves locating a mid point m from which you get the 2 surrounding roots r: In GLSL, a code to cover most common corner cases would look like this: // Return true if x is not a NaN nor an infinite // highp is probably mandatory to force IEEE 754 compliance bool isfinite(highp float x) { return (floatBitsToUint(x) & 0x7f800000u) != 0x7f800000u; } // Quadratic: solve ax²+bx+c=0 int root_find2(out float r[5], float a, float b, float c) { int count = 0; float m = -b / (2.*a); float d = m*m - c/a; if (!isfinite(m) || !isfinite(d)) { // a is (probably) too small // Linear: solve bx+c=0 float s = -c / b; if (isfinite(s)) r[count++] = s; return count; } if (d < 0.) // no root return count; if (d == 0.) { r[count++] = m; // single root return count; } float z = sqrt(d); r[count++] = m - z; r[count++] = m + z; return count; } Not quite as straightforward as the math formula, isn't it? We cannot know in advance whether the division is going to succeed, so we do run divisions and only then check if they failed (and assume a reason for the failing). This is much more reliable than an arbitrary epsilon value. We also try to avoid duplicated roots. Note The roots are automatically sorted because z is always positive. Warning isfinite() may not be as reliable because in GLSL "NaNs are not required to be generated", meaning some edge case may not be supported depending on the hardware, drivers, and the current weather in Yokohama. As much as I like it, this implementation might not be the most stable numerically (even though I don't have have strong data to back this claim). Instead, we may prefer the formula from Numerical Recipes: Leading to the following alternative implementation: int root_find2(out float r[5], float a, float b, float c) { int count = 0; float d = b*b - 4.*a*c; if (d < 0.) return count; if (d == 0.) { float s = -.5 * b / a; if (isfinite(s)) r[count++] = s; return count; } float h = sqrt(d); float q = -.5 * (b + (b > 0. ? h : -h)); float r0 = q/a, r1 = c/q; if (isfinite(r0)) r[count++] = r0; if (isfinite(r1)) r[count++] = r1; return count; } This is not perfect at all (especially with the b²-4ac part). There are actually many other possible implementations, and this HAL CNRS paper shows how near impossible it is to make a correct one. It is an interesting but depressing read, especially since it "only" covers IEEE 754 floats, and we have no such guarantee on GPUs. We also don't have fma() in WebGL, which greatly limits improvements. For now, it will have to do. Solving quintic polynomial equations: attempt 1 Solving polynomials of degree 5 cannot be solved analytically like quadratics. And even if they were, we probably wouldn't do it because of numerical instability. Typically, in my experience, analytical 3rd degree polynomials solver do not provide reliable results. The first iterative algorithm I picked was the Aberth–Ehrlich method. Nowadays, more appropriate algorithms exist, but at the time I started messing up with these problems (several years ago), it was a fairly good contender. This video explores how it works. The convergence to the roots is quick, and it's overall simple to implement. But it's not without flaws. The main problem is that it works in complex space. We can't ignore the complex roots because they all "respond" to each others. And filtering these roots out at the end implies some unreliable arbitrary threshold mechanism (we keep the root only when the imaginary part is close to 0). The initialization process also annoyingly requires you to come up with a guess at what the roots are, and doesn't provide anything relevant. Aberth-Ehrlich works by refining these initial roots, similar to a more elaborate Newton iterations algorithm. Choosing better initial estimates leads to a faster convergence (meaning less iterations). The Cauchy bound specifies a space by defining the radius of a disk (complex numbers are in 2D space) where all the roots of a polynomial should lie within. We are going to use it for the initial guess, and more specifically its "tight" version (which unfortunately relies on pow()). Since Aberth-Ehrlich is a refinement and not just a shrinking process, we define and use an inner disk that has half the area of Cauchy bound disk. That way, we're more likely to start with initial guesses spread in the "middle" of the roots; this is where the √2 comes from in the formula below. #define K5_0 vec2( 0.951056516295154, 0.309016994374947) #define K5_1 vec2( 0.000000000000000, 1.000000000000000) #define K5_2 vec2(-0.951056516295154, 0.309016994374948) #define K5_3 vec2(-0.587785252292473, -0.809016994374947) #define K5_4 vec2( 0.587785252292473, -0.809016994374948) int root_find5_aberth(out float roots[5], float a, float b, float c, float d, float e, float f) { // Initial candidates set mid-way of the tight Cauchy bound estimate float r = (1.0 + max_5( pow(abs(b/a), 1.0/5.0), pow(abs(c/a), 1.0/4.0), pow(abs(d/a), 1.0/3.0), pow(abs(e/a), 1.0/2.0), abs(f/a))) / sqrt(2.0); // Spread in a circle vec2 r0 = r * K5_0, r1 = r * K5_1, r2 = r * K5_2, r3 = r * K5_3, r4 = r * K5_4; The circle constants are generated with the following script: import math import sys n = int(sys.argv[1]) for k in range(n): angle = 2 * math.pi / n off = math.pi / (2 * n) z = angle * k + off c, s = math.cos(z), math.sin(z) print(f"#define K{n}_{k} vec2({c:18.15f}, {s:18.15f})") Next, it's basically a simple iterative process. Unrolling everything for degree 5 looks like this: #define close_to_zero(x) (abs(x) < eps) // This also filters out roots out of the [0,1] range #define ADD_ROOT_IF_REAL(r) if (close_to_zero(r.y) && r.x >= 0. && r.x <= 1.) roots[count++] = r.x #define SMALL_OFF(off) (dot(off, off) <= eps*eps) /* Complex multiply, divide, inverse */ vec2 c_mul(vec2 a, vec2 b) { return mat2(a, -a.y, a.x) * b; } vec2 c_div(vec2 a, vec2 b) { return mat2(a, a.y, -a.x) * b / dot(b, b); } vec2 c_inv(vec2 z) { return vec2(z.x, -z.y) / dot(z, z); } // Compute f(x)/f'(x): complex polynomial evaluation (y) divided by their // derivatives (q) using Horner's method in one pass vec2 c_poly5d4(float a, float b, float c, float d, float e, float f, vec2 x) { vec2 y = a*x + vec2(b, 0), q = a*x + y; y = c_mul(y,x) + vec2(c, 0); q = c_mul(q,x) + y; y = c_mul(y,x) + vec2(d, 0); q = c_mul(q,x) + y; y = c_mul(y,x) + vec2(e, 0); q = c_mul(q,x) + y; y = c_mul(y,x) + vec2(f, 0); return c_div(y, q); } vec2 sum_of_inv(vec2 z0, vec2 z1, vec2 z2, vec2 z3, vec2 z4) { return c_inv(z0 - z1) + c_inv(z0 - z2) + c_inv(z0 - z3) + c_inv(z0 - z4); } int root_find5_aberth(out float roots[5], float a, float b, float c, float d, float e, float f) { if (close_to_zero(a)) return root_find4_aberth(roots, b, c, d, e, f); // Code snip: see previous snippet // float r = ... // vec2 r0, r1, r2, ... for (int m = 0; m < 16; m++) { vec2 d0 = c_poly5d4(a, b, c, d, e, f, r0), d1 = c_poly5d4(a, b, c, d, e, f, r1), d2 = c_poly5d4(a, b, c, d, e, f, r2), d3 = c_poly5d4(a, b, c, d, e, f, r3), d4 = c_poly5d4(a, b, c, d, e, f, r4); vec2 off0 = c_div(d0, vec2(1,0) - c_mul(d0, sum_of_inv(r0, r1, r2, r3, r4))), off1 = c_div(d1, vec2(1,0) - c_mul(d1, sum_of_inv(r1, r0, r2, r3, r4))), off2 = c_div(d2, vec2(1,0) - c_mul(d2, sum_of_inv(r2, r0, r1, r3, r4))), off3 = c_div(d3, vec2(1,0) - c_mul(d3, sum_of_inv(r3, r0, r1, r2, r4))), off4 = c_div(d4, vec2(1,0) - c_mul(d4, sum_of_inv(r4, r0, r1, r2, r3))); r0 -= off0; r1 -= off1; r2 -= off2; r3 -= off3; r4 -= off4; if (SMALL_OFF(off0) && SMALL_OFF(off1) && SMALL_OFF(off2) && SMALL_OFF(off3) && SMALL_OFF(off4)) break; } int count = 0; ADD_ROOT_IF_REAL(r0); ADD_ROOT_IF_REAL(r1); ADD_ROOT_IF_REAL(r2); ADD_ROOT_IF_REAL(r3); ADD_ROOT_IF_REAL(r4); return count; } When the main coefficient is too small, we fall back on the 4th degree (and so on until we reach the analytic quadratic). The 4th and 3rd degree versions of this function are easy to guess (they're pretty much identical, just removing one coefficient at each degree). We're also hardcoding a maximum of 16 iterations here because it's usually enough. To have an idea of how many iterations are required in practice, following is a visualization of the heat map of the number of iterations for every pixel: Heat map of the iterations of the Aberth-Ehrlich algorithm The big picture and the weaknesses of the algorithm should be pretty obvious by now. Among all drawbacks of this approach, there are also surprising pathological cases where the algorithm is not performing well. Fortunately, there were some progress on the state of the art in recent years. Solving quintic polynomial equations: the state of the art In 2022, Cem Yuksel published a new algorithm for polynomial root solving. Initially I had my reservations because the official implementation had a few shortcomings on some edge cases, which made me question its reliability. It's also optimized for CPU computation and is, to my very personal taste, overly complex. Fortunately, Christoph Peters showed that it was possible on the GPU by implementing it for very large degrees, and without any recursion. Inspired by that, I decided to unroll it myself for degree 5. One core difference with Aberth approach is that it is designed for arbitrary ranges. In our case this is actually convenient because, due to how Bézier curves are defined, we are only interested in roots between 0 and 1. We will need to adjust the Quadratic function to work in this range, as well as keeping the roots ordered: } float h = sqrt(d); float q = -.5 * (b + (b > 0. ? h : -h)); - float r0 = q/a, r1 = c/q; - if (isfinite(r0)) r[count++] = r0; - if (isfinite(r1)) r[count++] = r1; + vec2 v = vec2(q/a, c/q); + if (v.x > v.y) v.xy = v.yx; // keep them ordered + if (isfinite(v.x) && v.x >= 0. && v.x <= 1.) r[count++] = v.x; + if (isfinite(v.y) && v.y >= 0. && v.y <= 1.) r[count++] = v.y; return r; } The core logic of the algorithm relies on a cascade of derivatives for every degree. Christoph Peters provides an analytic formula to obtain the derivative for any degree. This is a huge helper when we need to work for an arbitrary degree, but in our case we can just differentiate manually: Since we're only interested in the roots, similar to what we did to D(t), we can simplify some of these expressions: The purpose of that cascade of derivatives is to cut the curve into monotonic segments. In practice, the core function looks like this: int root_find5_cy(out float r[5], float a, float b, float c, float d, float e, float f) { float r2[5], r3[5], r4[5]; int n = root_find2(r2, 10.*a, 4.*b, c); // degree 2 n = cy_find5(r3, r2, n, 0., 0., 10.*a, 6.*b, 3.*c, d); // degree 3 n = cy_find5(r4, r3, n, 0., 5.*a, 4.*b, 3.*c, d+d, e); // degree 4 n = cy_find5(r, r4, n, a, b, c, d, e, f); // degree 5 reutnr n; } We could unroll cy_find3, cy_find4, and cy_find5, but to keep the code simple, the degree 3 to 5 will share the same function, with leading coefficients set to 0 (hopefully the compiler does its job properly). cy_find5 relies on roots found (at most 4) at previous stages to define intervals of search: Such an approach has the nice side effect of keeping the roots ordered. The solver itself is not that complex either: float poly5(float a, float b, float c, float d, float e, float f, float t) { return ((((a * t + b) * t + c) * t + d) * t + e) * t + f; } // Quintic: solve ax⁵+bx⁴+cx³+dx²+ex+f=0 iint cy_find5(out float r[5], float r4[5], int n, float a, float b, float c, float d, float e, float f) { int count = 0; vec2 p = vec2(0, poly5(a,b,c,d,e,f, 0.)); for (int i = 0; i <= n; i++) { float x = i == n ? 1. : r4[i], y = poly5(a,b,c,d,e,f, x); if (p.y * y > 0.) continue; float v = bisect5(a,b,c,d,e,f, vec2(p.x,x), vec2(p.y,y)); r[count++] = v; p = vec2(x, y); } return count; } The last brick of the algorithm is the Newton bisection, the slowest part: // Newton bisection // // a,b,c,d,e,f: 5th degree polynomial parameters // t: x-axis boundaries // v: respectively f(t.x) and f(t.y) float bisect5(float a, float b, float c, float d, float e, float f, vec2 t, vec2 v) { float x = (t.x+t.y) * .5; // mid point float s = v.x < v.y ? 1. : -1.; // sign flip for (int i = 0; i < 32; i++) { // Evaluate polynomial (y) and its derivative (q) using Horner's method in one pass float y = a*x + b, q = a*x + y; y = y*x + c; q = q*x + y; y = y*x + d; q = q*x + y; y = y*x + e; q = q*x + y; y = y*x + f; t = s*y < 0. ? vec2(x, t.y) : vec2(t.x, x); float next = x - y/q; // Newton iteration next = next >= t.x && next <= t.y ? next : (t.x+t.y) * .5; if (abs(next - x) < eps) return next; x = next; } return x; } And that's pretty much it. Looking at its heat map, it has a completely different look than Aberth: Heat map of the iterations of Cem Yuksel algorithm The number of iterations might be larger but it is much faster (I observed a factor 3 on my machine), the code is shorter, and actually more reliable. Note The scale used to represent the heat map is not the same as the one used in Aberth, but it is identical with the method presented in the next section. Exploring ITP convergence The bisection being the hot loop, it is interesting to ponder how to make this faster. A while back, Raph Levien hypothesized about how the ITP method could perform. Out of curiosity, I gave it a chance. The function is designed to work like a bisection, claiming to be as performant in the worst case. There isn't a lot of code, and the paper provides a pseudo-code. But implementing it was actually challenging in many ways. First of all, the authors didn't seem to find relevant to mention that it only works if f(a)<0<f(b). If f(a)>0>f(b), you're pretty much on your own. It requires just 2 lines of adjustments but figuring out this shortcoming of the algorithm was particularly unexpected. Another bothering aspect concerns the parameters: K_1, K_2 and n_0. The paper proposes those: I played with them for a while and couldn't find any set that would make a real difference, so I ended up with the following: For performance reasons, reducing K_2 to a value of 2 saves a call to pow(). For K_1, CRAN seems to suggest \frac{0.2}{b-a} so I went along with it And for n_0, well 1 or 2 seem to be the usual parameter. In the end, the function looks like this: // ITP algorithm (2020) by Oliveira & Takahashi // "An Enhancement of the Bisection Method Average Performance Preserving Minmax Optimality" // // a,b,c,d,e,f: 5th degree polynomial parameters // t: x-axis boundaries (a and b in the paper) // v: respectively f(a) and f(b) in the paper (evaluation of the function with t.x and t.y) float itp5(float a, float b, float c, float d, float e, float f, vec2 t, vec2 v) { float diff = t.y-t.x; // K1 and n0 suggested by CRAN float K1 = .2 / diff; int n0 = 1; // The paper has the assumption that f(a)<0<f(b) but we want to // support f(a)>0>f(b) too, so we keep a sign flip float s = v.x < v.y ? 1. : -1.; // Using log(ab)=log(a)+log(b): log2(x/(2ε)) <=> log2(x/ε)-1 int nh = int(ceil(log2(diff/eps)-1.)); // n_{1/2} (half point) int n_max = nh + n0; // ε 2^(n_max-k) = ε 2^n_max 2^-k = ε 2^n_max ½^k // ½^k is done iteratively in the loop, simplifying the arithmetic float q = eps * float(1<<n_max); while (diff > eps+eps) { // Interpolation float xf = (v.y*t.x - v.x*t.y) / (v.y-v.x); // Regula-Falsi // Truncation float xh = (t.x+t.y) * .5; // x half point float sigma = sign(xh - xf); float delta = K1*diff*diff; // save a pow() by forcing K2=2 float xt = delta <= abs(xh - xf) ? xf + sigma*delta : xh; // xt: truncation of xf // Projection float r = q - diff*.5; float x = abs(xt-xh) <= r ? xt : xh-sigma*r; // Updating float y = poly5(a,b,c,d,e,f, x); float side = s*y; if (side > 0.) t.y=x, v.y=y; else if (side < 0.) t.x=x, v.x=y; else return x; diff = t.y-t.x; q *= .5; } return (t.x+t.y) * .5; } This function can be used as a drop'in replacement for bisect5. I had a lot of expectations about it, but in the end it requires more iterations than the bisection we implemented. The paper claims to perform at least as good as a bisection, but our bisect5 is driven by the derivatives so it converges much faster. Here is the heat map with itp5 instead of bisect5: Heat map of the iterations of Cem Yuksel algorithm with ITP method Conclusion The naive unrolled version of Cem Yuksel paper definitely is, so far, the best choice for our problem. I have still concerns about how to implement a good quadratic formula, and I have my reservations about various edge cases. There is also still room for improvements in the cubic solver (degree 3) because it's still a special case where analytical formulas exist, but in general this implementation is satisfying. The next step is to work with chains of Bézier curves to make up complex shapes (such as font glyphs). It will lead us to build a signed distance field. This is not trivial at all and mandates one or several dedicated articles. We will hopefully study these subjects in the not-so-distant future.

The idea that we must always linearize sRGB gradients or work in a perceptually uniform colorspace is starting to be accepted universally. But is it that simple? When I learned about the subject, it felt like being handed a hammer and using it everywhere. The reality is a bit more nuanced. In this article we will see when to use which, how to use them, and we will then see why the situation is more dire than it looks. Code snippets Before we start, since we are going to use GLSL as language, following are the reference functions we will use for the rest of the article. vec3 s2l(vec3 c) { // sRGB to linear return mix(c/12.92, pow((max(c,0.0)+0.055)/1.055,vec3(2.4)), step(vec3(0.04045),c)); } vec3 l2s(vec3 c) { // linear to sRGB return mix(c*12.92, 1.055*pow(max(c,0.0),vec3(1./2.4))-0.055, step(vec3(0.0031308),c)); } vec3 l2oklab(vec3 rgb) { // linear to OkLab const mat3 rgb2lms = mat3( +0.4122214708, +0.2119034982, +0.0883024619, +0.5363325363, +0.6806995451, +0.2817188376, +0.0514459929, +0.1073969566, +0.6299787005); const mat3 lms2lab = mat3( +0.2104542553, +1.9779984951, +0.0259040371, +0.7936177850, -2.4285922050, +0.7827717662, -0.0040720468, +0.4505937099, -0.8086757660); vec3 lms = rgb2lms * rgb; return lms2lab * pow(lms, vec3(1.0/3.0)); } vec3 oklab2l(vec3 lab) { // OkLab to linear const mat3 lab2lms = mat3( +1.0000000000, +1.0000000000, +1.0000000000, +0.3963377774, -0.1055613458, -0.0894841775, +0.2158037573, -0.0638541728, -1.2914855480); const mat3 lms2rgb = mat3( +4.0767416621, -1.2684380046, -0.0041960863, -3.3077115913, +2.6097574011, -0.7034186147, +0.2309699292, -0.3413193965, +1.7076147010); vec3 lms = lab2lms * lab; return lms2rgb * (lms*lms*lms); } Also, the output of the pipeline will be expected to be sRGB all the time. Color gradients To illustrate how sRGB, linear RGB and OkLab respectively look like, let's interpolate between two colors with each one of them: Color gradients from top to bottom: sRGB, linear, OkLab The 3 stripes were generated like this: vec3 o_srgb = mix(c0, c1, v); vec3 o_linear = l2s(mix(s2l(c0), s2l(c1), v)); vec3 o_oklab = l2s(oklab2l(mix(l2oklab(s2l(c0)), l2oklab(s2l(c1)), v))); Where v is simply the x coordinate between 0 and 1, c0 the left color, and c1 the right one. Note The input colors are considered to be sRGB in input. Similarly, we always make sure to output sRGB at the end (with l2s()) because that's what the pipeline expects. Key takeaways: sRGB is not acceptable because of this grayish/brownish zone, which is also perceived darker. In various situations this creates undesirable muddy midtones. In general, it's wrong and broken to do that. Linear is better from a purely physical point of view as it models the mixing of light energy properly. But from a color perception point of view it's not ideal, for example here it has this transition into pinkish which might not be desirable. The last one is using OkLab for a perceptually uniform gradient; it is the one providing the best result for our human perception, at a certain performance cost. The general consensus is as follow: if you need a color transition within a shape or texture, or some sort of color map, OkLab is the best tool, while linear is cheap, physically correct, and usually acceptable visually. But what about monochrome gradients? Things are not as obvious as they seem when we work in monochrome. If instead of red and blue we pick black and white, this is what happens: Grayscale gradients from top to bottom: sRGB, linear, OkLab Suddenly this tells a whole different story. sRGB becomes perfectly acceptable, while linear favors way too much the lightness, and OkLab remains the best. The linear gradient felt acceptable before, but now it is highly questionable. Just to be clear, the linear strip is linear, you can see it as linear energy or casually said "wattage", to which our perception does respond non-linearly. At this point one may even argue that sRGB looks best. So what can we do about this? First of all, we always need to question what we are trying to achieve, and fortunately sometimes we can take a few shortcuts. For example, let's say we want to depict a heat map in black and white. In my previous article I had to display 2D noise, so I wanted the observer to experience a linear perception of the "height" of the noise. In this case, working in sRGB (that is, doing zero effort with regards to perception) is actually a better call than mixing between black and white in linear space: Noise 2D with height as sRGB (left) or linear (right) Here we are comparing these two: vec3 o_srgb = vec3(v); // equivalent to mix(black, white, v) vec3 o_linear = l2s(vec3(v)); // equivalent to l2s(mix(black, white, v)) Note We removed the mix out of the formulas because black=vec3(0) and white=vec3(1), which have the same value when uncompressed to linear space. To do things right we may want to use OkLab but this feels overkill since this is just a straightforward monochromatic signal. Fortunately, the perceptual lightness can be fairly simple to model. With monochromatic input, OkLab uses L=x³, which is basically equivalent to do a gamma correction with γ=3. This means that we can simplify the OkLab interpolation we used before to the very simple: vec3 o_oklab = l2s(vec3(v*v*v)); // equivalent to l2s(oklab2l(vec3(v,0,0))) Noise 2D with height remapped to human lightness perception Doing this simple operation is exactly equivalent to interpolating between black and white in OkLab space, except it's just 2 extra multiplications. We still need to be extra careful if we want to swap the black and white. v needs to be swapped before the gamma encoding, and that means before the sRGB gamma encoding as well: Top to bottom: srgb(1-v³) (incorrect), 1-srgb(v³) (incorrect), srgb((1-v)³) One extra trick: combining gammas sRGB has a curve that closely approximates a gamma correction γ=2.2. So sometimes, instead of using l2s(rgb), we may prefer to use the simpler pow(rgb,vec3(1.0/2.2)). It means we could replace l2s(vec3(v*v*v)) with the following to merge the two operations: vec3 o_oklab = vec3(pow(v, 3.0/2.2)); // combination of v³ and gamma 2.2 (sRGB-like) encoding And the white-to-black version: vec3 o_oklab = vec3(pow(1.0-v, 3.0/2.2)); Warning Whenever you use pow, make sure your input is positive. Adding a max(v,0.0) for safety might be reasonable in certain cases. The difference between a proper sRGB conversion and the combined gamma is pretty small: Top: srgb(v³), bottom: v^(3/2.2) Alpha blending and pre-multiplication Sometimes, instead of fading colors into each others, we need to compose shapes, textures, masks, ... This need for compositing, or blending, arises when the pipelines are separated, meaning we are not working in the same fragment shader for everything. For example, we could have a shape generated in a fragment, which we need to overlay onto a surface. That shape might have some non-binary transparency, either for anti-aliasing purposes, a blur, or similar. An example of a shape partially transparent If that shape were to be blend onto another colored surface, we would like to have the same effect as the gradient earlier. For well-known reasons, it is likely that this shape would end up as a pre-multiplied color, which would be blend onto one or more layers. If what I just said is confusing, I recommend checking out this good article on alpha compositing from Bartosz Ciechanowski. The literature is quite extensive on the subject so I will assume familiarity with it. Of course, if we are to do things right, the blending would have to happen in linear space. Do not consider sRGB blending in alpha blending, it's an even more terrible idea than before because of the bilinear filtering, transforms or mipmaps that can happen between the pre-multiplication and the blending itself. But that means we would end up with the linear gradient shortcomings from earlier, wouldn't we? And this is where things get ugly. Look at the difference between a linear and an OkLab blending, in black and white: Blending of a blurry white circle onto black, left is linear, right is OkLab If we invert the colors: Blending of a blurry black circle onto white, left is linear, right is OkLab We have the exact same problem as earlier, but seeing it with an actual blending of shapes makes the problem particularly striking. The white and black OkLab circles look the same size (because they are), and they don't have the unfortunate "bobbing" effect of the linear version (on the white onto black). Warning The OkLab blending is done with pre-multiplied Lab colors. It is important not to pre-multiply linear values which are then converted to OkLab, this will give very unexpected results. The problem is, it is very unlikely that your whole graphics pipeline would switch to OkLab for every textures and buffers. And since most of the time the pipelines are built for more than just black and white, the cube hack suggested earlier has a very limited scope. In the case of shape blending, it is almost certain that the whole pipeline would not be contained in a single shader where you can just mix in OkLab. You're probably thinking of using sRGB, but in a blending pipeline this really is a terrible idea. Final words In practice, neither sRGB nor pure linear blending give good results, and using OkLab is not always an option. And unfortunately, I don't have a good answer to this whole situation. My next article is about anti-aliasing where this problem also exists, and I must admit this whole ordeal puts me in quite some distress; I had to talk about this issue first.