Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Shadow Rendering and Performance

Shadow Rendering and Performance

What are shadows? Is it expensive to render a shadow? How bad is it? Does this have anything to do with the rendering engine? How does rendering engine work? Lets find out!

Pradnya Nikam

January 12, 2023
Tweet

Other Decks in Programming

Transcript

  1. ‣ Drop Shadow Basics ‣ Refresher on Render Loop and

    Offscreen passes ‣ Avoid offscreen passes ‣ Diagnose render loop issues in your app ‣ Hidden Agenda 🤨 Agenda
  2. What is a drop shadow? In graphic design, drop shadow

    is an e ff ect that gives an object the appearance of having a shadow. 3
  3. Why would you use a drop shadow? • For dimension

    and depth • To highlight an element • As a subtle border • Because the designer says so 🤪 4 amarelo amarelo Before After
  4. Adding shadow to a UIView view.layer.shadowOffset = CGSize(width: 5, height:

    5) view.layer.shadowOpacity = 0.5 view.layer.shadowRadius = 9 view.layer.shadowColor = UIColor.gray.cgColor 5
  5. But.. drawing shadow is expensive • Rendering engine spends extra

    time when drawing a view with shadow • Overloading the rendering engine can result in frame drop 6
  6. Render Loop Display Bu ff er Commit Phase Update layers

    in order from parent to child Render Phase Draw layers in order from parent to child Display Identify the layers that need laying out Receive Events 12
  7. Render Loop Display Bu ff er Commit Phase Update layers

    in order from parent to child Render Phase Draw layers in order from parent to child Display Identify the layers that need laying out Receive Events 13
  8. Render Shadow 1. Draw the shape in an o ff

    screen bu ff er 2. Fill the image with shadow colour 3. Apply shadow blur and o ff set 4. Copy shadow to original bu ff er Original Bu ff er O ff screen Bu ff er 19
  9. Render Shadow 1. Draw the shape in an o ff

    screen bu ff er 2. Fill the image with shadow colour 3. Apply shadow blur and o ff set 4. Copy shadow to original bu ff er Original Bu ff er O ff screen Bu ff er 20
  10. Render Shadow 1. Draw the shape in an o ff

    screen bu ff er 2. Fill the image with shadow colour 3. Apply shadow blur and o ff set 4. Copy shadow to original bu ff er Original Bu ff er O ff screen Bu ff er 21
  11. Render Shadow 1. Draw the shape in an o ff

    screen bu ff er 2. Fill the image with shadow colour 3. Apply shadow blur and o ff set 4. Copy shadow to original bu ff er Original Bu ff er O ff screen Bu ff er 22
  12. To avoid an o ff screen pass 1.Provide shadowPath 2.Shadow

    as an image 3.Rasterize (cache) the shadow 4.Shadow as a part of your image! 28
  13. To de fi ne your shadow’s shape Using Bezier Path

    rectangleView.layer.shadowPath = UIBezierPath(rect: CGRect(origin: .zero, size: CGSize(width: 600, height: 130)) ).cgPath rectangleView.layer.shadowRadius = 5 rectangleView.layer.shadowOffset = CGSize(width: 10, height: 10) rectangleView.layer.shadowOpacity = 0.4 29
  14. Shadow as an image Limitations • Complicates view hierarchy •

    More code, more points of failure • Doesn’t fully support changing size 33
  15. Shadow as an image Limitations • Complicates view hierarchy •

    More code, more points of failure • Doesn’t fully support changing size 34
  16. Shadow as an image Limitations • Complicates view hierarchy •

    More code, more points of failure • Doesn’t fully support changing size 35
  17. Shadow as an image Limitations • Complicates view hierarchy •

    More code, more points of failure • Doesn’t fully support changing size 36
  18. To diagnose and review render loop issues Tools • Animation

    Hitch instrument • XCTest Metrics • Xcode organiser • Xcode view debugger 39
  19. Tip: Select “Color o ff screen rendered option to see

    the layers that have incurred o ff screen pass!
  20. (Hidden Agenda) E ff ects that incur render pass •

    Shadows • Image E ff ects like Blur and Vibrancy • Masking • Rounded corners (via masking)