Agate DRAGON Games

Creating games, shaders and pixel art

Shaders

Here you will find all my shader tutorials sorted in alphabetical order.

For beginners, check out my Shadertoy tutorial. It will teach you how to create and share shaders from scratch. No prior knowledge of math or programming is required to complete this tutorial.

3D Printer

astronaut sprite being printed line by line

Creating a 3D printer shader – Agate DRAGON Games

Binary Image

Snow cabin sprite original vs 1-Bit binary image

Creating a binary image shader – Agate DRAGON

Blur

Cat and duck with and without gaussian blur applied
Cat and duck with and without gaussian blur applied

Simple gaussian blur shader using a kernel – Agate DRAGON

Bokeh

Astronaut sprite with orange bokeh shader effect applied
Astronaut with orange bokeh shader effect applied

Creating a bokeh effect in a shader – Agate DRAGON Games

Tiling the bokeh shader – Agate DRAGON Games

Creating a multicoloured bokeh shader – Agate DRAGON Games

Checkerboard

green and white checkerboard pattern with aspect ratio correction
Green and white checkerboard pattern with aspect ratio correction

Creating a checkerboard pattern in Shadertoy – Agate DRAGON Games

Dissolve

nine dissolving pumpkins version 2

Creating a Dissolve Shader – Agate DRAGON Games

Distortion (barrel and pincushion)

Snowman, Christmas tree and present in a gift box sprite with barrel distortion applied

Barrel Distortion Shader – Agate DRAGON

Duotone

Side and front profile of an astronaut sprite with and without a blue and yellow duotone applied

Creating a duotone effect in a GLSL shader – Agate DRAGON

Duotone Circle

Mountain sprites with six different coloured duotone circle gradients applied

Creating a duotone circle effect in a GLSL shader – Agate DRAGON

Duotone Gradient

Shan Shui sea, mountain and boat sprites with four different coloured duotone gradients applied

Creating a duotone gradient in a GLSL shader – Agate DRAGON

Edge Detection

Cat and duck with and without edge detection applied
Cat and duck with and without edge detection applied

Simple edge detection shader using a kernel – Agate DRAGON

Glitch

Side and front profile of an astronaut sprite with a glitch and RGB split effect applied

Glitch shader effect with displacement lines – Agate DRAGON

Glitch shader effect using blocks (Part 2) – Agate DRAGON

Glitch effect with RGB split – Agate DRAGON

Glitch with Barrel Distortion Comparison – Agate DRAGON

Gradient

red and yellow rotating gradient mixed with london image
Red and yellow gradient mixed with London image

Creating a rotating gradient in Shadertoy – Agate DRAGON Games

Creating a four corner gradient in Shadertoy – Agate DRAGON Games

Creating a rainbow gradient in Shadertoy – Agate DRAGON Games

Creating a circular gradient in Shadertoy – Agate DRAGON Games

Greyscale

Shan Shui sea, mountain and boat sprite with and without a greyscale effect applied

Greyscale sprite shader – Agate DRAGON

Halftone

halftone pattern applied to a full moon image
Halftone pattern applied to a full moon image

Creating a halftone shader – Agate DRAGON Games

Creating a halftone shader part 2 – Agate DRAGON Games

Hue Shift

wooden dock purple hue shift
Wooden dock purple hue shift

Creating a hue shift shader – Agate DRAGON Games

Creating a hue shift gradient shader – Agate DRAGON Games

Invert

Feature image of cat and duckling with RGB colour channels inverted

How to invert an image in a shader – Agate DRAGON Games

Noise

texture with simple animated noise applied

Creating a simple noise effect in Shadertoy – Agate DRAGON Games

Nova

nova shader effect
Nova shader effect

How to create a nova shader effect – Agate DRAGON

Outline

small dragon sprite with purple outline

Creating a simple outline shader – Agate DRAGON Games

Pattern

red circle background pattern

Creating a circle pattern in Shadertoy – Agate DRAGON Games

Creating a circle pattern in Shadertoy Part 2 – Agate DRAGON Games

Creating shape patterns with shaders – Agate DRAGON Games

RGB Split

Snowman, Christmas tree and present sprites with RGB split effect applied

Simple RGB Split Shader – Agate DRAGON

Scanline

ten black and white scanlines

Creating a scanline effect in Shadertoy – Agate DRAGON Games

Combining scanlines with a texture in Shadertoy – Agate DRAGON Games

Scrolling Background

Sun moon star background scrolling shader
Sun moon star background scrolling shader

Creating a scrolling background in Shadertoy – Agate DRAGON Games

Sepia

Shan Shui sea, mountain and boat sprite with and without a sepia effect applied

Sepia sprite shader – Agate DRAGON

Sharpen

Cat and duck with and without sharpen applied
Cat and duck with and without sharpen applied

Simple sharpen shader using a kernel – Agate DRAGON

Shining Coin

Shining Gold Coin Shader Effect
Shining Gold Coin Shader Effect

How to create a shining coin using a shader – Agate DRAGON Games

Spotlight

spotlight circle stone with ambient

Creating a spotlight effect in Shadertoy – Agate DRAGON Games

Sunburst

green and purple sunburst effect
Green and purple sunburst effect

Shader Tutorial: Coding a Sunburst Effect – Agate DRAGON Games

Television

Television Shader Featured Image

Creating a television effect in a shader – Agate DRAGON Games

Tint

Five slime sprites with different coloured tints

Tinting sprites using a shader – Agate DRAGON

Transition

fade to black screen transition
Fade to black screen transition

Fade to black screen transition in Shadertoy – Agate DRAGON Games

zelda a link to the past screen push transition
Zelda a link to the past screen push transition

Push screen transition Shadertoy tutorial – Agate DRAGON Games

circle transition effect with tortoise and viking images from Astro Planes Art
Circle transition effect with tortoise and viking images from Astro Planes Art

Circle screen transition Shadertoy tutorial – Agate DRAGON Games

Rotated rectangle transition effect with Spartan and fairy images from Astro Planes Art
Rotated rectangle transition effect with Spartan and fairy images from Astro Planes Art

Rotated rectangle Shadertoy transition tutorial – Agate DRAGON Games

Vignette

shadertoy vignette result with ambient light
Shadertoy vignette result with ambient light

Creating a simple vignette in Shadertoy – Agate DRAGON Games