Huge thanks! You are the only souce i know for Shader programming that is actually teaching by showing how to create stuff, which helps with motivation immensely. Extremely helpful, thank you again!
Inigo Quilez has articles, and a few videos. His stuff is quite dense to get by just reading though, or maybe I am just slow, but it doesn't seem like noob friendly material. But once you get it, some things are insane (analytic normals for example, phew, you can speed up algorithms for procedural terrain generation, or volumetric rendering with noise displacement etc. to hyperspeed)
This was excellent! I've been trying to make my own noise function, and I was trying to figure out how Perlin's algorithm worked, and I figured it out somewhat by thinking about how I would do it, but this was such an excellent explanation, it gave me a great foundation to build from. Thank you!
I'm a junior tech artist working with shaders (with a digital art background, and math was always my biggest struggle in school) and your channel has helped me understand both GLSL/ HLSL and how to visualise math. A true lifesaver and I always come back to your channel to watch and rewatch your videos. Have you covered how to make a seamless tiling noise? I might imagine you have mentioned it somewhere, but I can't recall. I assume the idea is to compare the very first and last row of pixels of each axis to each other, and average it out, but I have no idea how to implement it. You're such an excellent teacher btw!
Thanks for the nice words! It makes me happy to see that people like you get stuff out of my videos. I did not cover seamless noise, or seamless texture generation in general. In order to make the noise from the video tileable you'd have make sure all noise layers are aligned with the grid, meaning no decimals in the scale and offset, and then you'd have to make sure that the random values on the left edge match the right, and the top edge match the bottom. You could do this by applying a modulo on the ID value that is used to generate the random values. If you have a layer that should have, say, 8 points per tile, then you want it to repeat every 8 points, so you'd do ID=mod(ID,8) Make sense?
It's brilliant! It looks like absolutely random. But independent of this, the system really have defined behaviour! You can put same coefficients in this and have taken same results. It's amazing!
Brother, you are the next level of intelligence. Thank you for spending the time to teach us what you know. I appreciate it very much and I know others do as well. Keep doing what you are doing! When you come up with a "Shaders R Us" tee shirt let me know, I want one!
I can't seem to figure out value noise on my own. I try mixing quantified noise with some kind of triangle mix signal. It's always a regular pattern though. I will just watch this.
Oh yea, I agree with Event Hroizon, you should have MILLIONS of subscribers. GPU technology being used this way is incredible. People should start MARCHING to a new beat the RAY MARCHING BEAT! LOL
I am running into a problem with this tutorial. I noticed that the top wasn't generating clouds correctly, and the more I increased the frequency, the smaller the Y area it actually impacted. For some reason when increasing the frequency beyond 16 the N21 wasn't generating random numbers anymore in. Doing a N21 with the uv's multiplied by 17 or over caused any ID area with a Y over 16 to just generate 0 as a result. When I reduced the multiplication factor in the N21 function from the thousand range to the hundreds range that seemingly fixed it. I had a few theories on why this might be but none seemed reasonable. Anyway, with this fix I managed to get a working SmoothNoise2 function. Then I added the time "uv += iTime*.1;" and that caused the noise to change entirely, now instead of a moving noise cloud I got a moving repeating pattern. While writing that I got an idea and tested the time addition again while first resetting my time, and now I have a moving cloud that slowly loses each level of frequency detail as the values start once again becoming too large for N21 to handle. My code matches yours perfectly as far as I can tell, the only difference being that for some reason, my N21 starts producing a 0 result once the input becomes too large. Any ideas what the problem could be?
I was getting you one but I noticed my home pc doesn't have the same problem, meaning it must have something to do with my work laptop and not with my code, but thanks a lot for the offer. Do you think a problem with my drivers, or my ram could be to blame? Or perhaps my gpu or cpu, I don't actually know what shadertoy uses for it's calculations.
The noise function I'm using here makes use of a sine, this gives different results on certain graphics cards and therefore I am not recommending it anymore. Check the noise function I'm using in 'The Universe Within' tutorial. It will probably run fine on both machines.
Amazing video, as always. What resources did you use to learn shader coding to manage to get to the advanced level that you are currently at? I'm finding online resources to be quite insufficient in general and the infamous The Book of Shaders is great but they haven't finished yet making all of the book yet.
I have found that time spent on ShaderToy has been really useful. Some of the creators there have really well commented code, and for the others which are less transparent I'll break the code down so I understand what each component contributes to the overall effect. After a while you build an understanding of chunks of code so you can quickly make a high-level assessment of the shader components. Starting by working through the Book of Shaders until you really understand and internalise the work, and then working through ShaderToys, re-implementing aspects or even the whole toy has really given me a good understanding of glsl coding. You might have seen these already but TekF made an excellent tutorial on ray marching www.shadertoy.com/view/MdBfRK and I find Shane's code to be very readable www.shadertoy.com/user/Shane
I agree with Tim. I just started by looking at what other people on ShaderToy did. It looks daunting at first but in many effects you see similar pieces of code, like the one I'm explaining in this video.
Thanks a lot!! I have a question. If each gpu is going to use the values slightly differently to generate those randomness. Because when compiling a shader on one computer or another, the difference is not noticeable? Because in the first layer at least, with the same numbers as you, on my screen it looked very different. Thank you very much for all these videos!
Hey Martijn, thank you for putting up this great tutorial as always! One question: it seems like there's a black point at the origin when creating the noise pattern in this way. Do you know why is that?
Thanks for watching! Its because the core noise function is sin(p.x*a + p.y*b)*c which is 0 for any combination of a b and c when p.x=p.y=0 You could put in an extra var inside of the sine to offset it randomly but its not really necessary, just shift the uvs away from the origin and you don't have a black spot.
Sergio Sergio if you can make 2d texture procedurally like he is doing now... why can't you make a 3d "texture" from a 3d noise functions .. takes in 3 inputs to give an output instead of 2 inputs like he is doing now with the uv coordinates
It could be that your graphics card doesn't have a very precise sine implementation for the random function. Try a different noise function. You could take one from a ShaderToy called 'hash without sine'
Certain hardware doesn't work nicely with trig functions (the sine in this case). Watch my the feathers video for another type of hash function that uses a dot product instead.
I think if you read any book on computer graphics the concepts will directly apply. Art is a very abstract concept though. Computer art is just art + computer. But maybe you mean fractals specifically? You should look into Processing, that should get you started.
![[Explained] Perlin Noise and Unity](/img/n.gif)
This Channel is pure gold, totally awesome for beginners. You're doing some really good work ! In my book you should have millions of subs :)
the unicorn walking in the webcam is killing me :D
Thought it was a cat.
It is not a fox?
for anyone wondering, the font is in the title is called kill the noise. great attention to detail!
Yeah!
It is Sooooo USEFUL! The noise functions in shadertoy have always been chaos to me. Thanks !
Your explanation makes everything make so much more sense and so much more easy to sit through!
Fantastic explanation, clear and calm. Thank you!
Huge thanks!
You are the only souce i know for Shader programming that is actually teaching by showing how to create stuff, which helps with motivation immensely. Extremely helpful, thank you again!
I'm glad you like it, and you're welcome!
Inigo Quilez has articles, and a few videos. His stuff is quite dense to get by just reading though, or maybe I am just slow, but it doesn't seem like noob friendly material. But once you get it, some things are insane (analytic normals for example, phew, you can speed up algorithms for procedural terrain generation, or volumetric rendering with noise displacement etc. to hyperspeed)
@@jovanrakocevic9360 sounds awesome! Got any links to those topics?
@@fygarOnTheRun iquilezles.org/ it can be a bit hard to navigate but it has all sorts of goodies.
This was excellent! I've been trying to make my own noise function, and I was trying to figure out how Perlin's algorithm worked, and I figured it out somewhat by thinking about how I would do it, but this was such an excellent explanation, it gave me a great foundation to build from. Thank you!
Oh God, Here is The Best ever video for shader newbie
I'm a junior tech artist working with shaders (with a digital art background, and math was always my biggest struggle in school) and your channel has helped me understand both GLSL/ HLSL and how to visualise math. A true lifesaver and I always come back to your channel to watch and rewatch your videos. Have you covered how to make a seamless tiling noise? I might imagine you have mentioned it somewhere, but I can't recall. I assume the idea is to compare the very first and last row of pixels of each axis to each other, and average it out, but I have no idea how to implement it.
You're such an excellent teacher btw!
Thanks for the nice words! It makes me happy to see that people like you get stuff out of my videos. I did not cover seamless noise, or seamless texture generation in general. In order to make the noise from the video tileable you'd have make sure all noise layers are aligned with the grid, meaning no decimals in the scale and offset, and then you'd have to make sure that the random values on the left edge match the right, and the top edge match the bottom. You could do this by applying a modulo on the ID value that is used to generate the random values. If you have a layer that should have, say, 8 points per tile, then you want it to repeat every 8 points, so you'd do ID=mod(ID,8)
Make sense?
It's brilliant! It looks like absolutely random. But independent of this, the system really have defined behaviour! You can put same coefficients in this and have taken same results. It's amazing!
best video about noise I ever seen. Thank you very much!
Loves it, More easier to understand the value noise than bookofshaders!
First time I see how to create a noise function from scratch - super interesting!
Amazingly explained. Thanks!
Messed about with making perlin noise but couldnt make it smooth or make it layered. You explained it great, will have to play with it again later.
As always, I learned a lot. Thank you.
Awesome. Thanks for continuing to watch my videos.
Great video! Very easy to follow.
Great video, easy to follow and fun to watch.
I'm glad you like it :)
Brother, you are the next level of intelligence. Thank you for spending the time to teach us what you know. I appreciate it very much and I know others do as well. Keep doing what you are doing! When you come up with a "Shaders R Us" tee shirt let me know, I want one!
Great idea for video series! Good job!
Thank you!
Looked all smooth until the double of 32 was 65 hhehehehe. Great vid
Hehe, yeah I noticed that when I was watching my own video. Sometimes you don't realize you say something wrong. :)
And double that is 125. ;)
You are a damn good teacher.
Thanks, I'm glad you think so!
As always I learn a lot thank you
Great video! Thanks a lot!
Awesome tutorial
great video. thanks for those!
Incredible as always! Thanks!!
Thanks, great series! Subed.
Cool :)
what a beatiful chanel
awesome stuff
Fantastic. How about making tutorial about Perlin or Worley noise?
Thanks! Yeah perhaps in the future :)
It`s AMAZING. Thank you very match
That's brilliant, amazing! Thanks a lot!
Really hope more videos about advanced noises!
What specific noises were you thinking of?
I can't seem to figure out value noise on my own. I try mixing quantified noise with some kind of triangle mix signal. It's always a regular pattern though. I will just watch this.
This is gold !
Oh yea, I agree with Event Hroizon, you should have MILLIONS of subscribers. GPU technology being used this way is incredible. People should start MARCHING to a new beat the RAY MARCHING BEAT! LOL
Hello, i just make my own noise function, when i reposition the uv to center, why the noise function looks like "feedback" effect?
Wow,nice explanation! Can I use this noise for a commercial project?
I am running into a problem with this tutorial.
I noticed that the top wasn't generating clouds correctly, and the more I increased the frequency, the smaller the Y area it actually impacted.
For some reason when increasing the frequency beyond 16 the N21 wasn't generating random numbers anymore in. Doing a N21 with the uv's multiplied by 17 or over caused any ID area with a Y over 16 to just generate 0 as a result.
When I reduced the multiplication factor in the N21 function from the thousand range to the hundreds range that seemingly fixed it. I had a few theories on why this might be but none seemed reasonable.
Anyway, with this fix I managed to get a working SmoothNoise2 function.
Then I added the time "uv += iTime*.1;" and that caused the noise to change entirely, now instead of a moving noise cloud I got a moving repeating pattern.
While writing that I got an idea and tested the time addition again while first resetting my time, and now I have a moving cloud that slowly loses each level of frequency detail as the values start once again becoming too large for N21 to handle.
My code matches yours perfectly as far as I can tell, the only difference being that for some reason, my N21 starts producing a 0 result once the input becomes too large.
Any ideas what the problem could be?
You have a shadertoy link I can look at?
I was getting you one but I noticed my home pc doesn't have the same problem, meaning it must have something to do with my work laptop and not with my code, but thanks a lot for the offer.
Do you think a problem with my drivers, or my ram could be to blame? Or perhaps my gpu or cpu, I don't actually know what shadertoy uses for it's calculations.
The noise function I'm using here makes use of a sine, this gives different results on certain graphics cards and therefore I am not recommending it anymore. Check the noise function I'm using in 'The Universe Within' tutorial. It will probably run fine on both machines.
Amazing video, as always. What resources did you use to learn shader coding to manage to get to the advanced level that you are currently at? I'm finding online resources to be quite insufficient in general and the infamous The Book of Shaders is great but they haven't finished yet making all of the book yet.
I have found that time spent on ShaderToy has been really useful. Some of the creators there have really well commented code, and for the others which are less transparent I'll break the code down so I understand what each component contributes to the overall effect. After a while you build an understanding of chunks of code so you can quickly make a high-level assessment of the shader components.
Starting by working through the Book of Shaders until you really understand and internalise the work, and then working through ShaderToys, re-implementing aspects or even the whole toy has really given me a good understanding of glsl coding.
You might have seen these already but TekF made an excellent tutorial on ray marching www.shadertoy.com/view/MdBfRK and I find Shane's code to be very readable www.shadertoy.com/user/Shane
I agree with Tim. I just started by looking at what other people on ShaderToy did. It looks daunting at first but in many effects you see similar pieces of code, like the one I'm explaining in this video.
Thanks guys. Hopefully you'll see me competing in next year's Shader Showdown at Revision in Frankfurt
are there any books which you've read that you recommend?
Unfortunately no. I learned all of shader programming by looking at what other people have done. Other than that, I guess UA-cam is your best choice.
Awesome videos! ^_^
Thanks a lot!! I have a question. If each gpu is going to use the values slightly differently to generate those randomness. Because when compiling a shader on one computer or another, the difference is not noticeable? Because in the first layer at least, with the same numbers as you, on my screen it looked very different. Thank you very much for all these videos!
Next up: how to create a universe in shadertoy!
That's what I was looking for! +1
Great!
Hey Martijn, thank you for putting up this great tutorial as always! One question: it seems like there's a black point at the origin when creating the noise pattern in this way. Do you know why is that?
Thanks for watching!
Its because the core noise function is sin(p.x*a + p.y*b)*c which is 0 for any combination of a b and c when p.x=p.y=0
You could put in an extra var inside of the sine to offset it randomly but its not really necessary, just shift the uvs away from the origin and you don't have a black spot.
As always, great video from Shader master 👍
Thanks. I really appreciate your appreciation :)
A good idea would be to make 3d noise and perform ray marching to simulate fog/clouds.😀
how do you apply 3d noise in rasterizer ?not using 3d texture
Sergio Sergio if you can make 2d texture procedurally like he is doing now... why can't you make a 3d "texture" from a 3d noise functions .. takes in 3 inputs to give an output instead of 2 inputs like he is doing now with the uv coordinates
well,you can make 3d noise using ray tracing but how do you apply this in rasterizer,so i meantioned rasterizer word :)
Sergio Sergio oh... got it, my bad. Maybe point cloud creation then a convex hull around it.. I'm not sure. Just guessing
Yeah it would be. Perhaps the topic of a future video.
Nice sir!Well explained :)
Thanks!
此刻,真理就在我的面前.
Excellent
THANK YOU.
On my PC that noise eventually become more vague until just gray screen (when I open your shadertoy too). Why is that?
It could be that your graphics card doesn't have a very precise sine implementation for the random function. Try a different noise function. You could take one from a ShaderToy called 'hash without sine'
Thaaanks man
Nvm, this is FBM actually :)
keep up the good work
will do!
Thank you!
Welcome!
I've notice that when the time grows larger, the pattern gets completely blank. Is it just me?
Certain hardware doesn't work nicely with trig functions (the sine in this case). Watch my the feathers video for another type of hash function that uses a dot product instead.
Is there any document or book that teaches glsl and create art with math?...
understand how mathematics work with UV coordinates
I think if you read any book on computer graphics the concepts will directly apply. Art is a very abstract concept though. Computer art is just art + computer. But maybe you mean fractals specifically? You should look into Processing, that should get you started.
@@4.0.4 It is to create these effects. www.ultranoir.com/en/
@@rtcwkillz thebookofshaders.com -> this helped me a lot to understand the basics of glsl :)
Would consider do some tutorials based on effects for games ?
Like zelda botw teleport
That could be a good idea. I'll have to look into it!
Thanks, very leerzaam.
did you just write perlin noise in a shader? neat.
No - the version known as "Perli Noise" today is a bit more complex and gets rid of the square like artifacts.
@@bronzekoala9141 Fair enough. I guess it's just basic coherent noise. Still really cool.
hi, where is your practise code? on github or other repository?
Added! See video description.
Typo on the last multiple of two - should be 64, not 65
Was that plushie added in post or you managed to keep a straight face with something so... _random_ being moved around you?
Hehe, no it was done in post ;)
amazing
The unicorn seems pretty random to me 😆
I nearly copied everything, but still got repeat and discontinued. I am very confusing, can anybody help me? www.shadertoy.com/view/ttcyRX
can anyone give me some tips on how I can make this shader work s inside a skybox.
www.shadertoy.com/view/wdyXR1
I'm getting smarter just sitting here.
wtf have I just witnessed