Shaders 101

I recently watched a great GDC talk by Ben Cloward on the basics of shaders. He talks about why each part does what it does really well, and is a great introduction if you’re new to shaders, or a good refresher if you’re coming back to them after a while.

I was lucky enough to be able to access the full talk at work, but the slides are still available without a GDC vault account.

So without further ado, here’s what I learned…

What is a Shader?

A shader is a piece of code, generally running on the gpu, that controls the colour of a pixel on screen. Or, as Ben called it, “art with math” – I do like that one!

PBR Shaders

In a PBR workflow, shading is seperated into two categories – surface properties and light properties.

Before PBR, shaders combined the two sets of properties though techniques like baked lighting in diffuse maps and specific reflection maps. This would cause issues with changing light setups and placing props in different environments.

This also allows us to use differed rendering, as surface properties are rendered into the g-buffer before the lighting properties are calculated.

Ben’s talk focused on surface properties, as light properties tend to be in the realm of graphics programming, rather than tech art.

Data Types

Float = Single decimal point value

Float2 = 2 decimal point values – often used for UV coords.

Float3 = 3 decimal point values – often used for vectors or colours.

Float4 = 4 decimal point values – often used for vectors with w or colours with alpha.

Distortion Shader Example

Ben used the example of a distortion shader to bring up some key techniques.

Multiplying Tex Coords = Scaling Coords

Adding Tex Coords = Offsetting/Scrolling Coords

Time can be used for constant updates/animation.

Speeds can be controlled with a multiply node.

Append (in UE4) = Combine 2 floats into a float2.

Adding together your movement and a copy of your movement, with different times and values, will create a random effect, as they will never overlap in the same way.

Atlas Walk Example

The atlas walk example showed how to go though a flipbook texture. After watching this, I may replace the camera target in my security feed shader with something similar.

Floor Node = Rounds a decimal down to the number before the decimal point, meaning it                               steps up to each number in a stair case shape.

Frac Node = If value is greater than 1, make it equal 0. This allows for the atlas to loop.

Environment Blend Example

This shader example was really cool – definitely something I want to try!

Lerp = Linear interpolation, alpha = how much to blend each input.

Getting Up Direction = Normal map is in tangent space(offset of normal dir) in UE4, so in                                                order to get world up, we need to convert to world space. This can                                                  be done using the TransformVector node.

Mask = Get specific channel/component of input.

Saturate Function = Clamp between 0 and 1 at no computational cost. Achieved with a                                                  clamp node in unreal.

Sharpen Operation = Subtract 0.5, Multiply by Sharpen value, add 0.5, clamp.


Now I need to make some shaders with what I learned!



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s