patriciogonzalezvivo/thebookofshaders

★ 6,886GLSLAudience · developerComplexity · 3/5LicenseSetup · easy

Mindmap

mindmap
  root((thebookofshaders))
    What it does
      Shader tutorial book
      Interactive examples
      Browser runnable code
    Topics Covered
      Shaping functions
      Color and patterns
      Noise and randomness
      Fractals and fractals
    GLSL Concepts
      Uniforms
      Fragment coord
      Matrices
    Community
      12-plus translations
      Contributions welcome
    Audience
      Developers
      Generative artists

mindmap root((thebookofshaders)) What it does Shader tutorial book Interactive examples Browser runnable code Topics Covered Shaping functions Color and patterns Noise and randomness Fractals and fractals GLSL Concepts Uniforms Fragment coord Matrices Community 12-plus translations Contributions welcome Audience Developers Generative artists

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Learn how to draw shapes, patterns, and color gradients on a graphics card by working through the interactive GLSL chapters in your browser.

USE CASE 2

Build generative art or visual effects by applying the noise, fractal, and cellular pattern techniques taught in the book.

USE CASE 3

Understand how shaders differ from regular code and write your first working fragment shader in GLSL without installing any software.

USE CASE 4

Run the shader examples offline on a Raspberry Pi or print the book for reading away from a screen.

Tech stack

GLSL

Getting it running

Difficulty · easy Time to first run · 5min

All examples run in the browser with no install required, offline reading and Raspberry Pi instructions are provided in the repository.

Content is copyright Patricio Gonzalez Vivo and not under an open license, code examples may be used but the book text may not be reproduced without permission.

In plain English

The Book of Shaders is an online, chapter-by-chapter guide to writing fragment shaders, authored by Patricio Gonzalez Vivo and Jen Lowe. A fragment shader is a small program that runs on a graphics card and determines the color of each pixel on the screen. They are used in games, generative art, visual effects, and interactive graphics, but the underlying concepts are abstract and the programming model is quite different from ordinary software, which makes them difficult to learn without guidance. The book starts from first principles. Early chapters explain what a shader is and how it differs from regular code, then introduce the idea of uniforms (values that stay the same across all pixels in a single render pass). From there it moves into algorithmic drawing techniques: shaping functions for controlling curves and transitions, working with color, drawing geometric shapes, applying transformations using matrices, and creating repeating patterns. Later chapters cover generative design using randomness, noise, and cellular noise algorithms, followed by fractional Brownian motion and fractals. The planned but not yet complete sections cover image processing operations like filters and kernel convolutions, simulation techniques such as reaction-diffusion and water-color effects, and 3D graphics concepts including lighting, normal maps, and ray marching. The book is structured as a living document that the authors continue to add to. All code examples are written in GLSL (GL Shading Language) and are runnable directly in the browser as part of the book's interactive pages. The repository also includes instructions for reading offline, printing, and running examples on a Raspberry Pi. The book has been translated into more than a dozen languages by community volunteers, including Japanese, Chinese, Korean, Spanish, French, German, Russian, and others. The content is copyright Patricio Gonzalez Vivo and is not under an open license, though the repository accepts contributions and corrections.

Copy-paste prompts

Prompt 1

I am starting Chapter 5 of The Book of Shaders on algorithmic drawing. Using a shaping function from that chapter, write GLSL code that draws a smooth circle in the center of the canvas and fades its edge with a smoothstep.

Prompt 2

Show me how to implement 2D Perlin noise in a GLSL fragment shader following the techniques in The Book of Shaders, and use it to animate a flowing color field.

Prompt 3

I want to create a repeating tile pattern in GLSL using the tiling and mirroring techniques from The Book of Shaders. Write a fragment shader that tiles a diamond shape across the screen.

Prompt 4

Using the cellular noise chapter from The Book of Shaders as a reference, write a GLSL shader that generates a Voronoi diagram and colors each cell a different hue.

Prompt 5

Help me understand what gl_FragCoord and u_resolution are in GLSL and write a fragment shader that draws a gradient that goes from red in the top-left to blue in the bottom-right.

Open on GitHub → Explain another repo

← patriciogonzalezvivo on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.