Coordinate Systems

[00:00:00]
>> I'm gonna just sort of switch gears here. I'm gonna open up this WebGL and GLSL book. I'm gonna walk through some of the concepts around coordinate systems and around meshes and materials and just sort of review some of those things. It will be a bit of review if you've already done some WebGL, but it's gonna be nice to just go through it again.

[00:00:19]
And then we'll actually get into working with the code and starting to edit things and starting to develop it ourselves. So if you go to the repo and you go to the interactive book, the WebGL and GLSL primer. And you can follow along with me or you can just watch the screen, it's up to you.

[00:00:35]
If you follow along, you'll see that these little demos are interactive, and so you can actually edit them. So yeah, the first thing to point out really is coordinate systems. So coordinate systems is sorta the basis for us working with 3D. You're probably familiar with 2D coordinates. Top left is 0, 0, bottom right is the width and height of the grid that we're working with.

[00:00:58]
And here we just have different pixel values going in. And so the coordinate here would be 0 on the x, which is the horizontal, and 2 on the y, which is the vertical, pretty straightforward. Also, with this little demo, you can click this to full screen it or you can click this reload button to reset the settings back to default.

[00:01:21]
So that's the most basic coordinate system you're familiar with but in WebGL, and once we start to get into 3D, we actually want to start thinking in terms of relative to the origin point. So in this example, we've shifted the whole grid and we've given it the ability to go negative as well.

[00:01:40]
So now our coordinates are going into the negatives. So the the left or bottom here, -x, -y, as opposed to just going to 0, it can go below 0. And then we also have the center point. So if we type in 0, 0, that's gonna be centered in the middle of the grid that we're working with in the middle of this coordinate system.

[00:02:01]
And this concept is really, really crucial when we start to talk about 3D because everything is relative to this coordinate. And so it could be positive in either direction, by any amount. So this is just going up to 1, but these coordinates could be going up to infinity in positive or negative directions.

[00:02:19]
So this is how we start to think about 3D coordinates is in this Cartesian coordinate system that's centered around 0, 0. And 3D coordinates is the same thing. The only thing is that we're now revealing a third axis. And so if we go here, we can see the same 2D coordinate system, which is centered around 0, 0.

[00:02:38]
But if we shift our perspective, if we shift the camera and we start to look at this coordinate system from a different angle, we can see that all of a sudden we're revealing a Z axis, which is the third coordinate. And if we don't have any perspective, if we're just looking at it from 2D and we're trying to change this Z component, the third dimension here we're not gonna see any difference.

[00:03:00]
But as soon as we look at it in this perspective and we change that it's gonna make a huge difference as to where it's placed. And so this is pretty much how a 3D coordinate system works. It might be pretty basic for some of you. But you'll see once we start to work in encode, it can be sometimes hard to wrap around.

[00:03:20]
How do I place an object in the top left of the screen? Because there's no longer a top left of the screen, because everything is relative to the origin and relative to things like the camera placement and the camera orientation, and things like that.