Fallout 3 – Edges
Simonschreibt.
<div class="fan-translation-table">
<div class="fan-translation-row">
<div class="fan-translation-cell-buffer"><!--BUFFER--></div>
<figure><img src="https://data.simonschreibt.de/assets/flag_ch.png" /></figure><div class="fan-translation-cell-flag"></div>
<div class="fan-translation-cell-text"><a href="http://qiankanglai.me/2016/04/02/fallout3-edges/" rel="noopener noreferrer" target="_blank">Chinese Version</a> by <a href="http://qiankanglai.me" rel="noopener noreferrer" target="_blank">Kanglai Qian</a></div>
<div class="fan-translation-cell-buffer"><!--BUFFER--></div>
</div>
</div>
<p class="myInfo">This article was updated. Jump to <a href="https://simonschreibt.de/feed/#update1">Update 1</a>. <a href="https://simonschreibt.de/feed/#update2">Update 2</a>. <a href="https://simonschreibt.de/feed/#update3">Update 3</a>.</p>
<p>A small detail which impressed me a lot (besides the great graphics in Fallout 3) is how they did their worn edges.</p>
<p>In the top part of the image below you can see a very nice broken stone. I think it looks really cool and “high poly”. But if you look at it from the side, you see, that the stone geometry IS pretty low poly (middle part of the image)…</p>
<div class="wp-block-image">
<figure class="aligncenter"><img alt="" src="https://data.simonschreibt.de/gat001/fallout3.jpg" /><figcaption class="wp-element-caption">Source: <a href="http://fallout.bethsoft.com/" rel="noopener noreferrer" target="_blank">Fallout 3</a></figcaption></figure></div>
<p>If you look at it from the very near, you can see, that they have a really low poly geometry and two textures on it: the “smooth” stone and the broken edge. And to hide the hard transition between them — or let’s say — to create a pleasant transition, they placed these normal mapped holes.</p>
<div class="wp-block-image">
<figure class="aligncenter"><img alt="" src="https://data.simonschreibt.de/gat001/stone_wireframes.jpg" /></figure></div>
<div class="wp-block-image">
<figure class="aligncenter"><img alt="" src="https://data.simonschreibt.de/gat001/stone_decaltexture.jpg" /></figure></div>
<p>I investigated the stuff a bit and for anyone who’s interested. Here’s a wireframe of the stone. That’s important, because I thought, maybe they did an additional geometry layer bent around the edges. More about this, at the bottom of this article.<br /><br />Further, I checked out the textures of the edges. Interesting to say, that Fallout uses half the size of the diffuse map for their normal maps. That’s why in the next image, the resolution of diffuse-/normal map is different. Also, I marked which part of the texture is visible in my screenshot.<br /><br />By the way, they save their specular map into the alpha channel of the normal map. In the case of these decals, the specular is totally white. I wonder why they just don’t add an alpha channel then. Normally when a texture doesn’t hold an alpha channel, the return value is 1.0 which means “white”. But I’m sure there is some good point I just can’t see.</p>
<p>Let’s talk about the decals. <a href="http://www.polycount.com/forum/member.php?u=25486" rel="noopener noreferrer" target="_blank">Throttlekitty</a> mentioned that they use decals in a combination with parallax mapping. About the last point I’m not sure, because normally you need a height map for parallax mapping (in addition to the normal map, at least what this <a href="http://cowboyprogramming.com/2007/01/05/parallax-mapped-bullet-holes/" rel="noopener noreferrer" target="_blank">article</a> says) and this doesn’t seem the case.<br />But <a href="http://www.polycount.com/forum/member.php?u=21307" rel="noopener noreferrer" target="_blank">wichenroder</a> gave me this very interesting <a href="http://docs.cryengine.com/display/SDKDOC2/Using+Decals+for+Destroyed+Structures" rel="noopener noreferrer" target="_blank">link</a> about the Cry Engine which explains this stuff.</p>
<div class="wp-block-image">
<figure class="aligncenter"><img alt="" src="https://data.simonschreibt.de/gat001/stone_wireframes02.jpg" /></figure></div>
<div class="wp-block-image">
<figure class="aligncenter"><img alt="" src="https://data.simonschreibt.de/gat001/house_example.jpg" /></figure></div>
<p>But I’m not 100% convinced that they (Fallout 3) used this technique because i can’t see any extra geometry. Even not when I watch the wireframe right in the game (red line was added by me to make clear which wires belong to the stone, you look at the stone from below, above the stone you can see the sky sphere):<br /><br />After another round of investigation loaded up the <a href="http://geck.bethsoft.com/" rel="noopener noreferrer" target="_blank">GECK</a> which is a Tool for creating MODs and stuff for Fallout. In there I could see something fascinating. You can blend away everything and this stays:<br /><br /><a href="http://www.fa-so.de/" rel="noopener noreferrer" target="_blank">Falk</a> mentioned something: maybe they place the decals in their editor and save this as prefab. Then the level designer could use the prefabs and the decal data is stored wherever. BUT today i talked to a guy at Crytek where another guy (really, at Crytek works another guy??) works which worked at Bethesda in the past. And he (the first mentioned guy) told me, that they (Bethesda) does it exactly the same way as it is in the Cryengine (article mentioned above). OK…possibly I should check out the NIF tools, and maybe there I can see some extra geometry.</p>
<p>Anyway, an interesting note: I asked how they blend away these decals, and it was told to me, that they just delete these decal planes in the LoDs. Clever!</p>
<section id="update1">
<div id="update-title"><img class="update-title-icon" src="https://data.simonschreibt.de/assets/icon_update_01.png" />Update 1</div>
<div id="update-content">
<p>I asked my colleague Markus if he knows any interesting analyzing tools (because he’s analyzing our own game) and he suggested me the Intel GPA. And with this cool tool (rhyme!) I was able to take this screenshot:</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><a href="https://simonschreibt.de/wp-content/uploads/2013/01/fallout3_noalphatest1.jpg"><img alt="" class="wp-image-11058" height="230" src="https://simonschreibt.de/wp-content/uploads/2013/01/fallout3_noalphatest1.jpg" width="500" /></a><figcaption class="wp-element-caption">Source: <a href="http://fallout.bethsoft.com/">Fallout 3</a></figcaption></figure></div>
<p>No, I didn’t paint some black on the texture. I just disabled Alpha1/Alphatest and this is the result. It’s possibly not a proof, but a hint that they used extra geometry for the stuff.</p>
</div></section>
<section id="update2">
<div id="update-title"><img class="update-title-icon" src="https://data.simonschreibt.de/assets/icon_update_01.png" />Update 2</div>
<div id="update-content">
<p><a href="https://twitter.com/leonanodotcom" rel="noreferrer noopener" target="_blank">Leonardo Iezzi</a> created <a href="https://www.artstation.com/artwork/l3wwa" rel="noreferrer noopener" target="_blank">an awesome tutorial</a> about this kind of edge-detail:</p>
<figure class="wp-block-video aligncenter videoWidth75"><video controls="controls" loop="loop" src="https://data.simonschreibt.de/gat001/update2/preview.mp4"></video><figcaption class="wp-element-caption">Source: <a href="https://www.artstation.com/artwork/l3wwa" rel="noreferrer noopener" target="_blank">Normal Edge Decal Tutorial by Leonardo Iezzi</a></figcaption></figure>
</div></section>
<section id="update3">
<div id="update-title"><img class="update-title-icon" src="https://data.simonschreibt.de/assets/icon_update_01.png" />Update 3</div>
<div id="update-content">
<p>I moved this update into <a href="https://simonschreibt.de/gat/cyberpunk-broken-edges/">a separate article</a> because it’s “too cool” to be forgotten here as just a tiny update. :)</p>
<figure class="wp-block-video aligncenter videoWidth100"><video controls="controls" loop="loop" src="https://simonschreibt.de/wp-content/uploads/2013/01/edge_2_preview_01-2.mp4"></video><figcaption class="wp-element-caption">Source: <a href="https://www.gog.com/en/game/cyberpunk_2077_phantom_liberty">Cyberpunk 2077: Phantom Liberty</a></figcaption></figure>
</div></section>