๐Ÿšง ShaderBot is currently in beta. Some features may evolve.Join the Beta!
๐ŸŽ“ Choose your role for a personalized experience

GLSL / WGSL Guide

๐Ÿ‘† Select your role above to see customized content

External Resource Library

41 hand-picked resources โ€” tutorials, tools, communities

must-haveโ†—

The Book of Shaders

Step-by-step guide to fragment shaders โ€” the most referenced GLSL learning resource. Open source.

must-haveโ†—

Inigo Quilez โ€” Articles & Tutorials

SDFs, ray marching, soft shadows, color palettes โ€” the bible of advanced GLSL techniques by Shadertoy's co-creator.

must-haveโ†—

An Introduction to Shader Art Coding โ€” kishimisu

The most-watched beginner tutorial for shader art on Shadertoy. Hundreds of thousands of views.

Level

Domain

41 resource(s)

๐Ÿ–ผ The Book of Shadersโ†—

Step-by-step guide to fragment shaders โ€” the most referenced GLSL learning resource. Open source.

Beginner
๐Ÿ–ผ Inigo Quilez โ€” Articles & Tutorialsโ†—

SDFs, ray marching, soft shadows, color palettes โ€” the bible of advanced GLSL techniques by Shadertoy's co-creator.

Advanced
โ–ถ An Introduction to Shader Art Coding โ€” kishimisuโ†—

The most-watched beginner tutorial for shader art on Shadertoy. Hundreds of thousands of views.

Beginner
โ–ถ The Art of Code โ€” YouTube Channelโ†—

Friendly GLSL tutorials: ray marching, fractals, game effects โ€” excellent for beginners.

Beginner
โ–ถ Freya Holmรฉr โ€” Math for Game Devsโ†—

Vectors, interpolation, Bezier curves, signed distances โ€” beautifully animated math for shaders.

Beginner
โ–ถ Value Noise Derivatives โ€” kishimisuโ†—

Deep dive into value noise, fbm and domain warping in GLSL.

Intermediate
โ–ถ Shadertoy Tutorials โ€” Inigo Quilezโ†—

Live coding sessions and explanations of advanced ray marching, SDF operations and rendering.

Advanced
โ–ถ WebGL Fundamentals โ€” Video Seriesโ†—

Browser-level WebGL: buffers, shaders, textures โ€” useful for understanding the pipeline.

Intermediate
๐Ÿ–ผ Shadertoy โ€” Learn (official tutorials)โ†—

Official Shadertoy shader tutorials โ€” uniforms, ray marching, noise, directly runnable.

Beginner
๐Ÿ”ง GLSL Sandboxโ†—

Live GLSL editor in the browser โ€” instant feedback, huge public shader gallery.

Beginner
๐Ÿ”ง Shadertoyโ†—

The premier online GLSL editor and community. Thousands of shared shaders with source code.

Beginner
๐Ÿ–ผ WebGL Fundamentalsโ†—

Exhaustive written guide to raw WebGL โ€” vertices, textures, transforms, lighting.

Beginner
SHADER
GUIDE
Chapter 1Beginner
๐ŸŒฑ

First Steps

Get started with ShaderBot: discover GLSL templates, practice with interactive exercises, and learn the essential Discord commands to share your shaders.

โฑ20 min readยท4 sections
Contents
1
๐Ÿ“‹
Chapter 1 โ€” First Steps
Shader Templates
2 min

๐Ÿ“‹ Shader Templates

Jump-start your shader with a ready-to-run template. Click "Use" to open it in the editor.

Basic Gradientbeginner

Simple color gradient from red to blue

gradientcolorbasic
// void mainImage(out vec4 fragColor, in vec2 fragCoord) {
Use
Animated Circlebeginner

Pulsing circle with time animation

circleanimationtime
// void mainImage(out vec4 fragColor, in vec2 fragCoord) {
Use
Rotating Patternintermediate

Rotating geometric pattern

rotationpatternmatrix
// void mainImage(out vec4 fragColor, in vec2 fragCoord) {
Use
Noise Fieldintermediate

Procedural noise generation

noiseproceduralrandom
// float noise(vec2 p) {
Use
Wave Effectbeginner

Animated wave pattern

waveanimationsin
// void mainImage(out vec4 fragColor, in vec2 fragCoord) {
Use
Mandelbrot Setadvanced

Fractal visualization

mandelbrotfractalcomplex
// void mainImage(out vec4 fragColor, in vec2 fragCoord) {
Use
Ripple Effectintermediate

Water ripple animation

ripplewateranimation
// void mainImage(out vec4 fragColor, in vec2 fragCoord) {
Use
Starfieldintermediate

Animated starfield effect

starfieldparticlesanimation
// float random(vec2 st) {
Use
WGSL Starter (WebGPU)intermediate

Basic WGSL entry-point โ€” runs natively on WebGPU. Requires Chrome 113+ / Edge 113+.

wgslwebgpufragmentstarter
// fn hash(n: f32) -> f32 {
Use
WGSL Gradient Rainbowbeginner

Simple animated rainbow in WGSL โ€” an easy starting point.

wgslwebgpugradientbeginner
// @fragment
Use
1 / 15