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

Transcription

1 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 conducted 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 proposed, 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 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. A. What is CRETA Vue? II. DEVELOPMENT TO VIEWER 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. B. Research Diagram Figure 1 Research for Development System Full configuration is largely a split three, CRETAVueGL, OrbitControls, Unit, UnitEditor, UHttpLoader, BinFileReader and BinLocalFileReader class. 22

2 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. A. Three Engine Figure 2 Diagram of Class III. CLASS OF WEB BASED VIEWER 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. 23

3 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..js class UDef.js UList.js UMeshInfo.js threeedit.js TABLE I CRETAVue CLASS CONTENTS 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. 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. The item class that holds the mesh information. 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..js class Stats.min.js Three.min.js ModalPopupWindow.js TABLE II Pick CLASS CONTENTS Table II is Pick class contents. E. SBM.js class BinFileReader.js BinLocalFilereader.js USBMReader.js Use it does not, use a class that has no future. Use it does not, use a class that has no future. User to the character received announces the modal dialog box. TABLE III SBM CLASS CONTENTS Table III is SBM class contents. 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. 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. SBM is a class that parses the data received in the URL path. 24

4 F. Web Page.html /.js class CRETAVue.html jquery.min.js jquery min.js jquery min.js jquery-migrate min.js jquery.mobile min.css jquery.mobile min.js CRETAVue_API.html CRETAVueGLMain.html TABLE IV Web Page CLASS CONTENTS Table V is WebPage class contents. An example page that utilizes CRETAVue API. jquery is so you can easily access various web interfaces, has the advantage of easy handling for the input variables. An example page that utilizes CRETAVue API. An example page that utilizes CRETAVue API. 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. 25

5 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 4 CRETA Vue Start Figure 4 is connect as indicated on the order. The following program is executed. 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. Figure 5 CRETA Vue Screen (Program to use) 26

6 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 , ISBN , [2] F. Steve, and F. Jeff, HTML5 Canvas, O Reilly Media, Inc., pp. 624, [3] Iclkevin, WebGL on Mobile Devices, ichemlabs, [4] WebGL Specification, Khronos.org, [5] WebGL and Hardware Acceleration, My.opera.com, [6] B. Alexey, and S. Evgeniy, Computer Graphics: From Pixels to Programmable Graphics Hardware, CRC Press, pp. 370,