Web based 3D analysis and visualization using HTML5 and WebGL 
Page | 30
The files stored on the server are: 
(i)  Potsdam.html: This is the main HTML file, which is responsible for visualizing the contents 
on the web browser. In order to use the web application, the client requests for this file and it 
performs  the  functioning  and  sends  back  results  to  the  client.  This  HTML  file  is  solely 
responsible for communication between the client and the server.  
(ii)  Potsdam.kml: This is the KML file derived from Potsdam.gml. This KML file is parsed by a 
user-defined JavaScript within Potsdam.html and is responsible for visualizing the geometry 
and semantics of city objects on the virtual globe on the client.  
(iii) Build:  This folder contains the files related to Cesium API. Cesium version b24 has been 
used for this research. The files are: 
  Cesium.js: This is the JavaScript file, which is responsible for creation of 3D virtual globe 
and  related  activities.  This  file  is  referred  by  Potsdam.html  and  performs  the  overall 
activity by calling other JavaScript and CSS files as part of Cesium API. 
  Widgets: This folder contains related CSS files for styling and structuring of the contents 
on the web browser. It positions virtual globe within HTML5 canvas element and also 
contains different layer imageries from Bing Map, ESRI Maps and OpenStreetMap.  
  Worker: This folder contains the JavaScript files for web workers for different operations 
of Cesium virtual  globe. Web workers (W3C Recommendation, 2012), is a new feature 
introduced  with  HTML5.  It  allows  the  scripts  to  run  in  background  along  with  the 
processing at main page. This functionality improves the processing speed at client side. 
(iv) Source: This folder contains the JavaScript files to develop required functionalities. 
  JavaScript: This folder contains in-built JavaScript files, which are part of Cesium API. 
The files are responsible for creation of geometries, performing mathematical operations 
and even loading different layer imageries on the globe. The worth mentioning are three 
JavaScript files, which have been developed during this research. 
  KmlDataSource.js: This file is not officially part of Cesium release yet and is still in 
development  phase.  It  has  been  used  and  modified  in  the  research  to  parse 
Potsdam.kml for visualization of 3D buildings on the Cesium globe. 
  DrawBuffer.js:  This file  has been developed  to create dynamic 3D buffer  zones as 
part of the research objectives.  
  3DAnalysis.js:  This  JavaScript  contains  the  algorithm  to  determine  3D  building 
primitives, which either intersect or are completely inside the buffer zone. 
  Renderer:  This  folder  includes  JavaScript  files,  which  directly  utilize  WebGL  without 
including much details of low level WebGL API. It includes scripts for mainly buffers, 
textures, vertex arrays and cube maps.  
  Shader:  This  folder  includes  shader  programs  and  built-in  GLSL  (OpenGL  Shading 
Language) uniforms. GLSL (GLSL Specification, 2014) is a high level language, using the 
syntax of C/C++, which allows to write shader programs executable on GPU. 
(v) Require.js: This is an external JavaScript file, which provides us the functionality to develop 
scripts  in  a modular  way.  Modular  scripts  help in  managing  large  application  into  smaller 
chunks of code. Furthermore, Require.js helps in the management of dependencies between 
various  module,  and  thus,  improves  the  overall  execution  speed  and  quality  of  the  code 
(RequireJS, 2013). 
Pdf create bookmarks - add, remove, update PDF bookmarks in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your C# Project with Rapid PDF Internal Navigation Via Bookmark and Outline
split pdf by bookmark; create bookmarks pdf files
Pdf create bookmarks - VB.NET PDF bookmark library: add, remove, update PDF bookmarks in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your VB.NET Project with Rapid PDF Internal Navigation Via Bookmark and Outline
creating bookmarks in a pdf document; how to bookmark a pdf in reader
Web based 3D analysis and visualization using HTML5 and WebGL 
Page | 31 
4.4.  Client side implementation
This section explains about the implementation on the client, which includes detailed explanation 
of the web based application and its working which has been developed using JavaScript. It also 
includes some explanation of the web browsers and low level rendering WebGL API. 
4.4.1.  Web browser 
The  first  part  of  the  client  side  implementation  is  the  selection  of  web  browser  to  use  the 
developed web application. As per the primary requirements of this research, the web browser 
must  be  HTML5  enabled  in  order  to  utilize  the  canvas  element  for  visualizing  3D  contents. 
Further,  the  web browser  must  support  WebGL specification  in  order  to  develop  the  cross-
browser, cross-platform application, which can be run without any need to install a plugin. Also, 
the WebGL specification would provide hardware acceleration to the application while working 
with  3D  objects.  Considering  the  mentioned  requirements,  a  few  web  browsers  have  been 
selected in order to test the results. Although comparison of web browsers is not a part of scope 
of this research, it has been done to test the results on all possible browsers to develop a cross 
browser application. The mentioned browsers are: 
  Mozilla Firefox: Mozilla Firefox v26 has  been used for this research. This browser has 
been used primarily in the research during complete development of the application. The 
add-on ‘Firebug’ is the most exciting part of the browser, which helps in detecting errors 
related to JavaScript  and  HTML  in  the  best  possible  structured  manner  and  eases  the 
development process of the application. 
  Google Chrome: Google Chrome v32.0.1700.76 m has been used to test the results. The 
browser is very lightweight as compared to its counterparts and thus, improves the user 
interaction with the application.  
  Internet  Explorer  11:  The  latest  version  of  Internet  Explorer  (version  11)  includes 
HTML5 and WebGL capabilities. As Internet Explorer still dominates the market capture 
in terms of number of users, it  has been decided to test the results on this browser in 
order to reach to the maximum number of users.  
  Opera: Opera v19 has also been used in this research to test the results. Opera is also one 
of the most successful lightweight browser and supports WebGL completely. 
4.4.2.  WebGL 
WebGL API plays a very important role in this research to use the application without installing 
any  third-party  plugin.  Also,  it  provides  hardware  acceleration,  which  helps  in  improving  the 
performance of the application while working with 3D contents. Cesium creates the virtual globe 
on the web utilizing WebGL. In this section, the focus is on understanding how Cesium utilizes 
WebGL for the developed web application. 
As  mentioned  in  Cesium  Architecture  (Figure  2-7),  the  two  components  of  the  architecture, 
Renderer and Scene, are responsible for utilizing WebGL. 
  Renderer – As mentioned in section 4.3, renderer helps the user to develop code in an 
abstracted way such that the code does not include complex low level WebGL API. This 
layer mainly includes following elements written in easy to understand JavaScript  
 Built-in GLSL uniform and functions 
 Abstractions for shader programs 
 Textures and cube maps 
VB.NET PDF File Compress Library: Compress reduce PDF size in vb.
Bookmarks. inputFilePath = Program.RootPath + "\\" 3.pdf"; String outputFilePath = Program.RootPath + "\\" 3_optimized.pdf"; 'create optimizing options
how to bookmark a pdf file in acrobat; bookmark pdf documents
VB.NET PDF File Split Library: Split, seperate PDF into multiple
how to split a PDF file into multiple ones by PDF bookmarks or outlines Valid value for each index: 1 to (Page Count - 1). ' Create output PDF file path
how to create bookmark in pdf with; pdf bookmark editor
Web based 3D analysis and visualization using HTML5 and WebGL 
Page | 32
 Buffers and vertex arrays 
 Render states  
 Frame buffers 
Although the renderer is not directly included in the application code, it is utilized by the 
higher level constructs such as scene or dynamic scene. 
  Scene – Scene is responsible for providing a higher level construct, such as 3D globe or 
map, layer imageries from different sources or even custom geometries. The application 
development includes defining the scene, which contains several 3D geometries. The 3D 
geometries are rendered the help of renderer component utilizing low level WebGL API.  
In that  way,  Cesium API helps in  the  development  of  web  application  utilizing  WebGL  and 
without writing the code in a low level language.  
4.4.3.  Web based application 
The web based application is the main component of the research, and has been developed to be 
run  on top of an  HTML5 browser  utilizing  WebGL. This is  an  interface for the end-user to 
perform the functions as part of the research objective. Considering the research objectives, the 
processing of application can be described with the help of following process flow diagram in 
Figure 4-4: 
Figure 4-4: Application’s process flow diagram 
C# PDF File Compress Library: Compress reduce PDF size in C#.net
Bookmarks. inputFilePath = Program.RootPath + "\\" 3.pdf"; String outputFilePath = Program.RootPath + "\\" 3_optimized.pdf"; // create optimizing options
pdf bookmark; bookmarks pdf file
C# PDF File Split Library: Split, seperate PDF into multiple files
Split PDF file by top level bookmarks. The following C# codes explain how to split a PDF file into multiple ones by PDF bookmarks or outlines.
add bookmarks pdf; add bookmarks to pdf file
Web based 3D analysis and visualization using HTML5 and WebGL 
Page | 33 
The processing can be explained in detail in following subsections: 
4.4.3.1 Initial web interface 
The following steps take place to load initial web interface 
  The client sends a request to the server for Potsdam.html 
  Potsdam.html calls Cesium.js, which accesses related JavaScript and CSS files. These files 
are responsible for loading initial virtual globe on the web browser, positioned perfectly 
within HTML5 canvas element. The user can properly interact with the globe by zoom, 
pan, tilt  and fly functions. These files also provide the buttons to geo-locate and load 
layer imageries from different sources. 
  With  the help  of  Require.js,  the  separate  modules  have  been  added to  the  interface, 
which help  users  to perform the required  actions,  such  as, to  visualize  geometry  and 
semantics of the city model and perform 3D analysis. 
  Hence,  by  requesting  the  Potsdam.html,  the  user  can  visualize  the  initial  interface  of 
application on the web browser. 
4.4.3.2 KML parsing 
This  is  the  next  step  of  the  application  to  load  the  contents  of  the  city  model.  It  involves 
following steps: 
  Potsdam.html accesses KMLDataSource.js with the help of Cesium.js.  
  This JavaScript parses the contents of Potsdam.kml in order to visualize them on Cesium 
virtual globe. 
  The parser first identifies and stores the bounding box of the city area from the KML. 
  The  parser then  identifies  the  vertex  points (x, y and  z-coordinates)  of  each building 
object in the KML. 
  It  creates  polygon  geometry  for  each  building  using  x  and  y  coordinates  and  use  z 
coordinate as height parameter. It allows 3D visualization of the building on the virtual 
globe. Each polygon geometry can then be made part of the primitive, which allows each 
building object to be treated as an individual object. 
  Additionally, the semantic information of city model is stored in KML as CDATA. This 
information is stored with corresponding building object’s geometry.  
  The  functionality  has  been  developed  in such  a way  that the  camera  first  flies to  the 
bounding box of the city fetched from the KML, and visualizes the 3D geometry of the 
objects. Each building can be picked as an individual object, thus, the individual building 
can be highlighted on mouse over and the user can retrieve its semantic details on mouse 
click. 
4.4.3.3 Dynamic buffer zone creation 
This functionality  has been  developed  for  the user  to create on-the-fly 3D  buffer  zones.    It 
involves following steps: 
  With the help of DrawBuffer.js called by Potsdam.html, the prompt appears for the user 
to provide input value for the radius of buffer, which can be stored in a variable. 
  Using JavaScript event handler, the mouse click retrieves the longitude and latitude for 
the desired location and, stored in a variable. 
C# Create PDF Library SDK to convert PDF from other file formats
file. Create and save editable PDF with a blank page, bookmarks, links, signatures, etc. Create fillable PDF document with fields.
pdf create bookmarks; create bookmarks pdf file
VB.NET Create PDF Library SDK to convert PDF from other file
Create and save editable PDF with a blank page, bookmarks, links, signatures, etc. Create fillable PDF document with fields in Visual Basic .NET application.
creating bookmarks in pdf documents; create bookmarks in pdf from excel
Web based 3D analysis and visualization using HTML5 and WebGL 
Page | 34
  Using longitude and latitude as centre and radius provided by the user, the buffer zone 
can  be  created  as  hemisphere  dynamically.  The  hemisphere  is  created  as  a  sphere 
geometry and stored as a separate primitive. 
4.4.3.4 3D analysis 
For further analysis, the functionality has been developed to perform 3D operations by focusing 
on  3D  intersection  and  3D  inside.  The  functionality  allows  the  user  to  check  how  many 
buildings are completely inside or partially intersecting the buffer zone. This is useful mainly for 
identifying  buildings  under  threat  and  starting  evacuation  plans  for  them.  The  algorithm 
developed  for  this purpose is  inspired from (Ericson, 2005). The objects in consideration are 
hemisphere  and  3D  polygon.  Accordingly,  the  intersection  or  collision  algorithm  has  been 
developed, which contains following steps: 
Explaining  the  algorithm  in  more  detail,  the  AABB  of  the  building  contains  the  minimum, 
maximum and centre points of the bounding box that closely fits the building object. In order to 
find the closest point on AABB from centre of the hemisphere, first the distance of the centre of 
hemisphere and centre of AABB is computed and the iteration is performed on this distance with 
respect to x, y and z- axes of the AABB, until the closest point is found. Once the closest point is 
found, its distance is calculated from the centre of the hemisphere. If the square of this distance 
is less than the squared distance of the radius of the hemisphere, then AABB and the hemisphere 
intersect. Graphically, in 2D, these results can be shown as: 
Case I:  PC
 R
(Do not intersect) 
Figure 4-5: Representation of case I of sphere-AABB intersection 
1.  Create axis-aligned bounding box (AABB), as mentioned in section 2.4.3, for the 3D building 
ilding 
objects. 
2.  Determine the center C and radius R of the hemisphere. 
3.  Find a closest point P on the AABB from the center C of the hemisphere. 
4.  If the squared distance of PC is less than the squared distance of R, then AABB of the 3D 
building either intersect or is completely inside the sphere. 
5.  If this is the case, highlight the building to different colour for the user to identify them. 
.NET PDF SDK - Description of All PDF Processing Control Feastures
Full page navigation, zooming & rotation; Outlines, bookmarks, & thumbnail display; Integrated annotation; More about Web Viewer ▶. Conversion. PDF Create.
how to create bookmarks in pdf file; creating bookmarks in pdf files
XDoc.Word for .NET, Advanced .NET Word Processing Features
& rotation; Outlines, bookmarks, & thumbnail display; Integrated annotation; More about Web Viewer ▶. Conversion. Word Create. Create Word from PDF; Create Word
adding bookmarks in pdf; creating bookmarks pdf
Web based 3D analysis and visualization using HTML5 and WebGL 
Page | 35 
Case II:  PC
<  R
(Intersects)
Figure 4-6: Representation of case II of sphere-AABB intersection 
Case III: PC
 R
(Completely inside the sphere) 
Figure 4-7: Representation of case III of sphere-AABB intersection 
Hence, by demonstrating three cases, it can be shown that if the squared distance of centre of 
sphere and AABB (PC) is greater than squared distance of radius of the sphere, then the two 
objects are disjoint. Otherwise, if the same squared distance PC is less than the squared distance 
of radius of the sphere, then the AABB is either completely inside or partially intersects with the 
sphere. Moreover, it can also be found, if the squared distance PC is equal to the squared distance 
of radius of the sphere, then both the objects are adjacent. In this way, this algorithm determines 
the  number  of  3D  buildings  intersecting  or  completely  inside  the  buffer  zone  in  the  web 
application. 
Web based 3D analysis and visualization using HTML5 and WebGL 
Page | 36
Web based 3D analysis and visualization using HTML5 and WebGL 
Page | 37 
5.  RESULTS AND DISCUSSIONS 
This chapter presents the results of the implementation of each step during the research. It also 
covers the discussions of highlights of each implementation step during the execution of the 
research. 
5.1.  Web based interface 
The web base interface is the initial page of the application, which is accessed by the client 
through a call of HTML page on local server. The screenshot of the initial web interface can be 
displayed in Figure 5-1: 
Figure 5-1: Initial web based interface 
As  shown,  the  interface  includes  the  Cesium  WebGL  virtual  globe,  which  is  capable  of 
performing the rotation, zoom, pan and fly operations. On the top right, the in-built buttons are 
available to geo-locate, refresh, changing the 3D/2D mode and selecting the base layer. On the 
top left, the buttons have been created to assist the end user to perform specific operations. The 
details of the buttons are: 
  Fly  to  Potsdam:  This  button  parses  the  KML  file  and  zoom-in  the  camera  to  the 
bounding box of the study area. 
  Semantic information: This button is responsible to provide the semantic information of 
the specific building. 
  Create  Buffer  Zone:  This  button  allows  the  end-user  to  create  the  3D  buffer  zones 
dynamically at specific location. 
  Find  intersection:  This  button  allows  the  user  to  determine  the  buildings,  completely 
inside or intersecting the buffer zone. 
Web based 3D analysis and visualization using HTML5 and WebGL 
Page | 38
5.2.  Visualization of  geometry 
As  soon  as  the  end-user  clicks  on  the  button  ‘Fly  to  Potsdam’,  the  application  parses  the 
Potsdam.kml with the help of KMLDataSource.js and takes the camera to the bounding box of 
the location. The geometry of the parsed buildings can be visualized in Figure 5-2: 
Figure 5-2: Geometry visualization. Base layer: Bing Maps Aerial 
As shown, the geometry of the 3D buildings in LOD1 can be visualized in the application. The 
user can further zoom, pan or rotate the camera in order to visualize the buildings from different 
angles. In the figure, the base layer used is Bing Maps Aerial. The end-user can select different 
base layers, which can be shown by subsequent figures: 
Figure 5-3: Geometry visualization. Base layer: Bing Maps Roads 
Web based 3D analysis and visualization using HTML5 and WebGL 
Page | 39 
Figure 5-4: Geometry visualization. Base layer: ESRI World Street Maps 
Figure 5-5: Geometry visualization. Base layer: OpenStreetMap 
5.3.  Visualization of semantics 
With  the  button  ‘Semantic  information’,  the  user  can  pick  any  of  the  buildings,  which  get 
highlighted on mouse over and displays the semantic information on mouse click on the building. 
The functionality can be demonstrated in Figure 5-6: 
Documents you may be interested
Documents you may be interested