DOI QR코드

DOI QR Code

Overlay Rendering of Multiple Geo-Based Images Using WebGL Blending Technique

WebGL 블렌딩 기법을 이용한 다중 공간영상정보 중첩 가시화

  • Kim, Kwang-Seob (Dept. of Information System Engineering, Hansung University) ;
  • Lee, Ki-Won (Dept. of Information System Engineering, Hansung University)
  • 김광섭 (한성대학교 정보시스템공학과) ;
  • 이기원 (한성대학교 정보시스템공학과)
  • Received : 2012.10.20
  • Accepted : 2012.11.22
  • Published : 2012.12.31

Abstract

Followed by that HTML5(Hypertext Markup Language5) was introduced, many kinds of program and services based on this have been developed and released. HTML5 is technical standard specifications for cross platform for personal computers and mobile devices so that it is expected that continuing progress and wide application in the both sides of the academic and the industrial fields increase. This study is to design and implement a mobile application program for overlay rendering with DEM and other geo-based image sets using HTML5 WebGL for 3D graphic processing on web environment. Particularly, the blending technique was used for overlay processing with multiple images. Among available WebGL frameworks, CubicVR.js was adopted, and various blending techniques were provided in the user interface for general users. For the actual application in the study area around the Sejong city, serveral types of geo-based data sets were used and processed: KOMPSAT-2 images, ALOS PALSAR SAR images, and grid data by environment measurements. While, DEM for 3D viewing with these geo-based images was produced using contour information of the digital map sets. This work demonstrates possibilities that new types of contents and service system using geo-based images can be extracted and applied.

HTML5(Hypertext Markup Language5) 발표 이후 이를 기반으로 하는 다양한 프로그램과 서비스가 개발, 출시되고 있다. HTML5는 개인용 컴퓨터의 웹 브라우저와 모바일 단말기의 웹 브라우저의 상호 호환 구동이 가능한 기술 표준으로 학술적, 산업적 발전과 활용 가능성이 계속 증가할 것이다. 이 연구에서는 HTML5 기술 중 웹 브라우저에서 3차원 그래픽 렌더링을 지원하는 WebGL을 이용하여 DEM 자료와 공간영상정보를 다중 중첩 가시화하는 모바일 응용 프로그램을 설계하고 시험 구현하고자 하였다. 특히 공간정보 중첩처리는 블렌딩 기법을 적용하고자 하였다. WebGL 구동 프레임워크 중 CubicVR.js를 사용하였으며, 일반 사용자 환경에서 다양한 블렌딩 기법을 제공할 수 있도록 하였다. 세종시 주변 지역을 대상으로 하여 시험 구현과정에서 중첩 가시화 적용을 위하여 사용된 자료는 KOMPSAT-2 영상, ALOS PALSAR SAR 영상과 해당 지역의 고정형 대기 환경 측정소에서 얻은 격자 자료 등이다. 이러한 자료의 3차원 중첩을 위한 DEM 자료는 수치지도 자료의 등고선 정보를 이용하여 직접 생성하였다. 이번 연구를 통해 모바일 환경에서도 WebGL을 이용하여 현재 제공되지 않은 새로운 방식의 공간영상정보 콘텐츠와 서비스 시스템 도출 및 활용 가능성을 제시하고자 하였다.

Keywords

References

  1. 김광섭, 이기원. 2012. HTML5 WebGL을 이용한 스마트폰 3차원 지형정보 시각화. 대학원격탐사학회지 28(2):245-254. https://doi.org/10.7780/kjrs.2012.28.2.245
  2. 한국정보화진흥원. 2010. 스마트 사회 구현을 위한 공간정보서비스 활용 전략. 30쪽.
  3. Anyuru, A. 2012. Professional WebGL Programming: Developing 3D Graphics for the Web. Wrox. 361pp.
  4. Cantor, D. and B. Jones. 2012. WebGL Beginner's Guide, Packt Publishing. 376pp.
  5. Hall, D.L. and J. Llinas (ed). 2001. Handbook of Multisensor Data Fusion, CRC Press. 547pp.
  6. Kim, E.N., D.P. Schissel, G. Abla, S. Flanagan and X. Lee. 2012. Web-based (HTML5) interactive graphics for fusion research and collaboration. Fusion Engineering and Design. http://dx.doi.org/10.1016/j.fusengdes.2012.03.041.
  7. Kim, K.S. and K. Lee. 2012. 3D Fusion of Remote Sensing Data on Smartphone. Proceedings of International Symposium on Remote Sensing pp.378-381.
  8. Mo, Z. 2012. WebGL, Siggraph 2012 Course Graphics Programming for the Web.
  9. CubicVR 3D Engine. 2010. CubicVR 3D Engine ported to WebGL. http://www.cubicvr.org/45-news/webgl/74-webglengine1.
  10. CubicVR 3D Engine. 2012. https://github.com/cjcliffe/CubicVR.js/wiki/CubicVR.js-API-Reference.
  11. Marrin, C. (ed). 2011. Web GL Specification version 1.0. http://www.kronos.org/registry/webgl/specs/1.0/.
  12. Prall, C. 2011. Blending WebGL Textures. http://chandler.prallfamily.com/2011/06/blending-webgl-textures.
  13. W3C Working Group. 2012. HTML5 differences from HTML4. http://www.w3.org/TR/html5-diff/.

Cited by

  1. Geo-based image blending in a mobile cloud environment vol.4, pp.11, 2013, https://doi.org/10.1080/2150704X.2013.845922
  2. Testing Implementation of Remote Sensing Image Analysis Processing Service on OpenStack of Open Source Cloud Platform vol.16, pp.4, 2013, https://doi.org/10.11108/kagis.2013.16.4.141
  3. A Web Application for Open Data Visualization Using R vol.17, pp.2, 2014, https://doi.org/10.11108/kagis.2014.17.2.072