Jump to content
  • Advertisement
  • 10/26/19 05:57 PM

    Unity
    Unity UI Profiling: How Dare You Break My Batches?

    General and Gameplay Programming

    Ruben Torres

    [The original post with its formatting can be found at the Unity UI Profiling entry]

    You spend an infinite amount of time optimizing your Unity UI. But, all it takes to really screw up performance is a sneaky modification on a tiny attribute of an almost invisible Canvas UI element. And when that happens, not even Unity UI Profiling will save you from dropping frames. Are you ready for the road ahead?

    This is what happened in my last project...

    I worked hard to optimize the several UI panels of our port to Oculus Quest. This was mostly about reducing the overdraw level to an acceptable amount to make sure the GPU would be all comfy with the real 3D rendering.

    So I worked on Unity UI Optimization for at least a month and made pretty damn good progress.

    At some point, it was so well optimized that the GPU timings were barely moved by the UI. The opaque UI shading techniques I applied compensated most of the overdraw caused by UI Layering (elements drawn on top of other elements).

    Unity UI Profiling Extended - Thumbnail

    There I was, with a super optimized hybrid UI system that effectively occluded the 3D elements drawn behind it.  It became very easy to discard the rendering of these occluded fragments.

    However, I was far away from being done...

    When I hooked the Unity UI Profiler, one thing caught my attention.

    I saw an overwhelmed CPU taking over 1 ms per frame on UI rendering. That's a hell lot of time for a platform that gives you a budget of 13 ms for the whole game execution: physics, logic, 3D rendering, input, VR, networking are all in the same bucket.

    And I've seen cases where UI kills CPU performance even more.

    Unity UI: Expensive Build Batches

    Unity UI: Expensive Build Batches

    And that is the thing: UI can be optimized to be GPU-friendly, but that doesn't directly translate into being CPU-performing.

    In fact, CPU and GPU have very different tasks to accomplish in Unity UI Rendering. No wonder, I suggest you approach CPU and GPU optimization very differently, as seen in my previous blog post about Unity UI Optimization.

    Doing more of Unity UI Profiling showed me the obvious problem: the UI was constantly being re-created every single frame, i.e. there was a Canvas Rebuild happening every frame.

    A constant hit of 1 ms on the CPU... ouch.

    But why would Unity do this to me?
    I thought Unity cached the UI Canvases...

    Actually yes, that is correct. Unity effectively caches the canvases to make sure they are built just once.

    The problem arises, though, when you change the properties of any of the UI elements of the canvas, such as a color, a position and so on.

    That means, all animations we love, such as button hover effects, are killing your performance and you might not know it.

    When UI property changes happen, Unity does the famous Canvas Rebuild that will crush your game's performance.

     

    A Unity UI Canvas Rebuild makes Unity iterate over all UI elements of that Canvas to generate an optimized list of draw calls (a set of vertices, colors, materials, etc.). And Canvas Rebuilds take longer than a Seat Panda doing a 0-60 mph test.

    That said, once you've acknowledged you suffered from constant UI Canvas Rebuilds, the natural question to make is...

     

    Why am I suffering the Canvas Rebuilds and what can I do about them?

    ​Answering that innocent question led me to spending 5+ hours researching this topic and empowering the Unity UI Profiler.

    Let's see how.

    Quick Navigation (they all redirect to the original blog page)

    1. Unity UI Profiling: All Good, until...

    2. Unity UI Profiling: A wild Canvas Rebuild appears!

    3. Finding the Saboteur: a politically incorrect brute-force approach

    4. Bonus: Augmenting the Unity Profiler for UI Optimization

     

    hi-tech-ui-red.jpg

    1. Unity UI Profiling: All Good, until...

    Let's say we have a weirdo of a UI in front of us.

    That UI is barely doing anything but sitting there, being annoying to the player who just want to see something through it.

    As a collection of 350+ images using a Grid Layout Group, it (miserably) looks like this:

    Unity-UI-Profiling-Example

    Unity UI Profiling Example

    And that's fine, even if it contains 350+ images. They will normally be rendered in just two draw calls, as there are two unique images that are not atlased in a sprite atlas.

    Effectively, I can see in the profiler there's almost no overhead on the CPU side. Most of the time we're under 0.01ms, which is pretty damn good.

    Unity UI Profiling: Sneaky Spike

    Unity UI Profiling: Sneaky Spike

    (...Most of the time)

    ​Wait, what was that CPU spike at the end of the graph?

     

    hi-tech-ui-blue.jpg

    2. Unity UI Profiling: A wild Canvas Rebuild appears!

    What has just happened there at the end of the Unity Profile? The Unity UI CPU cost has more than doubled in just a second, how weird.

    I want to play a game

    Find the two differences in the samples below (you may want to click on them for zooming in).

    Unity UI Profiling: Cheap Canvas

    Unity UI Profiling: Cheap Canvas

    Unity UI Profiling: Canvas Rebuild

    Unity UI Profiling: Canvas Rebuild

    I'll give you five seconds to find it out.

    5, 4... Ok here's a hint to make it easier:

    Unity UI Profiling: Canvas Rebuild Overhead

    Unity UI Profiling: Canvas Rebuild Overhead

    Yikes!

    PostLateUpdate.UpdateRectTransform and UGUI.Rendering.UpdateBatches really wanted to take all the highlight in today's show.

    What do these regions do?

    The first, UpdateRectTransform, implies that a transform of a specific object has changed, and therefore Unity has to run some expensive logic to keep visuals coherent. We don't know whether it was a position, a rotation, a scale or any other of the RectTransform properties.

    Heck, we don't even know if it was just one attribute or all of them. Was it one object, or multiple? In any case, which ones? This is the problem: we do not know.

    The second cost, UpdateBatches, relates to the fact that the whole Canvas geometry has to be rebuilt. This process is famously known as a Canvas Rebuild. A canvas rebuild implies that Unity goes through all the Canvas hierarchy to generate a list of draw calls, so to speak. The vertices, indices, colors, uv's of all elements are computed and then a batching pass is done to we merge as many draw calls as possible to reduce the CPU overhead of issuing them to the graphics driver.

    Now we know what's going on, kind of. We're on the right track. But how do we go about avoiding these canvas rebuilds? What is causing them?

    We just need to find out more specific information...

    Summary

    the-gamedev-guru-logo-me-transparent-sma

    • An attribute change in a UI element will mark the element itself as dirty
    • A UI element can be totally dirty, but can also be partially dirty: vertices-dirty, layout-dirty, material-dirty. Partial dirty states are cheaper to recover from
    • Unity will rebuild canvases entirely, as soon as any of its elements are marked as dirty
    • Canvas rebuilds are expensive on the CPU, avoiding them is the key

     

    hi-tech-ui-sphere.jpg

    3. Finding the Saboteur: a politically incorrect brute-force approach

    We are still to give an answer to the following question:

    Who's triggering that sucky Unity UI Canvas Rebuild?

    It turns out, there's no fast way of finding that out, especially if your canvas hierarchy is immense.

    But, to start out, I'll show you the brute force approach for finding the source of UI Canvas Rebuilds.

    Unity UI Profiler Baseline with Canvas Rebuilds

    1. Keep the Unity UI Profiler recording

    Filter the metrics so you can focus on what is important: Rendering, Scripts, and UI.

    Keep an eye on the baseline to have a visual cue of your current baseline cost, which should include the expensive Canvas Rebuilds.

    Unity UI Profiler: Spike Found

    2. Deactivate UI Game Objects and compare

    Select a group of game objects and deactivate it.

    Compare the performance baseline.

    If the baseline didn't improve much, continue deactivating game objects till you see a significant improvement.

    Unity UI Profiler Spike: Saboteur Found

    3. Find out who is modifying its properties

    Now you managed to isolate which object is triggering your Canvas Rebuilds. But, who's actually causing those?

    Is it a script scaling it? Or maybe an animation changing its position?

    It helps to do a right-click on the RectTransform and press "Find References in Scene"

    Once you know who's causing the UI canvas rebuilds, do something about it, such as disabling animations or transforms.

     

    Ruben, how am I supposed to follow this approach in a huge UI hierarchy? Don't give me crap

    I told you it was going to be neither fast nor fun, but your players asked for it.

    That's the thing. Having a huge hierarchy in place is not ideal in the first place. Exactly those massive, deep hierarchies will make your Canvas Rebuilds incredibly expensive on the CPU.

    But big and nested UI hierarchies can (and will) happen, so expect canvas rebuilds to hit you where it hurts the most: your players' game-play experience.

    While the brute force approach helps finding the source of canvas rebuilds, this does not scale in the long-run.

     

    Becoming more professional about optimizing UI is what got me into creating a tool that would give me all the answers I needed to match my players' expectations...

    Canvas Rebuilds Profiling

    Canvas Rebuild Profiling

     

    4. Bonus: Augmenting the Unity Profiler for UI Optimization

    By now, hopefully, I stressed enough how frequent and impactful UI Canvas Rebuilds can be.

    These troll canvas rebuilds that infested my game stole 10% of my entire CPU budget!

    As we saw, there is a slow brute-force approach for finding the source of a canvas rebuild. Then, I hope you'll be able to do something about it, based on the strategies I posted on my Unity UI Optimization post (visit it, it's free, I promise!).

    But such as error-prone approach is a process a real guru would never settle for. You can literally spend days trying to avoid canvas rebuilds, but the moment you expect it the least, they'll come back just to disappear as soon as you attach the Unity UI Profiler.

    This becomes crucial if you're doing VR development. You don't want canvas rebuilds in your world-space UI. Like not at all. If you don't get rid of these, you're very much likely to convert your players into patients.

    I get it, I will get rid of the canvas rebuilds. But the Unity Profiler won't tell me much about those! What advice can you give me?

    I'm glad you asked. It turns out we can convince the Unity Profiler to give us useful information about who's messing with the performance of our UI.

    You and I can augment the functionality of the Unity UI Profiler. We do so by altering the Unity UI source code that is publicly available. Once you have the source code, you'll want to find the code functions where the Canvas Rebuilds take place. Then, all we need is some BeginSample and EndSample Profiler API magic.

    If you're running Unity 2019.1 or earlier, the Unity UI source code is available for free in their Bitbucket repository. You can follow their guide there to download, install and modify it.

    My suggestion? Use a newer Unity version, at least 2019.2.0. New versions of Unity include the UI source code by default, as the UI system is now part of the package manager. That's the hassle-free way of doing this.

    Here's a list of code regions I found during my investigations where you could add the Profiling API calls:

    Unity UI: Profiling Source Code

    Unity UI: Profiling Source Code

    Useful? Yes. 

    Artist/Designer-friendly? No.

    That's why I wrote a small open-source Unity Extension to enhance the Unity Profiler for you.

    Guru's Unity Profiler UI Enhancer

    The free tool will allow you to quickly switch over profiling modes to make sure the performance of your game is on top.

    The best part of the Unity Profiler enhancer? It just works outside of the editor, effectively replacing all the aspirins you've been taking while profiling your UI in Android and other platforms. 

    Here it is, all its power under your control with two simple buttons: 

    • Buff my Unity Profiler
    • Nerf my Unity Profiler.

    Grab it now here:

    Unity-UI-Profiler-Enhanced-CD-Front



      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
  • Latest Featured Articles

  • Featured Blogs

  • Advertisement
  • Popular Now

  • Similar Content

    • By UnlovedDolphin
      im going to try to get into vr game making and I want the most meltability and not a pain in my ass to code with. would like any insight and help that can be given
    • By joe123
      I'm a software engineer and i have entered game development field (Unity) for the last couple of months . I have made a couple of games on android using Unity that are only at concept stage now. And i mean by concept stage , that i'm focusing only currently on game play , not graphics and levels and anything else now. The games i have made are similar to (Color Switch) on mobile (The game has no levels , but gets harder with higher score or time). I'm making games with least resources now then decide which game i should focus on after getting feedback from users. I need guidance for the next steps that i should be doing. Like for example should i focus on one game and expand it ? Should i publish and market all of these games with their current state then get feedback with the best game then focus on it ? Should i use ASO (app store optimization) now  ....etc What i think i need is a game product manager , or an experienced indie game developer that can guide me what should i do for the next step. For anyone who has experienced a state similar to mine , can you share with us some knowledge about how to manage a game in means of marketing and everything else (not code related) ? To confirm my question , I'm not asking for example how to market my games , but i'm asking at which stage i should start marketing my games...etc I know answering this question could be big , but i need just some guide lines for now.
    • By khawk
      Lightstream, an innovator in cloud-native live streaming technology, today announced its IRL (In Real Life) plan for broadcasters who stream events from their phones or mobile live streaming setups. 
      Streaming out in the world away from a computer and without a strong internet connection can be a challenge. Lightstream’s new IRL plan provides capabilities that streamline setup time and gear required to produce a professional stream from any location, any device and any connection. 
      “Part of our mission at Lightstream has been to empower new creative possibilities and our new IRL streaming plan does just that,” says Stu Grubbs, CEO of Lightstream. “Lightstream Studio is powered by our cloud-native live video editing pipeline allowing creators to set up their production in advance, remotely control it, and have their streaming video automatically produced to their specifications from anywhere in the world while in-flight to their viewers.”
      With a Lightstream IRL plan, streamers set up their project and scenes via any browser-enabled device with their overlays, RTMP source and final channel destination. Broadcasting to Lightstream from any location will automatically layer on the media in that project on its way to their channel – whether that be Twitch, Mixer, YouTube, Facebook Live, or a custom destination. Similar to Lightstream’s unique integration with Xbox and Mixer, there is no need to have Lightstream Studio open in a browser window. 

      The new IRL Plan includes the following features:
      Customize with Overlays & Alerts
      Streamers can create multiple custom layouts, upload and position overlays, and use any integrated alerts service they prefer to easily personalize their mobile or IRL broadcast to better engage their audience.
      Auto Go Live
      Projects can be set to automatically start streaming to the broadcaster’s channel as soon as an incoming feed is detected.
      Auto BRB
      If connection is lost, the RTMP layer will go transparent until connection is re-established. Position an image directly behind your feed that will automatically appear to keep viewers updated.
      Disconnect Protection
      Lightstream Cloud will continue broadcasting and keeps the broadcaster’s channel live until signal is regained so the audience doesn’t leave.
       Remote Control
      Start, stop, and switch scenes on any mobile device.
      Stay Mobile with Headless Mode
      Go live without having Lightstream Studio open. Lightstream will automatically composite on your layers in the cloud.
      Max Quality & Duration Increase
      Stream at 720p 60 fps for up to 12 hours per broadcast.

      For more information and to sign up for the IRL Plan, please visit https://golightstream.com/irl.
      For more information about Lightstream and its products, please visit https://www.golightstream.com. Be sure to follow Lightstream on Twitter for the latest updates and community happenings.

      View full story
    • By khawk
      Lightstream, an innovator in cloud-native live streaming technology, today announced its IRL (In Real Life) plan for broadcasters who stream events from their phones or mobile live streaming setups. 
      Streaming out in the world away from a computer and without a strong internet connection can be a challenge. Lightstream’s new IRL plan provides capabilities that streamline setup time and gear required to produce a professional stream from any location, any device and any connection. 
      “Part of our mission at Lightstream has been to empower new creative possibilities and our new IRL streaming plan does just that,” says Stu Grubbs, CEO of Lightstream. “Lightstream Studio is powered by our cloud-native live video editing pipeline allowing creators to set up their production in advance, remotely control it, and have their streaming video automatically produced to their specifications from anywhere in the world while in-flight to their viewers.”
      With a Lightstream IRL plan, streamers set up their project and scenes via any browser-enabled device with their overlays, RTMP source and final channel destination. Broadcasting to Lightstream from any location will automatically layer on the media in that project on its way to their channel – whether that be Twitch, Mixer, YouTube, Facebook Live, or a custom destination. Similar to Lightstream’s unique integration with Xbox and Mixer, there is no need to have Lightstream Studio open in a browser window. 

      The new IRL Plan includes the following features:
      Customize with Overlays & Alerts
      Streamers can create multiple custom layouts, upload and position overlays, and use any integrated alerts service they prefer to easily personalize their mobile or IRL broadcast to better engage their audience.
      Auto Go Live
      Projects can be set to automatically start streaming to the broadcaster’s channel as soon as an incoming feed is detected.
      Auto BRB
      If connection is lost, the RTMP layer will go transparent until connection is re-established. Position an image directly behind your feed that will automatically appear to keep viewers updated.
      Disconnect Protection
      Lightstream Cloud will continue broadcasting and keeps the broadcaster’s channel live until signal is regained so the audience doesn’t leave.
       Remote Control
      Start, stop, and switch scenes on any mobile device.
      Stay Mobile with Headless Mode
      Go live without having Lightstream Studio open. Lightstream will automatically composite on your layers in the cloud.
      Max Quality & Duration Increase
      Stream at 720p 60 fps for up to 12 hours per broadcast.

      For more information and to sign up for the IRL Plan, please visit https://golightstream.com/irl.
      For more information about Lightstream and its products, please visit https://www.golightstream.com. Be sure to follow Lightstream on Twitter for the latest updates and community happenings.
×

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!