Rooftop UV Mapping in Unity

Mapbox
maps for developers
4 min readFeb 27, 2018

--

By: Baran Kahyaoglu

I’ve been using two options for polygon UV mapping, the 3D texture modeling process when we project a 2D image to a 3D surface. The first method is a “tiled” UV map, and the second is a “satellite/stretched” UV map. Now we’re experimenting with a third option called “atlas texturing”.

Tiled UV mapping

Tiled UV mapping simply assigns the X & Z value of the vertex position as UV coordinates. This guarantees that the textures are repeated for each tile seamlessly so if you create multiple tiles with large land use polygons and assign grass texture on them using tiled UV mapping, you’ll have seamless tiling even at tile edges.

Each small square you see on the building rooftops is actually the whole texture on the material, and of course, this repeating can be tweaked by the Tiling property under the material.

Satellite/stretched UV mapping

The second UV mapping option is Satellite/stretched. This UV mapping process assumes one corner (of the tile) is (0,0), and the opposite corner is (1,1). It sets all UV coordinates relative to those two positions. So for example, a point right in the middle of the tile will get (0.5, 0.5) UV coordinates. This is, at the moment, mainly used for applying satellite imagery on vector features, hence my naming it “Satellite”.

This is actually all just one tile, and you can clearly see the whole texture applied to all features. If the texture was satellite imagery, for example, there would be satellite building rooftops on those polygons.

Textures used for reference.

Atlas UV mapping

I’ve started experimenting with what I’m calling “Atlas” UV mapping and planning to release the initial test version next week. You will be able to now choose the Atlas option under the UV modifier within the Maps SDK for Unity.

This loads an AtlasInfo object, a new scriptable object where you can define which segments are usable for polygons (or rooftops).

For simplicity, I’ve defined two test segments at bottom right as roof textures. The system then randomly chooses one of these segments and applies it to each individual polygon (the building rooftop in this case). It’s traditionally not easy to UV map procedurally generated polygons so I’ve been working on some simplifications. In my initial tests, I made the assumption that the majority of polygons are rectangles since it’s much easier to apply a square texture on a rectangular polygon. If the assumption is correct and the vast majority of buildings in the city are rectangular, all others will just blend in and get lost among others. What we did for this first test is:

  • Find the main axis of the rectangle by subtracting the first vertex from the last (so last edge will be the X-axis).
  • Find the axis aligned bounding box (aabb) using this axis. Now it’s rotated and contains all vertices of the polygon so it won’t be aligned to world X/Y.
  • Apply texture on this aabb, using minimum vertex (not first!) as (0,0) and max as (1,1).

Here you can see lots of rectangular buildings and their UV mapping clearly. I know this doesn’t look pretty with those UV textures, but it’ll look much better with proper textures.

However, there are some cases where Atlas UV mapping doesn’t work well:

  • Circular buildings (rare but you will run into this in each city)
  • Extremely tall or wide polygons (texture stretches too much)
  • Complex shapes and U or W shaped buildings (you can see a few of them in the above shot)

Download the Maps SDK for Unity and give Atlas UV mapping a try or read more about what’s possible with maps and location data in Unity.

--

--

mapping tools for developers + precise location data to change the way we explore the world