WebGL

WebGL
October 16, 2018 Ryan Kibsgaard

 

You may have not heard of WebGL (Web Graphics Library) before but I bet you have used it. I remember first experiencing it back in 2010 while playing with Chrome Experiments which featured a variety of unique projects that were educational and artistic … all rendering sophisticated graphics within the desktop browser.  It was quite an impressive feat at the time because prior to this browsers would require special plugins that the user had to download to perform powerful graphics operations such as Microsoft Silverlight or Adobe Flex. But WebGL for the first time allowed all this powerful graphics processing to be done natively within the browser. All of today’s modern browsers like Chrome, Firefox, and Safari have these capabilities built-in to them.

In recent years WebGL is increasingly used for a variety of JavaScript geospatial APIs that render maps and allow users to interact with spatial data in the browser.  There are many different libraries such as OpenLayers, MapBox GL, Google Maps and ESRI’s ArcGIS API for JavaScript.  These APIs allow rendering data in 2D and many have adapted 3D surfaces … all running in the desktop browser.  Browser developers have integrated WebGL to perform tasks within the desktop browser that were impossible or very difficult to perform prior without additional plugins and extensions. Some examples include rendering textured symbology, vector tiles, and rendering hundreds of thousands of features on the map.  These improvements allow faster, more efficient and powerful applications to be created for users.

Perhaps the most impressive capability is rendering 3D Point Clouds within the browser.  This feat is now possible through such APIs as PoTree and Cesium.  These APIs can convert  a variety of 3D data such as LAS and ASCII files into readable formats for the browser.  This is a terrific way to present data without purchasing or installing any additional software.  Now anyone from professionals to general users can view complex datasets. Both APIs have tools for measuring and tweaking the rendering of the data all natively within the browser.  

Now that all modern browsers support WebGL and the majority of computers meet the basic requirements to power this embedded technology with fast graphics cards and multi-cores, it has wider support and usage.  It is really amazing to see the powerful capabilities of WebGL and that there are open source and commercial options available to fit within any workflow. We have been experimenting with many APIs to fit our needs and requirements.  As a web developer I am excited to see growth in WebGL.

Interactive Examples

OpenLayers - Symbols with WebGL

OpenLayers - Layer clipping with WebGL

MapBox GL - Hurricane Map

MapBox GL - Display Buildings in 3D

ArcGIS API for JavaScript - FeatureLayer performance improvements

ArcGIS API for JavaScript - Query statistics client-side by distance

PoTree - Examples

PoTree - Sorvillier

PoTree - Lake Tahoe

Cesium JS - Demo Showcase

Cesium JS - New York 3D Tiles

0 Comments

Leave a reply

Your email address will not be published. Required fields are marked *

*