Notes on Simon Dev's Shader Course

Notes on Simon Dev's Shader Course

If you like Shader, and would want to learn more about shader, Simon devs course is great.

Here a link to the Course:

All the code in here will be in GLSL, But Hashonde doesn’t support GLSL.

Notes from Simon dev Course

Here a link to a video on Graphics pipeline :


Blending Textures

Addressing Mode

How are texture coordinates sides the range[0, 1] instead? - ClampToEdge - Repeat - MirroredRepeat

.wrapS - U .wrapT - V

Methods - MirroredRepeatWrapping - Texture whould be repeated. - RepeatWrapping - Repeats the whole texture. - ClampToEdgeWrapping - just repeat the last coordinate values, again and again

Texture here means the colors, Texture is just used for simplify the explaination. You should know what Texture is to understand this, better.

To invert the Image Vertically Just mutiptly by -1.0


Zoom in, Zoom out

Standard Options - Nearest Filtering - Linear Filtering

.magFilter = THREE.NearestFilter; => become pixellated, its Fast .magFilter = THREE.LinearFilter; =>


Handled by 3d Renderer.

Functions Build-in


smoothstep(10.0, 20.0, 10.0) -> 0.0smoothstep(10.0, 20.0, 12.5) => 0.156smoothstep(10.0, 20.0, 15.0) -> 0.5;
clamp(-1, 0,1) -> 0clamp(0.2, 0, 1) -> 0.2

Not Built-in functions, But common in some libraries (unity)

remap(50.0, 0.0, 100.0, 0.0, 1.0) -> .5remap(50.0, 0.0, 100.0, 5.0, 10.0) -> 7.5

Vector Operations & Maths


Quick and easy way to access elements from a vector.

vec4 example = vec4(1.0, 2.0, 3.0, 4.0);  // xyzwvec2 v1 = example.xx;


vec4 example = vec4(1.0, 2.0, 3.0, 4.0);  // xyzwexample.x = 0.0 // example => vec4(0.0, 2.0,3.0, 4.0);// Not validexample.xx = vec2(1.0, 1.0);

Common Vector Functions

Lighting Methods

Ambient Lighting - Cheap to add - Directionless lighting

Hemisphere lighting - 2 ambient lighight - ground and top

// localSpace to globaSpace
  vNormal = (modelMatrix * vec4(normal, 0.0)).xyz;

Lambertian Lighting

Diffuse lighting

light direction, light color, dot product of lightDir and normal, then get the max.

Color Spac


perpetual Color Spac

Do lighting in linear color Space.

If not convert to lineart to vector

Converting from ‘linear’ to ‘sRGB’:

  1. Linear -> Gamma;

  2. Gamma -> sRGB;

vec3 linearTosRGB(vec3 value){  vec3 lt=vec3(lessThanEqual(value.rgb,vec3(.0031308)));  vec3 v1=value*12.92;  vec3 v2=pow(,vec3(.41666))*1.055-vec3(.055);  return mix(v2,v1,lt);}

Phong Specular

Diffuse reflection and Phone reflection

It changes with CameraPosition

Specular IBL

Environment mapping

Image based lighting

IBL = Image Based Lighting

Concept => Capture the environment into a texture Sample from that texture, Adding it to you lighting equation

Spherical Environment

Cube Mapping -> 6 Textures

uniform samplerCube ourCubeMap;//.. bunch of mapvec4 sample = textureCube(ourCubeMap, direction);

Fresnal effect

gives us much better result;

Toon Shading


Vertex Shader



Varying - IN Depth

We careful what you do in vertex shader and fragment shaders

Warped Sphere

SDF’s and Simple Shapes

Sine Distance Functions

Resouces - (create shapes with sdfs)[]

We can create shapes with sdfs

Antialiasing & Shading

Boolean Operations

float d1 = sdf1(); float d2 = sdf2();

float union = min(d1, d2);

float intersection = max(d1, d2);

float subtraction = max(-d1, d2);

Smooth Maximums;

Using SoftMax and SoftMin,we can blend shapes together


Smooth pseudo-random values Procedural content generation

Noise is just not random only,its more about smooth pseuda-random values.

we create a texture, then we get the random value from this.

Gradient Noise -* Grid of random unit vectors -* Just looks better ( i guess)

Fractal Brownian Motion(fbm) Momentum Movement


Post Processing: Shader that runs on a texture instead of a texture run on a shader

Color Grading Depth of Field

Color boost



Distortions and Ripples

Thu Dec 28 2023 10:02:13 GMT+0000 (Coordinated Universal Time)