I made a game! Buy on Steam
A Game Art Trick
Windows AC/Row/Infinite

I’m neither a carpenter nor a stalker but i strongly love windows. Allow me to show you the most advanced windows i ever saw a game.

The NPCs in Assassins Creed 3 definitely suspect that Connor is a stalker because we made him stare at windows for hours in the last article about windows. Just for you to remember, this is how windows looked in the game:

Source: Assassins Creed 3

The interior is like a smooth texture which tiles and is moved via Bump Offset Mapping to fake some parallax movement. At least i believe so, because there’s a guy who explains how it can be done in UDK.

For Assassins Creed this “blurry” texture is in my eyes the perfect solution because it gives the glass a frosted/milky look which totally fits into the time where the game plays – but there are other ways to do windows and this article is about those.

X
Information
Thanks to InvisGhost for hinting me to the great windows of Saints Row 3 !

Saints Row is a crazy game. Even the windows are crazy (good)! Some windows have a similar parallax effect like in Assassins Creed – but with sharp textures instead of smooth ones. I wouldn’t have thought that it works that well:

Source: Saints Row 3

Texture-Time! what you see is the “Barber (Night)” texture (see below) but isn’t there something missing? Yes, the posters!

Source: Saints Row 3

They are a layer on top of the room texture. Below you can find the poster-texture.

Source: Saints Row 3

Even now when i write this article and look at the GIF i’m just thinking “Wow…works so great!”. Only in really narrow angles it gets visible that something is weird with the interior.

Source: Source: Saints Row 3

Also nice: when you have closer look you can see that the texture is tiling (like in Assassins Creed) and even this looks perfectly OK, because it results in a room corner. Nothing weird about that, right? Below a non-ingame demonstration of that effect:

Source: Saints Row 3

Here an ingame-example. Works great, doesn’t it?

Source: Saints Row 3

I hope you like it as much as i do. :) But we’re not done yet! Let’s visit Elizabeth.

X
Information
Thanks to Lino for hinting me to the great windows of Bioshiock Inifite!

Now let’s get to one of the most advanced windows implementations. What do you see here?:

Source: Bioshock Infinite

It just looks like a wooden room containing some objects at billboards/planes to get some nice prallax effects, right? But not only Lino suspected something here:

Source: Bioshock Infinite

Sidenode for those who don’t know the game: The level designers placed points where Elizabeth can interact with the environment – a really cool feature! But what she’s not doing (but Lino did) is looking at this from another angle:

Source: Bioshock Infinite

That’s unexpected, isn’t it? If would be “just” glass + billboards, shouldn’t we

a) see through to the other side and
b) still notice the billboards ?

Short answer: It’s another crazy shader trick. Except from looking at the geometry-wireframe i found the “proof” in one of the textures. I did a subtle mark:

Source: Bioshock Infinite

I’m not sure what the other channels are about (i suspect it’s the glass distortion because you only need two channels for such a normal map) but the red channel definitely marks the eagle-area which looks like a sprite/billboard. And how does the actual texture looks, which is  controlled/masked by this channel?

Source: Bioshock Infinite

But wait! When the eagle-area moves a bit faster than the four guys in the background (when i strafe around)…why is there no gap? Like when you photoshop an image and want to move an object, you have to cut it out, move it and then fill the now uncovered area with something…that’s why there’s another texture just for the background:

Source: Bioshock Infinite

Except from the exciting double-use of (i think) bump-offsets for the two parallax-layers, there are two other interesting details:

1. If we look at the following GIF (again) we’ll see that the glass has kind of a total-reflection (you can’t look “inside” anymore from narrow angles, you just see a blueish reflection). In my eyes this is a good way to

a) make the glass look more realistic
b) avoid any visible texture-deformation at narrow angels like we could observe in SR3.

Source: Bioshock Infinite

2. The eagle-area turns at the player-camera even if it’s not a “real” billboard! How cool is that? Look carefully and you’ll see that it’s always oriented to you:

Source: Bioshock Infinite

So we saw epic shaders crafted by code magicians but … why? Why not just use a “simple” glas shader and build the interior by hand? I’m sure there are more answers to this but i see two major reasons:

1. Adding such a shader to a surface and let the code do the rest is surely extremely time saving in comparison to building all this by hand. Especially when it comes to global changes where you want to change all windows/interiors at once.

2. Transparency. To render transparent objects is expensive and produces artifacts e.g. in combination with fog (see this article as an example). I don’t know if the above shaders are cheaper than doing it with real transparency, but at least i would assume that you don’t run into sorting problems – which would be a good thing, right? :)

As every time, feel free to comment or mail or twitter me and share your knowledge. :) I’m sure there are a lot people out there which can explain in detail why it’s better to do it the mentioned way.

Thanks for reading

You got to the end of this article. Thank you very much for taking the time!

* Thx again to InvisGhost and Lino for suggesting the topic
* Thx Knobby and Minimaul for all the help in the SR3 Forum
* Thx to all for reading, commenting and supporting me :,)

Update 1
The Youtuber Punished Dartjuk discovered a mysterious window in Overwatch. I think we know what’s going on, don’t we? ;)

I didn’t embed the video directly to avoid any tracking from Google and complications with the DSGVO.

Update 2
Just saw this Polycount Post about an Interior-Shader in Unity made by Amplify Creations. Looks amazing!

Source: Amplify Creations

Source: Amplify Creations

Update 3
More interior mapping incoming! First bgolus made a post how he re-created the interior mapping of Sim City 5:

Source: Interior Mapping in Unity by bgolus

Then Layla ported it to Unreal and posted about it here:

Source: Interior Mapping in Unreal by Layla

In the meantime, dekaf shared this link where you can get details about how the interior mapping was done in Sim City 5. Here is the video (slides are linked in the description):

I didn’t embed the video directly to avoid any tracking from Google and complications with the DSGVO.

And as if this wouldn’t be enough already, Alex S posted this nice interior mapping based on a reflection probe:

Source: Interior Mapping in Unity by Alex S.

Update 4

Thomas Schrama posted another great example for a faky-faky-interior! This time it’s from Destiny 2.

Link to his tweet.

Source: Destiny 2

Update 5

Thanks to Ian for giving is the Shader Forge Code and a huge image of the whole shader network which shows the implementation of the interior mapping.

Shader Forge Code (right-click, save as)
Shader Forge Network as JPG
interior_2d.png
interior_2d_Atlas.png

Source: Ian’s Shader Forge Network

Update 6
Ivan Mathy just posted a cool improved version for parallax mapping. This tweet also contains a lot more videos to demonstrate how much better his version looks.

Update 7
Mohammad Reza Arashiyan just posted his version for an interior shader and also offers a download link for the source on github!

Update 8
Froyok just made me aware, that there has been an amazing new technique for interior mapping in the Matrix Demo. How did I miss that?! Had to add it here as an update!

20 Replies

20 thoughts on “Windows AC/Row/Infinite”

    1. Simon Post author

      Thanks for sharing the link! I did mention the Oogst article in the AC3 Windows article but this is a nice addition! I think the concept is a bit different because it seems that in AC/SR/BS they “just” use parallax offset mapping instead of simulating real geometry via pixel shader like Oogst.

      I would love to see a game which does “real” interior mapping like Oogst … but i never heard of any game doing this. Did you?

      Reply ↓
  2. Dany0

    Another awesome article Simon! The windows thing was funny :) Are you going to start using WebM instead of gifs? Much better suited for this kind of content.

    Reply ↓
    1. Simon Post author

      Thank you very much :) Regarding the WebM: I’ve to read a bit about it and find out how i can convert my files into WebM, host them on my server and how it works with playing that kind of stuff. But i have to do that because GIF is just pretty big. I already did visit some websites but don’t want to host my data on their servers.

      Reply ↓
    1. Simon Post author

      Thank you, but the main detectives where Lino & invisGhost who originally spotted the windows :)

      Reply ↓
  4. Florian

    Hallo,
    Wann dürfen wir denn mit einem neuen Artikel rechnen? Freu mich schon darauf
    Und falls du dich für klein Thema entscheiden kannst, ich finde derzeit Layeed materials in unreal 4 in Verbindung mit pbr sehr interessant.

    Lg
    Florian

    Reply ↓
    1. Simon Post author

      Hi Florian,
      da fragst du was. Ich arbeite fast jeden Tag daran aber irgendwie komme ich nicht gut vorran. Das nächste Thema wird etwas technischer und da will ich keinen Käse erzählen. Das danach, erfordert viel Arbeit im Bezug auf die Bilder bzw. Animationen. Naja, aber ich bin dran! Layered Materials wird auf jeden Fall ein Teilaspekt des nächsten Artikels. Du meinst sicher den Trick aus der UDK-Demo, indem sie Multi-Materialien in einem Shader bündeln um Draw Calls zu sparen?

      Lg,
      Simon

      Reply ↓
        1. Simon Post author

          Gern geschehen, ich hoffe du magst du folgenden Artikel auch so gern. :) Vielen Dank für den Link. Das ist wirklich eine schicke Technik!

          Reply ↓
          2. Simon Post author

            Vielen Dank für den Link. Das ist ja der Wahnsinn! Will … auch …

  5. Maitti_Dukku

    Deus Ex Human Revolution also features some sort of cubemap windows that look good from a distance. I think they even look better that the ones on games like Watch Dogs.

    Reply ↓
        1. Simon Post author

          that looks really nice :) are you sure it’s not “just” a translucent plane with another one below? i mean, it could be both but in this special area maybe the didn’t need to build such an advanced shader? or did you already investigate and see that’s only one plane with a fancy shader applied?

          Reply ↓
          1. Dash-POWER

            I can’t investigate more because the game has unreadable sources. But it could be as you said there are two planes. The top one has alpha transparency and second is facing your camera position. Something like billboards.

          2. Simon Post author

            When I play the game in the future and visit the same place I can try to find out more :)

Leave a Reply

Your email address will not be published. Required fields are marked *