Adding GLSL Noise

[00:00:00]
>> I mean, there's a couple of things we could do. One of them is we could try to fix the poles, fix those issues, but it's gonna be a bit more work. But another more interesting thing potentially, would be to try and use noise. Maybe what we'll do is we'll start by just typing it out and just working with it.

[00:00:24]
And then once we get it running, maybe I'll walk through what's happening a little bit more in more detail. So, the purpose of noise in this particular shader, the purpose of what we're gonna be using this concept of noise flow, is to make it so all these circles have different sizes.

[00:00:40]
Cuz right now they're all kinda consistently, either small or consistently big. But we wanna introduce some randomness to make it look a little bit more like yeah, good sounds work. So I'm gonna go back to having a sphere, And what I'm gonna do is I'm gonna install a dependency that's a glsl dependency.

[00:01:04]
And if we look on NPM and we searched glsl noise, let's call it glsl noise. It's a module on NPM, but it's not a JavaScript module, it's a glsl module. And so we're gonna install this just like we would any NPM module. So npm install glsl-noise, and then it has some examples of how to use it in a fragment shader or vertex shader.

[00:01:33]
So one of the things is that this is using a concept called glslify, which is very hard to pronounce. And this tool is a way of introducing modules from NPM into your fragment shaders. So instead of just writing your fragment shader as a string, you're writing it as a string and then wrapping it in this glsl function.

[00:01:56]
And then you're also able to now put in these special lines these pragma glslify blah, blah, blah, you're able to basically require an import things from NPM. And so let's do the same thing that's here but in our own code here. So I'm gonna go to my code.

[00:02:19]
I'm gonna first at the top, I'm gonna say const glsl is equal to required glslify. This is a real tongue twister. But this is how is gonna look, we gonna call the variable glsl and require the tool itself. And then we gonna scroll down instead of using a template string for the fragment shader we gonna wrap this in a function.

[00:02:59]
And I'm gonna move this comment over, just so that it gets highlighted again. And now it's working. I mean nothing's really changed. But now we can import this noise function. And if you want, you can go to the NPM page, copy and paste one of them. Let's say we're gonna take the simplex noise.

[00:03:26]
So the one that says 3D simplex or you can just type it out with me. I'll show you how it looks, it's the #pragma glslify: noise = require( 'glsl-noise/simplex/3d' ). So it's a bit of a mouthful. And if you've typed it in correctly, let's say I type it in correctly, you're gonna get an error that says cannot find module.

[00:04:03]
Or if you haven't installed it, you're gonna get this as well. Okay, so how do we actually use noise? Well, first I'm gonna just use it in our code, and then I'll explain a little bit about how it's all working. So the goal here is to make a default value here for the size, the threshold that we're making these circles.

[00:04:23]
So for now, let's just say we'll leave it at 0.25 or you might want to copy and paste this line to leave it in case you want to come back to it later. So you might want to just comment that out and leave it there for reference later on.

[00:04:39]
But instead of just doing all that signed stuff, we're gonna do 0.25 plus let's call it offset. We're gonna create a new float. And for now the float, let's leave it at 0. We save, we make sure it still works. The code is still working, no errors. And now what we're gonna do is we're gonna use the noise function, which accepts a 3D coordinate because we've required the 3D version.

[00:05:10]
And we're gonna pass in vUv.xy, time as the third coordinate. And if it works you should see this kind of crazy pattern stuff that is going on in this demo here. So, I'll just do one more little tweak and I'll explain what's going on. Let's say we multiply this x y value by some number.

[00:05:35]
We're gonna get some crazy patterns which we really don't want right now, but that's actually kind of cool. So we have our q, and we're gonna use that instead of using the vUv here. So we're gonna create another vector called noise input, and it's gonna be q times 10 we're gonna use the same number that we used in our module.

[00:06:03]
And we're gonna pass this noise input in instead of Uv. And that's gonna create this crazy like camouflage pattern, but that's not what we want. We want it to be circles and we're gonna get that by flooring the value which actually looks kind of cool too. All of a sudden we have this like, some of them are squares, some of them are circles.

[00:06:24]
But it's because the offset is so drastic that sometimes it's getting so large that they're clipping. And they're basically clipping into each other and creating this sort of filled look. So the last thing I'm just doing here is I'm just scaling down the noise by adding a multiplication at the end of the noise function, by some small number, And now when I look at this, it should be a little bit closer to what I was looking for.