in Shaders, Unity

Shader Showcase Saturday #9: Interior Mapping

If you have been on Twitter this past week, you might have seen videos of the new Spider-Man, developed by Insomniac Games. The game has been praised for its stunning visuals and exceptional attention to detail. One effect, in particular, has captured the players’ attention. It appears that you can see inside every single window of every building. But at a closer look, something does not look right. What’s going on?

The obvious way to have rooms appearing behind windows is simply to fill each one with actual geometry. While this works for small scenes, it is unpractical for a game as large as Spider-Man. The cost of all those additional triangles cannot be justified, especially when only a fraction of a few rooms can be seen at any given time.

If you have been following Shader Showcase Saturday for the past few months, you should know by now that every problem in video games has a shader solution. And this is not an exception. This week’s Shader Showcase Saturday is dedicated to a very intriguing technique interior mapping.

If you landed on this page because you are only looking to implement this technique for a commercial title in Unity, I suggest having a look at Fake Interiors FREE. It is a free asset that achieves the same effect seen in Spider-Man.

The asset was created using Amplify Shader Editor, which is possibly the most advanced tools specifically designed to create shaders in Unity.

If you are interested in learning more about how interior mapping and how it can be implemented, keep reading the rest of this tutorial.

Interior Mapping was first described with the very purpose of simulating the interior of a room by Joost van Dongen, in his paper from 2008 titled Interior Mapping: A new technique for rendering realistic buildings. The author has also dedicated an entire section of his website on this topic, Interior Mapping, which also comes with the source code written in C++. Back in 2011, Developer Einar Öberg ported Joost van Dongen’s solution to Unity. The source code is available on Interior Mapping in Unity 3D, but keep in mind that Unity has changed a lot since 2011.

How It Works

To get a feeling of how interior mapping actually works, we can look back at Super Mario. Even if you have not played it yourself, you might have seen that when Mario is running, the background moves slower. This trick creates the illusion that the background is further away from the camera, adding a touch of three-dimensionality to an otherwise two-dimensional game. The technique is called parallax, and for many centuries has been the main tool to measure the distance of objects far away, such as mountains, planets and even stars.

Interior mapping is, at its core, a very advanced parallax effect. As a technique, parallax has been widely used in 2D games and is also implemented in many shaders. The Standard Shader introduced in Unity 5, for example, supports a feature called Parallax Mapping, which can be enabled using the Height Map property of a Standard material. While the more traditional normal mapping only affects the lighting, parallax mapping distorts how the texture is sampled at different angles, to account for parallax. This requires a height map, which is a grayscale texture that indicates how distant an object is from the surface.

There are a few other ways in which the interior of a room can be simulated, especially using more sophisticated tools such as reflection probes and cube maps. This is the case of Senior Environmental Technical Artist Alex Stroukoff‘s solution (video below).

However, to reach the level of realism seen in Spider-Man, it is likely you will need to include some sort of parallax mapping.

Where It Is Used

Spider-Man is obviously not the first game to have used interior mapping. Destiny, Overwatch, Bioshock Infinite, Saint Row and Assassin Creed are just a few examples of recent games which features this technique. Game Artist Simon Schreibt wrote an interesting case-study on his blog, Windows AC/Row/Infinite, where it explores how the effect is used (and exploited) in many AAA titles.

It was notoriously predominant in Sim City 5, as it can be seen in the video below.

If you are interested more in understanding how interior mapping was implemented in Sim City 5, I highly recommend From AAA to Indie, an insightful talk by Graphics Engineer Andrew Willmott.

An exceptional recreation of Sim City 5’s interior mapping technique was recreated in Unity by Graphics Programmer Ben Golus (video below), details of which are still accessible on the Unity Forum.

The work of Ben Golus and Simon Schreibt has been featured a few times before on Shader Showcase Saturday. If you want to learn about graphics programming and shader coding from two industry veterans, I highly suggest following them on Twitter.

If even after having access to all of these resources you prefer to rely on a professional solution for your game, an inexpensive alternative for interior mapping that does not rely on Amplify Shader Editor is TOZ Interior Shaders.

From the Asset Store…

💖 Support this blog

This website exists thanks to the contribution of patrons on Patreon. If you think these posts have either helped or inspired you, please consider supporting this blog.

Patreon Patreon_button

📧 Stay updated

You will be notified when a new tutorial is released!

📝 Licensing

You are free to use, adapt and build upon this tutorial for your own projects (even commercially) as long as you credit me.

You are not allowed to redistribute the content of this tutorial on other platforms, especially the parts that are only available on Patreon.

If the knowledge you have gained had a significant impact on your project, a mention in the credit would be very appreciated. ❤️🧔🏻

Write a Comment



  • 프로젝트 한여름 #5. 9월 개발일지 – NBΞΞ November 6, 2018

    […] 쓰였다고 해서 유명해진 페이크 인테리어 쉐이더가 창문 안의 무언가를 만들 때는 꽤 유용 할 거 […]

  • 프로젝트 한여름 #5 – NBΞΞ November 6, 2018

    […] 쓰였다고 해서 유명해진 페이크 인테리어 쉐이더가 창문 안의 무언가를 만들 때는 꽤 유용 할 거 […]