# signed distance functions A mathematical representation that gives a point's distance to a shape's surface, with the sign indicating whether the point is inside or outside the shape. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Building an Infinite Liquid Glass Grid with Three.js, WebGPU, and TSL DevFeed: [Building an Infinite Liquid Glass Grid with Three.js, WebGPU, and TSL]() Original publisher: [Read original article]() Author: Filip Kantedal Published: 2026-09-08T13:09:48Z Content type: tutorial Language: en Sources: [Codrops]() Topics: [webgpu](), [Three.js custom shaders](), [refraction shader](), [signed distance functions]() Tags: [3d-web-experiences](), [chromatic-dispersion](), [creative-coding](), [custom-shaders](), [glass](), [glass-shader](), [glassmorphism](), [gpu-rendering](), [infinite](), [infinite-carousel](), [infinite-grid](), [interactive-3d](), [liquid-glass](), [next-js](), [r3f](), [react-three-fiber](), [refraction-shader](), [sdf](), [shader-effects](), [signed-distance-functions](), [three-js](), [three-js-shading-language](), [three-js-webgpu](), [tsl](), [tsl-shaders](), [tutorials](), [video](), [webgl](), [webgpu](), [webgpu-shaders]() ### AI overview A tutorial on building an infinite liquid-glass grid in the browser with Three.js, WebGPU, TSL, custom shaders, and video textures. ### Source excerpt An exploration of infinite grids, liquid glass, and video refraction using Three.js, WebGPU, TSL, and custom shaders. ## Text rendering and effects using GPU-computed distances DevFeed: [Text rendering and effects using GPU-computed distances]() Original publisher: [Read original article]() Published: 2025-11-01T17:20:06Z Content type: tutorial Language: en Sources: [The Last Static Blog RSS]() Topics: [GPU](), [signed distance functions](), [Font](), [Algorithm](), [Mobile]() Tags: [algorithm](), [code](), [compute](), [effects](), [fonts](), [gpu](), [graphics](), [math](), [mobile](), [prog](), [render](), [text]() ### AI overview This tutorial explains how to compute signed distance fields for text glyphs on the GPU. It covers extracting glyph outlines, representing lines and Bézier curves as cubics, implementing the algorithm in a shader, and the trade-offs and effects enabled by the approach. ### Source excerpt 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 ## Volume Grids in Geometry Nodes DevFeed: [Volume Grids in Geometry Nodes]() Original publisher: [Read original article]() Author: Hans Goudey Published: 2025-10-07T20:29:49Z Content type: release Language: en Sources: [Blender]() Topics: [data](), [Data structures](), [Library](), [signed distance functions]() Tags: [3d](), [blender](), [data-structure](), [general-development](), [geometry-nodes](), [library](), [sdf](), [volume]() ### AI overview Blender 5.0 expands Geometry Nodes support for volumetric data with a new volume grid data type. Grids can store float, vector, and other primitive values, be modified with math nodes, and be viewed or attached to geometry. ### Source excerpt In Blender 5.0, Geometry Nodes support for volumetric data will be significantly better. ## Perfecting anti-aliasing on signed distance functions DevFeed: [Perfecting anti-aliasing on signed distance functions]() Original publisher: [Read original article]() Published: 2025-07-26T14:29:32Z Content type: article Language: en Sources: [The Last Static Blog RSS]() Topics: [signed distance functions](), [SDF]() Tags: [functions](), [graphics](), [math](), [prog](), [sdf](), [signed-distance-functions](), [visualization]() ### AI overview This article explains why anti-aliasing signed distance functions is more complicated than applying hardcoded constants or generic formulas. It develops anti-aliasing approaches from SDF properties such as the unit-length gradient and considers both inside/outside sign conventions. ### Source excerpt Doing anti-aliasing on SDF is not as straightforward as it seems. Most of the time, we see people use a smoothstep with hardcoded constants, sometimes with screen space information, sometimes cryptic or convoluted formulas. Even if SDFs have the perfect mathematical properties needed for a clean anti-aliasing, the whole issue has a scope larger than it appears at first glance. And even when trivial solutions exist, it's not always clear why they are a good fit. Let's study that together. SDF The article assumes that you are at least a bit familiar with what an SDF is, but if I had to provide a quick and informal definition, I would say something like: "It's a function (or lookup-table of said function, usually stored in a texture) which returns the signed distance from the specified coordinates to a given shape, where the sign indicates whether you're inside or outside the shape." A common visualization of it looks like this: SDF of a moving pie/pacman, using Inigo Quilez formula and colorscheme for visualization The distance is fancily colored here for illustrative purpose, and the shape is animated to see how it affects the field. Another way of seeing it is to switch to a 3D view: SDF of a moving pie/pacman, as seen in 3D For the sign interpretation, here we're using the convention positive inside and negative outside, as seen for example on the Wikipedia illustration. But this is not always the case, for example, Inigo prefers the opposite: negative inside and positive outside. I personally find the Wikipedia convention to be more intuitive and easy to work with, but that's a matter of preferences so we'll figure out the formulas for both models. Switching from one to the other is just a sign swap, but it's important to know what we are working with. Linear ramp A properly crafted SDF has a gradient of length 1, meaning the slope is either going up or down, but always at the same constant rate of 1: 1D side cut of an SDF depicting the gradient/slope This is an i ## Sneak peek of Rayven DevFeed: [Sneak peek of Rayven]() Original publisher: [Read original article]() Author: Stanko Published: 2023-03-22T00:00:00Z Content type: article Language: en Sources: [Stanko Tadić]() Topics: [Ray Tracing](), [signed distance functions](), [SVG](), [Rust](), [JavaScript]() Tags: [3d](), [article](), [javascript](), [ray-tracing](), [rust](), [signed-distance-functions](), [svg]() ### AI overview A progress report on Rayven, an unfinished project that renders 3D scenes with hand-drawn-style hatching. The article describes its signed-distance-function renderer, ray tracing and vector rendering experiments, and the planned combination of a Rust engine compiled to WebAssembly with JavaScript scene scripting. ### Source excerpt I would like to give you a preview of my new project that I'm really excited about - Rayven. It renders 3D scenes as if they were line-hatched by hand: I've had this idea for a while and after researching, I found three projects that became my inspiration: Michael Fogleman's ln, Kushiro's Hatch Lines Shader and Piter Pasma's Rayhatching. Finally, I decided to give it a try. Although it's far from finished, I want to share my progress. Once I'm satisfied with it, I plan to open-source it and write another post to show you under the hood. Meanwhile, I used it to create and plot these two drawings for Work&Co's tenth anniversary - version 1 and version 2 The first text render # The first step was to build a basic 3D renderer with objects defined as signed distance functions. It used text to render the scene and it was based entirely on Theia Vogel's great article. Better ray-tracing and the first vector renders # Then, I started improving the ray-tracing part. Articles by Inigo Quilez and Jamie Wong were immensely helpful. With proper ray-tracing in place, I began figuring out how to hatch a scene using vector lines. I started simple, using only vertical lines (image on the left). Then, I gradually worked my way to using vector fields (image on the right). Tweaking vector rendering # Once I had basic vector rendering in place, I spent a lot of time tweaking and experimenting. Here are some examples using lights, boolean operations, displacement, and different hatching options. In the first two images you can also see the raster output I'm using for debugging. Rust version # As you can imagine, the JavaScript version is not very performant. To speed up rendering, I decided to learn some Rust and port Rayven to it. Here are a few screenshots in the terminal, along with the SVG render at the end. Rust is fast, but it doesn't provide me with a short feedback loop, which is essential when I'm using Rayven to draw. On the other hand, JavaScript is slow, but being dynamic and