In this GLSL shader tutorial, we will go over Perlin noise. We start by setting up a GLSL shader in VS Code. Then we create a grid of cells and generate random gradients at the corner of each grid cell. Afterward, we generate a vector for each pixel coordinate and calculate the dot product to generate Perlin noise. Finally, we learn about Perlin noise variants like billow noise and ridged noise.
Code -
Twitter -
GitHub -
Website -
== [ Resources ] ==
Inigo Quilez’s Articles -
The Book of Shaders -
Simon Dev’s Shader Course -
VS Code GLSL Shader Setup Guide -
Sebastian Lagues’ Procedural Planets -
== [ Timestamps ] ==
00:00 Intro to Perlin Noise
00:41 Perlin Noise Algorithm
01:34 GLSL Shader Setup
02:42 Create Random Gradients
04:30 Find Distance to Pixel
05:15 Calculate Dot Product
06:50 Billow and Ridged Noise
== [ Tags ] ==