What is Value Noise?

In this GLSL shader tutorial, we will go over the basics of value noise. We start by setting up a GLSL shader in VS Code. Then we create a white noise function and add a grid layer on top of it. After that, we find the edges of the grid and perform bilinear interpolation to generate a primitive version of value noise. Finally, we smooth out the noise by running the grid UV coordinates through a smoothstep function.

== [ Resources ] ==

== [ Timestamps ] ==
00:00 Intro to Noise
00:41 Value Noise Algorithm
01:17 GLSL Shader Setup
01:58 White Noise Function
02:49 Overlay Grid Cells
04:03 Bilinear Interpolation
05:38 Smoothstep Grid UVs
06:17 Add Layered Noise

== [ Tags ] ==
#suboptimal #glsl #shaders

[SilverstringsMusings]

I appreciate your clear explanations of shader code. Also algorithm etc.

[shayan-gg]

thanks for making this tutorial, learned a lot

[carljosephyounger]

The `whiteNoise2x1` function uses this line to initialize the `random` variable:

float random = dot(p, vec2(12., 78.));

This will generate obvious patterns at higher resolutions. Using the more precise values (from the comment) fixes the issue:

float random = dot(p, vec2(12.9898, 78.233));

All good.

[mohsenzare]

Your videos are so helpful, please make more of them

[jetweilee]

great tutorial！ thank you for sharing~

[rikinmarfatia]

This is awesome! What resources are you using to learn about Shaders?

[hazzardmaddison]

Wanted to say thanks for making these videos! Everything I have found so far either told me which libraries to use and didn't explain how it worked or was so heavy in math jargon I'm not currently able to understand. I know your channel will grow but as it is still relatively small I made sure to like subscribe and comment🫡