• 한국정보통신학회논문지
• /
• 제18권12호
• /
• pp.3042-3048
• /
• 2014

최근 들어, 차세대의 웹 표준으로 자리매김하고 있으며, 별도의 프로그램을 설치하지 않고 인터넷 브라우저 상에서 다양한 그래픽과 멀티미디어의 구현이 가능한 웹 앱 저작 기술인 HTML5에 많은 사람들의 관심이 집중되고 있다. 본 논문에서는 HTML5에서 제공하는 캔버스를 활용하여 애플의 iOS, 구글의 안드로이드 등의 플랫폼에 의존적이지 않은 게임을 구현한다. 본 논문에서 구현하는 게임은 캐릭터가 주변의 적들과 충돌하지 않기 위해서 상하좌우로 이동한다. 그리고 캐릭터가 적과 충돌하면 생존 게이지가 줄어들고, 하트 아이템을 먹으면 생존 기간이 연장되는 게임이다. 향후에는 본 논문에서 개발된 게임에 보다 다양한 아이템을 추가할 예정이며, 제스처 인식과 같은 컴퓨터 비전기술을 적용하여 게임을 수행하는 사용자와의 인터페이스를 보다 다양화할 계획이다.

• 디지털융복합연구
• /
• 제12권12호
• /
• pp.521-528
• /
• 2014

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

• 디지털융복합연구
• /
• 제12권12호
• /
• pp.553-560
• /
• 2014

본 논문에서는 HTML5에서 Quadratic & Cubic B$\acute{e}$zier 곡선을 이용하여 2D 이미지를 3D 입체 이미지로 변환하는 방법을 제안한다. 3D 입체 이미지 변환은 원본 이미지에서 RGB색상 값을 분리 추출하여 좌안과 우안을 위한 2개의 이미지로 필터링한다. 사용자는 Quadratic B$\acute{e}$zier 곡선과 Cubic B$\acute{e}$zier곡선을 이용한 제어 점을 통해 이미지의 깊이 값을 설정하게 된다. 이 제어 점을 기반으로 2D 이미지의 깊이 값을 계산하여 3D이미지에 반영하게 된다. 이 모든 과정은 HTML5를 사용한 웹 환경에서 구현하였으며, 사용자들은 매우 쉽고 편리하게 자신들이 원하는 3D 이미지를 만들 수 있게 하였다.