Advanced Creative Coding with WebGL & Shaders

Mapping UV Coordinates on Shapes

Advanced Creative Coding with WebGL & Shaders

Check out a free preview of the full Advanced Creative Coding with WebGL & Shaders course

The "Mapping UV Coordinates on Shapes" Lesson is part of the full, Advanced Creative Coding with WebGL & Shaders course featured in this preview video. Here's what you'd learn in this lesson:

Matt demonstrates how UV coordinates are structured among different built-in geometries, and describes the scale of texture coordinates.


Transcript from the "Mapping UV Coordinates on Shapes" Lesson

>> So one of the other things I wanted to highlight, you don't need to follow along with this part, just leave your code as it is. But I just wanted to show how UV coordinates look differently across different surfaces and across different geometries. Because you might be wondering, how does this work that we just had a gradient that goes perfectly in like this square type format and all of a sudden that works just the same in a sphere?

Well, that's because UV coordinates, they come in all these built-in geometries. So just as example, I'll just show you a grayscale of what the vv.x looks like. So on a sphere, we have the vv.x and it's going from this scene here, it's going from zero. And when we rotate around, the value is increasing towards one.

So just like the cube, this texture coordinate goes from zero all the way to one, it goes all the way around to one. And then it doesn't really wrap around nicely because it goes from one back to zero. So that's why this harsh seam is happening. And then if we were to take the other coordinate, the y-coordinate here, instead of doing it horizontally, this is more vertical.

Where on the top pole, it's pure white, and as we go down towards the bottom pole, it's gonna be pure black. And so even in a sphere we can use these x and y-coordinates to create some nice shapes and patterns and things like that. One of the things you'll start to see though is that it's really hard to deal with spheres because unlike a cube, a cube has this nice sort of edge to it, but a sphere has this kind of this weird artifact that starts to happen at the poles, which is especially noticeable when we're doing our masking here.

Because towards the poles, well, we have two things. One is that we can very clearly see the seam that I was mentioning earlier, so that's one problem. And another problem is that as we go towards the poles, these circles are getting stretched and they're getting kind of wonky.

And that's just a limitation of using this type of projection, this type of mapping on a sphere. So this type of Cartesian UV coordinate, so it's Cartesian in the sense that it's two dimensional, it's x goes along, and y goes along. That's a Cartesian coordinate system for the UV coordinates and trying to apply that to a sphere comes up with some artifacts like this.

Like this pole system, or this pole problem, and the seam problem. So that's just something to be mindful of, but how does this look on other geometries? So if I was to take a sphere and maybe turn it into a TaurusGeometry. I'm just gonna visualize just the, the vv.x to start.

Remember, this is a great way to visualize what's happening is just by outputting the float value. So here, now, we're seeing it go from pure white, and then it goes so radially around the Taurus all the way down. Here again, to pure black. And if I was to use the other coordinate, It's actually gonna go from one side like the top part of the donut or the top part of the bagel.

And then all the way inside from zero all the way to white out here. So that's just something to be aware of, is that these texture coordinates, as long as you're using built-in geometries here, you can use these texture coordinates. But they're all gonna be a little bit different depending on how the geometry is sorta constructed.

So it's just something to be mindful of, cuz this is gonna have different artifacts than the sphere. So I'm visualizing the mask, we'll start to see the scene here, that's where it's going from one back to zero. And that's the main problem, I think with the Taurus, it doesn't have that issue with the poles.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now