Gradient Atlas

Why use a gradient atlas?

Gradient Atlassing / Lazy Unwrapping is a very handy 3D unwrapping technique that maps a model's UVs onto a specific gradient strip in an atlas texture, saving a lot of time unwrapping and allowing for very rapid iteration. It also performs very well, since using a single texture for multiple objects vastly reduces draw calls and memory usage.

How to use it

1. Set the number of columns and rows and the size of each cell. Power of two sizes are the safest for game engines, and the bar at the bottom of the tool tells you if the atlas is not one.
2. Click a cell and edit its gradient in the Edit Cell tab. Click the gradient bar to add a stop and drag stops to move them. The tab also shows the U and V values of the cell.
3. Fill many cells at once in the Generate tab. Spectrum spreads the hue wheel across a row, From cell makes variations of one gradient, and From colors makes one gradient per color.
4. Use the HSL tab to nudge hue, saturation and lightness on a selection or the whole atlas.
5. Flag cells as emissive if you want a separate emissive image.
6. Export the atlas as a PNG from the Export tab, plus the emissive PNG if you need it. Save the project JSON to come back to it later.
7. In your 3D app, project your UVs in the cell with the gradient you want or use the companion addon that automatizes this process!

FAQ

Is it free? Yes. It runs in your browser and nothing you make is uploaded anywhere.

Does it work with Unity, Unreal, Godot or Blender? Yes. The output is a normal PNG, so any engine or 3D app can use it.

Is my work saved? The atlas is saved in your browser automatically. Clearing your browser's site data removes it, so save the project JSON if you want a backup or want to move to another computer.

What does emissive do? Flagged cells are exported in a second PNG that only contains those cells, so you can use it as an emissive map. You can export it as the gradients on black or as a white mask on black.

What is this website?

A little premise: my name is Andrea Di Bartolo (artstation.com/andreadbx), I've been a 3D artist for over 10 years. I learned this technique from the mighty Minionsart (minionsart.github.io/tutorials), but I always found it very tedious to make the gradient atlas texture myself using Photoshop or other image editing software: splitting it into grids, manually making gradients, and so on.

So this website is born out of a simple tool I made for myself. I decided to host it and share it with everyone!

Blender addon

There is also a companion Blender addon for the atlas texturing, called Gradient Atlas Unwrap. You can get it Here! Follow the instructions on the Gumroad page to install and use it.