The core hardware of rendering — GPU

One CPU on the left hand and one GPU on the right. What’s the difference between them?

Display?

Random scan display

Raster scanning form

In the old days of “big-ass” displays, an electron gun was used to raster the image and then blast electrons line-by-line onto the screen. The frame is not displayed until the end of the last line. But this step is very, very fast, from the first line to the end of the last line, using the human visual stop, complete the display.

System structure of raster scanning

Display of the time encounter screen tear screen dislocation

As can be seen from the raster scan system structure, GPU rendering to bitmap -> frame cache -> refresh by display controller -> screen. But the screen refreshes at a fixed rate, usually 60Hz. If the graphics card output is higher than 60fps, the refresh rate is out of sync with the output rate and the picture will tear.

Solutions:

• Double buffers are introduced: on-screen buffers are called on-screen buffers and off-screen buffers are not displayed. After a buffer is rendered, the image is displayed on the screen by swapping the screen buffer with the off-screen buffer.

• Vsync was introduced: Is due to the display refresh by rows, so in order to prevent the exchange buffer when the content of the two buffers, thus exchange usually waiting for the signal to the display refresh to complete (is locked, the signal to unlock after), in the middle of the display refresh interval twice to carry on the exchange, this signal is the vertical sync signal, vertical sync. This technology is

Image/image rendering process

I just talked about display, but before the display can be displayed, the rendering from the data -> bitmap must be completed, and finally sent to the frame buffer for display. In the previous blog entry to OpenGL, Basic Concepts, we covered the rendering process

Vertex data (in memory, CPU processing)-> Geometry -> Rasterization -> slice/pixel -> bitmap -> Display

Further detailed decomposition will be as shown in the figure below:

CPU processes vertex data stored in memory (arrays)

GPU geometry operation: vertex data for vertex conversion, coordinate conversion, rotation, translation, scaling, lighting calculation and other processing

GPU vertex shader processing: turn vertices into primitives

GPU primitives assembly: Connect information lines

GPU raster processing into rasterized data

The GPU chip shader will perform bitwise operations on each pixel of rasterized data to determine the color of each pixel.

IOS rendering architecture

Among them, CoreAnimation, in apple’s design, is a composite engine that includes: rendering, construction and animation.