티스토리 툴바


HTML5는 브라우저에 내장한 비디오 플레이어 기능을 통해 비디오를 보여주고 제어를 위해 필요한 다양한 UI를 태그와 자바스크립트 모두를 통해 처리할 수 있도록 지원하고 있다. 또한 HTML5의 캔버스 기능은 브라우저에서 2D 그래픽을 지원하는 기능으로 SVG(Scable Vector Graphic)와는 다르게 픽셀단위로 2D 그래픽을 그릴 수 있는 기능이다. 어떤 개발자들은 이러한 캔버스 기능을 이용해서 둠과 유사한 3D 게임을만들어 공개한 것도 인터넷에서 찾아볼 수 있다

최근 주요 브라우저들은 HTML5의 비디오 택그와 캔버스 기능을 대부분 지원하고 있기 때문에 이들을 활용한 다양한 시도들이 있는데 이들 중 상당히 재밌는 특수효과를 개발한 사례가있어서 소개하고자 한다. 이는 HTML5 비디오 태그로 정의된 미디어가 보여질 때 이들의 픽셀을 캔버스로 매핑하고 마우스가 보여지는 비디오의 특정 위치 클릭되면 그 위치를 기반으로 주변이 폭발하는 효과를 만들었다. 이는 HTML5의 비디오 태그와 캔버스 기능을 조합하여 전혀 색다른 효과를 만들 수 있다는 예를 보여준다는 차원에서 상당히 흥미롭다.



직접 데모를 보고 싶은 분은 아래 링크를 클릭하여 시험해 보기 바란다. 데모를 실행해 볼때 HTML5의 비디오 및 캔버스 기능을 지원하는 크롬, 오페라, 파이어폭스를 사용해야 한다. 참고로 IE에서는 동작하지 않는다.


 - 비디오 폭파(destruction) 데모 사이트 (HTML5 Video 태그와 캔바스 API 활용하여 개발)

  

(원문): Blowingup HTML5 video and mapping it into 3D space

저작자 표시 비영리 변경 금지
Posted by 이원석(wonsuk73@gmail.com)

댓글을 달아 주세요

  1. article 2012/03/26 15:19  댓글주소  수정/삭제  댓글쓰기

    근데... 이 추운날씨에옷이 도입지... ^.^