Installs into .claude/skills of the current project.
Are you the author of Shader Basics?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/jame581-shader-basics)
---
name: shader-basics
description: Use when implementing shaders — Godot shader language, visual shaders, common visual recipes, and post-processing effects
---
# Shaders in Godot 4.3+
All examples target Godot 4.3+ with no deprecated APIs.
> **Related skills:** **animation-system** for shader-driven effects like hit flash, **godot-optimization** for shader performance considerations, **camera-system** for post-processing camera effects, **2d-essentials** for 2D lighting, pixel-art shaders, and CanvasTexture normal maps, **3d-essentials** for spatial shaders and environment materials, **particles-vfx** for custom particle shaders, **tween-animation** for animating shader parameters at runtime.
---
## 1. Core Concepts
### Shader Types
| Shader Type | Applied To | Use For |
|------------------|--------------------------|--------------------------------------------------|
| `canvas_item` | 2D nodes (Sprite2D, Control, etc.) | 2D effects — outlines, dissolve, color swap |
| `spatial` | 3D meshes (MeshInstance3D) | 3D materials — water, terrain, toon shading |
| `particles` | GPUParticles2D/3D | Custom particle behavior |
| `sky` | WorldEnvironment | Procedural sky rendering |
| `fog` | FogVolume | Volumetric fog effects |
### Shader vs ShaderMaterial
```
Shader (.gdshader) → The code (GLSL-like language)
ShaderMaterial → Instance of a shader with specific uniform values
CanvasItemMaterial / StandardMaterial3D → Built-in materials (no code needed)
```
Multiple nodes can share the same Shader but have different ShaderMaterial instances with different uniform values (e.g., same dissolve shader but different dissolve progress per enemy).
### Creating a Shader
1. Select a node (e.g., Sprite2D)
2. In Inspector → Material → New ShaderMaterial
3. On the ShaderMaterial → Shader → New Shader
4. Edit the `.gdshader` file in the built-in editor
Or create a `.gdshader` file directly in the FileSystem dock.
---
## 2. Godot Shader Language Basics
Godot uses a GLSL ES 3.0-like language with Godot-specific additions.
### Minimal Canvas Item Shader
```glsl
shader_type canvas_item;
void fragment() {
// COLOR is the output pixel color
// TEXTURE is the sprite's texture
// UV is the texture coordinate (0,0 top-left to 1,1 bottom-right)
vec4 tex = texture(TEXTURE, UV);
COLOR = tex;
}
```
### Minimal Spatial Shader
```glsl
shader_type spatial;
void fragment() {
// ALBEDO is the base color (vec3)
ALBEDO = vec3(0.8, 0.2, 0.2);
}
```
### Built-in Variables (canvas_item)
| Variable | Type | Description |
|------------|--------|---------------------------------------|
| `UV` | `vec2` | Texture coordinates |
| `COLOR` | `vec4` | Output color (set this in `fragment()`) |
| `TEXTURE` | `sampler2D` | The node's texture |
| `VERTEX` | `vec2` | Vertex position (in `vertex()`) |
| `TIME` | `float`| Elapsed time in seconds |
| `SCREEN_UV`| `vec2` | Screen-space UV (for screen effects) |
> `SCREEN_TEXTURE` was removed in Godot 4.0. To read the screen, declare a uniform: `uniform sampler2D screen_texture : hint_screen_texture, filter_linear_mipmap;`
### Built-in Variables (spatial)
| Variable | Type | Description |
|-------------|--------|---------------------------------------|
| `ALBEDO` | `vec3` | Base surface color |
| `METALLIC` | `float`| Metallic value (0.0–1.0) |
| `ROUGHNESS` | `float`| Roughness value (0.0–1.0) |
| `NORMAL` | `vec3` | Surface normal (for normal mapping) |
| `EMISSION` | `vec3` | Emissive color |
| `ALPHA` | `float`| Transparency (enable in render mode) |
| `VERTEX` | `vec3` | Vertex position (in `vertex()`) |
### Uniforms (Shader Parameters)
Uniforms expose shader values to the Inspector and code.
```glsl
shader_type canvas_item;
uniform float speed : hint_range(0.0, 10.0, 0.1) = 1.0;
uniform vec4 tint_color : source_color = vec4(1.0, 1.0, 1.0, 1.0);
uniform sampler2D noise_texture : filter_linear_mipmap;
void fragment() {
vec4 tex = texture(TEXTURE, UV);
COLOR = tex * tint_color;
}
```
### Common Uniform Hints
| Hint | Type | Description |
|-----------------------------|--------------|-------------------------------------|
| `hint_range(min, max, step)` | `float/int` | Slider in Inspector |
| `source_color` | `vec4` | Color picker in Inspector |
| `filter_linear_mipmap` | `sampler2D` | Texture filtering mode |
| `repeat_enable` | `sampler2D` | Allow texture tiling |
| `hint_normal` | `sampler2D` | Treat as normal map |
### Setting Uniforms from Code
#### GDScript
```gdscript
var mat: ShaderMaterial = $Sprite2D.material
mat.set_shader_parameter("speed", 2.0)
mat.set_shader_parameter("tint_color", Color.RED)
```
#### C#
```csharp
var mat = GetNode<Sprite2D>("Sprite2D").Material as ShaderMaterial;
mat.SetShaderParameter("speed", 2.0f);
mat.SetShaderParameter("tint_color", Colors.Red);
```
---
## 3. Common 2D Shader Recipes
The canvas_item recipes most projects need: **dissolve** (noise + edge glow), **outline** (sample neighbors, expand alpha), **flash-white** (uniform-driven hit effect), **color swap** (palette shift), **scrolling UV** (water/lava/clouds), **wave distortion**.
> See [references/2d-shader-recipes.md](references/2d-shader-recipes.md) for complete shader code for all six recipes.
---
## 4. Common 3D Shader Recipes
Spatial-shader recipes: **toon/cel shading** (banded NdotL), **rim lighting / Fresnel** (1 - NdotV), **simple water surface** (UV scroll + normal-map blend + Fresnel).
> See [references/3d-shader-recipes.md](references/3d-shader-recipes.md) for the full shader source for each recipe.
---
## 5. Visual Shaders
Visual shaders provide a node-based graph editor — no code required.
### When to Use Visual Shaders
| Use Visual Shaders When | Use Code Shaders When |
|--------------------------------|------------------------------------|
| Prototyping effects quickly | Complex math or branching logic |
| Artists need to tweak values | Need precise control over every line |
| Learning shader concepts | Performance-critical shaders |
| Simple effects (color adjust, UV scroll) | Loops or advanced techniques |
### Creating a Visual Shader
1. Select node → Inspector → Material → New ShaderMaterial
2. Shader → New VisualShader
3. Click the shader to open the Visual Shader editor
4. Add nodes from the palette, connect pins
5. Output nodes (Output, FragmentOutput) are pre-placed
### Key Visual Shader Nodes
| Node | Purpose |
|---------------------|--------------------------------------|
| `Texture2D` | Sample a texture |
| `ColorConstant` | Solid color value |
| `VectorOp` | Math operations on vectors |
| `ScalarOp` | Math operations on floats |
| `Mix` | Lerp between two values |
| `Step` / `SmoothStep` | Threshold / smooth threshold |
| `Time` | Current time (for animation) |
| `UV` | Texture coordinates |
| `Input` (custom) | Expose a uniform to Inspector |
> Visual shaders compile to the same GPU code as written shaders. There is no performance difference.
---
## 6. Post-Processing Effects
The standard pattern: full-rect `ColorRect` with a canvas_item shader on top of the gameplay canvas. For 3D, use a `WorldEnvironment` Adjustment, Glow, or custom shader. For chained effects, render the world to a `SubViewport` then sample its texture in a final shader pass.
> See [references/post-processing.md](references/post-processing.md) for the ColorRect overlay pattern, vignette + CRT/scanline shader source, the SubViewport pipeline, and WorldEnvironment 3D post-processing notes.
---
## 7. Compositor Effects (Godot 4.3+)
`CompositorEffect` runs custom render passes within Godot's render pipeline (post-tonemap or pre-tonemap). Use when ColorRect overlays aren't enough — multi-pass effects, depth-aware effects, custom AO/SSR variants. Heavier setup than a screen-space shader; reach for it only when needed.
> See [references/compositor-effects.md](references/compositor-effects.md) for setup, a custom CompositorEffect GDScript example, and built-in Compositor use cases.
---
## 8. Render Modes
Render modes go on the first line after `shader_type` and control how the shader interacts with the rendering pipeline.
### Canvas Item Render Modes
```glsl
shader_type canvas_item;
render_mode unshaded; // Ignore all lighting
render_mode light_only; // Only visible where lit
render_mode blend_add; // Additive blending (glow, fire)
render_mode blend_mix; // Standard alpha blending (default)
render_mode blend_premul_alpha; // Pre-multiplied alpha
```
### Spatial Render Modes
```glsl
shader_type spatial;
render_mode unshaded; // No lighting calculations
render_mode cull_disabled; // Render both sides of faces
render_mode depth_draw_always; // Always write to depth buffer
render_mode specular_toon; // Toon specular model
render_mode diffuse_toon; // Toon diffuse model
render_mode blend_add; // Additive blending
```
---
## 9. Stencil Buffer Effects (Godot 4.5+)
Godot 4.5 exposes stencil write/read in spatial and canvas_item shaders via `stencil_write_mode`, `stencil_read_mode`, `stencil_value`, etc. across all rendering backends. Enables portals, X-ray vision, outline masks, and holes-in-geometry effects that previously required compositor-level work.
> See [references/stencil-buffer.md](references/stencil-buffer.md) for render-mode reference and the X-ray vision portal worked example.
---
## 10. SMAA Antialiasing (Godot 4.5+)
Sub-pixel Morphological Antialiasing (SMAA 1x) is a built-in post-processing AA mode added in Godot 4.5. It produces sharper, more temporally stable results than FXAA and is less costly than MSAA for deferred-heavy scenes.
### Enabling SMAA
1. Open **Project Settings**
2. Navigate to **Rendering → Anti Aliasing → Quality**
3. Set **Screen Space AA** to **SMAA**
SMAA can be combined with MSAA (for geometry edge aliasing) or used standalone. It does not require any shader code changes.
| AA Mode | Sharpness | GPU cost | Ghosting |
|---------|-----------|----------|----------|
| Disabled | N/A | None | None |
| FXAA | Low (blurry) | Very low | Low |
| **SMAA** | High | Low | Very low |
| TAA | Medium (slight blur) | Medium | Possible |
| MSAA 4x | High | High | None |
> **When to use SMAA:** Prefer SMAA over FXAA for most desktop projects — it delivers noticeably sharper text and thin edges with a similar performance profile. Combine SMAA + MSAA 2x for best quality at moderate cost.
This is an editor/export setting only — no runtime API is needed.
---
## 11. Shader Baker — Export-time Pre-compilation (Godot 4.5+)
The Shader Baker pre-compiles all your project's shaders for the target platform at export time rather than at runtime. This eliminates the stutter players experience the first time a new material renders in-game, which is especially severe on macOS/Apple Silicon (Metal) and D3D12 (Windows) where shader translation is expensive.
### Enabling Shader Baker
Shader baking is configured per export preset:
1. Open **Project → Export**
2. Select (or create) an export preset for your target platform
3. In the preset options, locate **Shader Baker** and set it to **Enabled**
4. Export as normal — baked shader cache files are bundled into the export
### What It Does
| Stage | Without Shader Baker | With Shader Baker |
|-------|----------------------|-------------------|
| Export | Fast | Slower (compiles shaders) |
| First material use in game | Stutter (compiles shader on GPU) | Instant (pre-compiled) |
| Subsequent loads | Cached after first run | Always cached |
> **When to use:** Enable Shader Baker for all release builds targeting desktop (macOS, Windows/D3D12) or mobile. The extra export time is worth the stutter-free player experience. For development builds, leave it off to keep iteration fast.
Shader Baker operates at the Godot export pipeline level — see the **export-pipeline** skill for how to configure export presets.
---
## 12. Common Pitfalls
| Symptom | Cause | Fix |
|-------------------------------------|----------------------------------------------------|------------------------------------------------------------------|
| Shader has no visible effect | Material not assigned or shader not saved | Check node's Material property in Inspector |
| Transparent parts render as black | Alpha not handled in shader | Set `COLOR.a = tex.a;` and use appropriate blend mode |
| Uniform doesn't appear in Inspector | Typo in uniform name or wrong type | Re-save the shader; check for compilation errors |
| Texture appears stretched/tiled | Missing `repeat_enable` or wrong UV scale | Add `repeat_enable` hint to sampler2D uniform |
| Shader works in editor but not in game | Screen texture uniform needs backbuffer | Use `hint_screen_texture` on a `sampler2D` uniform (Godot 4.x) |
| Performance drops with many shaders | Each unique shader = draw call break | Share ShaderMaterial instances; use uniforms for variation |
| Screen-space UV is wrong | `SCREEN_UV` not available in some contexts | Ensure the node is rendered in the correct viewport |
| Visual shader node missing | Node was renamed or removed in newer Godot version | Check Godot docs for the current node name |
---
## 13. Implementation Checklist
- [ ] Shader type matches the node type (`canvas_item` for 2D, `spatial` for 3D)
- [ ] Uniforms use appropriate hints (`hint_range`, `source_color`, `filter_linear_mipmap`)
- [ ] Shared visual effects use the same Shader resource with separate ShaderMaterial instances
- [ ] Post-processing shaders are on a CanvasLayer (2D) or WorldEnvironment (3D), not on game objects
- [ ] `TEXTURE` is sampled in canvas_item shaders (otherwise sprite content is lost)
- [ ] Alpha-transparent shaders set `COLOR.a` correctly and use `blend_mix` render mode
- [ ] Animated shader parameters (dissolve, flash) are driven by Tweens or AnimationPlayer, not `_process`
- [ ] Screen-reading shaders use `hint_screen_texture` on a `sampler2D` uniform (Godot 4.x approach)
- [ ] Complex shaders are profiled with the Godot profiler to check GPU frame time
- [ ] Stencil effects use two-pass materials (write pass first, read pass second) with correct render priority (Godot 4.5+)
- [ ] SMAA is preferred over FXAA for desktop builds (sharper edges, similar cost) — set in Project Settings → Rendering → Anti Aliasing (Godot 4.5+)
- [ ] Shader Baker is enabled in all release export presets to eliminate first-use compilation stutters (Godot 4.5+)
