What do I do with HLSL Language ?

HLSL is the acronym for High-level shader language. A language that can be used to create shaders, which are essential program components for creating and rendering 3D graphics, and are designed to be compiled to run on GPUs.

In order to write a shader using HLSL language you can use SHADERed. A free open-source IDE that enables you to debug and live preview your shaders. So, for our first code with HLSL, we are going to install and use SHADERed.

• on Windows:

  Go to this SHADERed official page and click on the download button corresponding to your windows version (32 or 64 bits). Unzip the downloaded archive, and you will find the program itself. You can run it by double clicking on the SHADERed.exe file.

• on Ubuntu :
  • First you must have flatpak already installed on your system. If it is not the case, you can follow these steps to do so:
  
  sudo apt update
sudo apt install flatpak
sudo apt install gnome-software-plugin-flatpak
flatpak remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo
  
  
  • Now you can install SHADERed:
    • go to this installation page
    • click on the install button ( it will download the org.shadered.SHADERed.flatpakref file)
    • double click on the downloaded file or open it by selecting the file then right-clicking on the mouse then select open with software install
    • click on the install button
    • the app will be installed. You can launch it, at the end of the installation from the software install dialog by clicking on the launch button

• open shadered
• click on file / new / hlsl
• click on project/create/texture => select this image file (to download first)
• select objects tab /right click on the image / click on bind /select simple
• save your project under the name hello.sprj
• on pipeline tab : right click on Simple  and click on edit code / Vertex
• add the lines in yellow to the code :
  
  
  Copy Code
  cbuffer cbPerFrame : register(b0)
{
        float4x4 matVP;
        float4x4 matGeo;
};

struct VSInput
{
        float3 Position : POSITION;
        float3 Normal : NORMAL;
        float2 UV : TEXCOORD;

struct VSOutput
{
        float4 Position : SV_POSITION;
        float4 Color : COLOR;
        float2 UV : TEXCOORD;
};

VSOutput main(VSInput vin)
{
        VSOutput vout = (VSOutput)0;

        vout.Position = mul(mul(float4(vin.Position, 1.0f), matGeo)     , matVP);
        vout.Color = 1;
        vout.UV = vin.UV;
        return vout;
}




• on pipeline tab : right click on Simple and click on edit code / Pixel
• add the lines in yellow , and delete ( or comment out as in here) the line in orange 


Copy Code
struct PSInput
{
        float4 Position : SV_POSITION;
        float4 Color : COLOR;
        float2 UV : TEXCOORD;
};

Texture2D tex : register(t0);
SamplerState smp : register(s0);

float4 main(PSInput pin) : SV_TARGET
{
        // return pin.Color;
        return tex.Sample(smp, pin.UV);

}



• save your project

If you want to add something about the language or about this post, please feel free to do it by commenting below 🙂 .