tl;dr, here’s a free but functional editor for distance functions, with Blender style editing experience! (You get lots of free bugs, too! but I’ll fix when free time permits) 
Try it out! propolisa.github.io/sdf-editor
Features:
- Blender style:
- modifier stack
- keyboard (G / R / S) for transforms + optional number amount + axis constrain
- numpad for camera control
- perspective / ortho toggle
- Save scene as JSON
- Export scene as self-contained, optimized GLSL / WGSL
sdScene()function - Drag and drop scene tree for groups (CSG Booleans)
- Rudimentary materials (not trying to be PBR, just for fun and distinguishing shapes)
- Help menu for controls / usage
- Settings, mostly optimization related
- Though currently no hooks are exposed and you’d need to fork the repo, this supports integration with any Babylon scene, with proper depth sorting (useful if you’re designing a simple hull version of a character mesh, for example, and need to see them together).
Setting expectations: Initial shader compile takes a while and the frame rate can tank pretty easily, because on top of the expensiveness of raymarching the realtime editor scene is running a GPU-side virtual machine / bytecode executor, this is the only way to avoid needing shader recompile (see: CPU-hanging freezes) every time changes are made to the scene. It also means that the exported WGSL / GLSL shader (what you’ll probably use in your project in the end anyway) runs a lot faster, because they compile to a static expression.
There are some bugs I’d like help with from the great folks here, but I’ll ask about those in other threads; feel free to share the ones you see here, too!
A wall of text if you aren’t bored yet
A lot of demoscenes—like the ones on Shadertoy—are created using ray marching and signed distance fields: an interesting way to represent shapes as mathematical functions instead of triangles. You can do some crazy stuff, like smoothly blend shapes together. Unfortunately, rendering these fields directly isn’t real-time friendly once the scenes get very complex. Still, it’s a useful intermediate representation for some workflows—say, a modeling pipeline that ultimately generates a triangulated mesh. In my case, I’m making underwater creatures and want random variation in the models, which is hard to achieve with standard mesh booleans.
Distance fields are also great for simple local distance queries against approximate shapes—for instance, a character’s hitbox—without looping through complex topology data or maintaining acceleration structures like octrees.
Another possibility is a character customization system where you tweak lots of features and then “bake” the final mesh into a unique model for later use.
Anyway, I haven’t seen any browser-based editor for these distance fields, so I made one. Since I mostly used Blender in the past (2.x series), my editor borrows its concepts of scene tree, modifiers, and material workflow. The controls are basically the same as Blender’s, too—check the help menu for keyboard shortcuts.
I guess a non-obvious but important feature: This is an authoring helper for creating shader code in WGSL and GLSL to represent a complex signed distance field. When you have a scene you like, you can right click on any node in the scene tree and copy the function representation of that part of the scene (or the whole scene), in either WGSL or GLSL. So you can call it as a distance function it in any shader. Pretty cool right?
For example, here is the same fish scene in both GLSL on Shadertoy (live demo) and WGSL on compute.toys (live demo)
Thanks for reading and the nice engine & community! Out of curiosity have any of you ever used / needed something like this in your careers or hobbies?
