Granite for experts: Summer tutorials. Ep#3: Displacement

Summer is coming to an end today and so is our series of tutorials, for now. So enjoy our latest video about how to stream displacement maps with Granite in Unreal Engine 4.

Just like with any other texture content, displacement maps can be added to Stacked Textures in a separate layer. In case you are new to Granite, the layer system is a way to pack different texture channels into one “Stacked Texture”. These different textures need to be sampled using identical UV coordinates. 3D engines or tools commonly allow you to pack a channel (metallic for example) into the alpha of an RGBA texture. Granite takes this one step further and allows you to pack many different channels into a group of up to 4 textures. This allows the streaming system to be much more efficient and thus have better performance than other systems. You can find out more about this system in our online documentation center.

Tile Set Studio - Selecting the Layer configuration

Tile Set Studio offers a default template to create a Tile Set for PBR textures (diffuse, normal, roughness and metallic) that also have 8bit greyscale displacement maps (see image). Using the “Custom…” option, you can create other layer configurations (only diffuse and displacement for example) that better suit your content. You can start adding Stacked Textures once you have created your Tile Set Project.

In our example, we’ve used the default PBR layer layout with 4 layers (see image). The displacement channel is put into the 4th layer. This layer was configured for a single 8bit greyscale channel. To setup the Stacked Texture, you can fill in the source image URL for every channel. You have the option to provide multiple channels using one source image (one RGBA image for example), or to import different channels from separate source images. You don’t need to have content for every channel. So you can leave some boxes empty. What’s also interesting is that the image resolution of your source images don’t need to match. Granite allows you to combine a 4K diffuse, 8K normal map and 2K displacement map for example. We’ll have a later post on the best practices on layer configurations and the performance impact of leaving channels empty or having different resolutions of source images.

Tile Set Studio - Add stacked texture with Displacement map

Once you’re done adding Stacked Textures, you just need to build the solution (ctrl-shift-B) to create a .GTS file that you can import into Unreal. After importing, you’ll have a Granite Texture in the Unreal content browser for every Stacked Texture. You can also configure the importer to automatically create a material per Granite Texture. The importer will already connect the outputs of the Granite node to the material node. However, the displacement channel output needs to be connected manually. Just like when you use a standard Unreal texture, you’ll need no multiply the displacement map with the vertex normal (in world space) of the mesh. The video below shows you how to connect a typical material graph using displacement textures.

We hope you will enjoy it and find it relevant. Please feel free to give us feedback on the quality of the video and how we can improve it. You can find our other tutorial videos on this page. We'll post a few others in the coming days so stay tuned! And of course, feel free to drop us an email if you have any questions.


Leave your information