UI Chromium hardware accelerated rendering
synthesis process analysis
In Chromium in, Render end and WebGL end drawn out through the Browser UI ultimate end is displayed on the screen. In other words, it is responsible for the synthesis Render Browser end end end and WebGL UI. This involves transfer of resources between different OpenGL context and synchronization issues. Among hem, the resource transfer mechanisms to resolve issues through Mailbox t
synchronization mechanism to solve the problem by Sync Point. This paper will analyze the following synthesis Render Browser end end end and WebGL UI process.
Render end is responsible for drawing the web UI. In Chromium, the web UI is abstracted into a tree Layer Tree, each Layer have to use a Layer object description, the leftmost in Figure 1 below:
1 Layer Diagram Tree, Pending Layer Tree and the Active Layer Tree
WebGL side is responsible for drawing a webpage canvas tag. In Chromium, the webpage canvas tag is abstracted as a TextureLayer object appears as a Layer is used to describe a web UI of the Layer Tree.
Render end of the three in-house maintenance Tree. In addition to the Layer Tree,
the other two are Pending Layer Tree Tree and Active Layer Tree. In Pending Layer Tree and Active Layer Tree, each Layer is described by a LayerImpl object. Accordingly, the webpage canvas tag in Pending Layer Tree and Active Layer Tree is abstracted as a TextureLayerImpl object.
Layer Tree maintained by Render Render thread ends, and Pending Layer Tree and Active Layer Tree maintained by Render end Compositor thread. Render Layer Tree thread obtained by parsing the page content. Pending Layer Tree equivalent of a copy of Layer Tree. Whenever Layer Tree changes, Compositor thread will have its sync (Synchronize) Pending Layer Tree to go.Pending Layer Tree after a rasterized (Rasterize) process, it becomes Active Layer Tree. Active Layer Tree represents a synthesis of the end can be Browser UI.
Pending Layer Tree Layer Tree and presence makes Render Compositor thread and the thread can concurrently draw web UI, shown in Figure 2:
Figure 2 a schematic drawing of concurrent web UI
This is equivalent to a frame on the page UI is drawn into two parts. Render the first half of the thread, the second half of the Compositor thread. Wherein the first N + the first half and second half of the N-th frame 1 can be processed concurrently. This is similar to the Android 5.0 UI application hardware accelerated rendering mechanism, specific reference Android application UI hardware accelerated rendering technology brief introduction and learning programs This series of articles. Among them, Render here Compositor thread and the thread is equivalent to Android 5.0 application process in the Main Thread and Render thread.
From the front Process Analysis Chromium hardware accelerated OpenGL rendering command execution A text may know, Render end GPU command execution draw web UI, but is written to the GPU to perform a GPU command buffer, and then read by the GPU process from the GPU command buffer out of GPU command, and calls the appropriate OpenGL functions execute them. This process is actually increasing the page rendering process parallelism, which is in the Render end GPU GPU command buffer write commands simultaneously, GPU process from GPU GPU command buffer read command processing. So it can make good use of multi-core characteristics of the device. It is also hardware accelerated rendering Chromium and Android hardware accelerated rendering of one important difference.
Pending Layer Tree and Active Layer Tree Use Browser-side existence of both web UI can be synthesized at any time. Active Layer Tree describes the page content
changes occur before a UI frame. Pending Layer Tree to be rasterized is a lengthy process. If there is no presence of Active Layer Tree, it will result in the Pending Layer Tree during rasterization, Browser-side web UI can not be displayed on the screen.
Early, Render end first through a process called GL Renderer renderer in the Active Layer Tree draw a texture, and then passed to draw a good texture synthesis Browser side, shown in Figure 3:
Figure 3 GL Renderer
Active Layer Tree Layer Each corresponds to a Render Pass, these Render Pass up a Render Pass List. Wherein each Render Pass also contains a Quad List. Quad
List consists of a series of Draw Quad composition. Draw Quad is a description of a texture mapping command, the texture mapping command specifies the texture object and texture coordinates and other information.
Mentioned earlier, WebGL side of the page is responsible for drawing canvas tag. This content canvas tag is drawn in a texture. This texture is generated in the WebGL end OpenGL context, and then passed to the Render end by Mailbox.
As mentioned earlier, web page canvas tag is abstracted as a TextureLayer object. This TextureLayer object corresponds to the Render Pass List in a Render Pass. The Render Pass the Quad List contains a Texture Draw Quad. The Texture Draw Quad specified texture object description tag is the canvas UI. In other words, the canvas tag WebGL end UI drawing on a texture. Note that this texture object is created in the WebGL end OpenGL context, Render end OpenGL context can not access it directly. To make Render client can access the texture object, WebGL Mailbox will end by this texture object to Render end, Render end so you can access it.
Render end finally by GL Renderer Render Pass List all Render Pass, including the canvas tag corresponding Render Pass, we are drawn in a texture. The texture which is then passed to the Browser side through the Mailbox. Browser end like Render end, just as they have to draw the UI (including the transfer from Render end came texture object) abstract into Layer Tree, Pending Layer Tree and Active Layer
Tree three Tree. Browser-side Active Layer Tree also corresponds to a Render Pass List. The Render Pass List ultimately be drawn by a GL Renderer. However, this Render Pass List will be drawn on the screen, instead of being drawn in a texture.
From the above analysis we can know, by GL Renderer, Render end first draw their Render Pass List in a texture. After this texture is passed to Broswer end, again drawing on the screen.This means that the end of Render UI is drawn twice. The first draw OpenGL context Render end, the second end is drawn Browser OpenGL context. In fact, we can end the Render Render Pass List passed to Browser-side rendering. This can reduce a draw, thereby improving efficiency.
The end of Render Render Pass List passed to the Browser client is through a process called Delegated Renderer renderer implementation, shown in Figure 4: