Shader of interiors – we give volume to flat buildings
This technique is popular for games because it allows you to add visual dimension to simple objects made up of flat polygons without the significant performance penalty that would be experienced with physical interiors. The illusion of a room is achieved through the use of cubemaps and the parallax effect.
But despite this, for some reason, there is no tutorial in Russian on how to implement the effect of interiors.
I will show the implementation in Unity using Shader Graph, however with some manipulation you can reproduce the effect in Unreal Engine using Material Graph (change vertical axis to z, change cubemap format). The math behind parallax is fundamentally the same.
Interior parallax algorithm
Preparing the UV coordinates. Since the cubemap is 3D, the UV coordinates are used as Vector3. Multiplication will be needed later, ignore for now. We limit the coordinates using frac to a range from 0 to 1, set the reference point to the center. Hardcoded z = -1.
Prepare the view vector in Tangent space so that it folds correctly with the UVs.
Already now, if you use this vector as the coordinates for the cubemap projection, you can get something similar, only the image will be too stretched and without parallax.
parallax calculation. We take the reciprocal number (Reciprocal) of the gaze vector. Get the absolute value of the inverse vector, multiply the inverse look vector by the UV. Find the difference between the absolute value and the product. We find the minimum value of the three coordinates. Multiply it by the view vector and add the result of the product to the UV
Now we can pass the resulting value to the Sample Cubemap node, and voila, we get a parallax effect with the illusion that the projected sides of the cubemap are on the inside of the cube
Going back to the beginning, you can use the multiplication node at the very beginning to control the number of interior projections.
However, this algorithm has a minus, one of the sides is turned upside down.
I did not manage to get rid of this reversal in a “beautiful” mathematical way, so the following crutch was implemented (your suggestions for solving the problem, if any, write in the comments):
We take the z coordinate and compare it with a certain float F using the formula 
. If the result of the comparison is true, then multiply the y coordinate by -1.
As a result, the side is rotated, but an artifact remains on the adjacent side with the size 
from side length.
Raising F to several thousand can minimize this artifact, but the solution is still not ideal.
Why can’t we just go the easy way and just not check if the coordinate is -0.5? The fact is that for some reason, a cube in its own space has an even side face for some reason does not have the same coordinate, and we get a much more unpleasant artifact:
Perhaps, of course, the problem is different, but you can write me about it in the comments.
cubemap features
At creating a cubemap images should be used for side textures no perspectiveotherwise you will only distort the interior, which gives depth to the shader.
You can also add a normal map, smoothness, etc. in the interior shader, but I see little sense in this. Interiors are a background thing, and it is not advisable to complicate rendering too much for the sake of a minimal difference. After all, they didn’t do that in Spider-Man.
Facade
Moreover, the interiors will be behind glass. (You should either have a facade texture with alpha transparency on the windows, or a separate transparency texture, like mine, drawn in Photoshop).
We turn the current Graph into SubGrapph, which returns the final Vector3. You can also open the UV and the variable being the number of rooms.
So, the facade shader:
Set UV coordinates. Since I have four windows on one facade texture, I multiply the FacadeGrid value by two. I use the Fresnel effect to make the windows less transparent at high angles, just like in real life.
I use the transparency texture multiplied by the fresnel effect to blend the texture and get the base color. To calculate the emission, we multiply the color of the interior by the transparency with the Fresnel effect. As smoothness, I pass just the basic transparency.
Conclusion
As a result, we get a beautiful interior of the building, which is bright and clear under a straight street, and hidden by reflection when viewed from the side. At the same time, we did not increase the number of polygons at all.
