HTML5(Hypertext Markup Language5) 발표 이후 이를 기반으로 하는 다양한 프로그램과 서비스가 개발, 출시되고 있다. HTML5는 개인용 컴퓨터의 웹 브라우저와 모바일 단말기의 웹 브라우저의 상호 호환 구동이 가능한 기술 표준으로 학술적, 산업적 발전과 활용 가능성이 계속 증가할 것이다. 이 연구에서는 HTML5 기술 중 웹 브라우저에서 3차원 그래픽 렌더링을 지원하는 WebGL을 이용하여 DEM 자료와 공간영상정보를 다중 중첩 가시화하는 모바일 응용 프로그램을 설계하고 시험 구현하고자 하였다. 특히 공간정보 중첩처리는 블렌딩 기법을 적용하고자 하였다. WebGL 구동 프레임워크 중 CubicVR.js를 사용하였으며, 일반 사용자 환경에서 다양한 블렌딩 기법을 제공할 수 있도록 하였다. 세종시 주변 지역을 대상으로 하여 시험 구현과정에서 중첩 가시화 적용을 위하여 사용된 자료는 KOMPSAT-2 영상, ALOS PALSAR SAR 영상과 해당 지역의 고정형 대기 환경 측정소에서 얻은 격자 자료 등이다. 이러한 자료의 3차원 중첩을 위한 DEM 자료는 수치지도 자료의 등고선 정보를 이용하여 직접 생성하였다. 이번 연구를 통해 모바일 환경에서도 WebGL을 이용하여 현재 제공되지 않은 새로운 방식의 공간영상정보 콘텐츠와 서비스 시스템 도출 및 활용 가능성을 제시하고자 하였다.
HTML5(Hypertext Markup Language5) 발표 이후 이를 기반으로 하는 다양한 프로그램과 서비스가 개발, 출시되고 있다. HTML5는 개인용 컴퓨터의 웹 브라우저와 모바일 단말기의 웹 브라우저의 상호 호환 구동이 가능한 기술 표준으로 학술적, 산업적 발전과 활용 가능성이 계속 증가할 것이다. 이 연구에서는 HTML5 기술 중 웹 브라우저에서 3차원 그래픽 렌더링을 지원하는 WebGL을 이용하여 DEM 자료와 공간영상정보를 다중 중첩 가시화하는 모바일 응용 프로그램을 설계하고 시험 구현하고자 하였다. 특히 공간정보 중첩처리는 블렌딩 기법을 적용하고자 하였다. WebGL 구동 프레임워크 중 CubicVR.js를 사용하였으며, 일반 사용자 환경에서 다양한 블렌딩 기법을 제공할 수 있도록 하였다. 세종시 주변 지역을 대상으로 하여 시험 구현과정에서 중첩 가시화 적용을 위하여 사용된 자료는 KOMPSAT-2 영상, ALOS PALSAR SAR 영상과 해당 지역의 고정형 대기 환경 측정소에서 얻은 격자 자료 등이다. 이러한 자료의 3차원 중첩을 위한 DEM 자료는 수치지도 자료의 등고선 정보를 이용하여 직접 생성하였다. 이번 연구를 통해 모바일 환경에서도 WebGL을 이용하여 현재 제공되지 않은 새로운 방식의 공간영상정보 콘텐츠와 서비스 시스템 도출 및 활용 가능성을 제시하고자 하였다.
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 progres...
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.
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.
* AI 자동 식별 결과로 적합하지 않은 문장이 있을 수 있으니, 이용에 유의하시기 바랍니다.
문제 정의
이번 연구는 세종시 인근 지역을 대상 지역으로 하고자 하였다. 해당 지역에 대한 자료로는 KOMPSAT-2, 일본 ALOS PALSAR SAR 영상 자료와 대기 환경 정보 측정을 위한 고정형 측정소에서 측정, 공개된 자료를 격자화한 공간 자료를 중첩 대상으로 하였다.
이번 연구에서는 HTML5 WebGL을 이용 하여 공간영상정보 중첩 가시화를 위한 모바일 어플리케이션을 설계하고 활용 가능성을 제시하고자 하였다. 중첩 가시화는 포괄적인 정보 융합 주제의 세부 분야로 가시화에 비중을 둔 내용이다.
또한 Kim and Le(2012)는 모바일 단말상에서 정보 융합 기법으로 IHS 알고리즘을 적용한 바 있는 데, 이 경우에는 영상정보만을 실험 대상으로 하였다. 정보융합 중에서 다중 센서 융합은 Hal and Llinas(2001)에서 그 필요성과 처리 방법론에 대하여 체계적으로 정리한 바 있는 데, 이 연구에서는 공간정보의 중첩 가시화만을 주요 대상으로 하고자 한다. 최근 Kim et al.
제안 방법
한편 모바일 웹 어플리케이션 상에서 3차원으로 공간정보를 시각화하기 위하여 해당 지역의 DEM(Digital Elevation Model) 자료를 사용하였다. DEM은 다양한 방법으로 생성할 수 있지만 이번 연구에서는 해당 지역에 대한 수치지도를 가지고 DEM을 생성하였다. 수치지도를 가지고 DEM을 생성하는 방법은 다음과 같다.
또한 (c)는 고정형 대기 환경 센서의 위치와 이 측정소에서 얻어진 측정값으로 격자화한 자료를, (d)는 SAR 영상 자료를 나타낸 것이다. 각각의 자료는 중첩 처리를 위하여 기본적인 보정 작업을 수행하였다.
세종시 인근에 총 8개의 고정형 대기 환경 자료 측정소가 설치되어 미세먼지, 오존, 이산화질소, 아황산가스, 일산화탄소 등에 대한 자료가 지속적으로 수집, 공개되어 이 자료를 연구에 적용하였다. 또한 3차원 중첩을 위한 DEM 자료는 해당 지역의 수치지도 자료로 부터 등고선 레이어를 추출하고 레이어에 포함된 고도 값을 가지고 직접 생성하였다.
07)를 기준으로 KOMPSAT-2 영상과 ALOS PALSAR 영상의 지상제어점 일치 작업을 수행하였다. 또한 환경 센서 정보와의 중첩을 고려하여 실제 모바일 웹에서 제공되는 부분 지역을 설정하고 해당 지역의 부분 영상을 추출(Cliping)하였다. 그림 1은 대상 지역과 적용 자료를 제시하는 것으로 (a)는 이번 연구에 구글 지도를 사용하지는 않았지만 구글 지도에 보이는 세종시 주변 지역을 나타낸 것이고, (b)는 전체 지역 중에서 KOMPSAT-2 영상이 처리된 지역을 나타낸 것이다.
이 연구에서 제안하는 공간영상정보 중첩 가시화 시스템은 웹 서버와 클라이언트 구조로 설계 되었다. 웹 서버에서는 GDAL(Geospatial Data Abstraction Library), Python, PHP(PHP: Hypertext Preprocesor)를 통해 위성 영상정보를 웹 브라우저에 시각화할 수 있는 내부 처리 작업을 수행한다.
또한 한 개 이상의 공간영상정보를 중첩하는 데는 공간 범위와 지상 제어점(GCP: Ground Control Point)이 일치해야 한다. 이 연구에서는 국토지리정보원의 수치지도(2012. 07)를 기준으로 KOMPSAT-2 영상과 ALOS PALSAR 영상의 지상제어점 일치 작업을 수행하였다. 또한 환경 센서 정보와의 중첩을 고려하여 실제 모바일 웹에서 제공되는 부분 지역을 설정하고 해당 지역의 부분 영상을 추출(Cliping)하였다.
이번 연구에서 구현된 다중 공간영상정보 중첩 시각화를 위한 모바일 웹 어플리케이션은 중첩 대상이 되는 자료 유형이 서로 다르므로 각각 자료에 대한 전처리 작업을 우선 수행하였다. 또한 한 개 이상의 공간영상정보를 중첩하는 데는 공간 범위와 지상 제어점(GCP: Ground Control Point)이 일치해야 한다.
js를 이용하여 개인용 컴퓨터와 모바일 장치에서 공간영상정보를 3차원 시각화와 메타데이터의 정보를 보여주는 웹 어플리케이션 프로토타입을 개발한 바 있다. 이번 연구에서는 Thre.js 프레임워크 대신 CubicVR.js를 사용하였고, WebGL의 블렌딩 기법을 이용하여 다중 중첩 가시화를 위한 웹 어플리케이션을 데스크탑 및 스마트폰에 동시에 구동이 가능하도록 구현하였다. 또한 Kim and Le(2012)는 모바일 단말상에서 정보 융합 기법으로 IHS 알고리즘을 적용한 바 있는 데, 이 경우에는 영상정보만을 실험 대상으로 하였다.
4 버전 이상의 스마트폰에서는 WebGL을 지원하고 있으며, 이를 이용한 프레임워크들이 이미 많이 출시되어 있는 상황이다. 이번 연구에서는 WebGL 프레임워크 중 CubicVR.js를 사용하여 공간영상정보 3차원 중첩 가시화를 수행하였다.
js에서는 기본적으로 보간형 블렌딩이 적용되어 있다. 이번 연구에서는 WebGL의 블렌딩 기법을 일반 사용자가 사용자 인터페이스를 통하여 선택하고 필요한 파라미터를 조정할 수 있도록 설계하였다.
js의 블렌딩 처리는 기본적으로 보간형 블렌딩 기법만을 사용 할 수 있도록 적용되어 있다. 이번 연구에서는 기본적으로 적용되어 있는 블렌딩 외에 나머지 세 가지 방식을 지원하도록 WebGL의 블렌딩 함수를 추가하여 구현하였고 클라이언트 사용자 인터페이스를 구성하였으며 사용자 인터페이스 레이어 관리 메뉴에서 사용자가 원하는 블렌딩 기법을 선택할 수 있도록 하였다. 동일한 자료에 대하여 감산형 블렌딩, 곱셈형 블렌딩과가산형 블렌딩을 처리 결과는 그림 5(b), (c), (d)에 제시하였다.
현재 WebGL에 대해서 개인용 컴퓨터와 스마트폰의 웹 브라우저 지원율도 계속 증가하고 있다. 이번 연구에서는 여러 가지 센서와 유형에 따른 다중 공간영상정보를 모바일 웹 상에서 중첩 가시화(Overlay Rendering)하기 위하여 HTML5의 WebGL 을 사용하였다. 개인용 컴퓨터 웹 브라우저 상에서 공간영상정보를 3차원으로 다중 시각화하는 서비스는 존재하고 있지만, 이러한 서비스들은 어도비(Adobe)의 플래시(Flash) 또는 마이크소프트(Microsoft)의 실버라이트(Silverlight)기반으로 된 경우가 일반적이다.
대상 데이터
또한 이 연구에서는 블렌딩 기법의 적용 실험 결과를 제시하였으나 방식이나 기법은 적용 자료나 목적에 따라 선호도나 활용성이 다를 수 있다. 3차원 DEM 지형 정보와 연계하여 융합 처리를 하기 위한 공간 영상정보는 우선 KOMPSAT-2 영상 자료와 ALOS PALSAR 자료를 대상으로 하였고 환경 센서에 의한 측정값으로부터 생성된 격자 자료를 사용하였다. 이 시스템에서는 다른 유형의 공간영상자료와 추가적인 격자 자료를 시스템에서 지원하는 표준 포맷으로 전처리 가공하여 입력하면 즉시 융합 처리가 가능하다.
공간영상정보 외에 중첩 가시화 에 적용되는 자료의 다양성을 제시하기 그림 1(c)와 같이 환경 센서 측정값에 의한 격자형 자료를 융합 대상으로 한다. 고정형 대기 환경 센서 측정소 기반의 격자 자료는 에어코리아(htp:/ www.airkorea.or.kr)에서 세종시 인근 센서 측정소 위치를 확인하고 8곳의 측정소에서 얻어진 대기환경 측정값인 미세먼지, 일산화탄소, 이산화질소, 오존, 아황산가스를 수집하였다. 실제 측정소의 대기 환경 센서 측정값은 거의 주의, 경고 상태가 아닌 ‘정상’ 범위에있으므로 IDW(Inverse Distance Weighting) 보간 기법을 적용하여 값의 변화량을 나타내는 격자화 자료 내의 색상의 차이가 큰 의미가 있는 것은 아니다.
공간영상정보 외에 중첩 가시화 에 적용되는 자료의 다양성을 제시하기 그림 1(c)와 같이 환경 센서 측정값에 의한 격자형 자료를 융합 대상으로 한다. 고정형 대기 환경 센서 측정소 기반의 격자 자료는 에어코리아(htp:/ www.
해당 지역에 대한 자료로는 KOMPSAT-2, 일본 ALOS PALSAR SAR 영상 자료와 대기 환경 정보 측정을 위한 고정형 측정소에서 측정, 공개된 자료를 격자화한 공간 자료를 중첩 대상으로 하였다. 세종시 인근에 총 8개의 고정형 대기 환경 자료 측정소가 설치되어 미세먼지, 오존, 이산화질소, 아황산가스, 일산화탄소 등에 대한 자료가 지속적으로 수집, 공개되어 이 자료를 연구에 적용하였다. 또한 3차원 중첩을 위한 DEM 자료는 해당 지역의 수치지도 자료로 부터 등고선 레이어를 추출하고 레이어에 포함된 고도 값을 가지고 직접 생성하였다.
그림 3은 구현 시스템 내부 처리 과정과 적용 자료를 정리한 것이다. 앞에서 언급한 것과 같이 기본적인 전처리 과정을 통하여 생성된 3차원 시각화를 위한 DEM 자료와 중첩가시화 로 사용되는 세 개의 공간정보 영상 자료가 기본 자료이다. 생성된 자료들은 사용자 요청 사항에 따라 서버에서 내부 처리가 이루어져 웹 페이지에 보이게 된다.
한편 모바일 웹 어플리케이션 상에서 3차원으로 공간정보를 시각화하기 위하여 해당 지역의 DEM(Digital Elevation Model) 자료를 사용하였다. DEM은 다양한 방법으로 생성할 수 있지만 이번 연구에서는 해당 지역에 대한 수치지도를 가지고 DEM을 생성하였다.
이번 연구는 세종시 인근 지역을 대상 지역으로 하고자 하였다. 해당 지역에 대한 자료로는 KOMPSAT-2, 일본 ALOS PALSAR SAR 영상 자료와 대기 환경 정보 측정을 위한 고정형 측정소에서 측정, 공개된 자료를 격자화한 공간 자료를 중첩 대상으로 하였다. 세종시 인근에 총 8개의 고정형 대기 환경 자료 측정소가 설치되어 미세먼지, 오존, 이산화질소, 아황산가스, 일산화탄소 등에 대한 자료가 지속적으로 수집, 공개되어 이 자료를 연구에 적용하였다.
이론/모형
이번 연구에서 다중 공간영상정보를 중첩 가시화하기 위하여 블렌딩 기법을 사용하였다. WebGL에서 제공하는 블렌딩 기법은 가산형블렌딩(Aditive Blending), 감산형 블렌딩 (Subtractive Blending), 곱셈형 블렌딩(Multiplicate Blending), 보간형 블렌딩(Interpolative Blending)이다.
중첩 가시화는 포괄적인 정보 융합 주제의 세부 분야로 가시화에 비중을 둔 내용이다. 중첩 가시화 방법론도 여러 가지 있으나 이 연구에서는 블렌딩 기법을 채택하였다. 구현 과정에서는 WebGL 프레임워크인 CubicVR.
이번 모바일 웹 어플리케이션 시스템 구현 성과의 시연 장치는 WebGL을 지원하고 있는 개인용 컴퓨터의 크롬(Chrome) 브라우저와 안드로이드의 웹킷(Webkit) 브라우저이다. 처리 결과 화면은 장치 해상도에 맞춰 사용자인터페이스가 자동으로 작동될 수 있도록 CSS3(Cascading Style Shet 3)를 적용하였다. 이번 연구에서 수행된 결과는 개인용 컴퓨터 브라우저와 모바일 브라우저에서 모두 실행이 되는 것을 확인할 수 있는 데 그림 4에서 이를 제시한 것이다.
후속연구
또한 향후 HTML5 WebGL이 모든 스마트기기의 웹 브라우저에서 지원이 될 것이라고 예상되며, 스마트폰 뿐 아니라 해상도가 높은 태블릿 PC 등 다양한 모바일 단말기기에 기술이 모두 적용이 될 것이므로 이번 연구는 공간영상정보에 기반한 새로운 유형의 서비스와 시스템 개발을 위한 초기 시도라고 할 수 있다.
현재 공간정보 분야의 웹 서비스들은 위성영상을 배경 영상을 사용하여 서비스 하는 것이 대부분이거나 플러그인을 이용한 서비스가 대부분이다. 이 연구의 시스템은 향후 사용자가 소유하고 있는 위성 영상을 가지고 직접 블렌딩 효과를 적용하여 데스크탑 뿐만 아니라 모바일에서도 중첩 시각화가 가능하며, 별도의 플러그인이 필요없다는 장점이 있다.
질의응답
핵심어
질문
논문에서 추출한 답변
WebGL에서 제공하는 블렌딩 기법에는 어떤 것들이 있는가?
이번 연구에서 다중 공간영상정보를 중첩 가시화하기 위하여 블렌딩 기법을 사용하였다. WebGL에서 제공하는 블렌딩 기법은 가산형블렌딩(Aditive Blending), 감산형 블렌딩 (Subtractive Blending), 곱셈형 블렌딩 (Multiplicate Blending), 보간형 블렌딩 (Interpolative Blending)이다. 가산형, 감산형, 곱셈형 블렌딩은 알파 값을 필요로 하지 않으며, 두 가지 색을 단순 연산 처리한 결과를 나타내는 것이다.
WebGL은 무엇인가?
WebGL은 모바일 그래픽 하드웨어 가속 라이브러리인 OpenGL ES 2.0 기반으로 이를 자바스크립트 언어로 바인딩(Binding)한 웹기반 라이브러리이다. 현재 대부분의 개인용 컴퓨터 웹 브라우저와 안드로이드 4.
블렌딩 기법 중 가산형, 감산형, 곱셈형, 보간형 블렌딩의 특징은 각각 무엇인가?
WebGL에서 제공하는 블렌딩 기법은 가산형블렌딩(Aditive Blending), 감산형 블렌딩 (Subtractive Blending), 곱셈형 블렌딩 (Multiplicate Blending), 보간형 블렌딩 (Interpolative Blending)이다. 가산형, 감산형, 곱셈형 블렌딩은 알파 값을 필요로 하지 않으며, 두 가지 색을 단순 연산 처리한 결과를 나타내는 것이다. 그리고 보간형 블렌딩은 원본 알파 영상를 사용하여 원본 영상와 대상 영상의 색상 사이를 선형 보간 공식에 따라 나타나는 결과 영상을 나타낸다(Anyuru, 2012; Cantor and Jones, 2012).
참고문헌 (13)
김광섭, 이기원. 2012. HTML5 WebGL을 이용한 스마트폰 3차원 지형정보 시각화. 대학원격탐사학회지 28(2):245-254.
Anyuru, A. 2012. Professional WebGL Programming: Developing 3D Graphics for the Web. Wrox. 361pp.
Cantor, D. and B. Jones. 2012. WebGL Beginner's Guide, Packt Publishing. 376pp.
Hall, D.L. and J. Llinas (ed). 2001. Handbook of Multisensor Data Fusion, CRC Press. 547pp.
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.
※ AI-Helper는 부적절한 답변을 할 수 있습니다.