Creating a procedural land texture with images

The last few years have seen a rise in independent video games.  The studios that make these games are, by necessity, small.  Despite the small teams, large scale games have been released in which their scopes seem to defy logic.  How can just a few people make a massive world, tons of enemies and items in just a year or two?  Traditionally, large scale games have taken 50-person studios several years to make.  Even then, did they really hand-craft everything in the game?  Compare Minecraft to Skyrim.  Made by one guy, Minecraft has a much larger world and a significantly deeper crafting system than Skyrim.  This is, of course, possible because Minecrafts worlds are generated procedurally.  The average player says the the world is generated randomly, but they would be mistaken.  A procedural process requires design.  At it’s core it is made up of two things: design and random assignment.  If Minecraft’s worlds were truly random, what would prevent a grass block from spawning in the the sky?  What would stop trees from growing horizontally, out the side of a mountain?  The answer is designed procedure.  You can think of procedure as a function of randomness.

function(random) = procedural creation

When randomness is understood and used in clever ways, content can appear hand crafted without being so.  On that note, when an employee of Bethesda Softworks claimed that Skyrim has a completely handcrafted world and “hand-painted dungeons”, what did he actually mean?  If you consider the sum of the surface areas of all the walls in a typical Skyrim dungeon, the developers couldn’t have individually textured every surface, could they?  Also, Skyrim’s world is around 40km squared.  Did the developers manually create every hill and rock?  Did they use a 40km squared texture?  It doesn’t look like the texture repeats.  In this case, we are seeing more fined grained control over a procedural system.  It’s quite likely that they created a random landscape and began tweaking it from there.  Consider our function above.  Bethesda has complete control over the function.  It takes in a random value, but what it outputs can be modified until a desired result is achieved.  In this case, “handcrafted” may just mean that they looked at the world with a finely toothed comb, insuring everything was up to their standards.  In other words, they modified the landscape until it looked completely handmade.  The procedure is the tool and randomness is the clay.  The result of applying the tool to the clay is a shape that you wouldn’t have had the time or the dexterity to create with just your hands.  Such is the power of procedural creation.

We are going to apply this principle to a large landscape texture appropriate for a videogame. I have made landscape textures before, but always in Gimp. The result is a large image that hogs memory. You probably don’t realize how much memory it actually hogs. Create a 5000×5000 pixel image in Gimp. Save it as a png or 100% quality jpeg. How large is the file? 10mb? 20mb? Now, with the image open in Gimp look at the status bar at the bottom of the window. It will tell you the size of the raw file. That is the size of the uncompressed image. In order to open an image file, the computer has to uncompress the file and store it in RAM. It is reasonable for a large image to require 100s of megabytes of RAM. For the sake of curiosity, when we are done, we will try to measure the memory footprint of our pixel texture.

Let’s define or goals:

– Multiple layers of material (dirt, gravel, grass)
– Non-tiled
– High detail
– (optional) conforms to terrain
– And as always, it needs to look great

Next, we need to think about the process. Our ground being made out of multiple types of material will complicate things. If we combine a grass texture, a gravel texture and a dirt texture into one procedural texture, the editor Window would become so cluttered with modules that it would hinder or progress. To simplify things I will use image textures for the three types of surface. This may seem to defeat the purpose of a procedural texture, but our image textures will be small,at most 1000×1000. We’re also interested in the distribution of the surfaces more than what each surface looks like. Beside, what looks more like grass than a picture of grass? In this case, the procedure is only in charge of distribution.

Here is the grass and dirt texture we will be using:

grass

Seamless_dirt_texture_by_hhh316

Let’s start simple and mix these two textures together with a blend module.  I have used turbulence to determine the blending and I have adjusted a few outputs with custom functions.

texture01

The linear module allows us to alter the scale of the grass texture directly.  You could certainly use one for the dirt as well, but the default size seemed fine to me.

Applying this to a simple height field give pleasant results.

render01

This is already looking great.  However, I would like to add some rocks.  Here is the rock texture I will be using:

seamless_rock_face_texture_by_hhh316-d4hqxwx

Both this image and the dirt image above were created by DeviantArt user hhh316.  He has made some great seamless textures that you can check out here.  I want the rock to show up in the dirt but not in the grass, so I blended the dirt and rock together, and blended that output with the grass:

texture02

render02

Now we’re getting somewhere!  I added some turbulence shading to the grass to increase the contrast and give it more texture.  This is good enough to put in a game already.  But wait, we don’t want the whole world to be textured exactly like this, do we?  Grass, dirt, and rock are pretty much all that make up the ground we walk on, but the consistency needs to very.  I split the texture into three parts.

Part 1: Dirt

texture03

Part 2: Dirt and rocks

texture04

Part 3: Dirt rocks and grass

texture05

Then I added them all into one texture and distributed each of them.  This gives us areas with lots of grass and areas with little grass.

render03

render04

render05

render06

render07

As you can see in the last image, I used elevation to distribute the grass.  This is a great way to texture landscapes, such as mountains with snow caps.

Now, you may be thinking that this wouldn’t work for a videogame since the end result is a massive image.  With current conventions that is true.  This is simply proof of a concept.  We are already seeing worlds, items, and even quest getting created procedurally.  Why not textures?  I think it’s only a matter of time before game engines start supporting techniques like this.  As videogames get larger and more complicated, there is a need to be able to create larger and more complicated things easily.  Why have an artist spend days working on a texture when something like this can be done in about half and hour?

Opening each file in Gimp, we can see that the total size of the uncompressed images is about 33mb.  For a single image that would be pretty large.  With procedural creation, we could distribute these three images in a lot of different ways, creating different looking surfaces without ever requiring more than 33mb of RAM.  If someone spent the time to create procedural versions of these three images, the memory footprint could be reduced further.  As for right now, we have textured an entire world.

ground.zip

3 thoughts on “Creating a procedural land texture with images

  1. The latest Killzone was rumored to weigh in at a hefty 290GB before compression. Now it is just over 40GB. This is still gigantic. Most of it is probably texture assets and movies. Full on procedural textures would have shrank these files considerably. Rendering cutscenes within the game engine instead of playing movies would further reduce the file size.
    I am a fan of procedural textures and believe that games should go in this direction instead of steadily increasing texture sizes. I believe that procedural textures can offer a similar level of quality that could be compared to megatextures if implemented properly.

  2. Honestly, I’ve been looking for sohemting like this a couple months ago. After countless search results, I simply called it quits and just used whatever I thought the best looking was, but now, I come here and find this?! Dude, seriously EXACTLY what I had in mind.Cheers

  3. This blog is really interesting, but why it is on 19th place in google’s search results.
    It deserves to be in top 5. Many webmasters think that seo is dead in 2016, but it’s
    not true. There is sneaky method to reach google’s top 5
    that not many people know. Simply search for: pandatsor’s
    tools

Leave a Reply

Your email address will not be published. Required fields are marked *