A new framework for 3D Web GIS applications

A new framework for 3D Web GIS applications


Surya Chandra Rao Lanka
Tech Mahindra Limited, GIS COE
Krishna Mohan Raju N
Tech Mahindra Limited, GIS COE
Swathi D
Tech Mahindra Limited, GIS COE

Over the years, Geographic Information Systems (GIS) have transformed from desktop to Web, mobile and cloud-enabled software. Traditional Web GIS applications use a client/server architecture where the computation is done on server side while the Web client is used as a user interface for requesting those computations and to display the processed results. Though this approach eliminates the installation of software in client machine, it increases the cost of infrastructure at server side and response time may be compromised when number of requests to the server is more than it can handle. Few software are available in the market providing rich Web GIS client applications, however, these require an installation of plug-in like Silverlight, Flash player etc. Recent developments in web technology like HTML5 and WebGL (Web Graphics Library) offers great potential for the future development of more interactive, responsive, efficient Web GIS applications.
This article presents an overview of advancements in Web technology and their adoption by the GIS community in developing more intuitive, responsive 3D web GIS applications to perform client-side parallel real-time spatial algorithmic computations using graphics Card.

Advancements in Web Technology
Any web application will have server and client side components. End user sends a request from client machine (i.e. browser), the request then goes to the server, processed at server and results send back to client machine for display. Especially in client side, JavaScript plays a major role in sending the request and displaying the results to end user, but JavaScript was seen as a scripting language till recent years.

JavaScript & HTML5
JavaScript was “The World’s Most Misunderstood Programming Language” – was the famous quote by Douglas Crockford (Douglas Crockford, 2011). Due it its role as scripting language of the World Wide Web (WWW or W3), every device (it can be mobile, tablet, laptop, personal computer or workstation) that contains browser has JavaScript interpreter installed and active in use. When IT systems were emerging from desktop-based applications to Web-based applications, server side pages like JSP or ASP were have lot of server side user interface (UI) objects and code. Due to its server side code, each action needs to be sent back to server for validation, process and get the results back to client application to display the results. Thanks to the improvements in HTML, CSS specifications, proliferation of web applications, need of the client side computations to boost the response time from severs etc necessitates swift change in developing JavaScript frameworks, which eliminates the pain in using the server side user interface controls and improved usability of web applications.

The power of the JavaScript is not limited only in developing user interface frameworks, but it has also extended to develop server side network applications using NodeJS (Node.js, 2009). Recent trends in mobile applications usage, internet usage and end user experience in using applications in PC, laptop and mobile devices evidence one more change and demand in developing applications that work well in PCs, laptops, tablets and smart phones. Due to variety of devices, hardware and operating systems, HTML5/JavaScript have become popular in developing device independent applications as these are available in every device. On par with the mainstream IT in adopting these changes, GIS community has also embraced these advancements and developed many JavaScript frameworks to render the maps in browser. OpenLayers (initially released in 2006) is one of the popular GIS JavaScript frameworks along with many other commercial GIS JavaScript frameworks available in the market. GIS and its analysis are mainly dependent on graphics rendering and computations or analysis of graphical objects (i.e. coordinates) and textual data. Due to voluminous data, complex algorithms of GIS and limitations of HTML4, JavaScript based Web GIS applications were considered as lightweight applications. For any Rich Internet web applications, plug-ins like Flash Player, Silverlight need to be installed in client machine.
Google trends shows (as of September 2012) that plug-ins based frameworks are being replaced by HTML5/JavaScript based applications. (Wikipedia, Rich Internet Application)

Canvas object
Canvas object is one of the many capabilities that are available in HMLT5. GIS stores, display, query both raster and vector data, but vector is most popular format because it brings intelligence to the feature. In most of the current Web GIS applications, query will be sent to server and the results come back to client in image format. This is because of limitations in HTML4. Handling of vector data in browser requires a different strategy (example:- plug-in), but HTML5 Canvas object renders the vectors as vector objects.

Rendering, attributes of these vector objects can be managed with CSS and JavaScript. OpenGL (Open Graphics Library) is cross-language, multi-platform application programming interface (API) for rendering 2D and 3D computer graphics. The API is typically used to interact with Graphics Processing unit (GPU) to achieve hardware accelerated rendering. OpenGL was widely used in
CAD, flight simulation and video games etc. Fortunately OpenGL has many language bindings, some of the most noteworthy being the JavaScript binding WebGL (Web Graphics Library), which is an API based on OpenGL ES2.0, for 2D or 3D graphics rendering from within a browser.

WebGL® is a software interface for accessing graphics hardware from within a browser. It allows a programmer to specify the objects and operations involved in producing high quality 2D and 3D graphical images. WebGL is a web standard for a low-level 3D graphics API based on OpenGL ES 2.0, exposed through the HTML5 Canvas element as Document Object Model interfaces.
Developers are familiar with OpenGL ES 2.0 recognizes WebGL as a Shader-based API using GLSL (OpenGL Shading Language), with constructs that are semantically similar to those of the underlying OpenGL ES 2.0 API. It stays very close to the OpenGL ES 2.0 specification, with some concessions made for what developers expect out of memory-managed languages such as JavaScript. Creative coding community is cont r ibut ing thei r exper iment s in developing graphic oriented applications using HTML5 and JavaScript (i.e. open web technologies such as Canvas, WebGL and WebRTC) and sharing them to Google Chrome Experiments (Chrome Experiments, 2009). WebGL is designed and maintained by non-profit Khronos Group (Khronos). WebGL applications work only in browsers that have capability in rendering 2D & 3D graphics using WebGL. All modern devices and browsers (Wikipedia, WebGL, 2013) are supporting WebGL, however it also depends on other factors like GPU supporting it.

Parallel computing is the simultaneous use of more than one CPU or processor core to execute a program or multiple computational threads. Ideally, parallel processing makes programs run faster because there are more engines running it. Parallel processing methods in GIS are used to accelerate the analysis of large volume of data with complex spatial algorithms. Such acceleration techniques can also be applied to Web GIS applications to improve the responsiveness of user interactions with the data.
Parallel GPU (Graphic Processing Unit) accelerates GIS Analysis, improves the faster display of processed results and response of the system. WebGL exploits the parallel computing power of modern graphic cards (GPU) within an ordinary Web-browser supporting WebGL. This results to an immediate visualization of GIS analysis results, which improves interaction and responsive user experience without any plug-in installation.

GIS community has quickly adopted the efficacy of the parallel graphic processing unit (GPU) in developing applications to display and analyze 3D graphic objects. ESRI has used WebGL in its CityEngine Web Viewer (ESRI, CityEngine Web Viewer) product to display 3D objects in browser. Google has implemented WebGL in its new Google Maps to render 3D maps and many others follow the same. Apart from these products, there are open source JavaScript WebGL frameworks available like WebGL Earth in market to develop 3D web GIS applications.

Use Cases
Typical Web GIS application functions such as displaying data, querying or analyzing the data and integration with other map service examples are provided below.
3D Map Display
As webGL is a JavaScript framework, it can be extended to integrate with other map services available within organization or external to the organization. This example shows overlaying of OpenLayers tiled map service on 3D globe using ReadyMap Web SDK( ReadyMap Web SDK).

GIS Analysis
Online example shows a browser side real time hill shade calculation of DEM raster. This application computes the value of each pixel in parallel instead of classical serial computation on the main processor (CPU). Slope and Aspect calculations are done at client side unlike calculations are done at server side in current Web GIS applications. Due to WebGL and its parallel computing technique, response is instantaneously visible.

Even though WebGL and HTML5 are quite new in GIS industry, advantages of this framework brings significant change in Web GIS application development, especially in 3D Web GIS applications. 2D & 3D Web GIS applications can be developed and these applications do not require any plug-in installation in end user machine except WebGL enabled browser. Efficacy of the GPU reduces performance load on server machine. WebGL is not only limited to GIS, it brings revolutionary changes in many industries that are needed intensive graphic card usage such as gaming industry. Visualization of 3D maps in any device (PC or mobile) will not be a dream any more. It would become real and faster in response, when WebGL enabled browser is available in device.

1. Chrome Experiments, https://www.chromeexperiments.com/
2. Douglas Crockford, ‘JavaScript: The worlds most misunderstood programming language’, https://www.crockford.com/javascript/javascript.html
3. Ernest Delgado, Rendering Polygons with Canvas Experiment. https://www.ernestdelgado.com/gmaps/canvas/ddemo1.html
4. ESRI, CityEngine Web Viewer, https://resources.arcgis.com/en/help/main/10.2/index.html#//00q9000000np000000
5. Khronos, https://www.khronos.org/
6. OpenLayers, https://openlayers.org/
7. OpenStreetMap, https://www.openstreetmap.org/
8. Opera, Canvas support in Opera. https://www.opera.com/docs/specs/opera95/canvas/
9. Node.js, https://nodejs.org
10. ReadyMap Web SDK,
11. W3C, HTML differences from HTML4, https://www.w3.org/TR/html5-diff/
12. W3C, HTML5, A vocabulary and associated APIs for HTML and XHTML. https://www.w3.org/TR/html5/
13. W3C, HTML5.1 Nightly, The canvas element (Editor’s Draft 6 February 2010) https://dev.w3.org/html5/spec/Overview.html#the-canvas-element
14. WebGL, https://www.khronos.org/
15. WebGL Earth, https://www.webglearth.com
16. Wikipedia, WebGL, https://en.wikipedia.org/wiki/WebGL
17. Wikipedia, Rich Internet Application, https://en.wikipedia.org/wiki/Rich_Internet_application
18. HTML5 Canvas Tutorials,