How Procedural Models work on Roblox transcript

I do the voiceover intro. You're going to be on camera now. I say >> Hey there. I'm Duck Tsar Yellow and in this video I'm going to be reviewing Peter, a principal software engineer at Roblox, about procedural models. We're going to be talking about what they are, how they work, why they're important, and how they impact the kinds of games you can make on the platform. >> All right, Peter. So, procedural models, people might not know what that is.

What's procedural about it? How is a procedural model different from a regular model? >> Well, a procedural model uses code to generate all of the geometry of the procedural model based upon the size of the model and hopefully other contextual information about where it is in the world. Instead of having a block made out of concrete, you can now have a block made out of building and the procedural model will fill in all of the difference. >> Okay.

So, what's the value add? What's the What is the upgrade that procedural models bring to Roblox development that, you know, wasn't there before? >> The main way I'd put it is the number of edits you have to make to get finished, final, good-looking geometry in your in your games, in your Roblox experiences is much reduced. So, let's say if we're having a look at this place file now, right? >> Nice speedlines. >> Yeah, speedlines.

I love this stuff. It just makes editing fun. So, if you have a look at this model now, we have a very, very basic obby which is built out of basic concrete blocks, right? It would take your average Roblox developer maybe 20 edits to build this. You grab a part, you drag it around, you clone it, and you size it up and you have something that looks like this. This is very often called a gray box, right? So, the idea is with procedural models, you use those same 20 or 30 edits, but instead of having something that looks like 2018 base plate, you have something that looks like final finished production geometry. >> So, it's from a performance standpoint, procedural models are just as cheap as a gray box or comparable?

You don't have like they're not super heavy. >> Uh procedural models don't have to do anything at runtime. You only pay the cost of the final geometry that's been output. Uh That's clever. Is that like the whole point? >> Yeah. Yeah, that's >> [laughter] >> They're not They're not doing anything. It's like procedural models produce static geometry. They don't do anything at run time, so you're only paying the rendering cost of whatever geometry it outputs. >> Could you show us an example?

You have a couple demos that you want to show us this in action. >> Sure. So, very simply, if I jump over to demo number two here, it's the same place, but I've swapped all of the concrete blocks out for a simple procedural model that I put together called 27 slice. Now, if you get up right up close to this model and have a look, >> It's green. >> It's not just green. If you look at the corners, the corners are nicely rounded and beveled on [music] this.

And as you size it, you'll see that the bevels are not squishing. This is not a mesh that we're sizing out. This is This keeps its bevels no matter what size we do. >> It's not deforming or like getting squashed or something. >> No, no, no. It's keeping its aspect ratio on those bevels as we work. Now, the way it's doing it is internally inside of this procedural model, it's generating hundreds and hundreds and hundreds of little mesh parts, but these all get instanced together and you're only paying the final geometry cost of this. >> Wow. >> And procedural model does all of the maintenance and updating of all of these while you work. >> And [music] you can just transform it as one giant block.

You don't have to worry about all the million little subsections that it's made out of. >> That's exactly right. Instead of boring hard corners on the concrete, we can have nice soft round good-looking geometry here for exactly the same cost in terms of editing effort. >> So, you mentioned that the green one is built of a bunch of super tiny things and you can move all of them at once because a script is changing all the sub components.

But, how does that work? Like, how do you go further beyond >> Okay. >> the bevels in the green? >> All of these blocks here are procedural models, and I think it helps if I show how this is put together. So, there's a concept in 2D imaging called nine-slicing, where you basically define where the corners are and what the edges look like. And so if I show you how these put together, if I jump over to the mall over here where I got the parts from, you can see that these These are the individual pieces that I'm assembling to make the bounds. >> Oh, the puzzle puzzle pieces that you all put together. >> Yeah.

So over here we have the puzzle pieces that get put together to make up that box depending on how it's sized. So we have the edge piece here. We have the top edge. We have the rounded corner that So all of these get copied and pasted when the procedural model is put together to to get the final result. But you can get more fancy than that. In fact, you can if you come over here and have a look at these pieces, you can see that these are much more complex in how they've been put together.

These have been put together out of Roblox parts and there's a metal edge and a bevel and some bricks. And the final result of that is something you can drag and drop easily and still have it be resizable. And it assembles those pieces together into something that's much more complex geometry. >> So if you really make your puzzle pieces shine, your procedural model is going to shine because it's literally just putting all those puzzle pieces together in a way that you're transforming and dragging. >> Yep.

And the amount of edits you have to make to get final good-looking geometry it is the same. This is the same amount of work as the original concrete block, but now it looks well, frankly, far better than what you'd want to have to put together by hand, right? >> Yeah. >> Like this is good-looking bevel geometry with different materials and individual bricks. And you didn't have to do any of that. You just had to set up the initial procedural model and then this all comes out of that for free. >> That's okay.

Is there more? >> There's definitely more. Okay, so this is as far as you can get in Roblox right now without doing anything sneaky. >> Okay. Oh, so this is the sneaky part of the video. >> we we get up to the sneaky part. >> A >> procedural models are still under under development right now. So procedural models normally can't tell where they are in the world and what other the models are around them. So we have to use a plugin to give them a little bit more information so that they can share information between themselves as a generating.

So, when we do that, we can start getting into bigger result. >> Oh, a building. Just straight up drag and drop. >> Okay, so I just realized that the we have this demo before we get to the sandboxing bit. >> That's okay. >> Okay. >> Is this a sneaky technique or not? >> This is not sneaky technique. This is still normal technique. >> Oh, okay. So, sneaky's coming later though? >> Sneaky sneaky's next one. >> Okay. All right, we got ahead of ourselves.

Can you make more puzzle pieces than just like the four sides of a box? Like how far can you push this? >> One of the examples that I mentioned when we started this was that instead of having a block made out of concrete, one of the aspirational things is maybe you could have a block made out of building. Roblox already comes with the modern city demo where all of those buildings are made out of nice templated pieces.

That's kind of the perfect candidate to rebuild those buildings as procedural models. So, I can show you what that looks like here. This is exactly the same >> Okay. >> sort of setup. So, instead of having a block made out of concrete or bricks, we can now have a block made out of building. We can have >> Are you adding more windows when you >> Yeah, I can start off with a one floor building where the doors are doors are on the bottom floor. >> Yeah, yeah. >> And as I drag this up, we have a skyscraper or a really big skyscraper or a massive skyscraper and and it's Yeah.

So, we now have a block made out of building. >> And you just programmatically say when I drag it up, that means put in more windows or that means put in like a wall and a window or like >> That's exactly right. So, all of these pieces came from prefabs out of the modern city demo and they already had things like edging for the top windows and doors on the bottom row and these little cafe pieces. And so, all it's doing is running around and grabbing those pieces and assembling it like a jigsaw puzzle to fill out the box that you're defining with the procedural model. >> That makes a lot of sense for like building and how we're basically having a bunch of different puzzle pieces to make a square look really cool and a building is probably like the coolest thing that you could do for a square, but what if I don't have a block?

Could I use this in a shape that's like change of the silhouette beyond just like what this building is or what this >> So, it would have a different shape like a T-shape or >> Yeah, like any any other shape. >> Exactly. So, that's difficult to do right now because procedural models can only be a block right now, and they're not aware of the other things in the workspace as you're working. But, if this is your own local project, you can help the procedural models out and share more information with them about the world, which is what I'm talking about when I say doing something a little bit sneaky.

You're really just giving more information to the procedural models with the plugin so that they can generate in different shapes and be more aware of the things around them as they generate. So, if we go to demo number five, >> How many demos do you have? >> I I think there's six. So, we've kept the buildings there, but now we have a procedural model here called grass, which is one of these new procedural models that is context aware, is aware of the world around it as it generates.

So, as I drag this box of grass out, what it's doing is it's looking for places in the world where it can place grass in a crack or up against a crevice on on the buildings. >> Wait, okay. So, is it Is part of the sneakiness that you just made the edges of the square transparent and then now fill that transparent square with other things and then have that transparent square go over your other squares? >> No, and >> Ah, I thought I had it. >> [laughter] >> Okay, so the way this is working is the procedural model is still defining a big bounding box for all of the grass, right?

But, instead of going and filling out every single cell in the box with grass, it's going through and also, because it can now read the world as it's generating, you can have a look around and say, "Is this a good spot to put grass?" And so, the rules that I have this grass set up for is [music] it saying, "Is this Is this grass placed against a nice edge like in the corner between the ground and the wall?" And as we move around, we can see that it's consistently followed this.

Sorry for the flickering as we move here, but we can see that it's done a pretty good job of just finding nice little places to place grass that maybe you would have to place by hand once upon a time, but now you don't have to because you have a procedural model that can do it for you. Um and to answer your question about having different shapes, we're we're still stuck with boxes, but because we can make it so that procedural models are aware of other procedural models when they generate, you can make it so that when these blocks go to generate, they can be aware of other bricks when they generate, which is the last demo that I'll show today.

As we look at this one, we can see that this is similar to the other demos we had before, but now if we duplicate it and drag it out, Oh, did that seam go away? Yeah, that seam went away. Now, because as they've generated together, this procedural model here is aware of this procedural model here, and they cooperate and choose different tiles on the boundaries to end up with a more seamless look. >> So, because they're all from the like it knows like, "Hey, this other procedural model is here, and that means it's creating, you know, this type of effect, which means I should use this puzzle piece instead." Yeah, oh, you just cut in the edges.

Yeah, yeah, yeah. >> Yeah, so I just brought it in. So, instead of having to manually go and place all of these tiles and handle all of this edging, we can just make it so that this procedural model as a whole is aware of all of the procedural models that are touching it at the same time and then choose the correct tiles as it puts itself together. >> That makes sense. So, then is the there's I noticed there's a hole. >> Mhm. >> [laughter] >> Yeah, I wasn't going to talk about the hole, but we can talk about the hole. >> Is the hole just a just like an inverse like like an empty uh procedural model?

Like, how do you get the hole? >> Uh so, the procedural model is the same [music] procedural model as the other bricks that make up this tile, but I've just got an attribute set up on it saying that this is a hole. And now, as I drag this out, it's like this whole volume is >> The whole turn into a wall because it >> Yeah, because as as we resize it and we pull it out, as these procedural models update and generate, they're like, "Hey, there's a hole there.

We're not going to fill this in with any tiles." And then that's where we touch the edges of the hole, we'll correctly put the border trims in. >> That's like erasing out of your building. >> Right. A whole tile. >> That's crazy. >> So, you you can use this to very, very quickly make very good-looking geometry, but the underlying edits is still just a handful of edits to get to this result. >> All right, well, that's awesome.

Uh I'm a little sad that these are just squares and not, you know, organic shapes, but I understand this is still new. That's I mean, that's the video. The link for how to do things is in the description. That you have There's an open project file that people can like explore with this. >> Sure, I'll I'll be sharing this project file for everyone to be able to come in and have a grab of it, and it also has the plugin source code that we talked about that allows procedural models to see each other.

But, one more thing. You you're hung up on these organic shapes. There's something I can preview with you today that's not quite ready for release. >> Oh, super secret? More secret sneaky? >> More secret sneaky [laughter] stuff. >> The cynical thought right now is like, this is cool, but I'm still stuck just making angular buildings. I can't make anything organic. >> I'm really wanting to talk about custom polygonal shapes, and like, we can't talk about it. >> Uh okay, let's do the polygonal shapes then. >> Can we? >> Yeah, let's do the polygonal shapes. >> Because we're working on editable meshes right now.

Editable meshes >> Uh >> a fantastic vehicle for doing >> [music] >> organic shapes inside of Roblox. So, we have the same premise of using procedural models to have minimal amounts of edits, and then having much more complex geometry come out of it. And in the case that you want, you want the >> That I want that. >> Yeah, you want the organic [laughter] model. >> kidney island. >> And so, the idea with this one is, this is not quite ready for production yet, but if we have this and we drag out the vertices, we we can drag out and we can have kidney island and instead of dragging out a box, we're dragging out a polygon primitive. >> Let's go. >> [laughter] >> Oh, yes. >> And then we can stack these together.

Two kidneys together and then we'll go and edit some attributes on this. So, uh there should be a height one here. Can you see that? >> This says polygon bounding, shade strength, shade preference. There's a There's a >> Okay, yeah yeah no, I can see it. I'll be right next to you. No, it's okay. We can put it back. We can put it back and and then we can go up to it. So, we can drag this out and then we can adjust the height of it.

So, we can make this one 40 tall. And then suddenly instead of having >> Let's go, dude. >> And so, instead of having your your blocky Roblox geometry for minimal edits, >> Yes. >> we can now start having your much more complex organic geometry. And see, this is a really nice polygon tool because it just has automatic adding of new vertices if you click in between two existing ones like that. >> I love how you're saying how cool it is and then telling me we can't play with it. >> No, you definitely [laughter] can't play with this yet.

But once we have Once we have editable meshes ready to ship alongside procedural models, which is coming soon with the data model content API, once that's all ready to go, you'll be able to play with this as well. >> Okay. All right, I that's the like the best final word we could hope for. >> [music] >> So, any other word besides that? Any other sneaky anything you can share? [laughter] >> Use procedural models. They're excellent.

Don't write them yourselves. AI agents can do it all for you. You just tell them what you want and you'll get what you want. >> Awesome. All right. Thanks, everybody. Bye-bye.