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.
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.
- 3D Visualization
- Image Processing
- Big Data
- Deep Machine Learning
What is WebGL?
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.
Modularized shader code, classes for controlling GPU inputs and outputs, and support for GLSL shaders(vertex shaders and fragment shaders).
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
- 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.
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.
Development of luma.gl is not finished and here are some highlights of what can be expected in coming releases:
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.
How useful was this post?