👋 Introduction to S&box Shaders

-Learning Material-

📋Getting Started/Setting Up

-Setting Up Project-

1. Opening the S&box Editor make a new Empty - Game Project.

   

2. Once the project opens make your way to the top left and select the Edit tab. Then, select the Preferences tab.

   

3. Finally, in the General tab make sure your Code Editor is set to VS Code (you might have to download it), and make sure Fast Hotload is checked.

   

-Things to know-

-Setting Up IDE-

-Creating a New Shader-

1. Make Your way to the Asset Browser in your project and create a shaders folder. Once done open the folder.
2. Inside the shaders folder click on the [+ New] Icon in the top left of the Asset Browser, or Right Click on any empty space within the folder.
3. Select the Shader Option, then the Unlit Shader Option.
4. Give it a name mine will be Unlit Shader. Click Confirm!

Alright now while this is a "completed" unlit shader you haven't learned anything about making one. That's what we are going to do now! First, let's get the scene set up for visualizing the changes to our shader.

-Setting Up Scene for Shader-

1. Right click the shader and select Create Material this will make a .vmat (Valve MATerial) using our shader. Name it and save it.
2. Now in our Hierarchy let's create a sphere game object and center it in our scene.
3. Drag and drop the material we creating previously onto the sphere. That will replace the default material with our own.
4. Now we double click and open up that shader.  
5. Select all the code in the file and delete it.  ;(  [DO NOT SAVE FILE] it will Crash the Editor.

🧬 Understanding Shader Anatomy

// FEATURES block is for implementing options that you can click in sidebar of the material editor
FEATURES
{
    
}

// MODES block implements shader modes. They define ways to render with different passes or conditions.
MODES 
{
    // This is a main rendering mode. You may want to always include it. 
    Forward();
    
}

// COMMON block allows defining variables and other data that you can access from any shader stage.
COMMON
{
    
}

// In this area you can define any structs, or other stuff. 

// VS block is your Vertex Shader, and obviously where vertices are manipulated.
VS
{
    
}

// PS is a Pixel Shader (aka fragment shader). This is the final stage and where the color is manipulated.
PS
{
    
}   

📝First Shader - Unlit Shader

-Writing an Unlit Shader-

•  Let's start with what we know. Add the code below to your Shader File

FEATURES
{
    
}

MODES 
{ 
    Forward();
}

COMMON
{
    
}

VS
{
    
}

PS
{
    
}

-FEATURES Block-

• For now, let's keep it as simple as possible. Your shader will not compile without a specific core HLSL file that handles all the built-in options. Add this line to the FEATURES block of your new shader file: 

FEATURES
{
    #include "common/features.hlsl"
} 

-MODES Block-

• For this guide, we only need to include Forward(); in the MODES Block 

MODES
{
    Forward();
    //Depth(); // Try adding Depth if you want and see if you can see the changes
}   

-COMMON block-

• For an Unlit Shader we don't really need anything  accessible by both stages so just add the follow include statement.

COMMON
{
    #include "common/shared.hlsl"
}

-Vertex Input Struct-

• Add this Code in the empty space between the COMMON block and the VS block

struct VertexInput
{
    #include "common/vertexinput.hlsl"
}; // don't forget the semicolon won't compile without it

 -Pixel Input Struct- 

• Add this under your Vertex Input Struct

struct PixelInput
{
    #include "common/pixelinput.hlsl"
}; // same here don't forget the semicolon 

-VS Block-

• Include the core file (again...)
• Now add the Main Function. Passing in VertexInput struct.

 VS
{
    #include "common/vertex.hlsl"

    PixelInput MainVs( VertexInput i )
    {
        
    } 
} 

• Create a var of type PixelInput and initialize it with the ProcessVertex(i) function. (notice we pass in our Vertex Input)
• Finally, return the FinalizeVertex() passing in our variable o we created.

VS
{
    #include "common/vertex.hlsl"
        
    PixelInput MainVs( VertexInput i )
    {
        PixelInput o = ProcessVertex( i );

        return FinalizeVertex( o );
    }
}     

-PS Block-

• Include the core file (again... again...) 
• Now add the  MainPS()  Function passing in the PixelInput struct.
• Add : SV_Target0 at the end of the MainPS() function. This is a Semantic that says that the Pixel Shader returns a color.

PS
{
    #include "common/pixel.hlsl"

    float4 MainPs( PixelInput i ) : SV_Target0
    {
        
    } 
}

• Create a float3 this will be our color variable the values are represented as x, y, and z. Though, they are also interpreted as r, g, and b. (red, green, and blue channels) set them to as shown should output a red color.
•  We will lastly add a return because the MainPS returns a Color. That Color is represented as a float4 so we will need to convert our float3 to a float4 this is done by construct an new float4 variable and assigning our col variable to the first part of the float4  and a 1 value to the last part or the float4.

PS
{
    #include "common/pixel.hlsl"

    float4 MainPs( PixelInput i ) : SV_Target0
    {
        float3 col = float3( 1, 0, 0 );

        return float4( col, 1 );
    }
}

• Your finished script should look like this

FEATURES
{
    #include "common/features.hlsl"
}

MODES
{
    Forward();
    //Depth(); // Test out if you want
}   

COMMON
{
    #include "common/shared.hlsl"
}

struct VertexInput
{
    #include "common/vertexinput.hlsl"
};

struct PixelInput
{
    #include "common/pixelinput.hlsl"
};

VS
{
    #include "common/vertex.hlsl"
    PixelInput MainVs( VertexInput i )
    {
        PixelInput o = ProcessVertex( i );
        return FinalizeVertex( o );
    }
}    

PS
{
    #include "common/pixel.hlsl"
    float4 MainPs( PixelInput i ) : SV_Target0
    {
        float3 col = float3( 1, 0, 0 );
        return float4( col, 1 );
    }
} 

That's the whole shader save the file with Ctrl + S and see it update automatically in the Scene View this is an Unlit Shader.

We can even change the values in the float3 col = float3( 1, 0, 0 ); to get different colors.

For Example -

•  float3 col = float3( 0, 1, 0 ); is green
•  float3 col = float3( 0, 0, 1 ); is blue
•  float3 col = float3( 1, 1, 1 ); is white
•  float3 col = float3( 0, 0, 0 ); is black

📝Second Shader - Unlit Scrolling Texture Shader

-WIP-