SDF-UInode-based ui for generating sdf shaders

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 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 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:

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

Live version is running on firebase:, and code is open sourced: szymonkaliski/SDF-UI.

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

Szymon Kaliski © 2019