This document provides an introduction to shaders, which are small scriptlets executed on the GPU to render content to the screen. It discusses how shaders manipulate pixel colors, vertices, and surfaces to process 2D and 3D graphics. Shader programming languages like GLSL and HLSL allow manipulating color components and performing math operations. The document outlines common shader operations like color spaces, interpolations, primitives, and filters. It introduces shader graphs in Unity and techniques like tone mapping. Examples of using shaders for effects like blur and edge detection are provided. The goal is to explain shaders through the metaphor of magic and wizardry at a school of witchcraft and wizardry.

1. GLOBAL SOFTWARE CONSULTANCY
Shaders and the Black Magic
Raju Kandaswamy
1© 2020 ThoughtWorks

2. Welcome to Hogwarts - Intro to Shaders
● Shaders are little scriptlets which are executed in the GPU to
render the content to the screen [Framebuffer]
● Primarily intended to manipulate the input/output pixels (colors),
vertex, surface (tessellate)
● 2D Shaders (Image), 3D Shaders (Geometry)
● Unlike CPU, GPU executes shaders scripts in its array of parallel
pipelines
● A 2018 Macbook Pro’s GPU contains 1024 cores where as CPU
contains only 6 cores.
● Shaders are perfect candidates for Image processing and
computer vision
● Many variants of Shader programming languages available such as
GLSL, HLSL and others
● Unity uses a variant of HLSL
2© 2020 ThoughtWorks

3. The Book of shaders
● The Vertex
● The Geometry / Primitives
● The Fragment
● The Colored Pixel
3© 2020 ThoughtWorks

4. House of Colors at Hogwarts
4
RGB(A) HSV YUV
● All color components are represented between 0 to 1
● Fragments deal with pixel colors
● Shader scripts manipulate color components
● Need to convert to different house of colors for some operations
● Final output must be in RGB
0
1

5. Interpolations for the magic wand
5
0
1
0.3
0.6

6. Shader primitives for effective Spells
● Color (RGB, RGBA) - float3, float4
● Vertex - float3
● UV - float2
● tex2D - Sampler
● Arithmetic primitives - + - * / %
● Math primitives - max, min, sin, cos
● Matrix - float2x2, float3x3
6© 2020 ThoughtWorks
U
V

7. Shader Graph - The art of making potions
7© 2020 ThoughtWorks
● LWRP & HDRP projects in Unity
● Graph
● Node
● Slots
● Binding
● Function
● Material
● Input Parameters
● Custom Nodes

8. Lifting the Invisible Cloak
8© 2020 ThoughtWorks
● 3x3 Filter Kernels
○ Gaussian Blur
○ Sharpen
○ Edge detection
■ Sobel
■ Canny

9. Tone mapping and Transfiguration
9© 2020 ThoughtWorks
● Transform one set of Colors to Other
○ Simple Reinhard
○ Adaptive Reinhard
○ Filmic

10. Potion Mixing Room of Hogwarts
10© 2020 ThoughtWorks
● www.shadertoy.com

11. Render Script & Mystery of
performance
11© 2020 ThoughtWorks

12. Android’s Sibling of Shaders
● Get the images processed by CPU/GPU/DSP in Java / Kotlin code
● No NDK ot JNI pain
● .rs gets compiled into Java Classes
● ForEach and Fragments
● uchar4
● rsUnpackColor8888 -> float4
● rsPackColor8888 -> uchar4
12© 2020 ThoughtWorks

13. Thank You
13