Shadow Rendering ‣ Drop Shadow Basics ‣ Refresher on Render Loop and Offscreen passes ‣ Avoid offscreen passes ‣ Diagnose render loop issues in your app ‣ Hidden Agenda 🤨 Agenda 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. Why would you use a drop shadow? • For dimension and depth • To highlight an element • As a subtle border • Because the designer says so 🤪 amarelo amarelo Before After 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 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 60 FPS 16.67 ms 1 second Render Loop Display Bu ff er Display Bu ff er Display Display Bu ff er Display Bu ff er One pixel Display Display Bu ff er Display 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 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 Example Render Phase Step by step plan Render Phase Example Render Phase • Render elements into display bu ff er Render Phase ✅ 🤔 Render Phase 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 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