Coster-Graphics

Unity Shader Graph StarField Tutorial

Generate a single star,
Repeat the star in a grid layer,
Use grid cell IDs to give each star individual properties,
Duplicate the grid layers several times,
Animate the layers to suggest flying trough space.

0. Introduction

In this tutorial we will create an awesome looking star field shader using Unity’s node-based shader creation tool Shader Graph.
Though ShaderGraph is not the only way to create this shader, there is a lot that we can learn from re-creating/translating the original Starfield shader code that was created by Martijn Steinrucken from The Art of Code YouTube channel.

By doing this tutorial you will learn:

• How to generate a star using nothing but nodes.
• How to repeat the same star in a grid using the fraction node.
• Hot to give each grid cell’s star individual properties like size, position and colour by generating an ID value for each grid cell.
• How to add the contribution of all the neighbouring grid cells stars so the stars wont have their edges cut off.
• How to layer multiple grids on top of each other with different scaling so it looks like there is depth in between.
• How to animate the star layers coming towards us so it looks like we’re flying trough space by increasing scale over time.
• How to create sub-graphs…lots of ’em!

Before you start, know that this ShaderGraph, consisting of one normal graph and four sub-graphs, can also be created by using a custom function node with an .hlsl include file containing the StarField method in normal code, (see step 7.0 if you want to go at it that way) but I suspect that you are here for a learning experience and to ‘mess’ around with ShaderGraph nodes. You can definitely apply everything that you learn from following this tutorial to many other shader graphs that need a semi-random repeating pattern!

This tutorial was written using Unity 2019.4.3f1 LTS using the URP (Universal Render Pipeline).

Credits go out to The Art of Code for creating the original Starfield shader. Definitely checkout this YouTube channel for the original code tutorial and for his other cool shader tutorials!

1.0 The ShaderGraph and Sub-Graphs Structure

The complete ShaderGraph Starfield will consist out of one primary/main ShaderGraph that we’re going to call StarField.
Inside of StarField we will use a sub-graph called StarGridLayerAnimation.
Inside StarGridLayerAnimation we will use a sub-graph called StarGridLayer.
Inside StargridLayer will use a sub-graph named StarGrid.
Finally inside StarGrid will use a sub-graph called Star.

The dependency tree for the ShaderGraph and sub-graphs:

Starfield
↓
StarGridLayerAnimation
↓
StarGridLayer
↓
StarGrid
↓
Star

We will start by creating the main StarField ShaderGraph with the nodes for creating a single star first. Then we will pack those nodes into a nice Star sub-graph and then we will do the same with the other three sub-graphs, working our way up. We could create the sub-graphs all beforehand but that is not the way this ShaderGraph was created or how you would normally create it, so that would be less of a learning experience.

Anyway,.. let’s get started!…

If you want to see the shader in the Scene View during creation you can add a quad or any other model to the scene and apply a material to it that uses the shader graph shader that we’ll create in step 2:

3.0 Star Grid

To generate a grid of repeating stars we first take the UV coordinates and multiply/tile it with a larger number than one and then we take the fractional component of the coordinates..
If you increase the tiling of the UV for instance by four then the UV coordinates will go from 0 to 4 instead of going from 0 to 1.
By taking only the fractional component of those coordinates (the numbers after the dot) we get a UV that goes from 0 to 1 four times instead of going from 0 to 4:

In other words, the fraction of 1.5 is the same as the fraction of 2.5 so both are 0.5 because Fraction gets rid of the integer part of a number. (If you add the fraction of a value to the floor of the same value then you just get the original value back.)

Add a new Vector1 property to the StarField’s blackboard called ‘Grid Tiling‘ with a default value of 4.
Add a Tiling and Offset and a Fraction node and plug the fraction of the tiled UV into the Star’s UV input to generate a repeating grid of stars:

3.1 Grid Cell ID

If we want to give the stars in each grid cell unique properties, like variations in size and colour, we need some kind of value that is different for each cell. To get a unique (two-dimensional) ID for each grid cell we can use a Floor node. What floor does is sort of the opposite of what Fraction does. Instead of getting rid of the integer part of a number floor gets rid of the fractional part of a number, So 1.5 floored will be 1 and 2.5 floored will be 2.
By looking at tiled and then floored UV coordinates we can get the exact column and row indexes of the grid cell that those coordinates are in. For instance if the floored UV coordinates (1.5,1.5) will be (1,1) meaning that the point is in column 1 of row 1…

Add a Floor node and connect its input to the Tiling and Offset’s output to generate the Grid Cell IDs:

If you want to get a better visualisation for the grid cell ID’s you can divide the output of the Floor node by the value of Grid Tiling. The reason why the preview of the Floor node doesn’t show the ID’s properly without dividing is because colours don’t go higher than 1 in the previews:

3.2 Debug Outlines (Optional)

Because in the next step we are going to offset the stars inside of their cells it will get a little bit hard to see what is going on and where the ‘cell walls’ are. So before we move on we can create a Debug Outlines function to show the cell borders with red outlines. This method is optional but recommended so we and any end-user of the shader can more easily see what this shader actually does by flipping the exposed Debug boolean that this function introduces. For now checkmark the default value for Debug to true so we can see the red outlines in the graph’s preview:

3.3 Random Star Positions

If we would want the star positions to increase or decrease in size evenly across the grid then we could use the generated ID’s directly but we want the stars to get random offsets so we have to use those ID’s to generate some random numbers with. Luckily there already is a Random Range node that we can use for that. The Random Range node takes in an (x, y) seed/position as an input and spits out a single random float value based on the position that we put in..

Add a Random Range and a Subtract node.
Connect the Floor node’s output to the Random Range seed input and then subtract it from the Grid UV before connecting it to the Star:

We have some random offsets now but because we’re using the same value for the x and y offset it is always diagonal and because we’re offsetting the stars too much some of them have completely disappeared from view…

Add another Subtract node and subtract 0.5 from the random value to keep the stars inside of the cells:

To get a different random y offset we could use another Random Range node and add an offset to the seed position to get a different random number thats still based on the ID. An even shorter way is to just multiply the random value that we already have by a large number and then take the fraction of that value..

Add a Multiply, Fract and Vector2 node.
Multiply the random value by a larger number, for instance 34.5 and use the fractional component of that for the y value of the Vector2 node. Use the original random value for the x offset:

Because we’ve now changed the input type for the Subtract node from Vector1 to Vector2 we have to make sure to also subtract 0.5 from the y-axis:

3.4 Adding Neighbour Cell’s Stars

As you can see we’ve stumbled upon another problem here. Because we’ve offset the stars inside their boxes parts of the stars are now cutoff. We can fix this by adding the contributions of each surrounding neighbour cell’s star to each of the cells.
So for the cell with ID (1,1) we also add the stars from cells (0,0), (1,0), (2,0), (0,1), (1,1), (2,1), (0,2), (1,2), (2,2):

Each cell has 8 closest neighbours so we will end up with adding up a total of 9 stars for every grid cell. The original star plus the 8 neighbours. In regular shader code we could do this easily by using two nested x and y for-loops but unfortunately there is no ‘for-loop-node’ or ‘for-loop-group’ functionality that we can use in ShaderGraph at this time. We will just need to hard code our for-loop ourselves.
We could do this by copy/pasting the entire node setup for the grid eight times but it is more efficient to create another sub-graph first..

3.5 StarGrid Sub-Graph

Select the entire node setup except for the UV and the Unlit Master nodes and the Debug Outlines group.
Right-click to create a new sub-graph and call it ‘StarGrid‘.
Re-drag the properties back in the graph and connect them with the new StarGrid node’s inputs, then duplicate StarGrid and the properties 8 times and Add them all up:

Because we’re now adding 9 StarGrids based on the same UV coordinates all the stars will look much brighter so instead of using the current UV coordinates for all the grids we need to offset the UV coordinates to the coordinates of the 8 local neighbouring cells:

We can do this by adding a Offset property to the StarGrid sub-graph first..

Open up the StarGrid sub-graph and create a new type Vector2 property named ‘Grid Cell Offset‘.
(Also rename the ‘Vector4‘ property to ‘UV‘ on the blackboard again)
Add Subtract and Add nodes.
Subtract the offset grom the Grid UV before it goes into the star and Add the offset to the Grid Cell ID before it goes into the Random Range:

Because the StarGrid sub-graph is dependant on the UV input from the main graph the node previews do not work. If you want to see what is going on inside the sub-graph you can temporarily use a UV node instead of the UV property.
Just make sure to change it back when you’re done and to give all the properties on the sub-graph’s blackboard the right default values or all the previews will still remain black!:

Another option that seems to work (but I haven’t tested it fully) is to check if the UV property is equal to zero. If it is then we use the UV node and otherwise we use the UV property. This way you can see the previews in the sub-graph without breaking the main-graph:

Return to the main StarField graph and assign the right offset values to the StarGrid nodes. From top to bottom in the graph the 9 Grid Cell Offsets are,
(-1,-1) (0,-1) (1,-1) (-1,0) (0,0) (1,0) (-1,1) (0,1) (1,1):

This neatly fixed the problem with the cutoff so now we really can have repeated stars with individual random offsets!

Because we’re now adding the neighbour grid cells we can also fade-out the stars over twice the distance so if you want the stars to have larger and smoother fade-out then you can change the Smoothstep node to go from 1 to 0 in the Star sub-graph:

3.6 Random Star Sizes

Right now each star still has the same size but we can use a random value again and multiply the star by that value to get different sizes. We could use the same random value that we already have but then the size would be directly related to the offset so we can just create another random value the same way we did with the y offset value, by multiplying by an even larger number and getting the fraction of that value again..

Open the StarGrid sub-graph and add two Multiply and one Fract nodes.
Get the fraction of the random value multiplied by a number larger than the one used for the star y-offset, for instance 345.6 and then multiply the star by that value:

We can choose to only use the flares on the largest stars by adding a Smoothstep node to smoothstep from 0.9 to 1 over the the Random size to control the Star Flare input with:

(We won’t need the Star Flare property on the StarGrid sub-graph and on the main-graph’s blackboards anymore so you can remove them.)

3.7 Random Star Colours

We can use the same approach as with the random size and position to get a new random value for the star colours. For the colours we can keep it simple and artistic and just use a gradient. I’ve chosen a gradient that goes from blue, to white, to yellow, to red to represent the colours that we see the stars in, just to have some logic to it, (https://en.wikipedia.org/wiki/Stellar_classification) but feel free to choose your own colours just based on what looks good:

To increase the chance of a star being red we can use a Square root node before sampling the gradient but this is optional, we could also setup the gradient differently to increase the odds in favour of red.

Add a new Gradient type property named ‘Star Colours‘ to the blackboard and add a Multiply, Fract, Square root and a Gradient Sample node.
From right to left,..bear with me.., sample the Star Colours gradient with the square root, of the fraction, of the random value, multiplied by a larger number than the one used for the star position, for instance 3456.7:

Make sure to change the Out node’s type from Vector1 to Vector4 so the sub-graph can return all four RGBA colour channels instead of just one channel for black and white:

3.8 Twinkling Stars

Finally to give our stars some random twinkling we can get ourselves a new random value and use it to make the stars brightness go up and down periodically by the sinus of the time.

Add Time, Multiply, Sine and Remap nodes.
Remap the sine of the time from -1 <> 1 to 0.1 <> 1.
Multiply time by the speed that you want the stars to twinkle at. I’ve chosen to hardcode it at 3 but you can also create an exposed property for the twinkle speed and multiply it by that value if you want..:

Now the brightness from all the stars will up and down at the same time but we can just add a random value to the time to make the stars twinkle ‘ahead of schedule’ randomly.
Because the period of a sine wave is two Pi we multiply the random value that goes from 0 to 1 by two Pi (6.2831)…

Add Multiply and Add nodes and add the random value multiplied by at least 6.2831 to the time:

Save the StarGrid sub-graph and return to the main StarField graph…

3.9 StarGridLayer Sub-Graph

In the next steps we are going to add multiple star grid ‘layers’ together and animate the scaling so it will look like we’re flying trough space. In normal shader code we would just add up all the layers inside of a for-loop but we cannot do this in ShaderGraph so we’ll create another sub-graph that we can re-use first…

Select all of the nodes in the StarField graph except for the UV and Unlit master node.
Right-click to ‘Convert to Sub-Graph‘ and call the sub-graph ‘StarGridLayer‘:

Reconnect all of the properties to the StarGridLayer node:

7.0 StarField .hlsl Custom Function Node Version

// StarField.hlsl

#define NUM_LAYERS 6.0

float2x2 Rot(float a) {
    float s=sin(a), c=cos(a);
    return float2x2(c, -s, s, c);
}

float Star(float2 uv, float flare) {
    float d = length(uv);
    float m = 0.05/d;
    
    float rays = max(0.0, 1.0-abs(uv.x*uv.y*1000.0));
    m += rays*flare;
    uv = mul(uv,Rot(3.1415/4.0));
    rays = max(0.0, 1.0-abs(uv.x*uv.y*1000.0));
    m += rays*0.3*flare;
    
    m *= smoothstep(1.0, 0.2, d);
    return m;
}

float Hash21(float2 p) {
    p = frac(p*float2(123.34, 456.21));
    p += dot(p, p+45.32);
    return frac(p.x*p.y);
}

float3 StarLayer(float2 uv, float t) {
	float3 col = float3(0.0,0.0,0.0);
	
    float2 gv = frac(uv)-0.5;
    float2 id = floor(uv);
    
    for(float y=-1.0;y<=1.0;y++) {
    	for(float x=-1.0;x<=1.0;x++) {
            float2 offs = float2(x, y);
            
    		float n = Hash21(id+offs); // random between 0 and 1
            float size = frac(n*345.32);
            
    		float star = Star(gv-offs-float2(n, frac(n*34.0))+0.5, smoothstep(0.9, 1.0, size)*0.6);
            
            float3 color = sin(float3(0.2, 0.3, 0.9)*frac(n*2345.2)*123.2)*0.5+0.5;
            color = color*float3(1.0,0.25,1.0+size)+float3(0.2, 0.2, 0.1)*2.0;
          
            star = mul(star,sin(t*3.+n*6.2831)*0.5+1.0);
            col += star*size*color;
        }
    }
    return col;
}

void StarField_float(float2 UV,float Time, int Layers, out float3 Out) {
    float2 uv = UV + float2(-0.5,-0.5);
    float t = Time;
    
    uv = mul(uv,Rot(t));
    float3 col = float3(0.0,0.0,0.0);
    
    for(float i=0.0; i<1.0; i+=1.0/Layers) {
        float depth = frac(i+t);
        float scale = lerp(20.0, 0.5, depth);
        float fade = depth*smoothstep(1.0, 0.9, depth);
        col += StarLayer(uv*scale+i*453.2,t)*fade;
    }
    
    col = pow(col, float3(0.4545,0.4545,0.4545));	// gamma correction

    Out = col;
}