Your First Shader from ZERO in Godot 4 | GDQuest Library

LibraryLearning ResourceShaderModern game engines like Godot use many shaders under the hood.What is a shader? It's a program that runs directly on your computer's graphics card. Shaders control how the GPU draws 3D models, particles, 2D sprites, and more to the screen.When getting started making games, you don't necessarily have to learn how to program shaders. Godot provides you with many built-in visual effects that you can tweak without writing shader code. Also, the Godot community created many free shaders you can find on Godot Shaders, or in GDQuest's free and open source shader collection. You can copy their code into your game and use them as a starting point.But to get the exact look you want, have fun creating unique visual effects, or make your game run faster, you eventually need to learn how to code shaders.For example, when you see a glowing portal in a game, grass moving in the wind, or animated 2D water in a platformer, these effects are powered by shaders.The water in this side-scroller game is entirely drawn and animated with shader code.This detailed beginner's guide will help you get started. It will teach you how to write your very first 2D shader in Godot 4.You will create an animated portal shader, one step at a time.This effect will teach you many transferable techniques that you will need for all sorts of 2D and 3D visual effects:Drawing simple shapes using mathCreating soft edges and transitions with the smoothstep() functionUsing masking to combine multiple shapes into complex onesUsing periodic functions to animate the visuals over timeUsing noise to create effects that look more naturalSampling textures to read colors from any image and bring visuals into your shaderYou will also learn how shaders are different from traditional programs and the mindset they require. You will learn how to think like a technical artist by breaking complex visual effects into small, manageable problems. You will also learn how to debug shaders using Godot's great shader visual debugging feature.Pre-requisitesThis guide is for people who have no experience with shaders or graphics programming. But it focuses on visual effects, so we don't teach basic programming concepts like variables or loops. We assume you already know the basics of GDScript and Godot.You should be comfortable with:Navigating the Godot 4 editorCreating nodes and changing their propertiesReading and writing common GDScript codeIf you are new to Godot, here are some free resources to help you learn the basics:Learn GDScript From Zero is our interactive app to learn the basics of code with Godot's GDScript programming languageMake Games with Godot: Beginner Edition is a free learning path for people completely new to GodotThis tutorial is sponsored by all the new and experienced developers who are currently following GDQuest's curriculum to learn how to make games with Godot.If you purchased Learn 2D Gamedev From Zero with Godot 4 or any other course GDSchool, thank you! Your support is what allows us to provide free guides like this one for everyone.NathanFounder and teacher at GDQuestShaders can seem scary because they require a different way of thinking than traditional programming. While gameplay code is sequential, shader code runs entirely in parallel on the graphics card.This is a large guide, so bookmark it, work on it over several sessions, and come back to it later for a refresher! Like any form of programming, it will take time and practice for shaders to become comfortable.Let's start with the minimum amount of theory you need to not get lost as we start coding our shader hands-on.NOTE:If you need help, you encounter a problem, or you have feedback to share, you can post it in the first-shader-godot-4 channel in our Discord server.1. The vertex and fragment shadersAs I mentioned in the introduction, a shader is a program that tells your graphics card (Graphics Processing Unit or GPU for short) how to draw on the screen.To draw on the screen, the GPU goes through a series of predefined steps called the Rendering Pipeline. These steps turn a shape and input data like images into the pixels you see on the screen. By default, the engine takes a texture image that you provide and draws it within a Sprite2D node's bounds. You can use shaders to change the default behavior of these steps.To get started coding shaders in Godot, you only need to know about two stages of the pipeline: the vertex shader and the fragment shader.We will code a fragment shader in this guideIn this guide, we will code entirely in the fragment shader, which is the shader type you will use most in 2D games. But we still need to quickly look at the vertex shader because it prepares the shape that the fragment shader fills with pixels.In short, the vertex shader controls the outer geometric shape and the fragment shader draws pixels within this shape.The vertex shaderThere's one thing to know about the graphics card: it can only draw triangles that are then filled with pixels. A Sprite2D node, for example, is a rectangle made of two triangles. Within this rectangle, the GPU paints transparent and opaque pixels to create the sprite's appearance.So, to draw an object to the screen, the GPU first needs to determine the shape of the object. It does this using vertices, which are the points that define that shape.If you have ever created a 3D model, you are already familiar with vertices. They are all the corner points that you can edit when working with a 3D art program. In this image, I selected one vertex of a cube in the 3D art program Blender:The vertex of a 3D cubeBut vertices are not exclusive to 3D models. Flat 2D elements like sprites need to have a geometric shape as well. For example, in Godot, the rectangle shape of a Sprite2D node is defined by four vertices. The four vertices are represented as diamond shapes here:Other 2D nodes, like Polygon2D, can have more than four vertices to create more complex shapes:By default, the GPU gives a node its shape by using the vertices as they are and placing them on the screen. The vertex shader lets you change the position of each vertex and, by extension, skew or offset the shape of the object itself.In Godot, we use a function with a specific name to tell the GPU which code to run for each shader stage. To use the vertex shader, we define a function called exactly vertex() in the shader code.When we define the vertex() function, the GPU runs it for every vertex in parallel. We won't need this function in this guide because we don't need to change the portal's outer rectangle.We're talking about it here because it always runs before the fragment shader in the rendering pipeline. This means you will run into it every time you work with shaders.We won't write any vertex shader code in this guide, but knowing that it exists and where it fits in the pipeline will help you understand learning resources about shaders and other people's shader code.OldDewTeacher at GDQuestThe fragment shaderAfter the vertex shader gives a node its outer shape, the rendering pipeline needs to determine the color and transparency of each pixel inside that shape. The step that controls this is the fragment shader.By default, Godot takes the node's texture and places all of its pixels into the shape output by the vertex shader. But you can change this behavior by writing your own code in the fragment() function.The fragment shader runs for every pixel of an object and returns the color that pixel will get. You can assign a value to COLOR inside a function named fragment() to modify or completely change the resulting image. For example, this code turns a sprite into a black rectangle:void fragment() { COLOR = vec4(0.0, 0.0, 0.0, 1.0); }Now that you know what the fragment shader does, let's create the smallest scene on which we can test one.In the next section, we will set up a Sprite2D and give it a custom shader so you can try this yourself. We will build our portal from that.Why is this called a 'fragment' shader if it runs for every pixel?Strictly speaking, saying "the fragment shader runs for every pixel" is not exactly right, but it's a helpful lie that almost everyone uses!In graphics programming, a fragment is a candidate pixel. Fragments don't always end up as real pixels because during the rendering process some of them might be covered by other objects or discarded altogether.But in everyday shader work, you very rarely need to make that distinction. Thinking of a fragment as "the current pixel" lets you focus on how the shader works without getting distracted by the details of the rendering pipeline. So, unless explicitly mentioned, you can consider a "pixel" and a "fragment" as being the same thing.2. Setting up the Godot sceneBelieve it or not, you have already been using shaders ever since the moment you first opened Godot. Every game object you see in the game is drawn using a default shader that takes the object's texture and paints it on the screen.To create your own visual effects, you replace a node's default shader.Let's set up a scene where we replace a sprite's default shader. In a new Godot project, go to SceneNew Scene and click 2D Scene in the Scene dock to create a Node2D at the root.Then, add a Sprite2D node as a child of the Node2D. You can click on the Add button in the Scene dock to open the Create New Node dialog and search for Sprite2D.The Sprite2D node appears in the Scene dock, but it's still not visible in the 2D game view because it currently doesn't have a texture. To give it one, go to the Inspector dock where you'll find the Texture property. Click the Quick Load icon to open the texture selection dialog and double-click the default Godot icon to load it.The selected image now appears in the viewport. This is the default shader I was talking about in action! Godot draws the sprite's texture on the screen based on the Sprite2D node's position.Let's override this default shader.Attaching a shader