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

The "Translating Mask onto a Sphere" 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 to change the box geometry into a sphere, and modifies the mask pattern to have equirectangular properties to make the circles on the mask more circular.


Transcript from the "Translating Mask onto a Sphere" Lesson

>> One of the other things that we've been doing so far it's just working with this cube. But all of her work, all of Kusama's work, is spheres, or not all of it, but much of it is, and so maybe we'll switch this to a sphere. So all I'm doing is just replacing the box geometry with a sphere geometry.

And you'll see that everything still kind of works. One of the things is that because we have a sphere, when we unwrap a sphere, the horizontal sort of component is gonna be pretty much twice as long as the vertical component. That's why we see these, when we see these equirectangular images, they're exactly two to one ratio.

And it's the same thing here, we have this two to one ratio when we're trying to draw circles, and that's what's creating them to be squashed. And so what we can do is we can say pos.x maybe multiply that by 0.5. That's an error. There's a space. So multiply that by 0.5 or, actually it has to be done before we do the modular.

So, let's create another UV variable. So let's call it, I don't know what to call it, I'm just going to call it q. It's not a very good name, but whatever. And then I'm going to pass q in. And then I'm going to try doing q.x. It's not actually 0.5, I'd multiply x by 2, because the ratio is 2 to 1.

And so what I've just done is I've declared another vec2, which = vUv. And then I stretch the x coordinate by 2, and then we've done all the rest of the same stuff. And that's just gonna make it line up a little bit better with how this equirectangular stuff works.

And it'll make the circles look a little bit more circular.

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