Chinese Version中文版： TyGL：硬件加速的 Web 渲染
Today at SIGGRAPH a new demo is being brought to the public as the result of 18 months of collaboration between teams at ARM, Samsung Research UK and Szeged University in Hungary. It demonstrates massively accelerated mobile web rendering on an ARM® Mali™-T628 GPU based Chromebook with 1.5 to 4.5 times higher performance compared to other solutions on the market (depending on the type of content run). The solution enables a smoother experience and is not just applicable to web browsing, but can also hugely improve the user experience on browser based UIs such as those in modern GPU-enabled DTVs.
The solution, named TyGL, is a new backend for WebKit which addresses the challenge that HTML5 developers currently have when balancing graphics rich web content against the constrained rendering capabilities of mobile CPUs. Rasterization has typically been done mainly on the CPU. While this suffices for PCs, rendering using a mobile CPU is known to be more inefficient due to the constraints imposed on the CPUs by their batteries (such as lower clock frequencies) – leaving a parallel task like this to the GPU could result in a much smoother experience. However, using 3D graphics hardware such as Mali GPUs to render 2D content such as web pages is an extremely challenging task. Raster engines are designed to draw various graphics primitives one-by-one with frequently changing attributes, rather than drawing several primitives of the same type using a single draw call, which is the sort of task GPUs are optimized for. So while CPU rendering is slow, GPU rendering is complex to achieve efficiently because WebKit issues more draw calls, each with less data than is optimal for GPU usage.
The other challenge which HTML5 developers face with the WebKit ports that are currently available is the level of abstraction between layout and painting to the screen. By abstracting too far from the underlying accelerated API the developer can lose the ability to code to the API’s strengths, leading to a sub optimal implementation.
TyGL seeks to cut down the level of abstraction in current ports and offer a web rendering solution that is fully optimized for the GPU whose only dependency is the OpenGL® ES 2.0 API, supported by the majority of application processors. It is a backend for WebKit, the open source application framework that can be used to build web-browser like functionality into an application. Major WebKit based products include embedded browsers from companies such as Espial, ACCESS and Company 100.
Both ARM and Szeged University conducted in-depth profiling of common webpages using the QtTestBrowser. The results showed that the majority of active CPU time was spent in libQtGui – the Rendering/Painting API used to render the content on the screen. GPUs are far more efficient at rendering to screens than CPUs and it was proposed that if the drawing commands of the pipeline were able to be done using the OpenGL ES 2.0 API, the performance could be improved considerably.
TyGL Pipeline
The diagram above outlines the pipeline of TyGL. It applies three different processes to drawing text, images and paths, but the differences are in the preparation phases only. Even there, some similarities can be noticed. First, in the case of text and paths, some or all of the affine transformation is applied to the input in order to ensure higher quality output, which is then rendered to an alpha image with any remaining transformation being applied. Finally, the pipeline paths join at the point where GPU acceleration becomes efficient: colouring, clipping, blending and compositing. This common part of the pipeline is fully processed by the GPU. Each stage of the common pipeline is associated with an OpenGL ES fragment shader, which performs the necessary computations on each output pixel in a highly parallel fashion. Software-based graphics libraries such as Cairo usually have similar pipeline stages, executed sequentially and communicating through temporary buffers, but TyGL can do this more efficiently.
Example webpage rendered by TyGL
Preparations are underway to open source the TyGL backend for WebKit imminently. Early results show that the port is successful at improving the performance and efficiency of 2D rasterization in the browser while remaining lightweight enough to reduce the level of overhead and abstraction in currently available solutions. By releasing this code into the Open Source arena, it is hoped that all browser vendors that make use of WebKit will be able to benefit from ARM and their partners leadership in the domain of 2D rasterization on embedded GPUs.
If you want to find out more about TyGL, come and visit the brains behind it at the ARM Booth at SIGGRAPH this week.
Thank you to you for these useful explanations.
Wow! This was a great read. Thank you for the article!
The web is proving to be a very competent platform with a continued push towards higher efficiency (eg. TyGL, ASM.js, NaCl, PNaCl, etc) and developers are given lower-level access to compute APIs (eg. WebGL, WebCL). In many cases, it can compete with more traditional OSs running native executables with negligible speed differences. Here's to hoping that TyGL finds quick adoption to improve both the user-experience and power consumption characteristics of web based software.
On another note: I'm also hoping that either WebCL or OpenGL ES 3.1 (w/ compute shaders) find their way onto the web shortly. While heterogeneous compute may be a bit complex and is not for everyone, it has the capability to greatly speed up some inner-loops that are the bottleneck for performance in serious, performance constrained software (eg. photo editing, game physics, etc).