플래시는 버전이 올라가면서 점점 많은 stage 계층이 생겼습니다. 9 까지 Stage 하나 였던 것이 10 이 되면서 StageVideo 그리고 11 에 와서는 Stage3d 까지 현재는 총 3개의 전혀 다른 stage 계층을 사용 할 수 있게 되었습니다. 이 stage 들은 아래와 같은 계층구조로 이루어져 있습니다.
(http://www.adobe.com/devnet/flashplayer/articles/introducing_Starling.html)
Stage3D 의 출현으로 플래시는 이제 제대로 된 하드웨어 가속을 사용 할 수 있게 되었습니다. 특히 3D 컨텐츠 제작에 있어서 더 이상 Stage3D 는 없어서는 안될 존재가 되었습니다. 그런데 stage 들의 계층구조 때문에 Stage3D 를 사용할 경우에 Stage 의 사용이 매우 제한적이 됩니다. Stage 가 Stage3D 위에 있기 때문에 Stage 의 컨텐츠가 Stage3D를 가려 버리게 됩니다. 그리고 Stage3D 를 사용하는 경우 성능 향상을 목적으로 Stage 는 가급적 사용 하지 않는 것이 좋습니다. 그러나 간혹 그럴 수 없는 상황이 있을 수 있습니다. 예를 들어 아래와 같은 컨텐츠가 그렇습니다.
Virtual Dressing Room 인데 3D 컨텐츠가 웹캠영상 보다 앞에 있는 경우 입니다. 가장 기초적으로 플래시에서 웹캠 영상을 구현 할 경우 영상을 Stage 상에 두기 때문에 3D 컨텐츠를 볼 수 없는 상황이 발생하게 됩니다. 그래서 저는 이 문제를 해결 할 방법을 고민 해 봤습니다. 다음과 같은 4가지 시나리오를 생각 해 봤습니다.
- StageVideo
- 크로마키
- 비디오 맵핑
- 비이오 배경
성질 급한 분들을 위해서 소스 다운로드 먼저~
[button link=”https://sewonist.com/wp-content/uploads/2012/02/WebcamOnStage3D.zip”]WebcamOnStage3D.zip (2.1Mb)[/button]첫번째 시나리오는 Stage3D 보다 아래 계층에 있는 StageVideo 에 웹캠영상을 출력하는 것 입니다. 하지만 아쉽게도 이 방법은 성공 하지 못했습니다. 이유는 아직까지 Stage3D 가 투명을 지원하지 않기 때문입니다. 앞으로 지원여부는 모르겠으나 만약 가능해 진다면 다른 어떤 방법 보다 가장 이상적인 방법이 될 것 같습니다.
두번째 방법은 크로마키를 이용 하는 방법입니다. 아래의 샘플 파일을 보면 쉽게 이해 할 수 있습니다.
Context3D의 drawToBitmapData 함수를 이용해서 Stage3D 상의 이미지를 비트맵으로 만들고 픽셀벤더를 이용해서 Stage 상의 웹캠과 합성하는 방식입니다. 위의 샘플을 테스트 해 보면 바로 알 수 있지만 성능이 아주 병맛이네요~ㅎㅎ 물론 이건 어디까지나 아이디어이고 실제로 사용하기는 어려울것 같습니다. 그리고 이렇게 되버리면 예초에 Stage3D를 통해 얻으려는 성능의 이점을 모두 잃어버리게 됩니다. 이제는 더 이상 Stage 를 사용하는 세상이 아닙니다. CPU는 산수나 해버렷~!
세번째 방법은 Stage3D 에 오브젝트를 하나 만들고 그 텍스쳐를 웹캠으로 사용 하는 방법입니다. 이것도 샘플을 먼저 보겠습니다. 만약 위에서 웹캠을 활성화 하셨다면 새로고침을 해주세요~ 게을러서 토글버튼 따위는 만들어 주지 않습니다. ㅎㅎ;;;;
오~ 생각보다 괜잖은 성능을 보여주네요. 하지만 샘플을 만들면서 보니까 백그라운로 사용하기 위해 만든 오브젝트가 어쨌거나 다른 오브젝트와 겹칠 수 있는 문제를 발견했습니다. 위의 샘플파일은 그러한 상태를 보여주기 위해 고의적으로 두 오브젝트를 겹쳐 두었습니다. 회전하는 상자가 백그라운드 상자에 묻히는 모습을 볼 수 있습니다.
OTL … 그럼 방법은 없는 것인가~~;; 다행히 작업 도중 좋은 방법을 발견 할 수 있었습니다.
마지막 방법은 Away3D 의 View3D 에 있는 backgroundImage 속성을 사용 하는 방법입니다. backgroundImage 속성은 BitmapData 를 받는데 이걸 Video 에서 가져와 넘겨주는 방식입니다.
오~~~ 코드 작성도 아주 간단하고 성능도 좋고 더 이상 오브젝트가 겹치지도 않습니다.
다만 아쉬운 점이 있다면 아직까지도 웹캠을 사용하는 작업에서는 풀HD 와 같은 해상도를 사용하는데 무리가 있다는 것 입니다. 어쨋거나 BitmapData 를 1080p 로 굽기 시작하면 확실히 성능저하가 생기더군요. 그래서 가능하면 이런 중간과정 없이 바로 풀HD를 StageVideo에 보내보려 한 것인데 일단은 실패 했습니다.
p.s. 진우형님 윤슬이는 너무 이뻤어요~ㅎㅎ 오고나니 사진을 같이 안찍은게 너무 아쉽더라는;;;; 나중에 윤슬이 크면 인증해야되는데~ㅋㅋ 그리고 백그라운 아이디어도 감사합니다.
[참고] http://forums.adobe.com/thread/882350http://away3d.com/forum/viewthread/363/#968