A Large-scale Scene Display System Based on WebGL
Wencong Jiang
*
State Key Laboratory of Virtual Reality
Technology and Systems,
Beihang University
No.91439 Unit of PLA
Yao Li
†
State Key Laboratory of Virtual Reality
Technology and Systems,
Beihang University
Beihang University Qingdao Research Institute
Yue Qi
‡
State Key Laboratory of
Virtual Reality Technology
and Systems,
Beihang University
Beihang University Qingdao
Research Institute
ABSTRACT
In recent decades, computer vision has been a hot area of computer
research while 3D reconstruction is one of the hot topics. With the
improvement of 3D reconstruction theory and the rapid development
of computer hardware technology, the reconstructed 3D models are
enlarging in scale and increasing in complexity. Combining the
aerial image of UAV with the 3D reconstruction of sequence images,
it is of great value to carry out relevant research on the problem of
3D reconstruction of outdoor scenes. The fast rendering of these
large-scale scene models is a challenge. At the same time, with the
advancement of the HMTL5 specification, browsers have become
more and more powerful, and WebGL has gradually gained support
from more and more devices. The 3D rendering of the BS architec-
ture will be the future direction of the rendering engine. The browser
does not need to install the client program, which is convenient
for users to access and process in any environment. Therefore, the
large-scale scene display system based on web architecture is more
convenient. In this paper, we designed a real-time display system
for large-scale scenes, and studied WebGL based rendering frame
techniques.
Index Terms:
3D reconstruction; Large-scale scene; Rendering
System; LOD; WebGL
1 INTRODUCTION
3D reconstruction [1] for a set of images is a hot topic in the field
of computer vision [2, 3]. However, the scale and complexity of
the reconstructed 3D models make the display of large-scale 3D
models a difficult problem. In general, the large 3D data needs to
be preprocessed to construct the LOD [4, 5] model and different
data types are represented by different data structures and stored
in the form of files on the hard disk. The visualization system
loads the model data to the memory from the hard disk, and then
renders it on the graphics card. Data reading and rendering use two
different threads: disk memory, and memory GPU to exchange data
in parallel, so the system can achieve real-time display.
In recent years, web technology has developed very rapidly, and
a large number of services originally provided by clients have been
replaced by web-based websites. This is mainly due to the promo-
tion of HTML5, the improvement of machine performance, and
the number of API that can be manipulated by the ever-expanding
JavaScript language. In terms of model loading, the system in this
article makes full use of current advanced web technologies, in-
cluding Web-Worker, Web Socket, WebGL and Three.js. Among
them, Three.js is a widely used framework based on WebGL and
*
e-mail: jwc3683621@126.com
†
e-mail:liyao cn@163.com
‡
e-mail:qy@buaa.edu.cn
is the basis of this 3D display system. For the display of large-
scale scenes, while considering visual effects, it is also necessary to
guarantee a certain drawing speed. Rusinkiewica [6, 7]proposed a
multi-resolution point-drawing system based on grid data. He real-
ized it by generating a highly compact uncompressed transmission
file, combined with Visibility Culling and LOD control techniques,
both drawing effects and drawing speed were taken into account.
Gobbetti [8] proposed a new multi-resolution data structure (Layered
Point Clouds) to achieve fast sampling of large point cloud sampling
data locally or through a network. Shafae [9] compared and defined
the multi-resolution data structures involved in different rendering
algorithms and defined a uniform hierarchical multi-resolution struc-
ture to analyze the performance of different hardware acceleration
algorithms.
Figure 1: The flowchart Of the display system
In this paper, we designed and implemented a real-time display
system that adapts to multi-platform large-scale 3D reconstruction
scenarios, used model compression technology to reduce the size
and number of model files, and adopt a multi-level caching strategy
to improve the loading efficiency of the model file. This is the
display system of the large-scale 3D model, which is one of the core
tasks of this document. To optimize the display system, we proposed
and constructed a quadtree-based LOD method and a LOD selection
strategy execution framework. As shown in Fig 1, the system can
be divided into four sub-modules. In order to solve the problem that
the model file is too large to be displayed in the browser, we build
a quadtree tree block model in the data preprocessing stage.This
framework can optimize and adapt to large-scale reconstruction of
3D scenes. The generated model blocks enables the LOD framework
to select only necessary models for efficient rendering.
2 KEY TECHNOLOGIES
The 3D rendering is a process of rendering 3D data to 2D pixel
space on the screen through a series of steps. The 3D rendering
basic framework has been studied since the 70s. WebGL is a set
of graphic standard library proposed by OpenGL for Web, which
functions such as graphics processing and generation come from the
architecture of Open GL.
2.1 LOD
LOD (Level of Detail) is a compromise of hardware performance
through hierarchical details, which allows users not to significantly