SDF Studio

A visual editor for creating 2D Signed Distance Fields and exporting them directly to GLSL.

SDF Studio lets you build complex 2D shapes visually instead of hand-writing distance functions.

Compose primitives, organize them in a scene graph, combine them with Boolean operations, and see the result instantly in a live WebGL2 preview. When you're done, export the scene as standalone GLSL and integrate it directly into your own shaders, games, or rendering engine.

https://linkdd.github.io/sdf-studio

Features

• Live WebGL2 preview
• Visual scene graph with hierarchical transforms
• SDF primitives including circles, boxes, rounded boxes, triangles, ellipses, capsules, segments, polygons, stars and arcs
• Union, subtraction and intersection
• Sharp or smooth Boolean operations
• Interactive move, rotate and scale gizmos
• Dedicated polygon vertex editor
• Fill, stroke, colors and stroke width
• JSON import/export for editable projects
• GLSL export with no dependency on SDF Studio
• Generated distance-only and antialiased color functions
• Automatic local storage
• Runs entirely in your browser

The generated GLSL exposes a simple distance function:

float sdScene(vec2 p, mat3 sceneTransform); 

as well as a ready-to-render antialiased version:

vec4 sdSceneColor(vec2 p, mat3 sceneTransform, float pixelSize); 

This makes SDF Studio useful for game UI, procedural graphics, vector-like game assets, shader effects, icons, decals, particles, and custom rendering engines.

Projects remain editable as JSON, while exported GLSL is self-contained and can be used independently of the editor.

Free and open source — MIT licensed.