Abstract
In this paper, we represented the HTML5 webpage in 3D space for the 3D stereoscopic display by using CSS3 stylesheet; browser-based declarative contents, and proposed CSS Stereo 3DTV Profile. First, we suggested various webpage separation methods for reconstructing webpages in the 3D space effectively. Next, we suggested 3D view volume setting method by using extended CSS3 modules. And then, pre-processor converts sample contents which is written extended CSS stylesheet into the present CSS stylesheet for displaying in the webkit based browser. For the resulting stereoscopic images, we developed a rendering engine emulator which is implemented in JavaScript for simple display in the web browser, which produced dual images from virtual left and right-eyed cameras. And we have checked the sample contents displayed on the 3DTV.
본 논문에서는 브라우저 기반의 선언적 콘텐츠 CSS3 스타일시트를 이용하여 HTML5로 작성된 웹 페이지를 3차원 공간에서 3D 스테레오로 표현하기 위해 기존의 CSS 사양을 확장하여 새로운 CSS Stereo 3DTV 프로파일을 제안한다. 먼저, 웹브라우저상의 웹 콘텐츠를 3차원 공간에 효과적으로 재구성할 수 있도록 다양한 웹 페이지 분리 방법을 제시하였다. 디음, 확장한 CSS3 모듈을 이용하여 3D 뷰 볼륨 설정과 분리한 콘텐츠를 뷰 볼륨 내에 배치하는 방법을 제안하였다. 이후, 전처리기에서는 확장 CSS 사양으로 작성된 샘플 콘텐츠를 웹킷 기반 브라우저에서 출력 가능하도록 기존 CSS 코드로 변환한다. 마지막으로 스테레오 이미지 생성을 위한 시스템 렌더링 엔진 에뮬레이터는 웹브라우저상에서 간단히 실행 가능하도록 자바스크립트로 구현되었으며, 자동으로 스테레오 뷰 볼륨을 생성하여 가상의 좌안, 우안 카메라로부터 각각의 영상을 획득한다. 이를 통해 각 샘플 콘텐츠들이 3D 스테레오로 표현된 결과를 확인하였다.
