HLSL: DirectX Shading Language

Write shaders for DirectX graphics.

Graphics ProgrammingHLSLShadersDirectXGraphics

Master High Level Shading Language to create vertex and pixel shaders for Windows graphics applications.

FILE: HLSL_BASICS

Graphics Guide

How Games Paint The Screen

HLSL is the language that tells your computer exactly how to draw 3D objects, lights, and textures. Let us make it simple.

DirectX

Shaders

GPU

What is HLSL?

HLSL stands for High-Level Shading Language. Do not let the big words scare you. Think of a 3D game as a giant coloring book.

The game gives the computer the blank outlines of the objects. HLSL is simply the instruction manual that tells the computer:

Where the outlines should be on your flat screen.
What colors to use to fill them in.
How light bounces off them so they look real.

Why "High-Level"?

In the old days, programmers had to write instructions in zero and ones or very confusing math codes.

HLSL is "High-Level" because it is written using normal math words and English letters. It is much easier for a human to read and write.

The Two Brains

CPU

The Smart Manager

Your computer's main brain (the CPU) is like a very smart professor. It can solve incredibly difficult math problems, but it solves them one by one. It runs the game rules, moves the players, and counts the score.

GPU

The Army of Workers

Your graphics card (the GPU) is like an army of 10,000 workers. They are not as smart as the professor, but they can paint 10,000 dots on your screen at the exact same time. HLSL is the language you use to give orders to this army.

The Graphics Assembly Line

The 3D Shape (Input)

The game sends a bunch of points to the graphics card. These points connect to make a 3D wire frame of an object, like a car or a character.

Vertex Shader (Moving Points)

This is the first HLSL program. It takes the 3D points and flattens them so they fit on your 2D monitor screen. If the camera moves, this program moves the points.

Filling the Blanks (Rasterization)

The graphics card figures out which tiny dots (pixels) on your screen are inside the flat shape. It creates a list of dots that need to be painted.

Pixel Shader (Coloring Dots)

This is the second HLSL program. It runs one time for every single dot. It decides if the dot should be red, blue, dark, bright, shiny, or dull.

Focus: The Vertex Shader

A Vertex is just a fancy word for a corner point. A triangle has 3 vertices. A simple box has 8 vertices.

The Vertex Shader is a small piece of code written in HLSL. Its main job is to figure out where these points are on your screen.

Example: If your character is walking away from you, the Vertex Shader makes the points move closer together, making the character look smaller in the distance.

Moves 3D points to the 2D screen.

Focus: The Pixel Shader

Paints every single dot on the screen.

A Pixel is one tiny square of light on your monitor. If you have a normal HD TV, there are over 2 million pixels on the screen.

The Pixel Shader is another HLSL program. It runs incredibly fast, calculating the exact color for millions of dots 60 times a second. It handles all the fine details to make things look real.

Example: If a character walks into a dark cave, the Pixel Shader calculates the math to mix the character's colors with dark black, creating a shadow.

Textures: Digital Wrapping Paper

If we only used pure math, games would look like smooth plastic toys. To make a brick wall look like bricks, we use Textures.

What is it?

A texture is just a regular flat picture (like a photo of real bricks).

How HLSL uses it

The HLSL Pixel Shader acts like scissors and glue. It cuts out pieces of the flat photo and wraps it smoothly over the 3D shape.

Shining a Light

In real life, light bounces off objects into your eyes. In a computer, we have to fake this using math. HLSL does this perfectly.

Without Light

An apple is just a flat red circle on the screen. It looks fake.

With HLSL Math

HLSL checks which side of the apple faces the sun. It makes that side bright red, and the other side dark red. Now it looks 3D!

Reading HLSL Code

Let us look at a real, simple HLSL Pixel Shader. Do not panic. It is just telling the computer to paint everything green.

// This is a note for humans. The computer ignores this.

// Below, we make a rule called "MakeItGreen"

float4 MakeItGreen() : SV_TARGET

{

// Colors are numbers from 0.0 (none) to 1.0 (full)

// The order is (Red, Green, Blue, Solidness)

return float4(0.0, 1.0, 0.0, 1.0);

}

float4

This means we are giving the computer a package of 4 numbers.

(0.0, 1.0, 0.0, 1.0)

0 Red, Full Green, 0 Blue. The last 1.0 means it is solid, not see-through.

The Windows Bridge

HLSL does not work alone. It needs DirectX to carry its messages.

What is DirectX?

DirectX is a tool created by Microsoft for Windows computers and Xbox consoles. If your game code is a city, and your graphics card is an island, DirectX is the bridge that connects them.

The game uses DirectX to send the 3D models.
DirectX carries the HLSL code to the graphics card.
Because of this teamwork, Windows is the best system for big video games.

Speed and Performance

When you play a game, you want it to run smoothly, right? This is called having a good "frame rate" (like 60 pictures per second). Because the Pixel Shader runs on every single dot, millions of times a second, the code must be very fast.

Bad Code

If you ask HLSL to do extremely hard math on every single dot, the graphics card slows down. The game will stutter and freeze.

Good Code

Smart programmers write HLSL that fakes complex things using easy math. The picture looks the same, but the game runs perfectly smooth.

Vectors: The Number Packages

In normal math, a number is just one thing (like the number 5). In HLSL, we often need to group numbers together. We call these groups "Vectors". They are just boxes that hold multiple numbers side-by-side.

float1

Just a single number. Used for things like the thickness of fog.

float2

Two numbers. Used for flat 2D screens (Left/Right and Up/Down).

float3

Three numbers. Perfect for 3D space or mixing Red, Green, Blue colors.

float4

Four numbers. Used for colors plus Alpha (how see-through it is).

The 3D Map

To draw anything in 3D, the computer needs to know exactly where it is. It uses three invisible lines to measure everything.

X-Axis

Moves Left and Right.

Y-Axis

Moves Up and Down.

Z-Axis

Moves Forward and Backward (Depth).

The Ticking Clock (Time)

If you want something to move without the player touching the controller, you need Time.

The main brain (CPU) constantly yells out the current time to the graphics card (GPU). The HLSL code uses this changing number to make water wave, fire flicker, or neon signs blink.

// Math formula in HLSL

Height = sin(Time)

As 'Time' ticks upward, the math makes the 'Height' gently float up and down, creating a wave!

UV Mapping: Pinning the Picture

We know we wrap 3D objects in 2D pictures (Textures). But how does the computer know which part of the picture goes on which part of the object?

It uses UV Coordinates. This is simply a tiny 2D map placed over your picture. The bottom-left corner is always 0. The top-right corner is always 1.

(0.0, 1.0)
Top Left (1.0, 1.0)
Top Right

Texture Image

(0.0, 0.0)
Bottom Left (1.0, 0.0)
Bottom Right

Normal Mapping: Faking the Bumps

The Expensive Problem

Real 3D bumps (like the rough surface of a brick) require thousands of tiny 3D triangles. Asking the graphics card to draw millions of tiny triangles for a brick wall will crash the game. It is too slow.

The HLSL Magic Trick

Instead, we use a perfectly flat wall. We then paint a special colorful picture on it called a Normal Map. HLSL reads these colors and tricks the lighting math. The light bounces off the flat wall as if there were bumps there. It looks bumpy, but runs incredibly fast!

Ghosts and Glass (Alpha)

How do we make windows, ghosts, or smoke? We use the 4th slot in our color package, called Alpha. It goes from 1.0 (solid) to 0.0 (invisible).

1.0

Solid Brick

You cannot see through it at all. Fully solid.

0.5

Dirty Glass

Half solid, half see-through. Colors blend together.

0.0

Empty Air

Completely invisible. The computer throws this pixel away.

The Relay Race

Remember the assembly line? The Vertex Shader runs first, and the Pixel Shader runs second. They need to talk to each other.

The Vertex Shader puts information (like colors or positions) into an envelope. To make sure the Pixel Shader opens the right envelope, it writes a label on it. In HLSL, these labels are called Semantics (like COLOR or POSITION).

Vertex Shader

[Envelope labeled: COLOR]

Pixel Shader

The Game's Remote Control

Sometimes the main game needs to tell the graphics card about global changes. For example, the player walked into a poison swamp, so the whole screen needs a green tint.

To do this, the CPU uses a Constant Buffer. Think of it as a remote control panel with knobs. The CPU turns the "Poison Tint" knob up, and the HLSL code instantly reads that knob and changes the colors.

Sunlight Power

Fog Thickness

Poison Swamp

The Traffic Jam (Branching)

CPUs love "IF"

The CPU is smart. If you tell it, "If it is raining, open the umbrella, else wear sunglasses," it easily takes one path and ignores the other.

GPUs hate "IF"

The GPU's army of 10,000 workers must march exactly together. If you give them an "IF" statement, half the workers stop and wait while the other half works. This causes a massive traffic jam.

Golden Rule: In HLSL, try to use straight math instead of "If/Else" choices!

Where Do You Write It?

Visual Studio

The classic text editor. You type raw code into `.hlsl` files and compile them yourself.

Unity Engine

Unity uses a slightly modified version called "HLSLPROGRAM". It makes applying the code to objects much easier.

Unreal Engine

Unreal uses visual nodes to build shaders, but behind the scenes, it translates all those visual nodes into pure HLSL code.

The Final Checklist

It is a Language

HLSL talks directly to the graphics card to draw graphics.

Vertex Shader

Moves the 3D points to the right place on your screen.

Pixel Shader

Paints the exact color for every single dot (pixel).

Speed is Key

Good HLSL code makes games run fast without freezing.

HLSL: DirectX Shading Language

The 3D Shape (Input)

Vertex Shader (Moving Points)

Filling the Blanks (Rasterization)

Pixel Shader (Coloring Dots)

What is it?

How HLSL uses it

Bad Code

Good Code

More in this series

Data Management

Systems Programming

Data Science

Scientific Computing

Graphics Programming

Game Development

Hardware Design

Enterprise & Backend

Web Development

Mobile Development

Scripting & Automation