ShaderGraph Conversion - Custom Functions(Toon Lighting Example), Vertex Colors(Specular/Texture Painting)

Hi all!

Here's another ShaderGraph Conversion post

This time dealing with vertex colors effects like from the Polybrush and Vertex Colors Post,

And just like that post, you'll need PolyBrush (It's in the package manager now) or an equivalent vertex painting addon.

(And just to be sure, when you haven't set up vertex painting, it'll be set to White so all channels are full, flood it to black before painting effects)

First off, let's look at some (new?) features of Shader Graph I haven't talked about yet

Group Selection

To keep your graphs a bit more organised, you can group sections together and name themI think this was added after LWRP/Shader Graph 5.8, but just to be sure, I'm on 5.16 for this article :) 

Select the nodes you want to group and Right-Click > Group Selection, you can name the group by double clicking it.

Custom Node Function (Toon Lighting Example)

Since I believe LWRP/ShaderGraph version 5.8 there is a "Custom Function" node available, this node allows you to write a small piece of code in a textbox, or in a .hlsl file, that you can add to the shader graph

Here's the ToonLit Graph from this Post, before and after adding a custom function node. Also it no longer needs a seperate script to get the light direction!

Using a custom node for something like toon lighting can really clean up your graphs

To make this toon lighting node:

Create a new Custom Function node

As you can see there is Inputs and Outputs that you can set up here, these will result in what goes into and comes out of the custom node.

If you set the Type to String, you can type in some code to execute.

Here's the Custom Node details for the toon lighting. In the input we take the Normals, the material slider for Toon Ramp Fuzziness, and the Toon Ramp Color.

The output is a Vector3 Ramp, which returns the colored toon ramp.

  Light light = GetMainLight();
  float3 direction = normalize(light.direction);
  float d = dot(Normal, direction);
  float3 ramp = smoothstep(0 ,  ToonRampFuzziness,d )+ (RampColor);
  Ramp = light.color * (ramp) * (light.distanceAttenuation * 2);
   Ramp = 1,1,1;

Looking at the code, it's almost the same as the normal ToonLit shaders I've written about before.

We have to add a line about using the lightweight lighting so the shader can find the GetMainLight Function, and under the #else, define a standard value to return so we don't get an error

Here's the link to the Custom Node code for Toon Lighting : Pastebin Link
It has an extra output for light direction cause sometimes you want that for another effect :)

Vertex Colors

This part is very simple with Shader Graph, there's a node called Vertex Colors and it does all we need already! The vertex color node is a Vector4, to use the colors as a mask, we just need to add a Split node so we can read the RGB channels seperately 

It's just one node, so I'm not linking this one :P

Specular (Original Code)

I'll be using the Custom Function above for this effect

Rim Light

Let's look at the original code:

float rim = 1 - saturate(dot(IN.viewDir, o.Normal));
coloredRim= _RimColor.rgb * pow(rim, _RimPower);

The Fresnel Node already does the whole first line on it's own.
For the colored rim, we have a Power node, and a Multiply node to add the color,

To draw this effect only on the Red Vertex color, multiply it with the red channel

Specular Highlights

For the specular part, to keep it simple, I'm just doing an inverted fresnel with a cutoff

To create a specular highlight, invert the fresnel with a One Minus node, then Step through it for a nice hard cutoff, and Multiply with a color

Now just add the Toon Lighting Node, and the Main Texture, and you're done!

Specular Vertex Color Mask Full Image
ShaderGraph file attached

Texture Painting (Original Code)

This effect has a lot of TriPlanar Nodes, it's a bit of a mess but I'll do my best to explain it

Noise Triplanar

Again, we have a node that does a lot of the work for us, a Triplanar node, with a Vector1 for Scale

Secondary Texture on Red Vertex Color

Here's the standard Texture 2D asset, to give the vertex colors a noisy edge, Step through the red vertex color using the Triplanar Noise Texture.

Then, Multiply the Secondary Texture with the result of this Step

 Tertiary Texture on Green Vertex Color 

For a third texture, do the same thing, only this time using the Green channel of the Vertex Colors node

Base Texture (No/Black Vertex Color)

I'm showing the base texture last because we need the Red and Green noise-step vertex colors and invert them with a One Minus Node, then multiply the result of this with the base texture to show it only on the unpainted/black vertex color parts

Put these all together and you get a 3-texture painting shader :)

 Texture Painting Vertex Color Mask Full Image  

There are a few shader attached to this post:

- ToonLit ShaderGraph using the Custom Function

- Vertex Color Specular ShaderGraph using the Custom Function

- Vertex Color Texture Painting ShaderGraph PBR

 - Vertex Color Texture Painting ShaderGraph with Custom Function

Thanks for reading and have fun!

Become a patron to

Unlock 125 exclusive posts
Be part of the community
Connect via private message