Visualization using Graphical Processing Unit on Google Cloud

What is GPU?

GPU is a computer chip that performs rapid mathematical calculations for rendering images. All thread processors of GPU perform the same instructions, as they share the same control unit. This means that GPUs can perform the same instruction on each pixel of an image in parallel.

Why GPUs?

The Biggest challenge of handling billions of data points on a map, analyze and interpret this information is important. For visual analytics(where data is coming from physical world maps, 3D physical structures, etc), for real-time mapping visualizations, in-browser, data-dense visualizations and for rendering large datasets we need GPU’s.

• GPUs designed for quick image rendering, processing and graphics.
• They are 50–100 times faster in tasks that require multiple parallel

Processes, such as machine learning and big data analysis. GPUs parallel architecture aimed at handling multiple functions at the same time. Example : multiply two matrices together in the browser , we can do all this math at once with GPU, but in CPU case where we have to iterate through every cell in every column and every row, we can do every single at once in GPU.As a result CPU will take 170,000 milliseconds and GPU will take only 542 millisconds. GPUs are also used when many calculations are needed on a single task.

GPU UseCases:

• Games
• 3D Visualization
• Image Processing
• Big Data
• Deep Machine Learning

What is WebGL?

WebGL is a javascript API, based upon OpenGL render content on HTML canvas. It is used for rendering 3D graphics on the web, draw points, lines, and triangles.WebGL runs on GPU on a computer. WebGL programs run both vertex shader and fragment shader code that is executed on GPU ’s, enabling CPU to do other things. WebGL + GPU

WebGL allows to run GPU code from within the browser, write javascript that runs in the browser and then call out through WebGL to the OS which will run graphics code directly on GPU which will then paint a picture back on to HTML5 canvas in the browser.

Luma.gl

Luma.gl is an open-source, javascript and lightweight WebGL framework.

Example:

Instancing with Luma.gl

A luma.gl cube, rendering 65,536 instances in a single GPU draw call using instanced vertex attributes.

Goals of luma.gl:

WebGL2 API Support:

luma.gl allows applications to use the WebGL2 APIs (and write shaders in the new GLSL 3.00 ES syntax).

Advanced GPU Usage

luma.gl simplifies the use of advanced GPU techniques, such as Instanced Rendering, Transform Feedback, and WebGL2 features.

Shader Programming

Modularized shader code, classes for controlling GPU inputs and outputs, and support for GLSL shaders(vertex shaders and fragment shaders).

Performance Focus

Enabling GPGPU (General Purpose GPU) programming means the use of the GPU for computations in addition to rendering.

Usage of luma.gl:

luma.gl is mainly used if we want to with any of the WebGL-based frameworks in the vis.gl suite (deck.gl, react-map.gl and kepler.gl)

Luma.gl with deck.gl

Luma.gl provides high-performance WebGL2(runs on GPU) rendering capability for deck.gl - a 3D visualization framework for large-scale data. Deck.gl is open source, pure javascript API, WebGL powered data visualization library.

• It provides easy to use WebGL2-based open-source building blocks, enables efficient rendering of large datasets, enables high-performance GPU-based data visualization and computation in your browser.
• An Es6 codebase using classes to wrap main WebGL1 and WebGL2 entities.

Deck.GL internal architecture

Render data using deck.gl

We have react component and some data that we want to visualize , this gets passed into the deck.gl , if we want to render this with map than use react map GL.Render data on top of the map, its all high level components(deck.gl) that we all have an luma.gl which is low-level library library to rendering which is mostly internal.

React-map.gl :

It is reactfriendly wrapper around mapboxGL.js provide user friendly interface on top. In react-map.gl camera system and viewport that deck.gl have are combined, so we can pan,zoom,tilt,both layers and map are synchronized.

Conclusion

Development of luma.gl is not finished and here are some highlights of what can be expected in coming releases:

Library Size:

WebGL2 is a big API and together with the new features in luma.gl, it means that the luma.gl library has grown in size. Efforts are made to reduce the size of the library.

GPGPU computing :

This remains an area of active development for luma.gl and deck.gl.

More Shader Modules :

• It is for large-scale (data-dense visualizations), when billions of data points going through the platform, need to make database and high-performance data visualizations.
• It provides MapboxGL integration and Vector tiles rather than raster tiles(as in leaflet).
• More examples will also be rewritten to take advantage of the shader module system.