Jump to content
  • Advertisement
  • 06/29/18 06:13 PM

    Unreal Engine 4: Realistic, high-quality windows

    Visual Arts
       (1 review)

    khawk
    • Posted By khawk

    This whitepaper was originally posted on the Unreal Engine Blog bySebastien Miglio at https://unrealengine.com/en-US/blog/create-photoreal-car-windows-in-unreal-engine. The original whitepaper by Min Jie Wu and edited by Robb Surridge is available for download at here. Republished with permission.

    Automotive glass can be a particularly challenging element for real-time automotive rendering.

    In the real world, car windows involve a complex interplay of light as it passes through multiple layers of material with different physical properties. These results can be difficult to imitate in a real-time renderer, while achieving an acceptable balance between physical realism and a fast enough frame rate. And to make things even more difficult, the windows of a car naturally attract the viewer’s attention — especially the windshield. Any unrealistic artifacts or reflections can easily destroy the overall effect of an otherwise high-quality rendering.

    This paper describes an approach to designing windshields in Unreal Engine 4 that delivers photoreal results in real time.

    See the results of this technique in the award-winning short film, The Human Race:

     

    Mesh Structure

    This technique begins with the way the windshield is modeled.

    The windshield needs to be made up of four independent meshes or mesh groups. Each of these four meshes needs to be single-sided.

    The following diagram summarizes the layout of the meshes:

    fig1.png

    Figure 1: Mesh layout 

    • There are two outer layers of the windshield, Mesh 1 and Mesh 2, that have their normals pointing outward toward the exterior of the vehicle. These are represented by the red and yellow lines.
    • There are two inner layers, Mesh 3 and Mesh 4, that have their normals pointing inward toward the inside of the vehicle. These are represented by the green and blue lines.

    This detail view shows how these four meshes are arranged with respect to each other in 3D space:

    fig2.png

    Figure 2: Mesh arrangement in 3D space

    Mesh 1, the exterior reflective layer, forms the outer skin of the windshield. It will provide the reflections that you see from outside the vehicle. Its normals point outward from the vehicle.

    fig3.png

    Figure 3: Mesh highlighted in orange

    At a distance of half the windshield’s total thickness, you have Mesh 2, the outer tint layer. When you look at the windshield from the outside, this layer tints your view of the inside of the car according to the color of the glass. Its normals also point outward, in the same direction as Mesh 1.

    fig4.png

    Figure 4: Mesh 2 highlighted in orange

    fig5.png

    Figure 5: Mesh 3 highlighted in orange

    Back to back with Mesh 2, you have Mesh 3, the inner tint layer. When you look out through the windshield from inside the car, this layer tints your view of the outside surroundings according to the color of the glass. Its normals point inward.

    fig6.png

    Figure 6: Mesh 4 highlighted in orange

    Finally, at the innermost extent of the windshield, Mesh 4 provides the reflections of the interior of the car that you see when looking out from the inside. Its normals point inward.

    The following image shows the Static Mesh Actors for these four meshes in the World Outliner in the Unreal Editor:

    fig7.png

    Figure 8: Static Mesh Actors in the World Outliner

    Below, all four layers are shown in the viewport of the Unreal Editor, in wireframe and lit modes:

    fig8.png

    Figure 9: Four layers in the viewport

    Material Design

    This technique requires two different translucent Materials:

    • A reflective Material, which you’ll apply to the exterior and interior surfaces of the windshield.
    • A tint Material, whose only job is to color the things that you see through the glass.

    Material 1: Reflective

    The goal of this Material is to handle only the light that gets reflected off the glass. We want this layer of the windshield to be fully transparent when we look at it straight on, but very reflective when we look at it at a grazing angle.

    To model this in Unreal Engine, we need to start with a translucent Material. When you select your Material’s output node in the Material Editor, set the following values in the Details panel:

    • Set the Blend Mode to Translucent.
    • Set the Lighting Mode to Surface TransparencyVolume.
    • Enable Screen Space Reflections.

    fig9.png

    Figure 10: Details panel in the Material Editor for the reflective Material

    In the Material’s graph, we set it up as a mirrorlike chrome, but we also tie its opacity to the camera’s viewing angle using the Fresnel node.

    • Make the Base Color white.
    • Set the Metallic and Specular inputs to 1.0.
    • Set the Roughness input to 0.0.
    • Ordinarily, a white, perfectly reflective, and perfectly metallic surface would have the appearance of smooth chrome. However, we also attach the Fresnel node to the Opacity input of the material’s output node. This makes those crisp reflections appear only where the curvature of the glass causes us to see it at a sharp enough angle for the Fresnel function to begin affecting the opacity. Anywhere the viewing angle is close to the normal of the mesh, the glass remains clear.

    fig10.png

    Figure 10: Materials graph

    Car windshields typically use an athermic glass, which has slightly more reflectance than plain glass. The following image illustrates how the reflectivity of the athermic material changes over different wavelengths of incoming light:

    fig11.png

    Figure 11: Material graph for the reflective Material

    To simulate this physical property, and make your reflections fit your scene more accurately, you can adjust the values of the Exponent and BaseReflectFraction inputs that you pass to the Fresnel node (called EXP and Intensity respectively in the Material shown above). This gives you control over the strength of the reflections and how they fade over the curvature of the glass.

    fig12.png

    Figure 12: Effect of passing different input values to the Fresnel node

    Material 2: Tint

    The goal of this Material is to handle only the light that passes through the glass. We want this layer of the windshield to ignore reflections completely, but to color light that passes through the glass according to the tint of the windshield.

    To model this in Unreal Engine, we need another translucent Material. When you select your Material’s output node in the fig13.pngMaterial Editor, set the following values in the Details panel:

    • Set the Blend Mode to Translucent.
    • Set the Lighting Mode to Surface TransparencyVolume.
    • This time, disable Screen Space Reflections. For this Material, we want to avoid all specular and reflective contributions.

    A simple way to set up the graph for this Material is to use a constant Opacity setting.

    • Make the Base Color the color of the glass.
    • Always use a Specular input of 0.0. This allows light to pass evenly through the glass.
    • Use a Roughness input of 1.0.
    • Use the Opacity channel to control how dark the glass is — that is, how much of the interior of the vehicle you can see from the outside. You can vary this value freely to make the tint effect as strong as you need it to be.


    Figure 13: Details panel in the Material editor for the tint Material

    fig14.png

    Figure 14: Material graph for the tint Material

    A slightly more sophisticated setup is to vary the opacity of the glass based on the viewing angle of the camera, as we did in the reflective Material above. In the reflective Material, increasing opacity adds to the strength of the reflections. However, in the tint Material, increasing the opacity simulates the greater absorption of light as it passes through the glass at a sharper angle. The effect is that as your viewing angle increases, less light comes through the glass, and the objects on the other side become harder to see.

    fig15.png

    Figure 15: Material graph for the tint Material, with optional absorption setup

    You can control the strength of the effect by raising or lowering the value of the absorption parameter shown above. However, this effect works best when you keep it very subtle. If you choose to use absorption, we recommend keeping the value below 0.1.

    Mesh and Material Assignments

    Now that you have your Static Mesh Actors and your two Materials ready, you need to assign the correct Materials to the correct Actors:

    • Mesh 1, the exterior reflective layer: Assign the Reflective Material.
    • Mesh 2, the outer tint layer: Assign the Tint Material.
    • Mesh 3, the inner tint layer: Assign the Tint Material.
    • Mesh 4: the interior reflective layer: Assign the Reflective Material.

    Sorting Translucency

    The final step in using this technique is to set up the translucency sort priority for the four Static Mesh Actors. fig16.png

    When Unreal Engine needs to render multiple translucent objects that overlap in the camera view, it has to draw the objects in back before the objects in front. To figure out the drawing order, it compares the distance from the camera to the origin point of each object’s bounding box. Although this works most of the time, this strategy is not perfect; it can occasionally result in the rear object being drawn in front.

    To avoid that possibility, we can give the Engine a hint by setting the Translucency Sort Priority option for each of the four Static Mesh Actors in the Level.

    To find this option, select the Static Mesh Actor for each part of the windshield in either the Viewport or the World Outliner, scroll down in the Details panel to the Rendering section, and expand the advanced properties.

    Set the Actors to use the following values:

    • Mesh 1: 1
    • Mesh 2: 0
    • Mesh 3: 0
    • Mesh 4: 1

    With these settings, the Engine always chooses to render the inner layers of the windshield behind their corresponding outer layers. This retains the correct order for windshield rendering even if the camera flies into or out of the car.

     

    Conclusion

    With four Static Mesh Actors and two Materials set up as described above, you can achieve high-quality, realistic, and performant glass for any automotive rendering project in Unreal.

     

    Learn more about Unreal Engine at https://unrealengine.com.

     

    [Wayback machine archive]



      Report Article


    User Feedback


    There are no comments to display.



    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now

  • Advertisement
  • Advertisement
  • intellogo.png

    Are you ready to promote your game?

    Submit your game for Intel® certification by December 21, 2018 and you could win big! 

    Click here to learn more.

  • Latest Featured Articles

  • Featured Blogs

  • Advertisement
  • Popular Now

  • Similar Content

    • By tspartant
      Hey everyone! My name is Ryan. 
       
      Visualistic Studios is looking for experienced developers of all talents to join a game development team focused on completing contract work for compensation. 
       
      Work Description
      Typically you will either be assisting the team or working on your own contract.
      We usually bid $16-$25/h, however contracts can go above and below that so all pay grades are welcome, just be realistic. 
       
      Short Term Contracts
      Long Term Contracts
       
      We have the highest priority for these skills right now
       
      Programming - Unity, Unreal Blueprints
      Environment Artist
      Character Artist
      Character Animation
      UI Artist
      3D Asset Optimization
       
      VR/Mobile experience is a plus. 
       
      The Process 
      All communication is done through discord. All tasks and design documents will be laid out in "HackNPlan" for organization. 
      Initially, you'll get in contact with me and answer a few questions so I can get a scope of your experience. Afterwards, our outreach team will start looking for jobs that fit your description. Nothing is guaranteed, but if we know you're interested we can start looking 
       
      Our Experience
      For the past 3 years I've been working in game development contracting, and the past year I've been working full time from home. Since then, I've received more and more contracts and I'm now at the point that I have too many for myself to handle. This sparked the idea of creating a game development team for contract work! I've also been running my own hobby company for 5 years, and have a lot of experience in team management. 
       
      Get in contact!
      Please fill out this form so we can get all of the information out of the way, then we'll get in contact with you!
      Thank you everyone for reading, hope to hear from you soon!
    • By komires
      We are pleased to announce the release of Matali Physics 4.4. The latest version introduces comprehensive support for Android 9.0 Pie, iOS 12.x and macOS Mojave (version 10.14.x). Latest version also introduces Matali Render 3.4 add-on with normal mapping and parallax mapping based on the distance from the observer as well as other improvements and fixes.
      What is Matali Physics?
      Matali Physics is an advanced, multi-platform, high-performance 3d physics engine intended for games, virtual reality and physics-based simulations. Matali Physics and add-ons form physics environment which provides complex physical simulation and physics-based modeling of objects both real and imagined.
      Main benefits of using Matali Physics:
       Stable, high-performance solution supplied together with the rich set of add-ons for all major mobile and desktop platforms (both 32 and 64 bit)  Advanced samples ready to use in your own games  New features on request  Dedicated technical support  Regular updates and fixes
      You can find out more information on www.mataliphysics.com

      View full story
    • By komires
      We are pleased to announce the release of Matali Physics 4.4. The latest version introduces comprehensive support for Android 9.0 Pie, iOS 12.x and macOS Mojave (version 10.14.x). Latest version also introduces Matali Render 3.4 add-on with normal mapping and parallax mapping based on the distance from the observer as well as other improvements and fixes.
      What is Matali Physics?
      Matali Physics is an advanced, multi-platform, high-performance 3d physics engine intended for games, virtual reality and physics-based simulations. Matali Physics and add-ons form physics environment which provides complex physical simulation and physics-based modeling of objects both real and imagined.
      Main benefits of using Matali Physics:
       Stable, high-performance solution supplied together with the rich set of add-ons for all major mobile and desktop platforms (both 32 and 64 bit)  Advanced samples ready to use in your own games  New features on request  Dedicated technical support  Regular updates and fixes
      You can find out more information on www.mataliphysics.com
    • By khawk
      Today Epic announced that throughout 2019 they will be launching a large set of cross-platform game services built originally with Fortnite. These services, built across 7 platforms and tested with over 200 million players will be free for all developers and open to all engines, platforms, and stores. All services will also be operated in a privacy-friendly, GPDR-compliant manner.
      The service will launch with a C SDK providing access to the online services along with Unreal Engine and Unity integrations.
      Services will include:
      Cross-Platform Login, Friends, Presence, Profile, and Entitlements (coming Q2-Q3 2019 to PC, other platforms throughout 2019): Provides the core functionality for persistently recognizing players across multiple sessions and devices; identifying friends; and managing free and paid item entitlements. This will support all 7 major platforms (PC, Mac, iOS, Android, PlayStation, Xbox, Switch) to the full extent each platform allows per-title.
      PC/Mac Overlay API (coming Q3 2019): Provides a user interface for login, friends, and other features in a game-agnostic, engine-agnostic way.
      Cross-Platform Voice Comms (coming Q3 2019 to all platforms): Epic is building a new in-game voice communications service supporting all platforms, all stores, and all engines, which will be available for free. (For developers needing an immediately-available voice solution, check out Discord, Vivox, TeamSpeak, Ventrilo, and Mumble.)
      Cross-Platform Parties and Matchmaking (coming Q3-4 2019 to all platforms)
      Cross-Platform Data Storage, Cloud-Saved Games (coming Q2 2019)
      Cross-Platform Achievements and Trophies (coming Q3 2019)
      Learn more from the Epic blog.

      View full story
    • By khawk
      Today Epic announced that throughout 2019 they will be launching a large set of cross-platform game services built originally with Fortnite. These services, built across 7 platforms and tested with over 200 million players will be free for all developers and open to all engines, platforms, and stores. All services will also be operated in a privacy-friendly, GPDR-compliant manner.
      The service will launch with a C SDK providing access to the online services along with Unreal Engine and Unity integrations.
      Services will include:
      Cross-Platform Login, Friends, Presence, Profile, and Entitlements (coming Q2-Q3 2019 to PC, other platforms throughout 2019): Provides the core functionality for persistently recognizing players across multiple sessions and devices; identifying friends; and managing free and paid item entitlements. This will support all 7 major platforms (PC, Mac, iOS, Android, PlayStation, Xbox, Switch) to the full extent each platform allows per-title.
      PC/Mac Overlay API (coming Q3 2019): Provides a user interface for login, friends, and other features in a game-agnostic, engine-agnostic way.
      Cross-Platform Voice Comms (coming Q3 2019 to all platforms): Epic is building a new in-game voice communications service supporting all platforms, all stores, and all engines, which will be available for free. (For developers needing an immediately-available voice solution, check out Discord, Vivox, TeamSpeak, Ventrilo, and Mumble.)
      Cross-Platform Parties and Matchmaking (coming Q3-4 2019 to all platforms)
      Cross-Platform Data Storage, Cloud-Saved Games (coming Q2 2019)
      Cross-Platform Achievements and Trophies (coming Q3 2019)
      Learn more from the Epic blog.
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!