Custom Gradient Shader

[00:00:00]
>> We've got a red cube or some sorta colored cube. And then what we're gonna do is we're gonna write a vertex shader that takes some vertex information that Three.js gives us. We're gonna pass that down to the fragment shader. And then we're gonna use that information in the fragment shader.

[00:00:19]
And so this is sort of another thing to understand is that the way the pipeline works is that it's like a waterfall. It starts with geometry and it's actually right like what I've written here, it starts with the geometrym and the data from the geometry gets passed down this waterfall into the vertex shader.

[00:00:35]
And then it gets passed down again through the vertex shader into the fragment shader. And then, finally into the rendering, that's how this will work. And you'll start to see this as we write it. So we're gonna write void main. And instead of trying to memorize this next line, which is sometimes very hard to memorize, I'm gonna just suggest you go into the Repo, you go into Snippets.

[00:01:00]
So it's in guides/snippets. And if we scroll just to the first one here, Basic Vertex Shader. You go here and you basically just take this line, and you copy exactly this line here, and go into our shader code, we paste that into our vertex shader. And if it's copied correctly, and there's no typos or anything, it should just continue to work.

[00:01:33]
Everything should just look just as it did before. And that's because we've just rewritten the default vertex shader. So this vertex shader is the same as what Three.js gives us, but we also have to specify in our material here. So we have to make sure that the material has both the vertex and fragment shader.

[00:01:56]
Okay, so the next thing we're gonna do is we're gonna take the attribute data coming from Three.js, coming from this box geometry, we're gonna pass it down into the fragment shader. And to do that, we're gonna use something called varying. So a varying is another type, we've talked about uniforms, which is coming from JavaScript.

[00:02:16]
We've talked about attributes, which is coming from three.geometry, or three.boxgeometry. Well, a varying is actually something that we define here in the code. But then it's something that can get pass down into the fragment shader, so we say, varying vec2 vUv. And we say vuv = uv, and uv is a built in thing of Three.js, Three.js gives us this vec2 which is uv, which is a texture coordinate.

[00:02:46]
So this is gonna be just like we were talking about the sphere mapping and the Taurus mapping, those are using different texture coordinates that are built into the geometries that Three.js gives us. And here, we're gonna access those texture coordinates to be able to use those to create some interesting looks.

[00:03:02]
And so when we create a varying in our vertex shader, we just copy that line and we paste it into our fragment shader, it has to match exactly. So if we say vec2 in the vertex, we have to say vec2 to in the fragment, the names have to match, and so on and so forth.

[00:03:17]
And then, now that we've done that, we can just use it. And so instead of vec3 as a red, we're gonna do vec3 as vUv.x. And so this is all lots of code just to create a gradient. But the purpose here is to just try and wrap our heads around what's happening, and try to understand how we can start to build out more complex things.

[00:03:41]
So varying, you know how I was saying uniform, the reason it's called uniform is because it's uniformly the same across every single pixel in the surface. And so the uniform for, let's say if we were to find the color, maybe it's a vec3, something like this, this would be uniformly the same if it was coming from JavaScript.

[00:04:00]
It would be uniformly the same across the whole surface, whereas varying, the reason we call it varying is because the values change across the surface of this texture, and across the surface of this material. So vUv here is changing from one side of the cube to the other, and it's varying in its nature.

[00:04:19]
That's why they call them variance.