👻 Shaders

Shaders are small programs that run on the GPU. In a typical rendering pipeline, two shaders work together for each draw call:

Vertex Shader

The vertex shader runs once per vertex of a mesh. Its job is to transform vertex positions from 3D world space to 2D screen space. It can also pass data (like UV coordinates or normals) to the fragment shader. Custom vertex shaders can deform geometry — waving flags, terrain displacement, or morphing shapes.

Fragment Shader

The fragment shader (also called a pixel shader) runs once per pixel fragment and determines the final color of each pixel. This is where lighting calculations, texture sampling, and visual effects happen. The fragment shader receives interpolated data from the vertex shader.

Key Concepts

• Uniforms — values passed from your JavaScript code to the shader (e.g., time, mouse position, colors). They’re constant for all vertices/fragments in a single draw call.
• Attributes — per-vertex data like position, normal, and UV coordinates.
• Varyings — values passed from the vertex shader to the fragment shader, automatically interpolated across the surface.

Shader Languages

GLSL (OpenGL Shading Language) is the shader language for WebGL. WGSL is the newer language for WebGPU. Both are C-like languages with built-in vector and matrix math.

Visual Shader Editors

Node-based editors let you build shaders visually by connecting inputs and outputs, without writing code directly. This is especially useful for artists or for prototyping effects.

Resources

• Book of Shaders
• SimonDev’s GLSL course
• Lettier’s 3D game shaders for beginners
• Three.js Shaders (GLSL) Crash Course by Visionary 3D
• Freya Holmér flame effect thread
• Toon Material Color Ramp
• Drei shaderMaterial
• THREE-CustomShaderMaterial
• Shader Composer
• gl-react
• glsl-noise
• NodeToy
• Alma
• ShaderFrog

Shader Basics, Blending & Textures (Unity)