Shaders Q&A

[00:00:00]
>> Speaker 1: Quick question.
>> Mathew DesLauriers: Yep.
>> Speaker 1: We're doing center.X times the aspect because we're passing in width divided by height of the aspect. If we had done height divided by width would we want to do center.Y equals the aspect?
>> Mathew DesLauriers: Yeah that sounds right. We can just confirm that.

[00:00:23]
I always end up just doing width divided by height, but I think this would also work, you can do center.y times aspect if you're passing in height divided by width, or if you're passing in, let's say passing in width divided by height. You can do center.x times aspect or you can do center.y divided by aspect.

[00:00:48]
And there's some subtle differences in terms of which axis it sort of aligns it to, stuff like that. So, let's say, oops.
>> Mathew DesLauriers: So now, no matter if I'm doing center.x times aspect, and aspect is width divided by height, no matter if I resize my browser wide or not, the circle is going to be the same size.

[00:01:15]
But if I was to do this the other way around, where center.y is divided by aspect. Now, when I resize wider or not wide it changes the side of the circle. Sometimes that's actually useful if you have an image that's always maybe going up and down and growing in height.

[00:01:33]
You might want to use an aspect ratio correction like this so that your circle's always the same size. Yeah. And just feel free to play around these values. Maybe it is kinda cool to have a fall off that's a bit smoother. You can also just try adding, assign time to things.

[00:01:54]
[LAUGH] Sometimes, it creates these cool images. You can try like just playing around with things. So kind of one of the fun things about shaders is, you can just have a lot of fun tweaking things for hours. [LAUGH] But, yeah.
>> Speaker 1: So length, smoothstep, and mix, are those all shader functions or are those GSLs?

[00:02:17]
>> Mathew DesLauriers: Yeah, so it's basically the same, those two things. In the context of what we're doing today, we're working with shaders in WebGL. Which is basically, that means we're gonna, all of our shaders are gonna be using GLSL, which is a programming language. So, it's a bit like JavaScript or Java, it's just different language.

[00:02:37]
And the GLSL language, it has these built in functions, like sign, and length, and smoothstep. And it has these built in data types like float, and vec2. And, so yeah, I mean, it is both shaders and GLSL. Because GLSL is the language, and shader is sort of the concept, I guess you could say, if that makes sense.

[00:03:02]
Somebody was asking about how do you apply fragment shaders or shaders, pixel shaders to a 3D mesh. This is a bit of an advanced topic that we might not really get into today, but I'll just show an example of how simple it is. There's a bit more complexity involved than this because Three.js, it handles shaders a little bit differently.

[00:03:26]
It tries to make a few things easier for you, but as a result there's some slight differences. But in Three.js if you use a shader material, you can specify your own fragment shader string, just looks like this. And then you can change the string to change the shade or just like we are with the full screen shader.

[00:03:49]
And then, there's sort of a whole another, like a can of worms if you wanted to get into doing individual shading or textures, or materials for each of these cubes. So it's not really something we'll get into because it involves passing down some things like UV coordinates through Three.js that we might not get into, but basically once you're getting more familiar with shaders and shader code, doing this sort of thing in Three.js is definitely gonna be much easier.

[00:04:22]
And there's a lots of tutorials. Actually, if you're interested in that, go to the repo and at the very bottom there's a couple links on GLSL and shaders. And this one, the second one here it's gonna cover some of the stuff we're talking about today in more depth, talking about the data structures and stuff like that.

[00:04:42]
And it'll explain some of the syntax. And then this one here, the custom shaders in Three.js, this is probably exactly what you want. And both of these will go through using shaders. This one will go through like really doing everything from scratch using a few different tools than what we're using today.

[00:05:02]
But a lot of the same concepts. So it's just a link to check out maybe later.