SDF-UInode-based ui for generating sdf shaders
screenshot

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

csg

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

It's another iteration of my exploration of SDFs started with SDF-UI.

SDF-UI is a node-based DSL for generating complex shapes using SDF, GLSL and WebGL, that I've build in January 2017. You can read more about it here: projects/sdf-ui.

You can play with live version here: https://sdf-ui.firebaseapp.com/, it's good idea to open HELP if you are visiting for the first time.

Code is open sourced and available with MIT license here: szymonkaliski/SDF-UI.

This project was simpler than January's SDF-UI, and took 6 hours less to make (totaling in almost 24 hours of development time). There was a lot to figure out, and I ended up learning about webworkers, and implementing my first evolutionary algorithm after I finished college.

DAS-UI is another node-based experiment (after SDF-UI) that I've built during my one-project-a-month meta-project in 2017.

I've already built a few node-based UIs and I seem to quite like them (if you're curious about previous ones, you can read the intro to SDF-UI blogpost).

Next step was designing, and 3d-printing the case, since the boards were only connected by wires, the whole structure felt very fragile. As the case was a simple rectangle with holes for buttons and screws, I thought it would make sense to design it in code. I already played a with CSG (constructive solid geometry), some time ago while exploring thi.ng clojure libraries, and later while building SDF-UI.

Szymon Kaliski © 2021
mailtwittergithubwebring