What triggers "Color Copied Images" and "Color Hits Green and Misses Red" in Instruments?

Question

The Instruments User Guide has this to say:

• Color Copied Images. Puts a cyan overlay over images that were copied by Core Animation.

But that doesn't explain why an image got copied. There doesn't seem to be an obvious pattern from one copied image to another, although it is regular and reproducible.

The docs currently don't even mention Color Hits Green and Misses Red, but I'm thinking it might have something to do with CALayer’s shouldRasterize property.

Any ideas?

Baggywrinkle

Answer 1

For "Color Copied Images," this was talked about nicely in Session 419 WWDC 2014:

"If an image is in a color format that the GPU can not directly work with, it will be converted in the CPU."

Example: Imagine getting images from an online source where you don't control the format. JPEG supports 24-bit color images (8 bits per color). TIFF format can store colors in 48-bit color images (16 bits per color). Depending on what iOS wants, these differences might have to be converted.

The solution would be to covert them in the background to the right color format to prevent a performance problem of doing these conversions on the main thread.

For "Color Hits Green and Misses Red," OP is correct, it's to check whether you are using the "shouldRasterize" property correctly. Green means good, you re-used the cache you created from the "shouldRasterize" property. Red means bad, you needed to write to the cache (causes an offscreen pass), and then draw.

Insectivorous

Answer 2

Images can be copied if they are backed by a custom data provider or can’t be mapped into another process for some other reason.

Circumcise

Why would the OS map app-specific graphics into another process? – Baggywrinkle

The SpringBoard (until iOS 5) / BackBoard (iOS 6 +) process handles all the rendering of an iOS app. See session 238 of WWDC 2012, they explain the rendering steps 3 minutes in. – Flosi

Answer 3

iOS debug rendering with Core Animation Instruments

[iOS CALayer]

Good practice is to have:

• 60 FPS(frames per second) Real device -> Profile -> Core Animation FPS
• test release package because of some compile optimizations

Core Animation Instruments

• <real_device>
• Schema -> Run -> Options -> <check_in> View Debugging
• Run
• Xcode -> Debug -> View Debugging -> Rendering
• <debug_any_app>

• Simulator -> Debug

1. Color Blended Layers(overdraw, color mixing) [Green, Red]

The same pixel is drawn more than once in a single frame of rendering

If Red - color blending is applied. It is not simple task to calculate a correct result pixel color when there are pixels with alpha channel under it.

[iOS alpha vs opacity vs opaque]

Use case 1. UIView.layer.cornerRadius the color blending is applied by default.

Applying cornerRadius to the layer’s background, and not applied to layer.contents(use masksToBounds to solve it)

let view = UIView(frame: CGRect(x: 50, y: 50, width: 100, height: 50))
view.backgroundColor = .blue

apply cornerRadius as a result - color blending

view.layer.cornerRadius = 15
view.layer.masksToBounds = true

To fix this issue you can:

• use CALayer.mask^[About], but Color Off-screen Rendered will be applied

let mask = CAShapeLayer()
let path = UIBezierPath(
    roundedRect: view.bounds,
    byRoundingCorners: [.topLeft, .topRight, .bottomLeft, .bottomRight],
    cornerRadii: CGSize(width: 15, height: 15)
)
mask.path = path.cgPath
view.layer.mask = mask

• round UIImage, instead of UIImageVeiw

Use case 2. UILableView - backgroundColor is transparent Use case 3. UIImage with alpha channel (which can be used in UIImageView)

To preven color blending:

• flat view hierarchy
  
• reduce tranceparency

2. Color Copied Images [Blue, default]

If Blue - image is copied from GPU to CPU, because GPU does not support this color format. For example you can create a large imageview and set .pdf image

imageView.image = UIImage(named: "ring")

3. Color Misaligned Images [Yellow, default]

Image size doesn't equal to imageView size. Since it requires extra work to compress the image

4. Color Off-screen Rendered [Yellow, default]

Rendered with an offscreen buffer - generating bitmap on CPU(Off-screen) before putting it to GPU for on-screen rendering^[About]

If Yellow - layer was rendered offscreen. For example by default it is applied for CALayer.mask, shadow **without** path, CALayer.cornerRadius, CALayers.shouldRasterize = true, drawRect() something custom with CGContext,

5. Color Hits Green and Misses Red [Green, Red, default]

Shows that shouldRasterize = true has a negative impact. Green - cached successfully, Red - cache is regenerated. Only frequent regeneration has performance impact.

[iOS shouldRasterize]

6. Color Layer Formats(Color Non-Standard Surface Formats) not documented

7. Color Immediately

By default Core Animation Instruments updates debug coloured layed every 10 ms. This setting set it to update every frame which has some impact on performance and accuracy.

8, Color Compositing Fast-Path Blue(Color OpenGL Fast Path Blue) [Blue, Red, default]

Highlight(blue) layer which is drawn directly to screen with OpenGL which is the best practice. If you work with OpenGL and dont see blue it means that you make extra work

9. Flash Updated Regions [Yellow, default]

Yellow is a region which is updated(redrawn). The simplest scenario it's finding unnecessary effects

Finalize