Value Noise Explained!

Рет қаралды 33,945

Күн бұрын

Live Version:
www.shadertoy.com/view/3d23z1
Twitter: @The_ArtOfCode
Facebook: / theartofcode
Patreon: / theartofcode
PayPal Donation: paypal.me/theartofcode
Value Noise is the little sister of the famous Perlin Noise and is very useful in procedurally generated content to give all kinds of things a more rough and natural appearance. In this video we will build this algorithm from scratch so you can understand how it works and use it in your own creations.

Пікірлер: 123

@kacperozieblowski3809 4 жыл бұрын

the unicorn walking in the webcam is killing me :D

@RamHomier 4 жыл бұрын

Thought it was a cat.

@HarsTam 4 жыл бұрын

It is not a fox?

@agysin 3 ай бұрын

Fantastic explanation, clear and calm. Thank you!

@eventhorizon8014 4 жыл бұрын

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 :)

@cushiontwin 4 жыл бұрын

for anyone wondering, the font is in the title is called kill the noise. great attention to detail!

@ShatabdaRoy Жыл бұрын

Yeah!

@arkondigital1496 Жыл бұрын

Your explanation makes everything make so much more sense and so much more easy to sit through!

@xizhiwang2653 5 жыл бұрын

It is Sooooo USEFUL! The noise functions in shadertoy have always been chaos to me. Thanks !

@ogneed Жыл бұрын

best video about noise I ever seen. Thank you very much!

@ctrlz4475 6 жыл бұрын

Oh God, Here is The Best ever video for shader newbie

@Moonz97 4 жыл бұрын

Amazingly explained. Thanks!

@maxlevs 4 жыл бұрын

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!

@LuckyChatt 6 жыл бұрын

Great idea for video series! Good job!

@TheArtofCodeIsCool 6 жыл бұрын

Thank you!

@Hypnoticshark 6 жыл бұрын

As always, I learned a lot. Thank you.

@TheArtofCodeIsCool 6 жыл бұрын

Awesome. Thanks for continuing to watch my videos.

@Bubatu7 6 жыл бұрын

Great video, easy to follow and fun to watch.

@TheArtofCodeIsCool 6 жыл бұрын

I'm glad you like it :)

@Workbenchtv 11 ай бұрын

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!

@user-iy8ek4ki1r 2 жыл бұрын

Incredible as always! Thanks!!

@igorhuayra5284 6 жыл бұрын

As always I learn a lot thank you

@williamiiifarquhar4345 3 ай бұрын

Great video! Very easy to follow.

@greje656 6 жыл бұрын

great video. thanks for those!

@haythamc6988 4 жыл бұрын

Great video! Thanks a lot!

@andreadiotallevi5780 2 жыл бұрын

First time I see how to create a noise function from scratch - super interesting!

@forshera 6 жыл бұрын

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!

@TheArtofCodeIsCool 6 жыл бұрын

I'm glad you like it, and you're welcome!

@jovanrakocevic9360 5 жыл бұрын

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)

@ollerich32 5 жыл бұрын

@@jovanrakocevic9360 sounds awesome! Got any links to those topics?

@jovanrakocevic9360 5 жыл бұрын

@@ollerich32 iquilezles.org/ it can be a bit hard to navigate but it has all sorts of goodies.

@iamthoys 4 жыл бұрын

Looked all smooth until the double of 32 was 65 hhehehehe. Great vid

@TheArtofCodeIsCool 4 жыл бұрын

Hehe, yeah I noticed that when I was watching my own video. Sometimes you don't realize you say something wrong. :)

@Graeme_Lastname 4 жыл бұрын

And double that is 125. ;)

@kirkrock7285 2 жыл бұрын

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!

@newuser2493 6 жыл бұрын

Thanks, great series! Subed.

@TheArtofCodeIsCool 6 жыл бұрын

Cool :)

@realcygnus 6 жыл бұрын

awesome stuff

@6556 6 ай бұрын

It`s AMAZING. Thank you very match

@ornellaocchipinti2177 2 жыл бұрын

That's brilliant, amazing! Thanks a lot!

@icaroamorim3123 5 жыл бұрын

what a beatiful chanel

@amreamer362 2 жыл бұрын

Excellent

@frankjohansen3132 6 жыл бұрын

You are a damn good teacher.

@TheArtofCodeIsCool 6 жыл бұрын

Thanks, I'm glad you think so!

@feishiko7038 Жыл бұрын

Loves it, More easier to understand the value noise than bookofshaders!

@mwiederrecht 2 жыл бұрын

THANK YOU.

@cybrown3369 4 жыл бұрын

This is gold !

@fyisic Жыл бұрын

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.

@CROWFACED 2 жыл бұрын

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!

@TheArtofCodeIsCool 2 жыл бұрын

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?

@SuperToughnut 3 жыл бұрын

Thank you!

@TheArtofCodeIsCool 3 жыл бұрын

Welcome!

@user-ef3ej4pq4f 6 жыл бұрын

Really hope more videos about advanced noises!

@TheArtofCodeIsCool 6 жыл бұрын

What specific noises were you thinking of?

@AndorSalga 6 жыл бұрын

Awesome videos! ^_^

@blender5528 6 жыл бұрын

Nice sir!Well explained :)

@TheArtofCodeIsCool 6 жыл бұрын

Thanks!

@kru.7291 6 жыл бұрын

keep up the good work

@TheArtofCodeIsCool 6 жыл бұрын

will do!

@TerminalStage 6 жыл бұрын

That's what I was looking for! +1

@TheArtofCodeIsCool 6 жыл бұрын

Great!

@rt1097 4 жыл бұрын

amazing

@anmaral-sharif1381 6 жыл бұрын

As always, great video from Shader master 👍

@TheArtofCodeIsCool 6 жыл бұрын

Thanks. I really appreciate your appreciation :)

@kirkrock7285 2 жыл бұрын

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

@prietjepruck Жыл бұрын

Thanks, very leerzaam.

@Monio4 6 жыл бұрын

Fantastic. How about making tutorial about Perlin or Worley noise?

@TheArtofCodeIsCool 6 жыл бұрын

Thanks! Yeah perhaps in the future :)

@KaiwenFa 6 жыл бұрын

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?

@TheArtofCodeIsCool 6 жыл бұрын

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.

@user-zs5ko5gw4d 5 жыл бұрын

此刻,真理就在我的面前.

@adriancardenosocerezo Жыл бұрын

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!

@KaranArjun-xf3uy 2 ай бұрын

Wow,nice explanation! Can I use this noise for a commercial project?

@jeyko666 5 жыл бұрын

Thaaanks man

@jeyko666 5 жыл бұрын

Nvm, this is FBM actually :)

@oraz. Жыл бұрын

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.

@nitrogen1281 3 жыл бұрын

Hello, i just make my own noise function, when i reposition the uv to center, why the noise function looks like "feedback" effect?

@LudwigvanBeethoven2 4 жыл бұрын

Next up: how to create a universe in shadertoy!

@sacredbanana 6 жыл бұрын

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.

@TimMatthewsX 6 жыл бұрын

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

@TheArtofCodeIsCool 6 жыл бұрын

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.

@sacredbanana 6 жыл бұрын

Thanks guys. Hopefully you'll see me competing in next year's Shader Showdown at Revision in Frankfurt

@sacredbanana 6 жыл бұрын

are there any books which you've read that you recommend?

@TheArtofCodeIsCool 6 жыл бұрын

Unfortunately no. I learned all of shader programming by looking at what other people have done. Other than that, I guess KZfaq is your best choice.

@MrSerozka 4 жыл бұрын

On my PC that noise eventually become more vague until just gray screen (when I open your shadertoy too). Why is that?

@TheArtofCodeIsCool 4 жыл бұрын

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'

@DutchDread 5 жыл бұрын

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?

@TheArtofCodeIsCool 5 жыл бұрын

You have a shadertoy link I can look at?

@DutchDread 5 жыл бұрын

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.

@TheArtofCodeIsCool 5 жыл бұрын

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.

@josephkalathil9354 6 жыл бұрын

A good idea would be to make 3d noise and perform ray marching to simulate fog/clouds.😀

@blender5528 6 жыл бұрын

how do you apply 3d noise in rasterizer ?not using 3d texture

@josephkalathil9354 6 жыл бұрын

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

@blender5528 6 жыл бұрын

well,you can make 3d noise using ray tracing but how do you apply this in rasterizer,so i meantioned rasterizer word :)

@josephkalathil9354 6 жыл бұрын

Sergio Sergio oh... got it, my bad. Maybe point cloud creation then a convex hull around it.. I'm not sure. Just guessing

@TheArtofCodeIsCool 6 жыл бұрын

Yeah it would be. Perhaps the topic of a future video.

@rtcwkillz 5 жыл бұрын

Is there any document or book that teaches glsl and create art with math?... understand how mathematics work with UV coordinates

@4.0.4 5 жыл бұрын

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.

@rtcwkillz 5 жыл бұрын

@@4.0.4 It is to create these effects. www.ultranoir.com/en/

@Madmadfr 5 жыл бұрын

@@rtcwkillz thebookofshaders.com -> this helped me a lot to understand the basics of glsl :)

@icaroamorim3123 5 жыл бұрын

Would consider do some tutorials based on effects for games ?

@icaroamorim3123 5 жыл бұрын

Like zelda botw teleport

@TheArtofCodeIsCool 5 жыл бұрын

That could be a good idea. I'll have to look into it!

@qqlove139 5 жыл бұрын

hi, where is your practise code? on github or other repository?

@TheArtofCodeIsCool 5 жыл бұрын

Added! See video description.

@4.0.4 5 жыл бұрын

Was that plushie added in post or you managed to keep a straight face with something so... _random_ being moved around you?

@TheArtofCodeIsCool 5 жыл бұрын

Hehe, no it was done in post ;)

@galaxyfarmer4742 4 жыл бұрын

I've notice that when the time grows larger, the pattern gets completely blank. Is it just me?

@TheArtofCodeIsCool 4 жыл бұрын

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.