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.
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
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.
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.
Focus: The Pixel Shader
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.
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 means we are giving the computer a package of 4 numbers.
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.
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.
Top Left (1.0, 1.0)
Top Right
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).
Solid Brick
You cannot see through it at all. Fully solid.
Dirty Glass
Half solid, half see-through. Colors blend together.
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).
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.
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.
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.