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.
[/spb_boxed_content] [spb_divider type=”heading” heading_text=”Interactive Examples” text=”Go to top” top_margin=”0px” bottom_margin=”30px” fullwidth=”no” width=”1/1″ el_position=”first last”] [spb_icon_box_grid columns=”4″ colour_style=”dark” width=”1/1″ el_position=”first last”]
[spb_icon_box_grid_element title=”OpenLayers – Symbols with WebGL” target=”” link=”https://openlayers.org/en/latest/examples/symbol-atlas-webgl.html” icon=”svg-icon-picker-item outline-svg design-outline_path-exclude”][/spb_icon_box_grid_element][spb_icon_box_grid_element title=”OpenLayers – Layer clipping with WebGL” target=”” link=”https://openlayers.org/en/latest/examples/layer-clipping-webgl.html” icon=”svg-icon-picker-item outline-svg design-outline_copy”][/spb_icon_box_grid_element][spb_icon_box_grid_element title=”MapBox GL – Hurricane Map” target=”” link=”https://www.mapbox.com/gallery/#map-17″ icon=”svg-icon-picker-item outline-svg arrows-1_shuffle-98″][/spb_icon_box_grid_element][spb_icon_box_grid_element title=”MapBox GL – Display Buildings in 3D” target=”” link=”https://www.mapbox.com/mapbox-gl-js/example/3d-buildings/” icon=”svg-icon-picker-item outline-svg education-outline_school”][/spb_icon_box_grid_element][spb_icon_box_grid_element title=”ArcGIS API for JavaScript – FeatureLayer performance improvements” target=”” link=”https://developers.arcgis.com/javascript/latest/sample-code/visualization-vv-opacity-animate/index.html” icon=”svg-icon-picker-item outline-svg media-1_image-01″][/spb_icon_box_grid_element][spb_icon_box_grid_element title=”ArcGIS API for JavaScript – Query statistics client-side by distance” target=”” link=”https://developers.arcgis.com/javascript/latest/sample-code/featurelayerview-query-distance/index.html” icon=”svg-icon-picker-item outline-svg location-outline_worl-marker”][/spb_icon_box_grid_element][spb_icon_box_grid_element title=”PoTree – Examples” target=”” link=”http://www.potree.org/” icon=”svg-icon-picker-item outline-svg health-outline_dna-27″][/spb_icon_box_grid_element][spb_icon_box_grid_element title=”PoTree – Sorvillier” target=”” link=”http://www.potree.org/potree/examples/showcase/sorvilier.html” icon=”svg-icon-picker-item outline-svg business-outline_laptop-71″][/spb_icon_box_grid_element][spb_icon_box_grid_element title=”PoTree – Lake Tahoe” target=”” link=”http://www.potree.org/potree/examples/showcase/lake_tahoe.html” icon=”svg-icon-picker-item outline-svg design-outline_image”][/spb_icon_box_grid_element][spb_icon_box_grid_element title=”Cesium JS – Demo Showcase” target=”” link=”https://cesiumjs.org/demos/” icon=”svg-icon-picker-item outline-svg envir-outline_save-planet”][/spb_icon_box_grid_element][spb_icon_box_grid_element title=”Cesium JS – New York 3D Tiles” target=”” link=”https://cesiumjs.org/NewYork/?view=-74.01881302800248%2C40.69114333714821%2C753.2406554180401%2C21.27879878293835%2C-21.343905508724625%2C0.0716951918898415″ icon=”svg-icon-picker-item outline-svg ui-1_preferences-circle-rotate”][/spb_icon_box_grid_element]
[/spb_icon_box_grid]
