# signed distance functions Published articles for signed distance functions. 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. ## 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