Topic:

  1. Core Animation pipeline
  2. animation
  3. Concepts related to rendering
  4. UIBlurEffect and UIVibrancyEffect
  5. Profiling Tools and demon

Core Animation Pipeline

The app uses Core Animation directly or indirectly through UIKit to create layers;

The app process does not render for the Core Animation. The Core Animation submits all layers to the Render Server for rendering.

render server

  1. Independent processes;
  2. There is a server version of Core Animatio that accepts layers submitted by Core Animation.
  3. Using GPU for rendering, hardware acceleration;
  4. The corresponding frame is OpenGL or Metal frame for rendering,

Hardware acceleration refers to GPU rendering. Because generally speaking, although CPU is also hardware, but most of the work content is software-oriented, need to deal with a lot of interrupt instructions. Comparatively speaking, GPU is pure computing, and it is also designed for high concurrency and high efficiency. Therefore, GPU rendering is generally called hardware acceleration, while CPU rendering is relatively inefficient.

About the process

The app:

  1. Users trigger events by operating the APP;
  2. The transaction is submitted to render Server (in four steps, see below);

render server/GPU

  1. Decode layers;
  2. Wait for the signal to start the next frame. On iOS, there is double buffering, so this signal indicates that the previous buffer has been scanned and displayed, and the display has been switched to another buffer. Now, you need to draw a new bitmap and update it to the buffer where the last frame was.
  3. Call openGL or Metal function, use GPU for rendering;
  4. Store the completed bitmap in buffer and wait for the display to scan and display. If this step and the previous step are not completed within 16.67ms, it will cause lag.

commit transaction

1. layout

Two key methods: layoutSubviews and addSubview; In this step, the View is created, layer is created and added to the view tree; In this step, you can do some lightweight database operations, such as requiring strings for the layout of labels;

This step occurs in the CPU, usually CPU operations or I/O operations (external memory);

2. display

Key method: drawRect; If the method is overridden, Core Graphic is called to draw with the CPU.

Since the drawing is not visible at this point, the CPU used here draws the bitmap in memory; Strictly speaking, this is an off-screen rendering, as it is not drawn directly on buffer.

GPU rendering is usually drawn directly on buffer, while GPU off-screen rendering means creating a block of memory for storage and then mixing it with buffer. Switching between two pieces of memory consumes performance. Apple defines off-screen rendering as GPU off-screen rendering, so CG related rendering functions are not considered off-screen rendering.

This step is usually a CPU or memory operation, because the CPU is used to draw the bitmap, which requires memory, rather than local access.

This step is for CPU rendering, so you should avoid too many or too wide draws and use Layer directly.

3. prepare

This step is mainly to decode and convert the image contained in the layer.

Decoding is what we call decoding an image into bitmap format and storing it in memory. Whether the bitmap size is the same as the original image depends on the image format, that is, the compression method. PNG is a fidelity image, and the storage size of the compressed image will be realized, but at this step, it will be loaded into memory, and the size of the decoded bitmap will be the same as the original image. JPEG is the adjacent points in the bitmap clipping operation, after compression, not only the storage size becomes smaller, is loaded into the memory, after the restoration of the bitmap, because the original map information is partially lost, so the size of the decoded bitmap will be smaller than the original bitmap;

IOS GPU supports JPEG and PNG, and other formats need to be converted.

4. package up

Key words: Recursive

Recursive layer tree, package all layer information and pass it to render Server;

As recursive layer tree is required, as flat as possible is minimized to ensure that this step is as efficient and fast as possible.

animation

The steps are the same as for layer drawing, except that in the Commit phase, not only layers are committed, but animations are also committed. In this way, during the animation execution, the Render Server executes the animation according to the established flow, and there is no need to communicate between processes. This is why Core Animation is so effective;

Several concepts for rendering

  1. tile based rendering is how all GPUs work
  2. introduce the concept of render passes
  3. doing a first example by showing you how masking works with render passes