A shader is type of a computer program (a set of instructions) that runs on the GPU.

<aside> 💡

Origin of name: initially designed to ‘shade’ things- that is, calculate/apply lighting effects in computer graphics, which is at the most basic level variance of bright and dark areas over a surface. Shaders have since evolved to perform a wide range of tasks, such as simulating physics, rendering post-processing effects, generating procedural content, and accelerating video playback. Despite this expanded functionality, the name persists as a nod to their origins.

</aside>

• What they’re used for: as programs that run on the GPU, shaders handle tasks requiring high-performance, parallel computation (processing lots of data at the same time, rather than in sequence). While CPUs excel at sequential tasks, GPUs and shaders are optimized for operations that benefit from parallel execution.
• Shaders are most often written in GLSL or HLSL: C-based, higher-level programming languages to abstract from the more difficult and cumbersome hardware-specific assembly.
  • GLSL: OpenGL Shading Language (by Khronos Group)
    • Godot: uses it’s own variant based on GLSL.
    • Shadertoy: uses GLSL ES, a subset of GLSL common on mobile devices.
  • HLSL: High-Level Shading Language (by Microsoft)
    • Unity, Unreal…

<aside> 💡 GameMaker is an interesting example as it allows either GLSL, GLSL ES, or HLSL, and recommends GLSL ES for compatibility across the most range of target platforms.

</aside>

What is a GPU (Graphics Processing Unit)?

• A specialized hardware component designed to accelerate graphics-processing tasks.
  • Example: Rendering videos and video games.
• While the CPU (Central Processing Unit) is the [main] processor in a computer, essential to its fundamental operation (as the ‘central’ in its name implies), the GPU is specialized for the acceleration of graphics-processing tasks, such as calculating the colour of the pixels on your screen when you play a video or video game.
  • A [hardware] ‘processor’ is the electronic component in a computer that executes instructions, which are fundamentally binary data (1s and 0s), corresponding to on/off electrical signals within the processor's circuitry.
    • Different types of processors, such as CPUs, GPUs, and DSPs (Digital Signal Processors, used for audio/video signals), are designed with varying architectures (the structure of a system’s components) that make them more suitable for specific tasks.
  • GPUs in particular excel at parallel processing. Something extremely useful for rendering graphics on modern displays, as the calculations required to colour each pixel on the screen can be handled simultaneously*.***

<aside> 💡

Why this is important: consider that for display resolutions ranging from full HD 1920x1080 monitors to a typical ‘4k’ (UHD 3840 x 2160) screen, that’s 2-8 million pixels (aka places on your screen that need rendering calculations).

• In realtime 3D apps like games, this involves the transformation of geometry, dynamic lighting, and many other things at 30 - 60x (frames) per second, or more. </aside>

• A key difference between CPU and GPU processing is that CPUs are better suited to execute a fewer number of potentially very complex instructions sequentially, while GPUs are better at executing more simple instructions in parallel.

  • CPUs excel at performing a sequence of complex operations, adeptly managing tasks with numerous conditional branches, like dynamic if/else statements.
  • GPUs, by contrast, are designed to process many more straightforward instructions concurrently, which enhances their efficiency in parallelizable tasks such as image and video processing. While GPUs can manage conditional logic, their performance is optimized when instruction flow can proceed with minimal branching.

<aside> 💡 CPUs: Better for complex, sequential instructions.

• Ideal for tasks with many conditional branches (like if/else statements).

GPUs: Excel at [relatively] simple, parallel instructions.

• Optimized for tasks that can proceed with minimal branching, such as realtime graphics rendering and video processing. </aside>

MythBusters: Example of CPU vs. GPU rendering/execution. Skip to 1:20 to see a slow-motion simulation of how the ‘GPU’ renders/paints/colours pixels.

MythBusters: Example of CPU vs. GPU rendering/execution. Skip to 1:20 to see a slow-motion simulation of how the ‘GPU’ renders/paints/colours pixels.

Shader Types

There are different types of shaders, where each type handles a specific stage of the graphics pipeline, optimizing tasks for rendering images efficiently. The purpose of having a pipeline with stages is so that complex rendering tasks can be broken down into smaller, manageable steps, each handled by a specific shader type. Below are some of the most common types:

• Vertex Shaders: Operate per-vertex, with existing geometry.
  • Position or modify the points of individual vertices of a 3D model.
  • Transform and prepare geometry for further stages in the rendering pipeline.