Shader Basics logo

Shader Basics

Community
jame581
shader-basics

Use when implementing shaders — Godot shader language, visual shaders, common visual recipes, and post-processing effects

Overview

Publisherjame581
RepositoryGodotPrompter
Skill nameshader-basics
Stars
808
Forks
47
Bundled files
6
LicenseMIT
Links
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 6 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by jame581 on GitHub. Read the source before you install it.

Installation

Install the Shader Basics AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/jame581/GodotPrompter/tree/master/skills/shader-basics
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/jame581/GodotPrompter.git /tmp/GodotPrompter
mkdir -p .claude/skills
cp -r /tmp/GodotPrompter/skills/shader-basics .claude/skills/shader-basics
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Shader Basics in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Shader Basics on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Shader Basics is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

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 TypeApplied ToUse For
canvas_item2D nodes (Sprite2D, Control, etc.)2D effects — outlines, dissolve, color swap
spatial3D meshes (MeshInstance3D)3D materials — water, terrain, toon shading
particlesGPUParticles2D/3DCustom particle behavior
skyWorldEnvironmentProcedural sky rendering
fogFogVolumeVolumetric 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)

VariableTypeDescription
UVvec2Texture coordinates
COLORvec4Output color (set this in fragment())
TEXTUREsampler2DThe node's texture
VERTEXvec2Vertex position (in vertex())
TIMEfloatElapsed time in seconds
SCREEN_UVvec2Screen-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)

VariableTypeDescription
ALBEDOvec3Base surface color
METALLICfloatMetallic value (0.0–1.0)
ROUGHNESSfloatRoughness value (0.0–1.0)
NORMALvec3Surface normal (for normal mapping)
EMISSIONvec3Emissive color
ALPHAfloatTransparency (enable in render mode)
VERTEXvec3Vertex 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

HintTypeDescription
hint_range(min, max, step)float/intSlider in Inspector
source_colorvec4Color picker in Inspector
filter_linear_mipmapsampler2DTexture filtering mode
repeat_enablesampler2DAllow texture tiling
hint_normalsampler2DTreat 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 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 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 WhenUse Code Shaders When
Prototyping effects quicklyComplex math or branching logic
Artists need to tweak valuesNeed precise control over every line
Learning shader conceptsPerformance-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

NodePurpose
Texture2DSample a texture
ColorConstantSolid color value
VectorOpMath operations on vectors
ScalarOpMath operations on floats
MixLerp between two values
Step / SmoothStepThreshold / smooth threshold
TimeCurrent time (for animation)
UVTexture coordinates
Input (custom)Expose a uniform to Inspector

Visual shaders compile to the same GPU code as written shaders. There is no performance difference.

Godot 4.7+: Two new spatial Input nodes — in_shadow_pass (vertex/fragment; maps to the IN_SHADOW_PASS built-in, true when the shader is being rendered in a shadow mapping pass — render objects differently in shadow maps than in the regular pass) and specular_amount (light(); maps to SPECULAR_AMOUNT — 2.0 × light_specular for OmniLight3D/SpotLight3D, 1.0 for DirectionalLight3D).

⚠️ Changed in Godot 4.7: The LinearToSRGB visual shader node no longer clamps its output to [0.0, 1.0] when using the Forward+ or Mobile renderer — HDR values above 1.0 now pass through. Graphs that relied on the implicit clamp produce different output; add an explicit Clamp node to restore the old behavior. See the 4.7 migration guide.


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 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 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 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 ModeSharpnessGPU costGhosting
DisabledN/ANoneNone
FXAALow (blurry)Very lowLow
SMAAHighLowVery low
TAAMedium (slight blur)MediumPossible
MSAA 4xHighHighNone

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 project shaders for the target platform at export time, eliminating the stutter players experience the first time a new material renders in-game — especially severe on macOS/Apple Silicon (Metal) and Windows (D3D12), where shader translation is expensive. Enable it per export preset for release builds; leave it off for development builds to keep exports fast. It operates at the Godot export pipeline level — see the export-pipeline skill for export preset configuration.

See references/shader-baker.md for enabling steps and the with/without comparison.


12. Common Pitfalls

SymptomCauseFix
Shader has no visible effectMaterial not assigned or shader not savedCheck node's Material property in Inspector
Transparent parts render as blackAlpha not handled in shaderSet COLOR.a = tex.a; and use appropriate blend mode
Uniform doesn't appear in InspectorTypo in uniform name or wrong typeRe-save the shader; check for compilation errors
Texture appears stretched/tiledMissing repeat_enable or wrong UV scaleAdd repeat_enable hint to sampler2D uniform
Shader works in editor but not in gameScreen texture uniform needs backbufferUse hint_screen_texture on a sampler2D uniform (Godot 4.x)
Performance drops with many shadersEach unique shader = draw call breakShare ShaderMaterial instances; use uniforms for variation
Screen-space UV is wrongSCREEN_UV not available in some contextsEnsure the node is rendered in the correct viewport
Visual shader node missingNode was renamed or removed in newer Godot versionCheck Godot docs for the current node name

⚠️ Changed in Godot 4.7: textureQueryLod() is available only in the fragment shader, and Godot 4.7 enforces this with a compile error — shaders calling it from vertex() stop compiling after upgrading. Move the call into fragment(). See GH-118962.


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+)

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Shader Basics AI skill do?

Use when implementing shaders — Godot shader language, visual shaders, common visual recipes, and post-processing effects

Why use Shader Basics on TypingMind?

Because you install it once and use it with any model. Shader Basics is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Shader Basics in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/jame581/GodotPrompter/tree/master/skills/shader-basics. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Shader Basics?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Shader Basics?

As many as you like. As long as a model supports skills, you can use Shader Basics with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Shader Basics AI skill free?

Yes. It is published on GitHub by jame581 under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇