Tiling Textures
Intro to Tiling Textures
While modularity explored the benefits of re-using meshes within a game environment, tiling textures explores a similar concept but for the textures and materials that encapsulate these meshes. Tiling textures have been an integral part of video game artwork from the beginning, and the benefits are very clear. With the advancement of games engines and hardware, the use of tiling textures is not as necessary as it was when resources were extremely limited, but the benefits of tiling textures still shine through, and thus became a huge part of the creation of assets for this abandoned theme park.
Polycount, a website dedicated to informing and educating game artists describes tiling textures as "The method of repeating a texture more than once across a polygon. A tiled texture looks best if its edges seamlessly match up with each other, top to bottom and side to side. Tiling is a common method of using the smallest texture possible to cover a large area, like a small texture of a couple bricks tiling across a large polygon, creating a big brick wall."⁹ The major advantage to using a tiling texture revolves around texture resolution. A texture repeated twice contains double the resolution, and granted the tiling texture is set up correctly should look twice as crisp and clear. This means an artist can get much higher visual resolution in game without increasing the texture size. For example, the grass texture below is a 1024 px x 1024 px texture on its own, but when this texture is tiled three times the resolution is 3072px x 3072 px. This means that this 1024 texture acts like a 3072 texture in game, but is much more efficient and less costly in engine.
1024 x 1024
1024 x 1024
3072 x 3072
This tiling texture mentality became a huge driving force for this project. Naturally tiling textures can not be used for every asset, but they became incredibly useful on large scale assets like the walls and floor as one texture could cover a large area without losing resolution.
In Game Example 01
Uncharted 4: A Thief's EnD
Fig 9.1 - Tiling Texture in Uncharted 4: A Thief's End
Naughty Dog's Uncharted 4: A Thief's End ¹⁰ is arguably one of the most advanced and beautiful video games to date. While it uses some cutting edge techniques to achieve this accolade, it also reverts to old-school video game art techniques in the form of tiling textures. This confirms that although technology has advanced dramatically, tiling textures are still extremely beneficial today.
Figure 9.1 above shows the repetition of a tiling stone texture in game. The artists at Naughty Dog cleverly chose to create a material with very subtle changes, thus making it very difficult to see repetition. Certainly, when examining this texture in isolation like this the repetition becomes evident, but typically in game the repetition is cleverly masked, and players benefit from higher texture resolutions without noticing any repeating patterns.
In Game Example 02
The Witcher 3: Wild Hunt
Fig 9.2 - Tiling Texture in The Witcher 3: Wild Hunt.
Another industry front-runner boasting the use of tiling textures is The Witcher 3: Wild Hunt¹¹. Clever use of tiling textures was essential here, due to the massive scope and diverse variety of environments. Once again, when examined closely the repetition becomes obvious (we can clearly see similar elements in Fig 9.2), but repetition is essential to keeping a clean and optimum texture in the game. The compromise is most optimum solution for creating large open landscapes without the need for a multitude of differing materials and textures. I wanted to replicate the use of tiling textures from The Witcher 3 and Uncharted 4 in my environment to ensure optimum use of textures and materials.
Theme Park Example 01
The Veranda
After examining The Witcher 3 and Uncharted 4, it was obvious that cracking the use of tiling textures was key to creating an efficient environment of this scale. As a result, similar techniques were used in the creation of many of the assets in the abandoned theme park. The first asset to include a tiling texture was the façade of The Veranda. We discussed this asset previously because of its modular construction, and modular construction and tiling textures typically go hand in hand.
Fig 10.1 The Veranda Paint
0, 1
1, 1
1, 0
0, 0
Fig 10.2 The Veranda Paint UV Coordinates
In an attempt to maximise the texture resolution of the paint, and ensure crisp and clear detail even when the player is close to the wall, the paint texture tiles twice per module. The texture itself is 2048 x 2048 px, meaning the resolution is already quite high, but when tiled in this way it acts as a 4048 px texture horizontally. By tiling the texture twice we have doubled the resolution, without creating an overly large texture. And because the texture tiles seamlessly (Fig 10.3), multiple modules can be stitched together without a noticeable seam. Here is where modularity and tiling textures must be made in tandem.
Fig 10.3 - Tiling texture junction.
However, this bump in texture resolution causes a fundamental problem. Because the paint is now tiling twice, the horizontal texture resolution of each module can be considered 4048 pixels horizontally (2048 pixels per each repetition). But the non-tiling texture of the wooden sill below it is only 2048 pixels horizontally. And thus, the issue of texel density presents itself.
2048px
2048px
Fig 10.4 - Texel mismatch
Pixels are a unit of measuring an image relative to the image size, but texels are a unit of measuring the pixels in relation to UV space. As visible in Fig 10.4, there is an increase in texel density on the paint of this object. "An increase in texel density means that more pixels are squashed onto the surface of a model, and a decrease in density means that fewer pixels are stretched onto the surface of the model."¹² This means that while the texture of the paint will look wonderfully crisp and clear, the texture of the wood beside it will not match perfectly, and may appear blurry.
The Cryengine official documentation¹³ explores texel density in great detail, and became a valuable reference when confronting this problem. According to Scott Fitzgerald of Crytek, "Not all assets are created equal", and a fluctuation in texel density is perfectly acceptable in game, as long as it is not too noticeable. He publishes an example from Ryse: Son of Rome, using their in-engine texel control functionality (Fig 10.5 and 10.6). The Texel overlay demonstrates the fluctuation in texel density, and you can even see are large difference between the Roman soldier and his shield. While this is not ideal, in specific cases the difference in texel resolution is perfectly acceptable, and so I decided to leave the slight texel variation in The Veranda's facade.
Theme Park Example 02
Plywood planks
The plywood planks scattered throughout the amusement park are another example of tiling textures, although the specific use is slightly different. While the facade of the Veranda used the extents of the texture to improve the resolution, the plywood planks use the seamless texture to add a large number of variations without the need for another separate material. By manipulating the UVs of each mesh in different ways the resulting look is drastically different, while still sharing the same material (Fig11.1).
Fig 11.1 - Plywood Material and textures.
B
a
C
D
E
F
Fig 11.2 - Variations of plywood using the same material.
Because the base plywood texture is seamless, I could create a really dense plywood plank (like plank F) where the texture repeats. But just because the texture is tiling does not mean that each instance needs to repeat. Hence, the creation of the other plywood planks use the same material, but with their UVs scaled and rotated in various different ways.
Once again this raises the issue of texel density variation. As each mesh has differently scaled UVs the texel resolution does not match perfectly, but the opportunity for variation was too beneficial to avoid.
In hindsight, it may have been better to create instance materials and alter the repetition in material editor alone without scaling the mesh UVs, as this would solve the texel issue. This could, however, end up more expensive to run as the engine would need to load multiple instances.
Theme Park Example 03
Floor
The multiple benefits of tiling textures are evident, but there are a few major drawbacks to using a system like this. First of all, repetition can be very clear (this will be explored in depth later). Another major failing in the tiling texture approach is that junction details (where two objects meet) can seem unrealistic and false. To explore this aberration we can examine almost every game in existence - for example in the screenshot below from The Witcher 3: Wild Hunt (Fig 12.1). In this example we can see CD Projekt Red have layered multiple tiling textures on top of each other, but when we examine the use of brick in this example it makes very little sense. The steps appear to be sitting on random bricks, running in a random direction.
Fig 12.1 - The drawback of tiling textures - unrealistic junctions.
This is an incredibly common occurrence in video games. While the tiling texture is more than sufficient in the majority of areas, the edges and junctions between meshes often look strange and unrealistic. I wanted to resolve this issue for my scene, as the floor is a very prominent piece of the environment and deserved special attention.
In an attempt to solve this junction error I examined a number of similar junctions in real life (like this one in Fig 12.2) .The photograph below captures a very similar scene to that of The Witcher. When we examine the junction between the bricks and the steps we can see a subtle layer of grout (hover over Figure 12.2 to highlight) as well as the introduction of smaller bricks to fit the gap without penetrating through the step. This step in the process, although incredibly subtle, gives the junction a sense of realism that is missing from most games, like that in The Wictcher. It was clear that replicating this junction was the key to solving this issue with tiling textures.
Fig 12.2 - Real step junction.
My proposed solution was relatively simplistic in theory. Tiling textures are essential for covering large open spaces, but are they essential on the boarders where the texture meets other objects? Could a new mesh be introduced in these instances that would solve this issue, and define the edges?
Fig 12.3 - Separate meshes.
Fig 12.5 - Result.
So I proposed developing more specific meshes that would seamlessly knit into the tiling texture, and could be used to treat this junction with the attention it needed.
Before examining the creation of these edge meshes we must first explore briefly the creation of the tiling textures itself. After much research and trial-and-error, the final style for the tiling floor texture was decided. Reference was drawn from a number of sources, including Disneyland's Main Street USA, as well as various cobbled streets. Numerous blockouts were created and references sourced, but ultimately the most useful resource was dissecting the road in sketch form (Fig 12.6 and 12.7).
From this sketch it was clear that I needed to create two tiling textures - One with square cobble stones for between the tram tracks (Fig 12.8), and one with rectangular bricks (Fig 12.9). The square cobblestones only need to tile in one direction (hover image for animation) as the extremes of the texture lie between the tram tracks, but the rectangular cobbles stones needed to tile seamlessly in every direction as the space is much bigger. The drainage channel on the edge of the road could be accomplished by rotating the tiling rectangular texture 90 degrees.
The creation of the texture was quite straight forward. Each stone was modelled in Maya, sculpted in ZBrush, and textured in Substance Painter (More detailed information available on my process blog - square tiles¹⁴ and rectangular tiles¹⁵). The two tiling textures were the result of this modelling process - one tiles vertically, one tiles in every direction.
Fig 12.8 - Square cobbles tile vertically.
Fig 12.9 - Rectangular tiles both directions
Once again, these tiling textures worked perfectly well on wide open spaces, but as expected the junction between this texture and other meshes was really unrealistic (as can be seen in Fig 12.10). The tram tracks look as though they run over the bricks, as opposed to being embedded into them.
In the proof of concept for this solution (Fig 12.3) I proposed placing a separate mesh onto this area, but after various tests it became clear that creating a collection of smaller meshes was much more beneficial as variation was effortless. After placing the tiling texture, a rough grout mesh was placed in the affected areas. Finally, various singular brick meshes were lowered into the grout mesh.
The use of stand-alone bricks allowed for a lot of variation - Each brick could be rotated and requisitioned independently, resulting in a much more interesting and realistic junction. These brick meshes could also be lowered into the tiling texture to mask any obvious repetition, but this will be discussed later.
Fig 12.4 - Using separate meshes to fix edge detail.
Similar Industry Technique
Uncharted 4: a thief's End
After exploring this technique for ending seamless textures, I discovered a very similar approach in Uncharted 4: A Thief's End¹⁶. While I used a grout mesh and a series of bricks to end the tiling texture, the artists Naughty Dog created just brick (or in their case stone) meshes and lowered them into the geometry. Figure 13.2 denotes the placement of the tiling texture, and Figure 13.3 outlines the stone mesh insertion. Because of the organic nature of their texture, the insertion meshes could not knit seamlessly with the tiling texture, but that does not belittle the approach, as the result is a beautiful and efficient floor texture. Naughty Dog's approach draws striking parallels to the approach described above, with just the omission of one step.
Fig 13.1 - Example of similar technique in Uncharted 4.
Fig 13.2 - Tiling Texture
Fig 13.2 - Lose Brick Meshes
References
⁹ Polycount (2014) Tiling Textures. Available at: http://wiki.polycount.com/wiki/Tiling (Accessed: 5 December 2016).
¹⁰ Naughty Dog and Sony Interactive Entertainment America LLC (2016), ‘Uncharted 4: A Thief’s End’, Video Game, Naughty Dog
¹¹ CD Projekt Red (2015), ‘The Witcher 3:Wild Hunt’, Video Game, CD Projekt Red
¹² Thorn, A. (2013) Game Development Principles. 1st edn. Delmar Cengage Learning.
¹³ Fitzgerald, S. and Crytek (2015) Texels per meter - CRYENGINE manual - documentation. Available at: http://docs.cryengine.com/display/SDKDOC2/Texels+Per+Meter (Accessed: 5 December 2016).
¹⁴ O’Keeffe, George. (2016) Cobblestones. Available at: https://georgeokeeffegameart.wordpress.com/2016/10/25/cobblestones/ (Accessed: 6 December 2016).
¹⁵ O’Keeffe, G. (2016) The rest of the floor. Available at: https://georgeokeeffegameart.wordpress.com/2016/11/01/the-rest-of-the-floor/ (Accessed: 6 December 2016).
¹⁶ Naughty Dog and Sony Interactive Entertainment America LLC (2016), ‘Uncharted 4: A Thief’s End’, Video Game, Naughty Dog