The core hardware of rendering — GPU
One CPU on the left hand and one GPU on the right. What’s the difference between them?
| The processor | task |
|---|---|
| CPU | Operation core, control core |
| GPU | Special drawing, rendering |
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.