Modular Assets
Describing the Modular Assets approach to help reduce drawcalls and filesize while increasing quality and performance.
A common approach to asset creation is creating Modular Assets. Modular Assets are more like parts of assets that you combine into larger assets. A simple example is creating separate parts as walls, doors, windows, roof etc. so that you can make many different buildings with very few parts.
As each building is made with fewer assets the overall filesize is significantly smaller, meaning it takes less time to download or offers more room for other assets or textures.
If you manage to reduce the material count for the parts as well, you can have unique buildings with reduced drawcalls which allow for better experiences overall with a higher frame rate etc.
A great approach to getting the drawcalls down is using Trim Sheets. We have a tutorial on this if you want to go into more detail at Trim Sheets, this tutorial covers the Modular design of assets.
Asset Creation
The first thing we need to do is create some Modular Assets. It's always good to look at reference of the style you are going for, but also other modular kits that are out there. These can be found online on YouTube tutorials, or things like the Unity store and Unreal Marketplace.
I will use the final assets so that we can go over some of the key things to consider when designing them.
Jigsaw puzzle approach
Design all elements to be able to fit into each other perfectly. A simple approach to this is to have key dimensions for all parts, so the wall height is the same as the pillar height, and all doors are the same dimensions.
If possible try to keep to the metre or at least to 0.25m as these are common snapping levels in most engines or 3D Creation programs.
Another tool that is useful is snapping to vertices. Unity has a great tool using the 'V' key to snap an assets vertex to another vertex, so make sure that all your vertices line up accordingly as well. If you hold 'Ctrl' while moving the asset will snap to the parameters set in the snap tools.
If you are putting two walls together make sure that the texture is tileable, so it doesn't look like there is a seam. Either that, or put a pillar or detail over the top to make it less obvious. This is easier if you are using a tileable texture for the walls, but if you are using a trim sheet approach you may need to be a little more accurate with placement of the UVs.
Pivot location
It is generally recommended to put the pivot of all parts at the end, or the center, of the asset so things line up easily. Walls should have the pivot on the ground, at the end of the wall, in the centre of the depth whereas a pillar might be on the ground, in the centre. That way when you line them up it is easy to get the pillar where it needs to be or continuing the wall is also easy when using the snapping tools.
Adding the pivot to the end is recommended as it is usually easy to set the pivot to the centre in Unity. This allows the asset to be pivoted from both the end, or from the centre, easily.
Overlapping assets
It may not be ideal for a wall to have a pillar at each end as when you copy the asset, there will be an overlap of two pillars. It is better to have one end of a wall have the pillar, or keep the wall and corners/pillars separate.
Creating the Assets
I considered a single texture for walls, wood, rock detail, metal and roof tiles in order to reduce filesize. High polygon assets were created before baking them into a single square to create the texture. The modular assets were then created with this trim sheet. As noted Trim sheets are covered in the Trim Sheetsdocumentation.
Building a full building with a few modular assets is quick and easy. That said, the above is a simple example but could be extended to something much more complicated and varied with more parts and variations.
Summary
In this tutorial we looked at Modular Assets and the benefits that they bring to a WebGL space. From reduced filesize and drawcalls to making it easy to make more complicated environments quickly.
Last updated
