Gradient Texturing is a 3D texturing optimization technique aimed at mobile video games. It relies on the use of low-resolution texture maps and gradual colors, reducing the resource load on game engines without compromising visual quality. By applying gradients to low-poly 3D models, effects like light, shadow, and depth are simulated, avoiding the need for high-resolution textures that consume more resources.

This technique strikes an efficient balance between performance and visual quality, optimizing load times and enhancing the user experience. Additionally, it offers flexibility for easily changing color palettes and can be adapted to various 3D models, making it ideal for reducing texture file sizes and improving memory usage.

3D Rendering

The 3D rendering process in game engines is essential for transforming 3D models into visible images in real-time. This process involves several key steps that are executed in constant cycles at a specified frame rate, in engines like Unity or Unreal Engine. First, 3D models are instantiated and adjusted through geometric transformations to position them correctly within the game space. Textures are then applied to the surfaces of the models, and shaders process how the colors and details will be displayed, determining the final appearance of each pixel.

Once textures are applied, the model’s triangles are converted into pixels via rasterization, while depth buffering manages depth to prevent visual overlap of objects. In the lighting and shading phase, the engine calculates how light interacts with objects in the scene, applying effects like shadows, reflections, or more advanced lighting techniques. Finally, post-processing effects like anti-aliasing or motion blur are added before presenting the final image on screen.

Each of these steps requires efficient management of graphical resources. Two key factors in optimizing 3D models are geometry density and texture resolution. A high polygon count can overload the GPU and reduce game performance, while high-resolution textures consume large amounts of graphic memory, slowing down the rendering process. In this context, texture optimization through techniques like Gradient Texturing proves more efficient than reducing model geometry. Since a compressed 1K texture can occupy the same memory as over 40,000 vertices, reducing texture sizes alleviates graphic memory load and improves CPU-GPU connection speeds without sacrificing visual quality.

Flat Color Texturing

Flat Color Texturing is a precursor to Gradient Texturing that aims to reduce texture map size using a simplified approach. While it also uses a color albedo map like traditional Hand-Painted Texturing, it differs in that the resolution of the map is extremely reduced, typically 32x32px or 64x64px. This map acts as a color atlas, where UV islands are shifted toward the desired base colors, assigning tones to each part of the model without the need for complex details or variations.

In the following example, it is shown how this technique can be combined with intelligent lighting, either through directional lights or Point Lights in the game engine, to enhance light interaction on the model and significantly improve its visual quality:

When using this technique, it is crucial to pay attention to texture compression in the engine. Due to the reduced size of the map, excessive compression can blur the boundaries between colors and cause an overall blur in-game, worsening the clarity of the color palette and negatively affecting its sharpness and visual quality.

In another example, a broader color palette is used in the albedo map to simulate lighting effects without external lighting. The model is processed in the engine’s Render Pipeline using an Unlit shader, eliminating the real-time calculation of light and shadows, showing only flat colors to manually adjust the desired light and darkness on different parts of the model. Although managing a UV map with many colors needed to cover light and shadow variations can be complex, this technique fulfills its purpose effectively.

A peculiarity of this technique is that it can complicate the modeling process when a high level of detail is required. Unlike traditional hand-painted texturing, where details are applied directly to the texture, in this technique, geometry must provide precision. For this reason, it is necessary to increase the polygon count in the mesh and modify the model, adding vertices and faces that would otherwise be unnecessary but are essential here to divide colors and generate specific details on each part of the 3D model. Although this reliance on geometry could be seen as a drawback compared to a model designed for traditional texturing, it is not a significant issue. Since this technique allows texture map size to be reduced, the slight increase in polygon count does not negatively affect performance. As previously demonstrated, geometry has a smaller impact on the engine than higher-resolution textures, making this balance viable and effective for graphical optimization.

This approach represents an early attempt to minimize the size of texture maps applied to 3D models. While it allows for interesting results in resource optimization, the exclusive use of flat colors makes it too simple and restrictive, limiting the final visual quality.

Gradient Texturing

Gradient texturing is a technique that, like flat color texturing, uses low-resolution albedo textures to optimize graphical performance. However, this technique introduces a key difference in the distribution of colors within the texture map, allowing for more precise control and advanced visual results. Instead of using uniformly distributed flat colors, the texture map in this method organizes colors into gradients, grouped by rows or columns if the maps are positioned horizontally. The UV islands are positioned and stretched along these rows to align with color transitions, achieving optimal effects on the model. This approach offers more practical control over the color layout, allowing variations in light, brightness, and shadow to be represented more smoothly and continuously. It can be applied to a wide variety of models with different shapes and color palettes, adapting to various visual needs.

To implement gradient texturing, the first step is to create a low-resolution texture map without compression, preferably using an sRGB color profile to maintain color accuracy. Next, the color palette is defined, based either on specific references or project preferences. This palette is then organized into columns within the texture map, grouping the colors in an orderly manner. Once the palette is set, gradients are created by applying a layer mask to each row of the texture map in digital drawing software, using a gradient tool.

It is essential to place the most saturated and bright colors at the top, while darker, less saturated tones are placed at the bottom. With the texture map completed and the 3D model prepared, the UVs are modified. First, a general projection of the model is made onto the texture map. Then, the UV islands are separated and assigned to the corresponding column based on the desired color for each part of the model. Once the colors are assigned, the UV islands are stretched along the gradient rows to visualize the lighting and shadow effects on the model. Faces that form angles of approximately 90 degrees with the rest should be carefully adjusted, separating and stretching the UV islands within the gradient as needed to ensure they appear illuminated or shadowed. Finally, the corners of the model, which were previously beveled during the modeling process, are stretched upward on the gradient to create a brighter effect in those areas.

One of the main advantages of gradient texturing is the ability to generate color transitions that simulate lighting effects more efficiently without relying on real-time engine lighting. By allowing color gradation directly within the texture map, this technique opens up new possibilities for achieving subtle and detailed visual effects, such as soft shadows or tonal changes on curved surfaces, without significantly increasing the file size of the texture. In this example, the edge brightness is achieved by separating and moving the corner faces of the model upward within the UV map, resulting in a gradual and consistent shine effect:

Additionally, the more organized layout of colors in gradients makes working with UVs easier, allowing for greater control and precision during the texturing process. This technique surpasses the rigidity of flat color texturing, offering great versatility when modifying the color palette, as it allows for easy changes to the gradient in the texture map’s rows. This makes it possible to create countless color variations on the same model without having to redo the UVs.

Similar to flat color texturing, this technique can complicate the modeling process in cases where a high level of detail is required, as precision depends on geometry rather than texture. It may be necessary to increase the number of polygons in the mesh to achieve certain effects, which involves modifying the model by adding extra vertices and faces. However, the impact on performance remains minimal since the reduced texture map size offsets the slight increase in geometry, making this balance effective in terms of graphic optimization.

It’s worth noting that this technique is not limited to low-poly models but can also be applied to models with higher geometry density, providing flexibility for different levels of detail. The complexity lies in managing the UVs and adapting them to the Gradient Texturing technique.

Optimized Gradient Texturing

Optimized Gradient Texturing is a logical evolution of the standard gradient texturing method, designed to push optimization to an extreme level without sacrificing visual quality. The main difference is the drastic reduction in texture map size, where each gradient column is compressed into a single pixel row. This technique organizes the texture map horizontally, with one row per gradient. The model’s UVs are scaled to 0 on the horizontal axis, aligning correctly within these rows. Although the process of modifying the UVs follows the same principles as standard gradient texturing, this optimized version allows for a significant reduction in memory usage while maintaining functionality and control over the representation of lights and shadows on the model.

By using this technique, an extreme level of optimization is achieved, making it particularly beneficial in contexts where graphic resources are limited, such as mobile game development. Despite the drastic reduction in texture map size, the visual result remains true to the original, reinforcing the effectiveness of this technique in terms of optimization without compromising quality.

Reflection of the application

Gradient Texturing offers multiple advantages for both developers and consumers of mobile video games. It democratizes development by allowing small and medium-sized studios with limited resources to access advanced tools without requiring large investments. It reduces the costs associated with creating complex graphics, simplifying production by improving the efficiency of graphical resources. This includes reducing texture file sizes and optimizing memory usage, accelerating development and reducing processing demands.

For consumers, this technique optimizes performance, allowing even low-end devices to run games with high-quality graphics without compromising the experience. This expands access to digital entertainment, especially in regions where mobile phones are more accessible than consoles.

(Full Academic Article here: https://drive.google.com/file/d/1S-hSax4sdAtsZVh8wPFnjM3KNo0U5x0d/view )