Godot Shaders

Godot Shaders

Most people meet a shader as a strange file of math. One idea makes it readable: a shader does not paint the whole screen. It decides the color of one pixel, and the graphics card asks it about every pixel at once. Learn what a shader is, the three functions Godot calls, how to set one up on a node, and how to give it dials with uniforms. Part of a series on Godot shaders. Liam, in for Bear, narrates.

Chapters 0:00 Opening 0:07 The question 0:21 Key terms 0:35 I · One Pixel, All at Once 2:05 II · Setting Up a Shader 3:19 III · The Three Functions 5:14 IV · Dials: Uniforms 6:51 V · Where Am I, and When? 8:36 Recap 8:55 Your turn

Your turn. Paste this into Claude: Write a Godot canvas item shader for a Color Rect. One float uniform called fill, with a hint range from zero to one. The left part of the rectangle, as wide as fill, is red. The rest is transparent. Then point me to the three lines I should check. Then check two things yourself.

• Check: the Inspector shows a Fill control with a slider bar.
• Check: at fill point five, exactly half the rectangle is red.

Sources

• Godot 4.7 documentation, read 2026-10-13: introduction to shaders, the shading language, canvas item shaders, your first 2D shader, and the ShaderMaterial class reference (docs.godotengine.org/en/stable).
• Godot 4.7.2 itself: every result on screen is a scripted capture of a real run, with its renderer stated; the editor frames are scripted editor sessions.

Honest notes. The narration is a synthetic voice (Liam, in for Bear) and has not yet been reviewed by ear. The numbers in the film were run in Godot 4.7.2 on an Apple M4 Pro. The facts have not yet been signed off by Bear. Nobody has watched this film yet.

Made with the brutalist.art toolkit: Manim, Remotion and Kokoro, free and local. An independent educational film.

What this video covers

• 0:00 — Opening
• 0:07 — The question
• 0:21 — Key terms
• 0:35 — I · One Pixel, All at Once
• 2:05 — II · Setting Up a Shader
• 3:19 — III · The Three Functions
• 5:14 — IV · Dials: Uniforms
• 6:51 — V · Where Am I, and When?
• 8:36 — Recap
• 8:55 — Your turn

Transcript

A lightly formatted transcript of the video, with timestamps so you can jump to any section on YouTube.

Opening

[0:00] Godot Shaders, learn what a shader is, the words you will meet along the way, and how to write one that your game can control.

The question

[0:07] Hello, this is Liam in for Bear. Most people meet a shader as a strange file of math. One idea makes it readable. A shader does not paint the whole screen. It decides the color of one pixel, and the graphics card asks it about every pixel at once.

Key terms

[0:21] Five terms. The GPU is the graphics chip, many small workers running at once. A pixel is one dot of the picture. A vertex is a corner point of a shape. A texture is an image a shader can read, and a material tells Godot how to draw a surface.

I · One Pixel, All at Once

[0:35] A game can work and still look flat, same sprite, same background, nothing broken. A shader is the part that decides how it looks, the wobble, the glow, the water, the outline. A shader is a small program that runs on the graphics card, the GPU. It decides how something is drawn. Your game code decides what exists and where. The shader decides what each part looks like. Why a second chip? The CPU is a few fast workers doing one job after another. The GPU is a crowd of small workers all doing the same job at once. A picture is millions of identical little jobs. Here is the slow way. A GDScript loop colors every pixel of a full HD picture one at a time. That is over 2 million calls for one picture. Watch what it costs. On this Mac, that loop took

About 55 milliseconds. A game running at 60 frames per second has 16 and a half milliseconds for everything. This is one gradient, and it is more than three times the whole budget. The shader way describes one pixel. This line says, "The red amount is how far across the shape this pixel sits." Nothing loops. The graphics card runs the line for every pixel, and the gradient appears. Drawing that same gradient this way cost the processor about four hundredths of a millisecond only to hand over the job. The graphics card did the pixels. Its own time could not be read on this setup, so there's no number for it. So, a shader flips the question. not for each pixel do this, instead write down what one pixel should do and let the card do it everywhere. A shader decides the color of one pixel.

II · Setting Up a Shader

[2:06] Where does a shader live? In a file. You attach it to a node through a material. The node holds a shader material and the shader material holds your shader. In the editor, that is a few clicks. In the node's material slot, choose shader material under new. Click it and in its shader slot, choose new shader. Set the mode to canvas item since it starts on spatial and create it. Godot opens the shader editor. What you type there is Godot's own shader language. It is similar to a standard one called GLSL, but simpler. If you can read a few lines of GDScript, you can read it. It is strict about types and statements

End in semicolons. The first line of every shader says what it is for. Canvas item is for 2D drawing and interface. Spatial is for 3D. Particles, sky, and fog are for those. This film uses canvas item. The ideas carry over to 3D with a few different names. The smallest working shader has one function and one line. In the function called fragment, set color to four numbers, red, green, blue, and how visible it is. 1001, pure red, fully visible. A shader can have up to three special functions and the engine calls them for you, vertex, fragment, and light. You write what each one does. Godot decides when it runs and how many times.

III · The Three Functions

[3:19] Vertex runs once for each vertex, each corner point of the shape. A plain rectangle has four corners, so vertex runs four times. Its job is to place the corners. A real run. This vertex pushes the bottom two corners 50 pixels to the right and leaves the top two alone. The whole picture leans because the card fills in everything between the corners. Between the corners, you calculate nothing. The left edge slides evenly from top to bottom, 50 pixels over 128 rows. That is why vertex alone cannot ripple a plain rectangle. Four corners can only make straight edges. Fragment runs after the corners are placed. It runs once for each pixel the shape covers, and its job is to set that pixel's color. The shape is already decided. Now the card asks about every pixel inside it. You will hear this called a pixel shader or a fragment shader. Same job, two names. Microsoft's Direct3D says pixel. OpenGL, Vulkan, and Godot say fragment. The careful word is fragment because a fragment is a

Pixel to be. It is only a pixel to be because it can still be thrown away or blended with others. This shader says discard for the right half. Fragment ran there. No pixel came out and the background shows through. The third function light runs once for each light that touches a pixel. Two lights, two runs, and the results add. If you write light, it replaces Godot's default lighting even when it is empty. Here we only name it. So, the order of work is fixed. First, vertex places the corners, then the card fills in the shape, then fragment colors each pixel. Information flows one way, forward. Inside these functions, the engine hands you values called built-ins written in capital letters. Some come in like a pixel's address and the time. One goes out, the color you set. Which ones exist depends on the function. So far, vertex runs once per corner and places things. Fragment runs once per pixel and colors things. Light runs once per pixel for each light and lights things.

IV · Dials: Uniforms

[5:15] A shader that always draws the same red is not much use. Your game needs to say more red now, less red later. But the shader lives on the graphics card out of reach. How do you talk to it? With a uniform. A uniform is a value you declare outside the functions and set from outside the shader. Here is one called red from zero to one. The shader reads it. The shader can never change it. In the editor, that line becomes a slider. In the inspector, under shader parameters, there's a control labeled red. Drag it and the picture changes while you watch. Three uniforms make a color mixer, red, green, blue, each its own slider. The shader puts the three numbers together into a color. The part after the colon is a hint. It tells the editor how to show the uniform. A range adds a slider bar. Source color gives a color swatch that

Opens a picker. A hint shapes the editor, not the math. A hint does not clamp. If your game code sets the value to seven, the shader receives seven. The slider only guards the editor. If a range matters, enforce it in your code as well. From the game, you set a uniform with set shader parameter. Get the node's material, then pass the uniform's name and a value. The name is case sensitive, and it must match the shader exactly. Get the name wrong, and nothing happens, no error. The value is stored as an unused parameter. The real uniform keeps its default, and the effect never appears. When a shader ignores your game, check the spelling first. You can animate a uniform, too. Set its starting value from code, then tween it, and the shader follows every frame. Skip the first step, and the tween has nothing to start from. That is how a shader answers to gameplay.

V · Where Am I, and When?

[6:51] A uniform is one value, the same for every pixel in the draw. Some inputs must differ, because each pixel needs to know where it is. The engine hands those in, and they are different for every pixel. Two kinds of input, then. A uniform is set by you. A built-in is set by the engine. Both are names the shader can read, and some built-ins, like the time, are the same for every pixel, too. Now, the pixel's address. UV runs from zero to one across the shape, and zero to one down. The top left is zero zero. The bottom right is one one. In 2D, the second number counts downward. Use the address as a color. Red is how far across. Green is how far down. Left to right, red grows. Top to bottom, green grows. The corners give it away. Black, red, green, yellow. Use it as a fade instead. Multiply the alpha by the horizontal address. The left edge is invisible. The right edge solid. One line, no loop, no second image. Now time, time

Counts up in seconds. Put it inside a sign and you get a smooth back and forth between minus one and one. Scale that to zero to one and the color breathes. One catch, time is not the age of your node. It is one clock for the whole game started with the engine. Add a node three seconds in and it already sees three seconds gone. So for a one-time effect, a fade in or a reveal that starts when something happens, do not lean on time. Use a uniform and let your game drive it from zero to one when the moment comes. Put it together, a circle that opens from the middle. For each pixel, measure the distance to the middle of the shape. If it is more than the radius, discard the pixel. The radius is a uniform. Now drive it from the game. When the player presses a key, tween the radius from zero to point eight and the picture opens like an iris. The shader holds the rule, the game holds the moment. Let's

Recap

[8:37] Recap with Claude. A shader decides the color of one pixel and the card runs it for every pixel. A shader lives in a file on a material on a node. Vertex places the corners, fragment colors the pixels, light lights them. A uniform is a dial your game sets the same for every pixel. The address says where a pixel is. Time is one clock for everyone. Your

Your turn

[8:56] Turn, paste this into Claude. Write a Godot canvas item shader for a color rect. One float uniform called fill with a hint range from zero to one. The left part of the rectangle is wide as fill is red. The rest is transparent. Then point me to the three lines I should check. Then check two things yourself. Does the inspector show a fill control with a slider bar? And at point five is exactly half the rectangle red? Godot shaders at Nick Bear Brown.