A Study on Web-Based Viewer Development CRETA Vue Considering the City GML Characteristics

(1)

International Journal of Emerging Technology and Advanced Engineering

Website: www.ijetae.com (ISSN 2250-2459,ISO 9001:2008 Certified Journal, Volume 4, Issue 12, December 2014)

22

A Study on Web-Based Viewer Development ‘CRETA Vue’

Considering the City GML Characteristics

Yongwon (Conrad) Cho

1

, Jinwon (Frank) Choi

2 1_{Director Research Engineer, Virtual Builders Co., Ltd.}

2_{CEO & Co-Founder, Virtual Builders Co., Ltd.} Abstract— 3D spatial information for depending on the

deployment and utilization increases, indoor spatial

information based also important is increasing for spatial information management and utilization. In particular, depending on the development of construction technologies, building of large and complicated. The study has been con-ducted to prepare for disaster such as indoor spatial information service similar to indoor navigation. There-fore, in order to effectively management and service utilizing of spatial information that targets to complicate indoor space, it is necessary to indoor space expand and develop, focusing on the outdoor developed such as al model and service. In this study, web based considering CityGML to support spatial information building and service for the indoor space viewer was developed. For this study, data model used to class attributes of CityGML was reflected in the configuration.

Keywords—City GML, Web Viewer, CRETA Vue, Spatial Information, Class.

I. INTRODUCTION

Since the web, simple and convenient tool, has pro-posed, the Internet became the most simple network resource which provide many information of the world. Furthermore, various methodologies are developed to support the dynamic service such as 3D View web service. We will propose the volume rendering view program that interactively visualize the 3D data on the web. This web program will contribute the diagnosis of the diseases through the 3D visualization and image analysis functions at remote places.

Recently indoor navigation with indoor map such as Google Maps is served (e.g. [1]). For the services, constructing indoor data are required. The data models contains spatial information for the indoor visualization and analysis, but indoor navigation requires se-mantic and topological information like graph as well as geometry. Thus, this paper suggest CityGML and IFC are widely used as standards for representing indoor data. A lot of data in CityGML or IFC have been constructed, a huge amount of construction time and cost for IndoorGML data will be reduced if CityGML can help generate data in IndoorGML for the indoor space viewer was developed.

II. DEVELOPMENT TO VIEWER

A. What is ‘CRETA Vue’?

‘CRETA Vue’ is produced by utilizing the API Web-GL in HTML5. Consist of ‘java script’ configure the API, and supports 3D view utilizing the ‘three engine’. ‘sbm’ file is information on the building floor, users completion of the building by super-imposing the ‘sbm’ layer. ‘Gkxml’ file is since the recorded list, ‘sbm’ file layer information, so read to ‘Gkxml’ is like to upload the building at a time (e.g. [2]). ‘sbm’ components advantage to the user disposed in the finished building. It supports character and mesh, in the future, it will facilitate the traceability data, placed it recalled to link form, site will be built with DB. Figure 1 shown viewer development about system.

Figure 1 Research for Development System

B. Research Diagram

Full configuration is largely a split three, CRETAVueGL, OrbitControls, Unit, UnitEditor, UHttpLoader, BinFileReader and BinLocalFileReader class.

(2)

International Journal of Emerging Technology and Advanced Engineering

23 ‘three’ class is composed of a javascript, 3d view of an engine that supports WebGL.

‘CRETAVue’ class, this three engine-based OpenAPI classes that are provided to the user.

By CRETAVue.VBInit () function starts 3D rendering and reset on the screen CRETAVue._render () announces the 3D object supported by CRETA Vue class.

‘Unit’ class is a unit of the component that generate data or character data to receive the sbm.

‘UnitEditor’ class is Unit class store as a list, and then create / delete / edit an enema to class. Use of components is achieved in this class.

‘OrbitControls’ class that is responsible for the camera, ‘UHttpLoader’ class is the http protocol room asynchronously that receives data.

‘BinFileReade’r class and ‘BinLocalFileReader’ class by parsing the SBM materials to convert 3D mash.

Figure 2 shown all of the class about ‘CRETA Vue’ service.

Figure 2 Diagram of Class

III. CLASS OF WEB BASED VIEWER A. Three Engine

The Web-GL 3D engine consists of JavaScript (e.g. [3]). ‘Three engines’ may be different reference sites are supported,

The web browser is now available is Chrome, Fire Fox, Window Internet Explorer is not supported. But, Window Internet Explorer 11 version is preloaded.

Does not support Web-GL on the Android IS default browser, Chrome, Fire Fox, such as in a web browser, Web-GL support has been linked.

B. CRETA Vue

3D camera functionality, data processing / expression, object collision detection based on the ‘Three 3D engine’ class that supports data transfer.

Are exposed to the OpenAPI that begin with the prefix of your CRETAVue.VB ~ f. When building a logistics site, DB interface and web UI components, others also made at the same time, utilizing the OpenAPI to implement the 3D logistics.

C. Unit

The component information management and support, as a class, which is a unit of the component.

Types of components SBM data obtained from the object, consists of a 3D mesh and character sprites.

3D camera functionality, data processing / expression, object collision detection based on the ‘Three 3D engine’ class that supports data transfer.

Unit is one of the values stored in the class, values that are expressed as a web popup, values that are expressed in the tooltip is also true.

May have the flexibility to utilize materials by adding a field to the development.

D. Unit Eidtor

The components create / delete / edit curator of the class. Unit class store as a list.

An instruction for component reverse color, selection and action as the work with mouse event.

In addition, it is also equipped with collision detection function (picking).

When the user manually edit the object with the mouse, to give the collision detection function for the object, tell the component selection is also featured.

E. Orbit Controls

The class that is responsible for the camera, reduce / enlarge / move / rotation is possible.

The ability to manipulate the direction of the keyboard is mounted.

F. UHttp Loader

Ajax asynchronous transfer mode that sends the data. G. Bin File Reader

Web to the URL path sbm parse the data, is converted to a 3D mesh class to express this view.

Nor is obsolete in the sprite character functions, expression is used in the component sbm data.

The DB produced during construction, store the data of the component or building a NAS that stores the path to the field in the DB (e.g. [4]).

City Building / component data call from a client web, shall be expressed by using the DB NAS data paths.

(3)

International Journal of Emerging Technology and Advanced Engineering

24 IV. CRETA VUE ENGINE

The version of this template is V2. A. CRETA Vue.js

Utilizing the Three engines 3D OpenAPI classes. The view / camera / object / component of the interface class.

TABLE I

CRETAVue CLASS CONTENTS

.js class Summary

UDef.js A collection of functions: function to convert from type uint type float, functions such as mesh generation function and read the sbm is built. Users conversion of the value or to learn about the casting.

UList.js The list was created to control anger and class for the component.

Key value and the real component 1 : ! Corresponding to create a list of items to take advantage of the screen.

The user enter the actual value and the key value, it is possible to obtain a component to be won.

UMeshInfo.js The item class that holds the mesh information. threeEdit.js Three engines are updated. When you convert to

3D coordinates in 2D, users about the distance value entered, calculate the 3D position that in terms of the value added.

Table I is ‘CRETAVue’ class contents. B. HTTP(UHttpLoader.js)

In an asynchronous manner in XMLHttpRequest class that sends the data to the remote (e.g. [5]). Sbm file, is utilized to receive transmitted data component. Now answer the simple but widely used material, since the user can use to take advantage of the query to get the values into a JSON file received from the DB. JSON parser is constructed by referring it to threeEdit.js.

C. UMap SBM.js

SBM parse the data and class to convert a 3D mesh. Now is currently not used (e.g. [6]).

D. Pick

The following actions are required for inspection and complementary.

TABLE II Pick CLASS CONTENTS

Stats.min.js Use it does not, use a class that has no future.

Three.min.js Use it does not, use a class that has no future.

ModalPopupWindow.js User to the character received announces the modal dialog box. Table II is ‘Pick’ class contents.

E. SBM

TABLE III SBM CLASS CONTENTS

BinFileReader.js Sbm parse the data in the web url path, converted to a 3D mesh is exposed to the view class.

Nor is obsolete in the sprite character functions, expression is used in the component sbm data.

The DB produced during construction, store the data of the component or building a NAS that stores the path to the field in the DB.

City Building / component data call from a client web, shall be expressed by using the DB NAS data paths. BinLocalFilereader.js Sbm parse the data in the local and

class to convert a 3D mesh.

Supported in HTML5 obtained by utilizing the file loading function, loads in this view by 3D mesh SBM converted to binary.

USBMReader.js SBM is a class that parses the data received in the URL path.

(4)

International Journal of Emerging Technology and Advanced Engineering

25 F. Web Page

TABLE IV Web Page CLASS CONTENTS

.html / .js class Summary

CRETAVue.html An example page that utilizes CRETAVue API.

jquery.min.js JQuery is a class that is used in the web.

jQuery is so you can easily access various web interfaces, has the advantage of easy handling for the input variables.

jquery-1.8.2.min.js JQuery is a class that is used in the web.

jquery-1.9.1.min.js JQuery is a class that is used in the web.

jquery-migrate-1.1.1.min.js

JQuery is a class that is used in the web.

jquery.mobile-1.2.0.min.css

JQuery is a class that is used in the web.

jquery.mobile-1.2.0.min.js JQuery is a class that is used in the web.

CRETAVue_API.html An example page that utilizes CRETAVue API.

CRETAVueGLMain.html An example page that utilizes CRETAVue API.

Table V is ‘WebPage’ class contents. V. TEST RESULT

In order to execute the CRETA Vue must do the following.

Figure 3 CRETA Vue Install

Figure 3 shown is CRETA Vue install screen. So first, folder name ‘WebPlayerFull’ to click, and then first icon ‘UnityPalyerFull’ click is finished.

(5)

International Journal of Emerging Technology and Advanced Engineering

26

Figure 4 CRETA Vue Start

Figure 4 is connect as indicated on the order. The following program is executed.

Figure 5 CRETA Vue Screen (Program to use)

Run along the order shown above Figure 5.

And, the data used in this study SBM file, in order to make the SBM file.

In this study, although many tools, CRETA Builder of homegrown made to take advantage of the authoring tool.

CRETA Builder is OGC is developing a program to fit the standard data provision, reflected the class attribute of the CityGML.

Figure 6 Example of Seoul Citizen Office

Figure 7 Example of Seoul Subway

VI. CONCLUSIONS

There are many future plans viewer of indoor & outdoor spatial information services. But we make to ‘CRETA Vue’ is available to viewer service.

(6)

International Journal of Emerging Technology and Advanced Engineering

27 ‘CRETA Vue’ is built on ‘Unity web 3D Player’. So features are loading to only sbm data. And then, now ‘CRETA Vue’ service about wen and mobile.

Finally, ‘CRETA Vue’ based 3D Web-GL spatial information consists of space authoring (CRETA Builder). It carries out more space values and new space experiences with realistic 3D technology. Our professional service raise your values up.

Acknowledgement

This research was supported by a grant (11 High-tech G11) from Architecture & Urban Development Research Program funded by Ministry of Land, Infrastructure and Transport of Korean government.

REFERENCES

[1] A. Remi, 3D in a Web Browser, In Eric Lengyel, Game Engine Gems 2, CRC Press, pp. 199–228, ISBN 978-1-56881-437-7, 2011. [2] F. Steve, and F. Jeff, HTML5 Canvas, ‘O’Reilly Media, Inc., pp.

624, 2013.

[3] Iclkevin, WebGL on Mobile Devices, iChemLabs, 2011. [4] WebGL Specification, Khronos.org, 2011.

[5] WebGL and Hardware Acceleration, My.opera.com, 2012. [6] B. Alexey, and S. Evgeniy, Computer Graphics: From Pixels to