YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

English subtitles

← GPU Problem - Overdraw

Get Embed Code
13 Languages

Showing Revision 4 created 05/25/2016 by Udacity Robot.

  1. If you've ever painted a room or
    a house, you know that it takes a lot of
  2. work to color in those walls, and if
    you need to end up repainting it again,
  3. you've wasted a ton of work
    doing it the first time.
  4. This same concept of wasting
    effort to paint something
  5. can also contribute to performance
    problems in your applications.
  6. See, at the intersection
    of performance and
  7. design lies a common
    performance problem.
  8. Overdraw.
  9. Overdraw is a term used to describe how
    many times a pixel on the screen has
  10. been redrawn in a single frame for
    example if we have a bunch of stacked
  11. UI cards, all of the cards that are on
    the top part of the stack closer to
  12. the user will hide large portions of
    the cards that are hidden underneath.
  13. Meaning that we'll spend time drawing
    those cards which are mostly invisible.
  14. This is actually a large problem because
    each time we're rendering pixels that
  15. don't contribute to the final scene,
    we're wasting GP performance.
  16. And with modern layouts, it's easy to
    fall into a trap where we're stacking
  17. and layering views to give us this
    beautiful, transcendent design.
  18. But also creating the same
    overdraw problem.
  19. To maximize performance
    in your application,
  20. you'll want to minimize overdraw.
  21. Fortunately, it's easy to see the amount
    of overdraw in your applications
  22. right on your Android device.
  23. Simply go into developer mode, and
    then turn on the Show GPU overdraw flag.
  24. Now, don't panic while your phone turns
    into some sort of visual awesomeness.
  25. This is completely normal.
  26. Android is using different colors to
    highlight areas of overdraw occurring
  27. on your screen.
  28. If you've only rendered
    a pixel one time,
  29. you should see it in its
    true color with no tint.
  30. However, as the overdraw increases,
    so do the colors.
  31. A one x overdraw, for
    example, is tinted blue,
  32. meaning that you've now redrawn
    this pixel one extra time.
  33. And, of course, two x, three x, and
    four x follow the same pattern.
  34. So when you're tuning your
    app's user interface,
  35. you'll want to reduce as
    much overdraw as possible,
  36. reducing all of those areas of
    red in favor of the nice blues.
  37. To accomplish this goal, there's two
    main ways you can remove overdraw.
  38. Now firstly, you'll want to
    eliminate unneeded backgrounds and
  39. drawables from views that won't
    contribute to the final rendered image.
  40. Remember, this is wasted performance.
  41. Secondly, you can define areas
    of your screen that you know
  42. will hide portions of your view, which
    can help reduce CPU and GPU overhead.
  43. So let's get started at the top and
    join Chris as he's going to take us and
  44. help us look at overdraw.