Passing Data into Shaders

[00:00:00]
>> One last little thing is trying to understand how do we pass data into these shaders. Because right now we have data that's being passed from a vertex to a fragment, but how do we pass data from our code here in JavaScript and pass it into both of these shaders.

[00:00:17]
So we're going to use uniforms, we specify that in the shader material, and uniforms is an object where you pass in the name to uniform, so let's name it colors. So the name here is really important, because the name that we use in this object is going to be the same name that we have to use in our shaders.

[00:00:36]
And so we always do it like this syntax color, is an object and the object has a property called value and then we can pass in 3js type. So a 3js color or 3js vector 3, or even just a regular number like a 0 or 5 or 6 as a float and that will create a uniform.

[00:00:58]
Once we declare it in our material we have to declare it in our fragment shaders, we have to write this line uniform vec3 color, that declares it and it's just saying let's access this. So I could say multiply the result by that color and now all of a sudden I've got a color that's coming from JavaScript that I can define in like a hex code or a CSS color string.

[00:01:24]
And you can imagine changing this value based on maybe user input or something like that, and it would change in the shader, uniforms get sent to both the fragment and vertex shader. So this is pretty heavy stuff, but after this because this is like the heaviest part, we're going to try and just dissect and like digest all of the stuff around shaders just by doing some more fun exercises.