[논문]HTML5에서 직선의 기울기를 이용한 2D to 3D 입체 이미지 변환

박영수

doi:10.14400/jdc.2014.12.12.521

HTML5에서 직선의 기울기를 이용한 2D to 3D 입체 이미지 변환
2D to 3D Anaglyph Image Conversion using Linear Curve in HTML5 원문보기

디지털융복합연구 = Journal of digital convergence, v.12 no.12, 2014년, pp.521 - 528

초록
AI-Helper

본 논문에서는 HTML5에서 직선의 기울기를 이용하여 2D 이미지를 3D 입체 이미지로 변환하는 방법을 제안한다. 3D 이미지 변환을 위한 어떠한 정보도 없이 단 하나의 원본 이미지를 좌안과 우안을 위해 RGB 색상을 필터링한다. 사용자는 깊이 값을 설정하기 위해 미리 만들어 놓은 제어 점을 선택한 후 깊이 값을 설정하는 작업을 수행한다. 이렇게 선택된 값들을 반영하여, 이미지 전체와 부분적인 원근감을 갖도록 사용자가 정의한 직선의 기울기를 이용하여 좌안과 우안을 위한 깊이를 부여한 후 Anaglyph 3D 이미지를 자동으로 생성하게 된다. 이 모든 과정이 HTML5를 사용한 웹 환경에서 구현하였기 때문에, 사용자들은 매우 쉽고 편리하게 자신들이 원하는 3D 이미지를 생성할 수 있게 된다.

Abstract ▼ AI-Helper

In this paper, we propose the method of converting 2D image to 3D image using linear curves in HTML5. We use only one image without any other information about depth map for creating 3D images. So we filter the original image to extract RGB colors for left and right eyes. After selecting the ready-made control point of linear curves to set up depth values, users can set up the depth values and modify them. Based on the depth values that the end users select, we reflect them. Anaglyph 3D is automatically made with the whole and partial depth information. As all of this work has been designed and implemented in Web environment using HTML5, it is very easy and convenient and end users can create any 3D image that they want to make.

주제어

AI 본문요약
AI-Helper

* AI 자동 식별 결과로 적합하지 않은 문장이 있을 수 있으니, 이용에 유의하시기 바랍니다.

문제 정의

따라서 본 논문에서는 직선의 기울기(linear curve)를 통해 미리 몇 개의 제어 점을 만들어 놓고, 사용자가 직접 이미지에 맞는 깊이를 선택한 후 원하는 형태로의 수정 작업을 쉽게 할 수 있도록 하였다. 이 모든 과정이 웹을 통해서 필터링 작업으로 이루어지도록 하였으므로, 사용자는 인터넷이 되는 곳이라면 언제 어디서나 자신의 컴퓨터나 스마트폰을 통해 쉽고, 빠르고, 편리하게 2D 이미지를 자신이 원하는 형태의 3D 이미지로 변환하고 저장할 수 있도록 설계하고 구현하였다.

가설 설정

9]와 같이 제어 점을 2∼7개 중 사용자가 임의로 선택하여 깊이 값을 설정하도록 하였다. 초기 값은 제어 점의 중심에 가상의 수직선(스크린)이 있다고 가정하고, 수직선의 왼쪽이 스크린의 앞쪽에, 오른쪽이 스크린의 뒤쪽에 객체가 있다고 가정한다. 따라서 '/'패턴은 위부분이 멀고 아래 부분은 가깝게 보이며, ‘<’패턴은 가운데 부분이 가깝고 위와 아래 부분이 멀게 보일 것이다.

제안 방법

끝으로 변환된 3D 이미지를 png, jpg, bmp, gif 중 원하는 파일 형태로 저장할 수 있도록 하였다.
서버 프로그램은 업로드 된 원본 이미지로부터 RGB를 추출한 후 양안을 위해 각각 Red와 Cyan 색으로 필터링을 한다. 다음은 사용자가 이미지를 3D로 변환하기 위한 기울기와 깊이를 설정하게 되는데, 사용자의 편의를 위해 본 연구에서는 몇 가지 유형을 미리 만들어 놓고, 사용자가 원하는 유형을 선택하게 한 후, 나머지 일부를 사용자가 원하는 형태로 변형할 수 있도록 설계하였다.
12]는 2D 이미지를 제어 점을 통하여 기울기를 달리한 결과 왼쪽은 꽃이 앞으로, 오른쪽은 잎이 앞으로 나온 결과를 얻을 수 있다. 동일한 이미지라도 사용자의 선택에 따라 서로 다른 3D 입체 이미지를 생성할 수 있도록 하였다.
또한, 이미지의 전체 깊이를 설정하기 위해서 스크린을 좌우 수평으로만 이동할 수 있도록 하였다.
본 연구에서는 HTML5 웹 환경에서 Canvas로 입력받은 2D 이미지를 RGB색상을 이용하여 3D Anaglyph 변환을 위해 양안에 맞는 각각의 필터링을 한 후, 사용자가 제어 점을 통한 직선의 기울기를 이용하여 이미지의 깊이 값을 설정하게 하였다. 이렇게 설정된 값을 각각 양안에 맞게 y축 대칭으로 좌우로 이동 후 결과를 XOR 함으로서 3D 이미지를 생성할 수 있도록 하였다.
본 연구에서는 원본을 RGB색상으로 각각 분리한 후 좌안에는 R(red), 우안에는 GB(cyan)으로 필터링 한 2장의 2D 이미지를 직선의 기울기와 수평이동을 통해 3D 이미지로 변환하는 방법을 제안한다. [Fig.
본 연구에서는 웹상에서 브라우저를 통해 이미지를 입력받기 위해 HTML5의 canvas상에 원본 2D 이미지를 로드한다. 이때 이미지 파일을 읽기 위해 FileReader라는 객체를 사용하여 readAsDataURL() 메소드를 통해 읽어 들인다.
본 연구에서는 이미지의 깊이를 설정할 때 2.3절에서 언급한바와 같이 수평이동과 기울기 방법을 병행하여 사용한다. [Fig.
사각형의 원본 이미지를 3D로 변환하기 위해 본 연구에서는 [Fig. 5]와 같이 평행사변형 형태로 이미지를 변환 하게 되는데, 이 때 직선의 기울기를 사용하여 2개의 점 즉, 시작점 P₀과 끝점 P₁을 사용자가 결정할 수 있도록 한다. 사용자가 시작점, 끝점 및 중간의 제어 점을 쉽게 설정할 수 있도록 Canvas 내에 마우스와 터치이벤트를 사용하였다.
5]와 같이 평행사변형 형태로 이미지를 변환 하게 되는데, 이 때 직선의 기울기를 사용하여 2개의 점 즉, 시작점 P₀과 끝점 P₁을 사용자가 결정할 수 있도록 한다. 사용자가 시작점, 끝점 및 중간의 제어 점을 쉽게 설정할 수 있도록 Canvas 내에 마우스와 터치이벤트를 사용하였다.
셋째, 설정 값들을 임시 저장하기 위해 확인버튼을 클릭한다. 셋뷰 버튼을 통해 설정한 제어 점을 확인할 수 있고, 수정도 가능하도록 하였다.
위의 과정을 사용자가 편리하게 사용하기 위해 웹 페이지 내에 canvas를 활용하여 쉽게 설정할 수 있도록 하였다. 이 때 업로드와 복사 및 변환과정은 실제로 서버에서 이루어지지 않고 클라이언트인 데스크톱 또는 스마트폰의 메모리 내에서 이루어지게 된다.
따라서 양안 이미지를 각각 y축 대칭으로 기울인 후 x축으로 수평이동하면 사용자가 원하는 형태의 3D 이미지 변환이 가능하게 된다. 이 때 사용자가 기울임과 수평 이동을 쉽게 설정할 수 있도록 하기 위해서 HTML5에서 Canvas를 이용하여 설계하고 구현하였다.
따라서 본 논문에서는 직선의 기울기(linear curve)를 통해 미리 몇 개의 제어 점을 만들어 놓고, 사용자가 직접 이미지에 맞는 깊이를 선택한 후 원하는 형태로의 수정 작업을 쉽게 할 수 있도록 하였다. 이 모든 과정이 웹을 통해서 필터링 작업으로 이루어지도록 하였으므로, 사용자는 인터넷이 되는 곳이라면 언제 어디서나 자신의 컴퓨터나 스마트폰을 통해 쉽고, 빠르고, 편리하게 2D 이미지를 자신이 원하는 형태의 3D 이미지로 변환하고 저장할 수 있도록 설계하고 구현하였다.
본 연구에서는 HTML5 웹 환경에서 Canvas로 입력받은 2D 이미지를 RGB색상을 이용하여 3D Anaglyph 변환을 위해 양안에 맞는 각각의 필터링을 한 후, 사용자가 제어 점을 통한 직선의 기울기를 이용하여 이미지의 깊이 값을 설정하게 하였다. 이렇게 설정된 값을 각각 양안에 맞게 y축 대칭으로 좌우로 이동 후 결과를 XOR 함으로서 3D 이미지를 생성할 수 있도록 하였다.
인코딩된 이미지 객체는 3D로 변환하기 위해 좌안과 우안을 위해 Red와 Cyan으로 각각 필터링한다. 필터링에 관련된 수식은 다음과 같다.

성능/효과

기존 연구방법들이 깊이지도를 반영하여 대부분 C언어를 기반으로 로컬 환경에서 구현된 것에 비해, 본 연구는 인터넷 환경에서 구현되었기 때문에, 일반 사용자의 접근성과 편리성에서는 매우 우수하다고 판단된다. 처리속도 측면에서도 FullHD해상도(1920x1080)뿐만 아니라 고해상도(2560x1900) 이미지도 0.

후속연구

향후 보완되어야 할 부분은, 기울기가 급격히 변할 때, 부자연스럽거나 인위적이라는 느낌을 보이고 있으며, 일정한 기울기를 유지함에도 불구하고 계단현상이 발생하는 부분에 대한 보완책이 필요하다고 본다.

질의응답

핵심어	질문	논문에서 추출한 답변
	기존의 2D 이미지를 3D 이미지로 변환하는 연구들은 공통적으로 어떤 단점을 갖고있는가?	이런 모든 방법들을 통하여 하나의 이미지에 대한 객체들 간의 깊이 정보를 획득하게 되고, 이들 정보를 기반으로 깊이 지도를 생성하여 3D 이미지로 변환하는 과정을 거치고 있다[7,11]. 그러나 이런 방법들 모두 복잡하고 많은 절차를 거치게 되며, 정확도를 높일 수는 있지만 시간과 비용 및 편의성 측면에서는 매우 비효율적일 수밖에 없다.
	2D 이미지 중 특정 부분의 객체를 추출하여 3D로 변환하는 방법에서 가장 중요한 포인트는 무엇인가?	첫째, 이미지 중 특정 부분의 객체를 추출하여 3D로 변환 하는 방법이다. 이 때 객체와 배경을 구분 짓기 위한 외각 선을 추출하는 것이 가장 중요한 포인트가 된다[8,9]. 둘째는, 이미지를 색상 정보 등을 통해 분할하고 통합하여 객체의 영역을 추출하는 방법이다[10].
	최근 3D 디스플레이 기술의 발전과 보급률이 증가하고, 실시간 3D 방송을 준비하고 있는 상황에서 가장 큰 문제로 부각되는 것은 무엇인가?	인터넷과 정보기술의 발달로 인하여 사회의 패러다임이 변하고 있고, 사람들의 생활 패턴도 급속히 바뀌고 있으며, 3D에 대한 관심과 요구의 증가도 그 중에 하나일 것이다. 최근 3D 디스플레이 기술의 발전과 보급률이 증가하고, 실시간 3D 방송을 준비하고 있는 상황에서, 3D 콘텐츠 부족이 가장 큰 문제로 부각되고 있다. 또한 이를 위한 연구들도 현재 활발히 진행되고 있다[1,2,3,4,5,6].

참고문헌 (14)

R. Phon, R. Rzesutek, and D. Androutsos, Semi-automatic 2D to 3D image conversion using scale-space Random Walks and a graph cuts based depth prior, 2011 18th IEEE International Conference on Image Processing (ICIP), pp.865-868, 2011
J. Konrad, Meng Wang and P. Ishwar, Learning-Based, Automatic 2D-to-3D Image and Video Conversion, IEEE Transactions on Image Processing, Vol.22 pp. 3485-3496, 2013

상세보기
J. Caviedes, J. Villegas, Real time 2D to 3D conversion: Technical and visual quality requirements, 2011 IEEE International Conference on Consumer Electronics (ICCE), pp. 897-898, 2011
H. Emrah Tasli, K. Ugur, Interactive 2D 3D image conversion method for mobile devices, 3DTV Conference: The True Vision - Capture, Transmission and Display of 3D Video (3DTV-CON), pp.1-4, 2011
L. Zhang, C. Vazquez, and S. Knorr, 3D-TV Content Creation: Automatic 2D-to-3D Video Conversion, IEEE Transactions on Broadcasting, Vol. 57, pp. 372-383, 2011

상세보기
Ianir Ideses, Leonid P. Yaroslavsky, and Barak Fishbain, Real-time 2D to 3D video conversion, Journal of Real-Time Image Proc Springer, Vol. 2, pp.3-9, 2007

상세보기
J. Ko, M .Kim, and C. Kim, 2D-To-3D Stereoscopic Conversion: Depth-Map Estimation in a 2D Single-View Image, Proc. of SPIE Vol. 6696, pp.66962A-1-9, 2007
C.C. Cheng, C. T. Li, and L. G. Chen, A Novel 2D-to-3D Conversion System Using Edge Information, IEEE Transactions on Consumer Electronics, Vol. 56, No. 3, pp. 1739-1745, 2010

상세보기
Ge Guo, Nan Zhang, Longshe Huo, and Wen Gao, 2D to 3D conversion based on edge defocus and segmentation, IEEE International Conference on Acoustics, Speech & Signal Processing, pp.2181-2184, 2008
Yu-Lin Chang, Chih-Ying Fang, Li-Fu Ding, Shao-Yi Chen, and Liang-Gee Chen, Depth Map Generation for 2D-to-3D Conversion by Short-Term Motion Assisted Color Segmentation, IEEE International Conference on Multimedia & Expo, pp.1958-1961, 2007
A. Capra, S. Curti, and M. La Cascia, 3D stereoscopic image pairs by depth-map generation, IEEE 3D Data Processing, Visualization and Transmission(3DPVT), pp. 124-131, 2004
http://en.wikipedia.org/wiki/2D_to_3D_conversion
http://en.wikipedia.org/wiki/Anaglyph_3D
http://dxinteractive.com/#!/3d-photos

저자의 다른 논문 :

표제어: PCR

동의어: Packet Collision Rate

용어 설명 출처 목록 (6)

용어 설명: PCR은 세균 특이성이 있는 primer를 이용하여 적은 수의 세균이 있을지라도 쉽게 검출할 수 있는 유용한 방법이며, 이를 이용하여 구강 내 치면세균막이나 타액에서 직접 세균을 검출할 수 있게 되었다[8].

내보내기 구분	파일저장 인쇄 메일전송
구성항목	기본정보 상세정보 관리번호, 논문명, 저널/프로시딩명, 저자 , 발행년, 권, 호, 시작페이지, 끝페이지, 발행기관 관리번호, 논문명, 대등논문명, 저자 , 저널/프로시딩명, 발행기관, 발행년, 발행언어, 권, 호, 시작페이지, 끝페이지, ISBN, ISSN, 주제분야, 키워드, 초록(한글), 초록(영문), 저자(소속기관)
저장형식	Text(ASCII format) Excel format RefWorks Direct Export RIS format (for Reference Manager, ProCite, EndNote), Scholar's Aids, Mendeley
메일정보	받는사람 (필수) @ 보내는사람 (선택) @ 제목 내용 KISTI 검색결과 이메일 서비스
안내	총 건의 자료가 검색되었습니다. 다운받으실 자료의 인덱스를 입력하세요. (1-10,000) 검색결과의 순서대로 최대 10,000건 까지 다운로드가 가능합니다. 데이타가 많을 경우 속도가 느려질 수 있습니다.(최대 2~3분 소요) 다운로드 파일은 UTF-8 형태로 저장됩니다. 파일의 내용이 제대로 보이지 않을실 때는 웹브라우저 상단의 보기 -> 인코딩 -> 자동선택 여부를 확인하십시오. ~ Text(ASCII format) Excel format

연합인증