Shader on Feynman's Blog

12 | Noise Functions

Mon, 31 Aug 2026 12:00:00 +0800

In the previous lesson, we used GLSL math functions to draw shapes and gradients. This lesson enters the “soul tool” of shaders — noise functions: from random’s snow to Perlin’s continuous clouds, from single-layer noise to FBM’s fractal detail, ultimately driving clouds, terrain, fire, and vertex deformation.

01 Learning Objectives

This lesson focuses on noise function principles and practice:

Understand the core differences between Perlin Noise and Simplex Noise
Master FBM (Fractal Brownian Motion) principles and applications
Learn to create organic effects with noise (clouds, terrain, fire)
Understand vertex deformation using noise in vertex shaders
Master two ways to animate noise (moving sample point / changing frequency)

02 What Is Noise — Continuous Pseudorandom Function

Noise is a continuous pseudorandom function: neighboring points have similar values, but the overall pattern appears random.

11 | GLSL Math Functions

Tue, 25 Aug 2026 12:00:00 +0800

Last lesson covered GLSL basics and ShaderMaterial data channels. This lesson dives deep into math functions — mix / step / smoothstep for gradients and boundaries, sin / cos for waves, dot / cross for lighting and Fresnel, fract / mod for repeating patterns. These functions form the core toolchain from “a UV coordinate” to “a final image”.

01 Learning Objectives

This lesson focuses on practical applications of GLSL math functions:

10 | GLSL Basics

Sat, 15 Aug 2026 12:00:00 +0800

The first 9 lessons all used Three.js built-in materials (MeshStandardMaterial, MeshBasicMaterial…). This lesson starts writing custom shaders — talking to the GPU directly with GLSL, so gradients, waves, and Fresnel effects are generated entirely by code instead of built-in material presets.

01 Learning Objectives

This lesson focuses on GLSL shader programming fundamentals:

Understand the structure and execution flow of Vertex / Fragment Shaders
Master the roles of gl_Position / gl_FragColor
Distinguish the three variable types: attribute / uniform / varying
Understand ShaderMaterial vs RawShaderMaterial
Master coordinate transformations (model → world → view → clip)

02 GLSL Basic Syntax

GLSL is a C-style shading language, slightly different from JS/TS. First, the most common “parts”.