Example Shader Inspiration

[00:00:00]
>> Now, I wanna try and get us still working in the same scene with this cube and gradients and understanding coordinates. But I wanna start to set a bit more of an intention for what we're doing rather than just randomly changing colors and randomly like playing around with experimentation of like coordinates and stuff like that.

[00:00:17]
I'd like us to try and set a bit of an intention for exercises for the rest of the day. And so one of the things I like to do is find inspiration from art and art history and contemporary artists. This is Yayoi Kusama, who's most well known for these kinda installation pieces like infinity mirror type installation pieces.

[00:00:36]
Where she's doing these lots of circles, lots of polka dots, lots of repeating and sort of seamless patterns across these meshes. So here's another one. And she has this sort of motif of polka dot that appears in most of her work or almost all of her work, a lot of these circles, repeating circles.

[00:01:03]
And if x is a really good base for us to start to get inspiration for our own shaders, because it's something that looks very simple to do in a shader. Maybe you're thinking, this is just circles. But there's so many ways that we can approach this in a shader.

[00:01:18]
That it becomes a really good exercise for us to just understand some of the different ways we can do this. So this is what we're gonna be trying to create is some outputs that look a little bit like this. Here's another variation just by tweaking parameters in the shader, we can start to introduce lighting, can start to tweak these colors and it's all within the same exercise.

[00:01:41]
So now instead of going through lots of different exercises, we're gonna stick within this kind of output and try to see how we can tweak it and change it in different ways. I'll just run through some of these outputs. And then we'll run through again, in more detail going through each one.

[00:02:00]
But just when I'm trying to create something like this, theoretically, let's say in a hypothetical situation, you've been approached to contract a website for either Kusama or for her next exhibition. And part of the website includes this interactive component, which shows some of her her work or something like her work that allows you to rotate around these spheres, maybe interact with them, move them around or something like that.

[00:02:26]
And so you need to figure out how do you actually render these spheres with these little polka dots. Well, you could probably use a shader, and this is what we're gonna end up using. And so the first thing you might do is just start simple, start with a cube and try to get some circles repeated on the cube, just like this.

[00:02:43]
And once you have this, this is kind of gonna be a groundwork for doing something a little bit more like this, which is a bit closer. So making some noise, we're gonna try and chat briefly about noise, but trying to create something with a bit more of a sphere.

[00:02:59]
Trying to create something is a bit closer to her work. But if you do this approach, you might start to see errors, you might start to see flaws. When you turn this sphere, all of a sudden you're gonna see it looks a little bit weird on the poles.

[00:03:12]
That's because of the way that this particular approach would be using the texture mapping and so we have to come up with a different approach. So how do we get even spacing across these points? Just so that it looks a little bit more like Yayoi Kusama's work. And so in order to achieve that, maybe we'll come up with an approach that uses something like a icosahedron geometry.

[00:03:34]
So this is icosahedron, it takes triangles and lays them out in this sort of even way to create a sphere or a spherical shape. And notice all the triangles are very evenly spaced from each other. And all the vertices that defined those triangles are all very evenly spaced as well.

[00:03:52]
And so we could for example define, on each vertex, we could define an object. Here it's just spheres, which doesn't really look like Yayoi Kusama, but if we didn't use spheres we used disks or something like that. Maybe it looks like this, and all of a sudden, we get something that's a bit like her work.

[00:04:13]
And so the way that works is we take the points of the vertices of this icosahedron. So that's the white spheres for each of the vertices. But instead of rendering an icosahedron, our actual bubbles or balloons or whatever, we wanna call those things, those are very smooth, very detailed.

[00:04:31]
And so we're just using the icosahedron to define the points on the sphere that we wanna draw. And then we can start by rendering them as spheres, but that's not what we want, this looks like some weird ball. What we want is to make them look like they're part of the surface of the mesh.

[00:04:48]
And so instead of using spheres, we're gonna do little tiny discs. So there's a geometry in three.js called Circle Geometry. And this is what would be used here. And then we can go further, maybe once we have this we can create a shader version of it, that actually maps the pattern onto the sphere itself.

[00:05:11]
Because maybe one of the things you'll notice with this geometric version is that the actual geometry is sticking out of the sphere. And this is a pretty subtle detail, but maybe your creative director is gonna be like, well, we can't have this. It doesn't look like it's good enough.

[00:05:30]
And so you can actually go in, you can create a shader version. And we'll talk a little bit about how that would work. And this would be using some math, which is actually taking the distances of these points, in the fragment shader and computing it. And so I'll go into detail as we go, but this is just sort of the breakdown.

[00:05:51]
And then once you have all those things, you might start to polish it up, add more spheres rather than just one. You might start to add some lighting into it. And you might finally start to add little other details or flourishes or something like that. So that would be sorta the remainder of what we wanna sorta strive toward.

[00:06:09]
But we're gonna keep it simple, we're gonna do it piece by piece. And we might not get all the way to the very end, but the demos are there if you do wanna continue onwards to the more and more advanced work. And I'll try and break down, at least explain some of the more advanced approaches as we go.