More realistic glass buildings

Hi guys,

I have a thought one for you. We are experimenting on creating more realistic office buildings, but when we are building a glass one, we have problems with making it look like a real building.
As you can see here: https://playground.babylonjs.com/#8IMNBM#229

Any ideas that we can try to achieve a more a real looking building, and more realistic glass windows?

Adding @PatrickRyan in case he has some advices on how to better render glasses?

@theblackneko, there are a couple of things going on here. The first is scale and the second is lighting ratios and I think these would go a long way to helping you get a more realistic render, but we have to take care of these first so that you can determine if they are hiding any other improvements.

Scale
Consider these images:


image

We tend to see buildings from ground level and the angle of our sight line for a glass front building (I’m assuming a building that is primarily glass windows like your sample and the first image above) would reflect mostly sky and in some cases other buildings around it if they are close in proximity and height. The glass will also show a fairly sharp reflection of the environment, assuming a reflective film on the glass to insulate against heat and relatively clean windows. What is in your scene is a human scale image of a much smaller building that you are trying to render. As an example, you can see the door reflection, which is a bright rectangle, appears to be a little taller than two floors on your building.

This mismatch of scale is telling our brain that this building is not life scale, but rather very small. And the other thing working against you is that the reflection texture is very small so the reflections which should be sharp and clear like the clouds above are actually pixelated and blurry which makes the window feel like it’s plastic rather than glass. I would look at an external shot with a lot of sky in it for your reflection texture… though you may want to author one yourself. You can use something like these shots for your environment IBL but author a reflection texture yourself that is mostly sky. This means the midline of the image is not the horizon which will help place the viewer higher in the sky as you would be to be at the camera position in your sample. You do not have to work in 32-bit values for your reflection texture so this is easy to do even with stock images or ones you photo bash from your own shots. Just make a seamless equirectangular image that you take into Lys or IBLBaker and export out a cube map at full resolution. You can then take these six cube face images into engine and use them for a reflection texture.

The process of making a seamless equirectangular that you convert to a cube map isn’t difficult but too in-depth for this response so if you want to see that process, let me know and I will work up a tutorial. But for the most part you can find tutorials using Photoshop and Polar Coordinates to show you most of the steps.

Lighting Ratios
In the images above, you can see that the glass is mostly opaque showing a reflection of the environment and a lot of that has to do with the amount of light outside versus the amount of light inside. This is why during the day it’s hard to see what’s on the other side of the window, our irises are smaller and “exposing” what we see based on bright sunlight and and not open enough to correctly expose what’s on the other side of the window. The same goes for night… when there is less light outside, the windows become more transparent, only reflecting bright lights, but if there are lights on inside the room on the other side of the window, it’s easily seen due to our irises being wider to accommodate the lack of light outside.

In your sample, we can see through the glass somewhat, which is also giving us the impression that the ratio of light isn’t as stark as bright sunlight to indoor lighting, but instead dim enough that we can see right through the building in some areas but bright enough to see what appears to be a daylight scene in the window reflection.

If you can balance what our brain expects in your scale, lighting, and reflection setup, you can then discern if you need to make any changes to the materials to make the glass feel better. I hope this helps as it’s not really a code fix as much as it’s an art direction fix that may expose changes you want to make in code.

4 Likes

Grr, I’m so sad right now. Quickly checked your PG, wanted to save a couple of changes but due to an error with the imported mesh, I didn’t realize my changes where not saved and I didn’t event do a SS :cry:
Overall, I’m in line with comments above…and I’m an Art Director. I will see if I can find 20min again to quickly illustrate in the PG later today for you, but really I’d say your biggest issues are:

  1. The absence of a proper environment: To display reflection, the first thing you need is an environment that matches your scene. The last thing you want (especially when sketching) is to add an environment or specular that is (completely in your case) inappropriate. Your glass actually doesn’t look that bad if you remove this effect. It overall integrates with the rest of the design/level.

  2. Inappropriate lighting and scaling, no shadows: Glass and reflection/refraction only works with shadow and light. On a flat gray day with nearly no shadows, you’ll also see that the reflection/refraction levels are much lower (understand less contrast, less exposure). Actually, this is one thing you could do right away for these type of material. To get this feeling of brightness due to the reflection (of sun or ambient light) you can set your glass and glossy/shiny materials to use an exposure of about 1.4 to 1.7. You can also push the contrast a little up to around 1.3.

  3. Scaling and point of view: The current cube environment texture would be ok to look at from a street level and if your building would be the size of a motorcycle;) or If you would limit the camera to about 60 feets from the building (in which case you would only see the entrance).

  4. The Material/Mesh thickness, tint and overall quality. Currently your settings look a bit odd to display (realistic) glass. But then, as I said overall the scene is not realistic (though it might be in scale/proportions I don’t know.

  5. Finally, there are many different types of glass depending on lots of parameters. In the end, I believe the type of glass is also the ‘signature’ of a glass building/skyscraper, so in this case, I’d rather take much care to showcase this aspect (correct tint, reflectivity, etc…). Else, if it’s not for architecture, you can just try and tweak the levels until you get something appealing for the eye.

  6. I’ll give you a few tips though:

  • Your albedo or base color is unlikely for a glass
  • A glass is mostly transparent (unless it has 1)thickness 2)a film 3) a tint 4)additional treatment of the surface. A standard glass that is not mostly transparent without further treatment is, in essence, a poor quality glass;)
  • Be careful when using the values of metallic (for PBR), roughness, reflectivity, refraction… they all work together and it is often values you’d like to set at 3 or more decimals. Again, levels of 1 or 0.5 (unless unused) are unlikely to be correct. They might look ok with a specific lighting but change the conditions and the environment or camera and you might start running into trouble.
1 Like

As I was frustrated not being able to save my PG, I quickly did this dusk version. Since I do not have the environment just right now, it still has some of the problems mentioned above. Not to mention that my twist made all the other materials go haywire;) I only changed the Glass (first in name) material (and then, of course environment… but yes, I believe you can reproduce the type of glass you want to feature (for whatever this is). There are still no shadows. Shadows will add a lot. There is also no real volume to these glasses which is why the structure now sort of seems to ‘float’ above the glass…





another version with less transparency (yet with the same issues; no specular; no shadows; quickly added an emissive and changed the values of metallic and reflectivity:

2 last ones may be closer to your version (still the same problems than above and you have to disregard the other materials) but then, just to quickly show different type of glasses:

Last but not least, I made these all straight from your PBR material “Glass”. PBR may sound appealing and easy to use but the standard material also has a lot to offer (and can use PBR features and HDR). If you want more of a mirrored texture (glass with a mirror treatment), I found the standard textures sometimes providing better results. Well have fun, tweaking all these and GL… and have a great WE.

2 Likes