svg-sdf-art

#webdev #codepen #programming #tutorial

This is a high-level overview of how I make art using a pen plotter, use it as breadcrumbs on your creative adventures. Below you'll find the working interactive version, try it yourself.

The problem
Scene to draw
Layers of the output
Finished drawings
Try it yourself
Relevant tech
See also

The problem

I have made some art using raymarching and SDFs, I would like to draw it on paper using my pen plotter. Shaders produce raster images but pen plotters need vector graphics, these two are not readily compatible. Is there a way to convert my raster image into a reasonably good looking vector version?

Pen plotters don't do well with drawing raster images, that's a job for regular printers; some details must be lost in the conversion. Here are the important characteristics to preserve and translate:

Art style should have a good sense of depth, distance and volume
Minimize pen plotter ups and down, maximize continuous lines
Switching from sculpting to printing should be quick and easy

Scene to draw

This is the scene I have sculpted with SDFs using GLSL. The fragment shader can output multiple views of the scene, these will be important for vectorizing the image.

Here's a breakdown of the different images in the carousel above -

Scene - This is full color version of the scene and where I spend most of my time doing the artistic SDF sculpting
Normals - Shows the normals of all surfaces, useful for drawing lines that follow the surface of objects
Distance - Encodes distance in grayscale
Object ID - Every object has its own ID, helps with plotting the borders of objects within objects
Shadow - Used to find the shaded regions of the image

Layers of the output

Using the buffers above and D3's contours library, the scene is converted to SVG vector data. Below is a view of each layer:

These are the layers that go into the final SVG canvas -

Object Outlines - Based on the Object ID buffer, captures some things that Contour Lines would miss
Contour Lines - Uses Normals Buffer, captures faces and curves of an object.
Shadow Outlines - Simple outlines of the shaded regions.
Shadow Regions - Uses cross hatching pattern to fill the shaded regions.
Crawl Lines - Randomly added lines that attempt to give a sense of distance and curvature to objects. Uses Normals Buffer to follow the surface of objects.

Finished drawings

Overall I am reasonably happy with the results. These are a few of the scenes I've plotted -

Try it yourself

Use the mouse to set the camera position, then press 'Generate SVG' to render the lines. The SDF modeling is done in the HTML section, look for the raymarchMap function.

It's possible to download each SVG layer individually and perhaps plot them in different colors.

Relevant tech

Three.js - Displays the shader in the browser
LYGIA Shader Library - Handles raymarching, SDF primitives and operations
D3 - Used to create SVG paths from the buffer data
Dat.GUI - Easy way to make things interactive, I use it heavily in my SDF sculpting workflow
CodePen - This is a static browser-based tool
AxiDraw v3 - Pen plotter; I'm working with A4 sized paper

DEV Community