Comprehensive Report on WebGL for 3D City Model Applications

This report provides a comprehensive overview of WebGL, a JavaScript API for rendering interactive 3D graphics within any compatible web browser without the use of plug-ins. The report highlights the background of 3D visualization, its growing importance, and the role of technologies like CityGML in representing 3D city models. It explores the advantages of using WebGL and HTML5 for web-based 3D applications, including hardware acceleration and cross-platform compatibility. The report also discusses the limitations of WebGL and the necessity of libraries like Three.js to manage the complexities of low-level programming. The study focuses on developing a web-based tool for visualizing and analyzing complex 3D city models, including the creation of on-the-fly 3D buffer zones and the performance of 3D analysis. The methodology involves using the Cesium virtual globe, an open-source JavaScript API built on WebGL, to implement 3D operations such as intersection and inside tests. The report concludes by emphasizing the benefits of this approach, such as performing computationally intensive analysis directly on the client-side without relying on a server, thus enhancing user control and efficiency. Furthermore, the report includes the deliverables like dissertation, program documentation and project phases.

Running head: REPORT ON WEBGL
By
Academic Year: 2019-20
Module: WebGL

WebGL
Introduction
Background
The progression in PC designs, high computational limits and web advancements have
completely altered representation systems. The contribution of most recent patterns, for
example, 3D representation and liveliness have totally changed the manner in which the data
is uncovered. With the assistance of third measurement and dynamic substance, the items can
be envisioned and deciphered in a vastly improved manner than previously. Subsequently, 3D
perception has become a significant part in numerous segments, for example, building,
intuitive mixed media, prescription and some more. Of course, the advantages of 3D
perception can likewise be seen in utilizations of geographic data science (GIS). Because of
its prosperity, various applications and propelled instruments are being created for speaking
to and dissecting 3D world(Scopigno, Callieri, Dellepiane, Ponchio, and Potenziani, 2017).
One of the most exceptional innovative advancement in 3D uses of GIS are virtual 3D city
models. They permit to comprehend the spatial properties of urban items in an increasingly
significant manner. They additionally give a typical stage to coordinate city level data from
various assets and make them open to the concerned individuals. Because of 3D portrayal, the
city objects look practical and thus it is simpler for the human to decipher and examine them.
The accomplishment of virtual 3D city models have driven individuals from both scholarly
community and industry to investigate and break down them for genuine issues. Thusly, they
are generally utilized in pretty much every field, differing from urban advancement, common
assets to fiasco the executives(Belkin, Gelernter, and Cidon, 2019, September).
CityGML

WebGL
City Geography Mark-up Language (CityGML) is an ongoing standard created to depict,
store and trade virtual 3D city models. It depends on eXtensible Mark-up Language (XML)
and speaks to geometric just as semantic qualities of a model. Attributable to a huge size and
multifaceted nature of CityGML records, taking care of, examination and perception of such
information have constantly represented a test to individuals working with city models(Kang,
and Lee, 2019). Thus, a plenty of programming have been created for handling and picturing
CityGML records, for instance, Safe Software's FME, Bentley Map or Autodesk's
LandXplorer. These devices have broad investigative abilities alongside a decent exhibition
speed. This is because of the way that these apparatuses require to be introduced on client's
equipment machine and hence, they use equipment's high handling velocity and illustrations
card memory(Kornilov, and Malanchev, 2019).
Web based 3D visualization formats
The utilization of CityGML records on the web has opened entryways for an enormous
number of valuable applications giving better data sharing and scattering. It has additionally
encouraged clients to perform different investigations, inquiries or route on virtual 3D city
models. Be that as it may, because of huge size and complex structures of CityGML records,
their perception on the internet browser can be tedious and cause wastefulness identified with
geometry and semantics(Shi, Gao, and Zhang, 2017).
HTML5 and WebGL
Existing 3D representation arrangements work just with specific programs or with extra
program module introduced. This constraint can be overwhelmed by gathering the perception
utilizing WebGL and HTML5. Applying such methodology, 3D abilities would now be able

WebGL
to be acknowledged straightforwardly in the program with no requirement for an extra
module or augmentation. Another advantage of Web based 3D investigation and perception
utilizing HTML5 and WebGL Page WebGL over different innovations is that it uses
equipment's designs card memory for showing and performing tasks on 3D substance and
thus, it gives equipment quickened 3D usefulness on the web(Rojas-Sola, and Aguilera-
García, 2019).
In any case, there are a couple of restrictions in working with WebGL. Despite the fact that it
is bolstered by significant programs, for example, Google Chrome, Mozilla Firefox, Safari
and Opera, there are programs, for example, Internet Explorer 11 which don't bolster WebGL
totally. Also, WebGL is a low level API as it is intended to associate straightforwardly with
illustrations card. Henceforth, gadgets with low designs card memory may present critical
execution issues. Moreover, to stay away from complex low level programming, utilization
of pre-characterized WebGL libraries, for example, Three.js, Scene.js and GLGE is
compulsory(Grandhi, Reddy, Guntupalli, and Natarajan, 2019).
Thinking about the difficulties in working with complex 3D city models on the web condition
and considering the benefits of WebGL innovation, this investigation is propelled towards
building up an electronic apparatus to picture just as break down complex 3D city
models(Arbelaiz, Moreno, Barandiaran, and García-Alonso, 2019, July). The essential
spotlight is on making on-the-fly 3D cushion zones on a virtual 3D city model on an internet
browser. Further, the 3D investigation can be performed on the articles to decide the
structures which either cross or are totally inside the support zones. Such usage can be

WebGL
exceptionally useful for field laborers and chiefs to comprehend and be solid and steady for
clearing arranging or other crisis situations in a urban territory(Yuan, Chan, and Hu, 2017).
The development anticipated from this examination is to perform 3D investigation on a
HTML5 empowered internet browser with the assistance of WebGL API. In view of the
above research targets and questions, the proposed online system permits the client to
imagine the geometric and semantic properties of the 3D city objects of CityGML. Likewise,
it permits to make on-the-fly 3D support zones over city items and performing 3D tasks to
decide the city objects which are either totally inside or somewhat converge the cushion
zones. According to writing audit, there is no usage of such calculations on an online domain
without the need of a program module(Pedersen, Gatzidis, and Tang, 2018).
CityGML is an ongoing standard created to portray, store and trade virtual 3D city models.
This standard not just permits, yet in addition gives a typical stage to coordinate city level
data from various assets and make them open to the concerned individuals. A plenty of
programming have been created for handling and envisioning CityGML information, yet its
perception on the web is as yet a difficult zone. Albeit numerous APIs have been created to
show 3D realistic substance on the web, they work just with specific programs or with extra
program modules introduced. To beat this impediment, this examination centers around using
HTML5 and WebGL. Applying such methodology, 3D capacities can be acknowledged
straightforwardly in the program with no requirement for an extra module or expansion.
Another advantage is, WebGL gives equipment quickened 3D usefulness on the web, coming
about noteworthy execution improvement. This exploration manages representation and
investigation of 3D objects of CityGML on a WebGL put together virtual globe running with

WebGL
respect to a HTML5 empowered internet browser. The essential center is towards building up
a structure to picture geometry and semantics of 3D city articles on the online virtual globe
with the assistance of WebGL. Cesium virtual globe, which is an open source JavaScript API
dependent on WebGL, has been considered right now. The examination likewise incorporates
the improvement of on-the-fly 3D investigation, performed straightforwardly by the
customer. The accentuation is given to 3D support investigation strategies accommodating in
comprehension and getting ready for departure arranging or other crisis situations in a urban
zone. Moreover, the usefulness likewise incorporates the usage of 3D activities, for example,
3D crossing point and 3D inside over the city model. The aftereffects of this examination
study show that such usefulness gives greatest force in the hands of the client. Without
relying upon the server, such computationally escalated examination can be performed
straightforwardly on the customer. WebGL API assumes a significant job right now utilize
the application without introducing any outsider module. Right now, center is around seeing
how Cesium uses WebGL for the created web application(Yao, Mirzamohammadi, Amiri
Sani, and Payer, 2018, January).
The initial segment of the customer side usage is the determination of internet browser to
utilize the created web application. According to the essential necessities of this examination,
the internet browser must be HTML5 empowered so as to use the canvas component for
picturing 3D substance. Further, the internet browser must help WebGL particular so as to
build up the cross-program, cross-stage application, which can be run with no compelling
reason to introduce a module. Likewise, the WebGL particular would give equipment
speeding up to the application while working with 3D objects. Thinking about the referenced
prerequisites, a couple of internet browsers have been chosen so as to test the outcomes. In
spite of the fact that correlation of internet browsers isn't a piece of extent of this exploration,

WebGL
it has been done to test the outcomes on every single imaginable program to build up a cross
program application.
 OpenGL is a desktopcomputer-centric API (like Direct3D). WebGL is derived from
OpenGL ES 2.0 (intended for mobile devices) which has less capabilities and is
simpler to use.
 WebGL is also designed to run in a browser, and has therefore a few limitations more
then OpenGL ES 2.0.
 Unlike OpenGL, WebGL does not require native driver support. A wrapper called
ANGLE, which Safari, Chrome and Firefox use can translate WebGL calls and GLSL
to either OpenGL/GLSL or Direct3D/HLSL.
Aim
The development anticipated from this examination is to perform 3D investigation on a
HTML5 empowered internet browser with the assistance of WebGL API.
Objectives
The primary target of the proposed research is to create usefulness to actualize
computationally algorithm, especially, 3D cradle examination with the assistance of WebGL
API on HTML5 empowered internet browser.
Deliverables

WebGL
 Dissertation
 Program
 Documentation
Project Phases
 Introduction
 Literature Review
 Data and Usability
 Design and Implementation
 Results and Discussions
 Conclusion

WebGL
Reference
Arbelaiz, A., Moreno, A., Barandiaran, I. and García-Alonso, A., 2019, July. Progressive ray-
casting volume rendering with WebGL for visual assessment of air void distribution in
quality control. In The 24th International Conference on 3D Web Technology (pp. 1-8).
Belkin, A., Gelernter, N. and Cidon, I., 2019, September. The Risks of WebGL: Analysis,
Evaluation and Detection. In European Symposium on Research in Computer Security (pp.
545-564). Springer, Cham.
Grandhi, R., Reddy, B.V.K., Guntupalli, V. and Natarajan, P., 2019. WebGL-Based Game
Engine. In Innovations in Computer Science and Engineering (pp. 11-17). Springer,
Singapore.
Kang, S. and Lee, J., 2019. Improving rendering speed of 3D geospatial data based on
HTML5/WebGL using improved arithmetic operation speed. International Journal of Urban
Sciences, 23(3), pp.303-317.
Kornilov, M. and Malanchev, K., 2019. Fips: an OpenGL based FITS viewer. Astronomy and
computing, 26, pp.61-67.
Pedersen, K., Gatzidis, C. and Tang, W., 2018. OpenGL| D-an alternative approach to multi-
user architecture. In Transactions on Computational Science XXXII (pp. 57-74). Springer,
Berlin, Heidelberg.
Rojas-Sola, J.I. and Aguilera-García, A.I., 2019. WebGL for the Dissemination of Research
Results on Agustín de Betancourt’s Historical Inventions. In Advances on Mechanics, Design
Engineering and Manufacturing II (pp. 742-750). Springer, Cham.
Shi, M., Gao, J. and Zhang, M.Q., 2017. Web3DMol: interactive protein structure
visualization based on WebGL. Nucleic acids research, 45(W1), pp.W523-W527.

WebGL
Scopigno, R., Callieri, M., Dellepiane, M., Ponchio, F. and Potenziani, M., 2017. Delivering
and using 3D models on the web: are we ready?. Virtual Archaeology Review, 8(17), pp.1-9.
Yuan, S., Chan, H.S. and Hu, Z., 2017. Implementing WebGL and HTML5 in
macromolecular visualization and modern computer-aided drug design. Trends in
biotechnology, 35(6), pp.559-571.
Yao, Z., Mirzamohammadi, S., Amiri Sani, A. and Payer, M., 2018, January. Milkomeda:
Safeguarding the mobile gpu interface using webgl security checks. In Proceedings of the
2018 ACM SIGSAC Conference on Computer and Communications Security (pp. 1455-1469).