RSDF Converter - About

Foreword

This is a short practical description of RSDF. For a thorough explanation please<br>await my paper on the topic or get in touch to discuss.

What is RSDF?

RSDF is a method for rendering scalable vector-like graphics in real-time<br>environments like videogames. It extends signed distance fields (SDFs) to support<br>more than two colours by using multiple alternating SDF regions.

Creating RSDFs

To use the tool upload your SVG input, set the size of your output, change other<br>settings as needed (the defaults should work fine), and click Convert. If<br>the output has an undesirable scale or placement in the output please tweak the<br>Placement settings. I recommend saving the outputs with the Save<br>button as directly saving the canvases ignores transparent texels, and uses a less<br>descriptive filename.

I will add that the converter is entirely local . No files are<br>sent to my website, and your work remains private.

Using RSDFs

Using RSDFs will require the RSDF itself and an accompanying colour image.<br>Import these into your program of choice, and pass them as input textures to a<br>material or shader from this repository.<br>Sampling functions have also been provided to mix RSDF into your own materials and<br>shaders.

Note: if you are using Blender you must manually specify the size of your RSDF<br>and colour textures inside the material.

How does it work?

RSDF itself draws inspiration from Viktor Chlumský’s<br>Multi-Channel SDF (MSDF)<br>method, wherein both use multiple SDFs to improve some aspect of the output image.<br>MSDF uses multiple channels to create sharp discontinuities and corners — a notable<br>flaw of native SDF. RSDF uses multiple channels to split the shape into different<br>non-overlapping regions of continuous colour. By taking the minimum channel (or<br>maximum in inverted mode) shaders can identify which region/s a pixel belongs to<br>and perform partial sampling.

Partial sampling is very similar to regular pixel interpolation except that some<br>texels are discarded and the mix is manually normalised. Discarding texels in other<br>regions allows them to have completely different colours, meaning they can be<br>stored in the same image without blurring. The following diagram shows an example<br>space between four texels and the blends made by ignoring different texels:

All partial bilinear sampling permutations. Note the different gradients.

Why SVG?

The accompanying tool has been built to take Scalable Vector Graphics (SVGs) as<br>input since RSDFs aim to render vector-like graphics. SVGs reliable, precise,<br>widely-supported, and well-defined, but I understand they are not often used in<br>pipelines due to their difficulty. In the future I hope to extend this tool to take<br>high resolution bitmap input, but this method will be less robust and effectively<br>require a second back-end.

Are there limitations?

RSDF is theoretically capable of representing any arrangement of regions, as<br>regions reduce to planar graphs subject to the four colour theorem. There are<br>practical limitations (alongside converter issues),<br>however:

Very low resolutions will struggle; Thin strips and narrow corners create<br>undefined colours when lacking nearby region texels, and small features cause<br>opposing edges to interfere within the SDFs.<br>Since these issues only occur for features smaller than a texel,<br>increasing the image size will fix it.

Texels belonging to multiple regions reintroduce colour bleed. However,<br>this allows regions to border themselves.<br>The converter has an option to mark bleed texels for manual<br>correction. Simply change one of the offending RSDF texel’s channels<br>by one in an image editor.

Despite using multiple fields, RSDF corners are not as sharp as MSDF. While<br>there is minor three- and four-way intersection self-sharpening other corners<br>and edges are equal to plain SDFs.

Consider if MSDF partial sampling is stylistically acceptable instead.

While an MSDF for every channel fixes the issue it negates memory<br>gains, complicates the pipeline, and adds tons of redundant data.