Shaders
Shaders are programs that are run on the GPU when processing a certain unit of rendering, usually vertices or pixels/fragments; they allow rendering programmers to manipulate their rendering output in any way they see fit.
While shaders, as the name implies, were originally conceived to allow different kinds of lighting/shading calculations, today they're used for a variety of things from lighting calculation through stylized rendering to 2D compositing or post-processing, and even complex geometry manipulations and particle effects.
Types of shaders:
Key concepts:
- FBO (framebuffer object)
- GPGPU (general-purpose computing on GPUs) - the concept of using the GPU to perform computation
- Ping pong - technique in which the output texture of one shader is fed to another shader as an input, sometimes cycling back and forth multiple times. The final texture gets sent to the display, then the shaders are swapped so that the most recent output becomes the input to the next iteration.
- Render to texture (RTT) - instead of rendering a scene to the screen, in this technique it is rendered to an "offscreen" texture that can be reused later.
- Shading language
- Textures
- Uniform - a type qualifier indicating a read-only variable passed to a shader from the CPU side of the program. These values will not change within a draw call, and are available to every shader that declares it.
- Varying - a type qualifier indicating a variable that can change within the vertex shader, then passed to the fragment shader as a read-only value.
Languages:
- Cg - shading language developed by Nvidia in close collaboration with Microsoft
- CUDA - parallel computing API that makes it easier to use GPGPU for complicated tasks
- GLSL (OpenGL Shading Language) - shading language used by OpenGL
- HLSL (High-Level Shading Language) - shading language used by DirectX
Articles:
- The Book of Shaders by Patricio Gonzalez Vivo and Jen Lowe
- Shaders by Learn OpenGL
- GLSL Shaders on MDN web docs
- Shaders (Processing) tutorial by Andres Colubi
- Introducing Shaders (openFrameworks) by Lucasz Karluk, Joshua Noble, Jordi Puig
- Shader modules (Vulkan)
Code tools:
Videos:
Art of Code
| Video Title | Link |
|---|---|
| Live Coding: Cairo Tiling Explained! | YouTube |
| Coding a Bezier curve from scratch! | YouTube |
| Live Coding: 3d Truchet Weave | YouTube |
| Coding a crazy weave pattern | YouTube |
| Live Coding: Koch Fractal Magic | YouTube |
| How to turn your 2d fractal into 3d! | YouTube |
| Bouncing Balls, Round Two: Logarithms?! | YouTube |
| How to Create Cool Bounce Effects Using a Loop | YouTube |
| Alessandro Zomparelli | creating Tissue - Blender add-on for Computational Design |
| Live Coding an Alien Orb - God Rays & Translucency | YouTube |
| Live Coding an Alien Orb - Glitters & Blinding Light | YouTube |
| Useful functions for game designers - Cosine Interpolation | YouTube |
| Useful functions for game designers - Lagrange Interpolation | YouTube |
| Coding the Game of Life - Part II | YouTube |
| Coding the Game of Life | YouTube |
| Live Coding: Making the American flag with math! | YouTube |
| Live Coding: Bending Light - Part 2 | YouTube |
| Raymarched Reflections | YouTube |
| Newton's Cradle: Setting up Materials | YouTube |
| Newton's Cradle: Modeling & Animation | YouTube |
| Coding a fireworks effect | YouTube |
| How to texture a procedural object | YouTube |
| The Matrix explained! | YouTube |
| Torus Knots explained! | YouTube |
| Shader Coding: Feathers in the Wind - Part 2 | YouTube |
| Shader Coding: Feathers in the Wind | YouTube |
| Smoothstep: The most useful function | YouTube |
| Playing with Gyroids - Part 2 | YouTube |
| Playing with Gyroids - Part 1 | YouTube |
| Shader Coding: Making a starfield - Part 2 | YouTube |
| Shader Coding: Making a starfield - Part 1 | YouTube |
| Shader Coding: Over the Moon - Part 2 | YouTube |
| Shader Coding: Over the Moon - Part 1 | YouTube |
| Writing a ray marcher in Unity | YouTube |
| Shader Coding: Ray Marching Tips & Tricks | YouTube |
| Shader Coding: KIFS Fractals explained! | YouTube |
| Shader Coding: Truchet Tiling Explained! | YouTube |
| Making a Mandelbrot fractal explorer in Unity - Part 2 | YouTube |
| Hexagonal Tiling Explained! | YouTube |