1. A brief introduction to off-screen rendering

  • The app creates a temporary cache outside the frame cache for additional rendering and merging
  • Off-screen rendering can be a performance drain
  • It can store up to 2.5 times the number of pixels on the screen
  • Triggered by the system

2. Detect off-screen rendering

  • Rendered on the simulator, Debug-> Color off-screen Support

  • If a yellow background appears, an off-screen rendering is triggered

3. Trigger mode of off-screen rendering

  1. CornerRadius + maskToBounds layer. This is only triggered by overlay, such as UIImageView setting the background color plus the image
  2. ShouldRasterize rasterizer
  3. Translucent view when mixed
  4. Frosted glass effect
  5. Draws the layer of text

4. Analysis of off-screen rendering

General render: App -> FrameBuffer -> Display Off-screen render: App -> OffScreen Buffer(for calculation and merging etc.) -> FrameBuffer -> DisplayCopy the code

General rendering:

  • When the system has drawn the graphics to be displayed, it is directly submitted to the frame cache and then displayed on the screen
  • Each time the frame cache is drawn and displayed on the screen, the contents of the original frame cache are immediately discarded for the next rendering

Off-screen rendering

  • When the image to be displayed cannot be drawn at the first time, it needs to be submitted to OffScreen Buffer after each part is drawn
  • When the last content is drawn, the combined content is calculated and finally submitted to the frameBuffer, and finally displayed on the screen

(OffScreen rendering is one more step than normal rendering, submit OffScreen Buffer, composite calculation)

5. Why do I need to render off-screen

For example, the following code

The backgroundColor backgroundColor needs to be rendered, and the content (image) also needs to be clipped. According to the conventional rendering steps and the painter algorithm, the principle of far first and near second is as follows:

  • After rendering the bitmap, enter the frame cache area -> screen first, the frame cache area is cleared
  • Enter the frame cache -> screen, the frame cache is cleared
  • Tailoring content? There’s nothing left to crop, the frame cache has been emptied

So, you need to create an extra buffer and wait for compositing/clipping to complete -> frame buffer -> screen display. The extra area for processing complex data is the Offscreen Buffer, so an extra Offscreen Buffer is needed before the frame Buffer.

Below is the off-screen rendering flowchart

  • First render the Mask texture and save it to the off-screen cache
  • Computes the layer texture part and saves it to the off-screen cache
  • In the off-screen render cache, mix the Mask and layer content and render it on the screen before committing to the FrameBuffer -> display

6. Trigger mode for off-screen rendering

1. cornerRadius + masksToBounds
 img1.layer.cornerRadius = 50;
 img1.layer.masksToBounds = YES;
Copy the code

The above code implements a rounded corner and is used as a number of examples of code that triggers an off-screen rendering, but does this necessarily trigger an off-screen rendering?

    UIImageView *img1 = [[UIImageView alloc]init];
    img1.frame = CGRectMake(100, 320, 100, 100);
//    img1.backgroundColor = [UIColor blueColor];
    [self.view addSubview:img1];
    img1.layer.cornerRadius = 50;
    img1.layer.masksToBounds = YES;
    img1.image = [UIImage imageNamed:@"22.jpg"];
Copy the code

If you open the comment as shown above, you will see that an off-screen rendering is triggered. If you close it, it is not triggered.

We can already see that a cornerRadius+masksToBound does not necessarily trigger an off-screen rendering. The key is to look at the layers of render data: backgroundcolor, content(image, text, etc.).

CornerRadius +masksToBound Will only render off-screen when content is set and the background is not transparent.

If you must use a cornerRadius+masksToBound to crop the image, do not set backgroundColor.

Tip: cornerRadius does not work with Content (Image). The cornerRadius documentation makes it clear that the cornerRadius setting only works on CALayer’s ** backgroundColor and borderWidth, borderColor**.

2. Frosted glass

For example, implementing a frosted glass effect

  • To render content
  • Capture content
  • The level of the fuzzy
  • Vertical fuzzy
  • Synthesize the process and then commit
  • Submit FrameBuffer -> Display

The rendered bitmap cannot be displayed directly in the frame buffer, but must be blurred before the final rendered data -> frame buffer -> is displayed.

3. shadowshadow

What is a shadow?

Shadow is a rectangle, and it is a background color, so it should be below the layer, shadow is derived from the layer, and it should determine its position size according to the layer

If there is no off-screen rendering, according to the painter algorithm, the shadow should be placed in the frame cache first and displayed first. But layer doesn’t. It’s impossible to render the shadow first. The off-screen rendering buffer can only be used to wait for shadow and layer to be rendered and merged before being sent to the frame cache for display.

4. ShouldRasterize

According to the official document, if rasterization is enabled, the final effect of the final layer rendering, including shadow and cutting, will be turned into a bitmap and put into the off-screen buffer for reuse. However, the size of the off-screen buffer cannot exceed 2.5 times the size of the screen, otherwise it will be released. Second, if the layer is not static, such as the image of the imageView needs to change, the text of the label will change frequently, etc., shouldRasterize will affect the efficiency of off-screen rendering. Also, the off-screen buffer has a time limit and will be released if it is not used for more than 100ms.

So we should use shouldRasterize:

  • If layer is not static, do not enable it
  • If the layer cannot be reused, do not enable this function. Cell is reused
  • If the value exceeds 100ms, the service is not overused and this function is not recommended
  • It is not recommended to enable an off-screen render control that is 2.5 times larger than its screen pixels
5. Group opacity

When there are many sublayer, we will set the transparency of the large sublayer at the back. We will first wait for the completion of the whole layer sublayer in the off-screen rendering area, calculate the new color according to the group transparency, carry out color integration, and finally submit the frame buffer. Not every layer of sublayer is displayed immediately. If opacity is 1, there is no need to adjust transparency, and normal painter algorithm displays.

6. masks

The maskLayer acts as a mask and is displayed on top of the larger layer and all sublayer children of the larger layer. Masklayer may also have transparency and shapes. Therefore, we must complete the screening and processing of Image and Mask in the off-screen rendering buffer to display the final Masked Image -> frame buffer.