Tag Archives: Bioshock Infinite

Hey, I'm Simon and I'm making a game!! :)
Support me: BUY & Demo on Steam

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:

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.

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.

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?:

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:

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:

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:

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?

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:

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.

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:

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!

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

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

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:

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

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!