Advanced Creative Coding with WebGL & Shaders Basic GLSL Fragment Shader
Transcript from the "Basic GLSL Fragment Shader" Lesson
>> Here's again another fragment shader and this one is just taking in the these two sliders here one of them is the color, which is a defined here as a hex code but in the shader, it has to be somehow turned into vec3. So when we use three js and we use color, we're using RGB which is between 0 and 1.
[00:00:22] Well, it's the same thing here with color, so this is a 3D vector, which is between 0 and 1 for orange GNB and then we have opacity here. And so let's say we wanted to try and make the pixels of this quad a different color. So let's just try and edit it here.
[00:00:42] The first thing we need to do is we need to use this gl_FragColor. This is the output of a fragment shader. The output is a vec4, so it's RGBA red, green, blue, alpha. And so we could just do vec4 is equal to some number. So now we have a FragColor that is 0.5 for all the components, for red, green, blue, and alpha.
[00:01:43] So uniform, this is a special type of property that we can't assign it a value here. So I can't just say, I want it to be right up here. You're gonna get an error. It's gonna say cannot initialize this type of qualifier. It's gonna say uniform can't be initialized, we can't initialize a uniform from the shader.
[00:02:46] So let's say from the dom, whether we're doing a slider, or maybe from something else, and to pass that information down to the fragment shader. And the reason it's called uniform is because because the value that we're getting is uniformly, the same across every single pixel in this fragment shader.
[00:03:03] That's why it's called uniform. So it's not changing across the different pixels. So color let's say right now we have the color is set to this this red value here, which is 255420 or some similar value if we were to normalize that to 0 to 1. Well that color's not changing across the entire surface of this quad.
[00:03:44] And this is what's defining the camera and the way that the object is positioned as defining the way that the camera's actually projecting whether it's isometric or orthographic or perspective. So those things we don't really need to worry so much about what they mean other than the fact that they contain the data and they contain the information about how to transform this mesh.
[00:04:09] But then there's this other thing that I haven't mentioned yet which is attribute. So attribute is different than uniform. It's not coming from like a slider or something like that, but it's actually coming from the vertex data that's contained in each of these vertices. So remember when I was talking before lunch about vertices and I'll just real quickly show you in this demo.
[00:04:40] So let's say in the geometry demo or the buffer geometry demo we have these vector threes and each of these it's a position attribute so here we have a position attribute that's defining the Vertex positions. We could add other attributes like the colour, we could add texture coordinates, we could add random numbers if we wanted to create some random displacement in the geometry, and that's the attribute.
[00:05:09] So it's coming from the actual geometry of the mesh that we're working with. And if we're doing buffer geometry, we can add in custom attributes. So you could have a new attribute that would say, myCord and it could be some vec3 or it could be a float or something like that.
[00:05:25] You just have to declare it just in the way we've been declaring the position attribute in the buffer geometry example. Okay, one last little thing is to understand how shaders are different in three js, as opposed to in pure WebGL or pure OpenGL. So so far, these shader examples have been including a few things like precision highp float, and I've included a couple of uniform things like the transformations.
[00:05:54] Well, when we write shaders in three js, we can simplify them a little bit. We don't specify precision highp float, we just go straight to the main function. And then we don't need to specify the transformation uniforms, we can just write our code. So this is a vertex shader now and it's a little bit simpler.
[00:06:13] And this is the fragment shader. Once again no precision specifiers. So this is three js giving us some utility here, some convenience. Making it just a bit easier to right away start writing shaders, not having to worry about them. And so this code actually that you're seeing, you could copy and paste this into your scene that you have with the earth, and it would just create the same setup.
[00:06:37] Because all of a sudden, we've created a shader material just by doing this these several lines of code here. We have the vertex shader as a string, we have the fragment shader as a string, and then we have the material which combines these two shaders, which says here's the vertex shader and here's the fragment shader, it's a shader material.
[00:07:52] And so really, you would actually want to use this opacity in the alpha component of a FragColor. But one thing you might notice is that if I use this. It looks pretty good actually. But sometimes what you'll need to do is, you'll need to also specify that your material is transparent by just saying transparent true.
[00:08:16] It's just something to notice a bit of a gotcha is that in three js by default objects are opaque. And that's because it's a little bit more efficient to render opaque objects. But if you have an object that has some transparency, you're going to want to put in transparent true.
[00:08:32] And there's one other thing I want to mention was this snippets, which is in the webgl glsl repo in the guides, or also in the links here. If you scroll down snippet using the workshop. So this kind of basic fragment and basic vertex shader, you can copy and paste this if you're forgetting what to write and you can use this as a base.
[00:08:57] It includes the few things that I haven't talked about yet which we'll talk about later in the afternoon called varyings. But for now, you can just copy and paste it or you can copy and paste the ones from the guidebook that would also work.