
One of the most welcomed features of modern vector renderers is the performance advantage they bring to the table. While SVG and Canvas renderers have been developed in the past, it has been WebGL that has skyrocketed performance. Modern GPU architectures can easily outperform CPUs by an order of magnitude in parallel scenarios like rendering. Having to compete with a scripting language, it is no surprise that WebGL and GPUs have gained the performance crown.

However, while previous WebGL renderers used the GPU for the final rendering pass, they didn’t exploit WebGL’s full potential. Every renderer, whether it is GPU based or not, consists of two phases: a styling phase in which features get assigned some rendering properties (like color and point size) based on the feature properties (type, price), and a draw pass in which geometries and their rendering properties are used to paint onto the final image or canvas.
Previous technologies already used WebGL for performing the drawing pass, however, the styling process was always delegated to slow Javascript code.
We, at CARTO, have unleashed the full potential behind WebGL by developing, a fully GPU accelerated library for map making: CARTO VL.
Of course, a fully accelerated pipeline comes with its own disadvantages. Although modern GPU architectures have been designed with the focus on giving more flexibility (see the recent trends in GPGPU), WebGL is based on OpenGL ES 2.0, a 2007 standard designed not only for desktops but for mobile devices too.
Therefore, we had to be a little bit creative in the way we designed our rendering pipeline. In particular, we used 2D textures as storage for feature properties (type, price, …) and feature rendering properties (color, point size, …).

Our rendering pipeline is made up of the following components:
JS tree that represents the styling of the visualization. This will generate the following shaders:
This pipeline allows us to restyle features by changing the styling shaders and performing the necessary WebGL drawing calls, removing the need to do expensive CPU to GPU communication and the need to style the features on JS.
Having super-fast restyling is good for general performance, but it is critical for making temporal maps in which the restyling must be done at each frame without stopping. This pipeline allows the display of a large number of animated features at 60 frames per second.
Interested in getting started with CARTO VL today?
Visit our Developer Center!Moreover, the flexibility of our pipeline allows support for all geometry types (points, lines, and polygons) and enables the combination of temporal filtering and all other CARTO VL expressions. Making complex filters like “animate buildings by the year they were built, but don’t show buildings with less than two floors” possible.
color: ramp(linear($yearbuilt,1900,2018),prism)
filter: $numfloors > 2 and animation(linear($yearbuilt,1900,2018), 20, fade(0.5, hold))
Traditional standards are being replaced by new processes that feed our modern, data-driven world, where large amounts of data are created and shared every second by indivi...
Core TechSix months after the beta release, the CARTO team is proud to announce the full, public launch of CARTO VL, our JavaScript library for vector-based visualization and analyt...
Core TechFor retailers, there is nothing more important than a clear, data-driven picture of store health. Whether you are a C-level executive looking at the big picture to identify...
Core TechPlease fill out the below form and we'll be in touch real soon.