What is Value Noise?
Рет қаралды 3,892
Күн бұрын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.
📖 Code - github.com/SuboptimalEng/shad...
🐦 Twitter - / suboptimaleng
💻 GitHub - github.com/SuboptimalEng
🌎 Website - suboptimaleng.com
== [ Resources ] ==
The Art of Code’s Tutorial - • Value Noise Explained!
Inigo Quilez’s Articles - iquilezles.org/articles
The Book of Shaders - thebookofshaders.com
Simon Dev’s Shader Course - simondev.teachable.com
VS Code GLSL Shader Setup Guide - • How to Write GLSL Shad...
== [ 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
@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.
@SilverstringsMusings Жыл бұрын
I appreciate your clear explanations of shader code. Also algorithm etc.
@shayan-gg Жыл бұрын
thanks for making this tutorial, learned a lot
@jetweilee1645 7 ай бұрын
great tutorial！ thank you for sharing~
@mohsenzare2511 11 ай бұрын
Your videos are so helpful, please make more of them
@SuboptimalEng 11 ай бұрын
Learning Unity right now but I do plan to make videos about shaders in the future!
@rikinmarfatia Жыл бұрын
This is awesome! What resources are you using to learn about Shaders?
@SuboptimalEng Жыл бұрын
Thanks Rikin! I’ve linked the resources in the description of the video. Inigo Quilez, Art of Code, and Simon Dev all provide great tutorials.
@mohsenzare2511 11 ай бұрын
specially videos about shaders
@hazzardmaddison4971 8 ай бұрын
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🫡
@SuboptimalEng 8 ай бұрын
Really appreciate the support, and I’m glad my teaching style helps you learn the concepts effectively! I’m currently learning WebGPU with TypeScript right so might make videos on that next, but I definitely plan to make more shader tutorials after that 😇
@hazzardmaddison4971 6 ай бұрын
I hope you do make the video bc I just got into typescript with nextjs coming from years of php websites. just turned on notifications so i'll be sure to get it if you do @@SuboptimalEng
GSN Composer
Рет қаралды 2,3 М.