Szymon Kaliski

SDF-UI

SDF-UI ↗ is a node-based DSL for generating complex shapes using SDF, GLSL and WebGL.

SDF stands for Signed Distance Function - a function which returns the shortest distance between given input point and some surface. Sign of returned value indicates if point is inside, or outside that surface. Complex scenes can be defined in terms of SDFs and calculated using raymarching.

One of the nicest properties of SDFs is ease of manipulating shapes with constructive solid geometry (CSG): intersection, union and difference can be represented as simple operations on distances from two surfaces: example of CSG operations with SDF-UI ↗

For more explanation on SDFs visit:

• https://en.wikipedia.org/wiki/Signed_distance_function ↗
• http://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions/ ↗
• http://iquilezles.org/www/articles/raymarchingdf/raymarchingdf.htm ↗

Project was made with react ↗, react-gl ↗, redux ↗ and immutable ↗. Some of the SDF/GLSL code was borrowed from stack.gl ↗ and hg_sdf ↗.

Live version is running on firebase: https://sdf-ui.firebaseapp.com/ ↗, and code is open sourced: szymonkaliski/SDF-UI ↗.

You can read more about process behind making this project on the blog: building SDF-UI.

Backlinks

1. 2023-05-20SDFSheets — A Spreadsheet of Signed Distance Functions¹
2. 2018-11-25hiccup-sdf — Modeling with Signed Distance Functions¹
3. 2018-01-28DIY Monome¹
4. 2017-09-08Building DAS-UI — Keyboard-Based Visual Programming Language²
5. 2017-02-28Building Wallgen — Evolving Abstract Wallpapers with GLSL¹
6. 2017-01-31Building SDF-UI — Node-Based UI for Generating SDF Shaders⁵