GLSL (OpenGL Shading Language) is a C-like programming language used to write shaders, which run directly on the GPU for high-performance rendering. It is used in WebGL, Three.js, Unity, Unreal Engine, and many other real-time graphics applications.

Shaders are small programs that run in parallel on the GPU to handle visual effects. There are two main types in WebGL:

1. Vertex Shader – Handles object transformations, positions, and effects at the vertex level.
2. Fragment Shader (Pixel Shader) – Handles colors, textures, and pixel effects.

Bonus Shaders: Geometry Shaders, Tessellation Shaders, Compute Shaders (Advanced)

A scalar is a single value (number). It can be an int, float, or bool. Scalars are the building blocks of vectors.

A vector stores multiple values together. GLSL provides:

• vec2 (2D vector) → (x, y)
• vec3 (3D vector) → (x, y, z)
• vec4 (4D vector) → (x, y, z, w)

vec2 position = vec2(1.0, 2.0);        // x = 1.0, y = 2.0
vec3 color = vec3(1.0, 0.0, 0.0);      // Red color (RGB)
vec4 vertex = vec4(0.5, 0.2, 0.8, 1.0); // RGBA (with alpha)

Used for 2D positions, movement, or texture coordinates.

vec2 position = vec2(0.5, 0.3); // x = 0.5, y = 0.3

Use cases:

• Moving objects in 2D space
• Texture mapping (UV coordinates)

Used for anything with 3 values:

• RGB Colors: vec3 color = vec3(1.0, 0.0, 0.0);
• 3D positions: vec3 position = vec3(1.0, 2.0, 3.0);

Used for 4 components:

• RGBA Colors: vec4 color = vec4(1.0, 0.5, 0.2, 0.8);
• Homogeneous 3D Position: vec4 position = vec4(1.0, 2.0, 3.0, 1.0);

The w component is used in 3D transformations.

In GLSL, global variables must be constant:

const vec3 myVector = vec3(3.0, 4.0, 5.0); // ✅ Works

Or move them inside a function:

void main() {
    vec3 myVector = vec3(3.0, 4.0, 5.0); // ✅ Works
}

GLSL's main() must not return a value. void means "this function doesn’t return anything".

Used for angles and lighting calculations.

vec3 A = vec3(1.0, 2.0, 3.0);
vec3 B = vec3(4.0, 5.0, 6.0);
float dotResult = dot(A, B); // = 32

Gives a perpendicular vector:

vec3 A = vec3(1, 0, 0);
vec3 B = vec3(0, 1, 0);
vec3 C = cross(A, B); // = (0, 0, 1)

Key Takeaways:

• Dot: Scalar, angle/light calculations
• Cross: 3D only, finds perpendicular vectors

Scales a vector along one or more axes:

mat3 scalingMatrix = mat3(2.0, 0.0, 0.0,
                          0.0, 3.0, 0.0,
                          0.0, 0.0, 1.0);

• Diagonal values indicate scale
• Values < 1 shrink; negative values reflect

Only valid in mat4:

mat4 translationMatrix = mat4(1.0, 0.0, 0.0, 5.0,
                              0.0, 1.0, 0.0, 3.0,
                              0.0, 0.0, 1.0, 0.0,
                              0.0, 0.0, 0.0, 1.0);

Flips over an axis:

mat3 reflectionMatrix = mat3(-1.0, 0.0, 0.0,
                              0.0, 1.0, 0.0,
                              0.0, 0.0, 1.0);

Uses sin and cos, not zeros on diagonals.

1 0 tx
0 1 ty
0 0 1

1 0 0 tx
0 1 0 ty
0 0 1 tz
0 0 0 1

The last column holds the translation values (tx, ty, tz).