Teaching

This article expands on the previous parts of the grass rendering series and makes it feasible for real-world use with a level-of-detail system utilizing impostors. If you want to implement a grass effect from scratch yourself, definitely go through the previous parts first, starting at Grass Rendering Series Part 1: Theory. However, this tutorial will also be useful if you just want to learn about level-of-detail systems in general, as I’ll provide some theory and show my general approach towards hand-crafting impostors with custom shaders....

When starting up an empty 3D scene in Godot, the editor provides a default lighting and environment setup. That way, you can start working on a scene without immediately having to figure out the lighting and background of a pitch-black scene. It looks something like this: This is a fine start as a general-purpose entry point. However, I’d argue that you’ll want to invest some time into changing this setup as soon as you get any close to working with production-ready assets; basically, as soon as your player stops being a white capsule....

In the previous part, Grass Rendering Series Part 2: Full-Geometry Grass in Godot, we worked on placing and shading blades of grass to get a realistic-looking field of grass into our scene. It looks nice, but it’s completely static: it looks good on screenshots, but in a game, you’d want your grass to look lively and react to what’s happening around it. Therefore, in this third part, we’ll add three ways of animating and interacting with the grass: wind, displacement, and cutting....

In this second part of the Grass Rendering series, we’ll go over one possible implementation of grass in Godot. It will be full-geometry grass, meaning that each grass blade is an actual 3D object. This is in contrast to the also very popular billboard grass, where multiple blades of grass (or other plants) are drawn onto a transparent texture, which is rendered onto quads scattered across the ground. If you haven’t read part 1, I’d recommend to check that our first: Grass Rendering Series Part 1: Theory...

This is part 1 of a multi-part series on grass rendering. We’ll start by figuring out how realistic grass should look like, and how herbage can be modeled with the tools we have at our disposal in real-time 3D graphics. Then, we’ll look at how to implement different methods of grass rendering in Godot. However, most of the tutorial will not be Godot-specific aside from some node names and syntax....

When we use a camera in a game, it’s usually to choose what the player sees and send it to the monitor. As explained in Introduction to Shaders, the GPU gets the current frame data from the CPU, processes it, and sends the final pixels to its video outputs (or to the operating system - this is essentially the difference between “Fullscreen” and “Windowed Fullscreen”). But that’s not the only thing you can do with a camera: you can also make it render to a texture and use that texture in a material or shader....

Handpainted Light Shader: Cross-Hatching in Godot showed how to use textures in light shaders to apply hand-painted shadows. We can use a similar technique for halftone shading, where shades of darkness are represented by black dots of varying size: This effect reads from a texture and wraps it in a step function to get dots of varying size, much like how we got a line of varying thickness in Godot Shader for Beginners: Lightning Strike Effect using step and smoothstep....

In Understanding Godot Light Shaders and Light Calculations by Implementing a Toon Light Shader, we discussed light shaders and how you can use functions like step() to switch from realistic to toon lighting. Here, we will use light shaders along with a hand-painted texture to create a cross-hatching effect. Cross-hatching is a (pencil) shading technique that looks like this: Bright areas are left blank, whereas darker areas are shaded with parallel lines....

In Introduction to Shaders, we discussed the two most common shader types: Vertex and Fragment. Godot offers another function to override: the Light shader. In this tutorial, we’ll see what we can do with this shader. To do so, we’ll have to look into how light is generally calculated in real-time 3D environments, how to implement this ourselves, and how to make changes to it to get a toon shader with uniform colors and hard edges....

In this post we’ll go through the process of making a simple lightning VFX using a shader, from conception to implementation. In the process, we’ll learn about step() and smoothstep, both very important and popular functions to achieve all kinds of effects in shaders, as well as (Signed) Distance Fields, which sound intimidating but are really quite simple. First, let’s think about what kind of effect we want to achieve. A lightning strike mainly consists of a bright, thin line....