Guide: Custom Shaders

Keen Vectors is based on Shader Graph, allowing it to function on every render pipeline, and easing shader authoring for non-programmers.

Since distance fields are a very low-level primitive for graphics, the main things you need to know to work with them are:

  1. How to set your shader up so the asset can work with it;
  2. How to decode the distance field in your shader;
  3. The artistic properties of distance fields versus simple alpha masks;

Let's get straight to the point, with no examples or context. If you want something more on-hands, check out the Simple Morph Shader guide, it goes a bit slower and explains more context.

Using a Distance Field

  1. Create a Texture 2D property and take note of its Reference value;
  2. Create a Float property and set its Reference to <value from previous step>_PixelRange;
  3. If your shader is going to be used in UGUI, connect the Pixel Range to a Pixel Range Input node;
  4. Connect the pixel range to a Perspective-aware Range to ensure it respects the scale it's displayed at;
  5. Add a Sample MSDF node and connect your Distance Field to it and the desired UV;

If you just want a mask to draw the shape as-is, use Distance to Mask on the Sharp output.

Improving the material UI

  1. Go to the Graph Settings page of your shader's Graph Inspector;
  2. Set Custom Editor GUI to one of the following:

If you want to create your own shader GUI with sections, you can inherit one of the classes above, or directly from MsdfMaterialEditorBase if they are not useful.