어도비는 2011년 2월 말에 Flash Player Incubator를 배포했다. 이것은 Flash Player 11이 정식 배포되기 전 개발자들이 테스트할 수 있도록 Adobe에서 실험용 버전으로 배포한 것이다. 다음 링크는 Flash Player Incubator 공식 페이지이다.
Adobe AIR and Adobe Flash Player Incubator : http://goo.gl/aFqZH
이 글은 Flash Player Incubator에 대한 간략한 소개와 함께 Flash Builder 개발환경을 만들어 테스트하는 방법을 다룬다.(처음 해보는 사람을 위해서 자세하게 쓰려고 노력했다.)
1. Flash Player Incubator 에 대해
이번에 개발용으로 배포된 Flash Player Incubator는 다음 두 가지 feature가 추가되었다.
1.1 "Molehill" 3D API
GPU가속을 위한 low-level 3D API를 지원한다. 기존 Flash Player 10.2에서 지원하지 못했던 z-buffering, stencil color buffer, fragment와 vertex shader, 큐브 텍스처 등을 기본으로 지원한다. 이 API를 사용하면 윈도우에서는 DirectX 9, 리눅스와 MacOS에서는 OpenGL 1.3, 그리고 모바일에서는 OpenGL ES 2.0 기반에서 렌더링이 될 수 있도록 한다. 만약 여기에 상관되어 있지 않다면 기존처럼 CPU 렌더링한다. 기존 Flash Player 10.1 에서는 3D API가 있긴 하지만 z-buffering을 지원하지 않으면서도 수백 개의 폴리곤을 CPU 렌더링하는데 30fps가 나왔던 반면, Molehill에서는 z-buffering이 적용된 수십만 개의 폴리곤을 HD급으로 렌더링하는데 60fps가 나온다. 단, 웹브라우져에서 이를 실행하는 경우, GPU가속을 하기 위해서는 wmode가 direct로 설정되어야 한다. 다음 페이지는 Flash Incubator의 Molehill 3D API에 대한 Adobe 공식 페이지이다.
3D APIs for Adobe Flash Player and Adobe AIR : http://goo.gl/yLdvx
3D APIs는 매우 low-level API이기 때문에 직접 다루면 개발 생산성과 효율성에 문제가 있을 수 있으므로 Alternative3D, Away3d, CopperCube, Flare3D, Minko, Sophie3D, Yogurt3D와 같은 ActionScript 3D 프레임워크들로 좀더 쉽게 개발할 수 있는 환경이 조성될 것이다. 이들 중에 조사한바 다음 프레임워크는 Molehill 3D APIs를 지원하고 있다.
- Away3D 4.0 Alpha : http://goo.gl/nLPZ5
- Alternativa 3D : http://goo.gl/jqfE
- Flare3D 2.0 Pre-release : http://goo.gl/1vgCA
- CopperCube 2.5 : http://goo.gl/3LHii
1.2 Cubic Bezier Curves
flash.display.Graphic에 cubicCurveTo 메서드가 추가되었다. 이 메서드는 커스텀 ActionScript 코드를 사용하지 않고 쉽게 Cubic Bezier Curve를 그릴 수 있게 해준다. 어떤 것인지 궁금하면 다음 동영상으로 보자.
http://www.vimeo.com/10187896
http://goo.gl/yooER
이 글은 위 두 가지 feature중 Flash Player Incubator 환경에서 "Molehill" 3D APIs를 테스트할 수 있는 개발환경을 구성하는 방법을 소개한다. 특별히 Flash Builder Burrito를 기반으로 설명할 것이다. 아쉽지만 Flash CS5 IDE 사용방법을 몰라서 이에 대한 설명은 하지 않겠다. 대신 Flash CS5에서 테스트 환경 구성은 다음 글을 통해 공부할 수 있다.
http://blog.naver.com/q3korea/120125249427
2. Flash Player Incubator 버전 설치하기
Flash Player Incubator는 현재 MS Windows, MacOSX, Linux용으로 배포하고 있다.
http://labs.adobe.com/downloads/flashplatformruntimes_incubator.html
설치를 할 때 문서 아래에 Uninstaller를 먼저 실행하고 설치하기 바란다. 이 버전은 다 개발용이기 때문에 Debugging 기능이 내장되어 있다. 설치를 하지 않으면 아래 예제들을 실행할 수 없다.
참고로 Google Chrome을 사용하면 구동되는 Flash Player를 선택할 수 있다. 기존 Flash Player를 지우지 않고 전환해서 테스트 해볼 수 있기 때문에 유용하다. 다음 글을 참고한다.
Google Chrome 에서 Flash Player 10과 11(Molehill)을 전환하여 사용하는 방법 : http://ufx.kr/blog/142
3. Molehill 3D 경험하기
Molehill 3D API의 결과물을 한번에 볼 수 있는 동영상을 경험해보길 바란다.
http://blog.theflashblog.com/?p=2638
다음 링크를 통해 Molehill 3D APIs 를 이용한 다양한 Flash 어플들을 실행해 볼 수 있다. 단, Flash Player Incubator 버전이 여러분의 브라우저에 설치 되어야만 제대로 볼 수 있다.
http://molehill.zombietycoon.com/
http://alternativaplatform.com/en/demos/maxracer/
http://alternativaplatform.com/ru/demos/metro2033online/
http://www.lidev.com.ar/demos/fractals/tree/broomstick/
http://www.mcfunkypants.com/2011/molehill-terrain-demo/
http://infiniteturtles.co.uk/projects/away3d/broomstick/ShallowWaterDemo.html
http://www.swfgeek.net/2011/02/28/cubewall-using-away3d-4-0broomstick-jiglibflash-on-molehill/
http://not-so-stupid.com/clients/not-so-stupid/away4/duck/
http://aerys.in/minko-quake-3
http://infiniteturtles.co.uk/projects/away3d/broomstick/LoaderOBJTest.html
http://infiniteturtles.co.uk/projects/away3d/broomstick/EnvMapTest.html
http://infiniteturtles.co.uk/projects/away3d/broomstick/AnimBlendTest.html
http://infiniteturtles.co.uk/projects/away3d/broomstick/EnvMapDiffuseTest.html
http://acemobe.com/dungeon/demo.php
http://www.ambiera.com/coppercube/demo.php?demo=backyard
http://iflash3d.com/performance/how-fast-is-molehill/
http://ryanspeets.com/uncategorized/adobe-releases-molehill/
http://www.nulldesign.de/wp-content/uploads/2011/nd2d_spritesheets/Main.html
http://www.ringo.nl/projects/jiglibflash/Away3DGridSystem.html
http://www.ringo.nl/projects/jiglibflash/Away3DTriangleMesh.html
http://www.ringo.nl/projects/jiglibflash/Away3DStackingTest.html
http://www.ringo.nl/projects/jiglibflash/Away3DTerrainTest.html
http://www.ringo.nl/projects/jiglibflash/Away3DCarDrive.html
더 많은 데모 : http://blog.theflashblog.com/?p=2607
4. Flash Player Incubator용 API 문서 보기
Flash Player Incubator에 적용된 API를 학습하기 위한 문서이다. 다운로드 받아 보면 좋겠다.
Download the documentation for Flash Player 11,0,0,58
API 문서를 보기 전에 아래 글을 선행적으로 본다면 이해하는데 도움이 될 것이다.
Digging more into the Molehill APIs
MoleHill Getting Started
5. Flash Builder Burrito에 Flash Player Incubator 개발환경 만들기
Flash Builder Burrito는 beta 버전으로 Flex Hero 및 모바일 개발을 할 수 있는 환경을 제공한다. Flash Builder Burrito에 함께 포함되어 있는 Flex SDK는 Flash Player 10.1 기반으로만 개발할 수 있기 때문에 Flash Player Incubator 환경에서 개발할 수 있는 환경을 따로 구축할 필요가 있다. 다음 과정을 통해 개발 환경을 구축 할 수 있다.
5.1. 다운로드
개발 환경을 구성하기 전에 다음 링크를 통해 해당 자료를 다운로드 받는다.
- Flash Player 11,0,0,58 Incubator : http://goo.gl/yXySu
- Flash Builder Burrito(로그인 필요) : http://goo.gl/iM7g
- playerglobal.swc : http://goo.gl/NnEyx
- Flex SDK 4.5.0.19786 : http://goo.gl/2lAIb
5.2. 설치
설치하는 과정은 아래 순서대로 따라 하면 되겠다. 복잡하지 않으니 천천히 하도록 하자.
첫 번째로 Flash Player 11,0,0,58 Incubator를 설치한다. 이 글대로 진행했다면 이미 설치가 되었을 것이다. 설치가 정상적으로 이루어졌다면 해당 브라우저에서 Flash Player가 구동이 될 때 화면 아래 Flash Player 11,0,0,58 문구가 고정되어 새겨져 있을 것이다.
두 번째로 Flash Builder Burrito를 설치한다. Flash Builder Burrito는 일종의 Flash관련 어플을 개발하는 Adobe공식 통합개발도구(IDE)이다. Flash Develop, FDT등 다양한 툴이 있긴 하지만 여기서는 Flash Builder Burrito만 다룬다. 개인적으로는 Eclipse plug-in 버전을 다운받아 설치할 것을 권장 하지만 Flash Builder 에 제작 환경에 경험이 없다면 그냥 All-in-one 버전으로 설치한다.
세 번째로 Flex SDK 4.5.0.19786를 압축을 풀어 {Flash Builder Burrito 설치 경로}/sdks/에 복사해 넣는다. 윈도우라면 /Program Files/Adobe/Adobe Flash Builder Burrito/sdks/flex_sdk_4.5.0.19786 이 될 것이다. 이 SDK는 Flash Player 10.2에 대응하도록 되어 있다.
네 번째로 다운받은 flashplayer_inc_playerglobal_022711.swc를 {Flash Builder Burrito 설치 경로}/sdks/frameworks/libs/player에 11.0 폴더를 만들고 복사한다. 이름을 playerglobal.swc로 수정한다. playerglobal.swc 는 Flash Player 11.0 이상의 API를 이용해 개발하고 컴파일할 수 있도록 하기 위해 필요하다.
다섯 번째로 Flash Builder Burrito를 실행한다. 중간에 워크스페이스 경로를 설정하는 부분이 있는데 원하는 경로로 설정하면 되겠다. 이 경로상에 여러분의 Flash, AIR 프로젝트 들이 생성될 것이다.
5.3. 설정
Flash Builder를 이용해 몇 가지 설정을 통해 개발환경을 만들어보자.
첫 번째로 메뉴에서 Window > Preference로 들어간다. 창이 뜨면 왼쪽에 Flash Builder를 펼치고 그 안에 Installed Flex SDKs를 선택한다. 아래 화면과 같이 나올 것이다.
여기에서 아까 설치했던 Flex SDKs를 추가한다. 좌측에 Add 버튼을 누르고 {Adobe Flash Builder Burrito 설치경로}/sdks/flex_sdk_4.5.0.19786 를 선택한다. 이때 Name은 Flex 4.5(FP11)로 정하자. 그리고 추가된 SDK를 위 그림처럼 Default SDK로 체크한 뒤 OK를 누른다.
두 번째로 ActionScript 3.0 프로젝트를 생성하고 몇 가지 설정을 하겠다. 메뉴에서 File > New > ActionScript Project 를 선택한다. 그럼 아래와 같은 창이 뜬다. Project name에 아무 이름이나 넣는다. 우리는 FP11Test로 했다. 참고로 Flex SDK version이 이전에 선택한 SDK가 나옴을 확인할 수 있다. 필요하다면 여기서 설치된 SDK를 선택할 수 있음을 의미한다. 우리는 기본 SDK를 사용할 것이므로 그대로 두고 Finish 버튼을 누른다.
세 번째로 Flash builder의 Package Explorer 창에 FP11Test 프로젝트가 만들어졌을 것이다.
Flex 4.5(FP11) SDK를 사용하고 있음을 보여주고 있다. 이전에 Flex 4.5(FP11) SDK에 playerglobal.swc를 복사해뒀던 것을 기억할 것이다. 하지만 여기서 보여지고 있는 playerglobal.swc는 Flash Player 10.2 버전의 API를 담은 SWC이다. 우리는 아까 복사해둔 11.0 버전을 지원하는 playerglobal.swc가 선택이 되도록 해야 한다.
위 그림상에서 보는 데로 프로젝트(FP11Test)를 선택한 상태에서 메뉴의 Project > Properties를 선택하자. 아래 그림과 같은 창이 나올 것이다. 오른쪽 메뉴에서 ActionScript Compiler를 선택한 뒤 Adobe Flash Player options에 Use a specific version을 11.0.0으로 바꾼다. 또한 Compiler Options에 -swf-version=13를 넣는다. HTML wrapper는 그대로 둬도 되지만 Check target player version과 Enable integration with browser navigation은 의미가 없으므로 체크를 하지 않도록 한다. 그리고 OK 버튼을 누르면 되겠다.
마지막으로 Flash Player 11환경에서 GPU 가속을 시키려면 wmode가 direct로 설정되어 있어야만 한다. 프로젝트상에 html-template내 index.template.html을 연다. 참고로 이때 더블 클릭하면 웹브라우저가 실행되어 버린다. 더블 클릭하지 말고 마우스 오른쪽 버튼을 눌러 Open With > Text Editor로 열면 html 소스코드를 볼 수 있다. (더블클릭때마다 웹브라우저를 열지 않는 방법이 있다. 메뉴 > Window > Preference > General > Editors > File Associations를 참고하자.) index.template.html 내에 스크립트 상에 var params = {}; 부분이 있다. 그 아래 params.wmode = "direct";를 추가하자.
5.3. 실행
이제 실행해볼 수 있게 되었다. Ctrl+F11(Run) 또는 F11(Debug)를 눌러 실행해보자. 아래 화면처럼 브라우저 창에 Adobe Flash Player 11 (11,0,0,58d) (Incubator build)가 뜨면서 실행되었으면 성공이다. 만약 실행이 안되거나 컴파일 에러가 난다면 위 과정을 다시 살펴보길 바란다.
5.4. 간단한 코드 짜보기
이제 Molehill 3D API를 직접 적용해보자. 여기서는 소스 코드를 분석해서 설명하기 보다 그저 실행해보는데 목적이 있음을 알아두자.
아래 링크로 가면 Molehill 3D API에 대한 소개와 간단한 테스트 코드가 있다.
MoleHill Getting Started : http://labs.jam3.ca/2011/03/molehill-getting-started/
이 소스는 AGAL 어셈블러인 AGALMiniAssembler 소스가 필요하다.
AGALMiniAssembler.as : http://goo.gl/ITcrn
아래 링크로부터 이 두 개 소스를 받자.
FP11Test.zip이것을 압축을 풀어 프로젝트 src에 복사하자. 그리고 Ctrl+F11이나 F11로 실행하면 다음과 같은 화면을 볼 수 있다.
다른 소스도 테스트 해보자.
먼저 프로젝트 내에 src/(Defaul package)를 선택한 다음 오른쪽 마우스 버튼을 눌러 New > ActionScript Class를 선택한다.
두 번째로 창이 뜨면 Name에 Cube를 넣고 Finish를 한다.
세 번째로 아래 링크에서 샘플 소스를 복사한 뒤 아까 만든 Cube.as를 선택해 이전 코드를 삭제하고 붙여넣자.
http://goo.gl/ITcrn
네 번째로 아래 그림처럼 Cube.as를 선택하고 마우스 오른쪽 버튼을 눌러 Set as Default Application을 선택한다. 이렇게 하면 이 프로젝트의 기본 Main 실행 클래스가 Cube.as가 된다. 이 상태에서 Ctrl+F11이나 F11를 눌러 실행해보자.
실행 시 Bad input size라는 Error가 발생한다면 IE내에서 실행하는 Flash Player의 버그이다(참고 : http://blog.jidolstar.com/656). 이 때는 아래 코드로 대체해보자.
Cube.as성공적으로 실행하면 다음과 같은 화면을 볼 수 있을 것이다.
이 소스에 대한 설명은 http://ltslashgt.com/2011/02/28/molehill-spinning-cube/ 를 참고한다.
6. 정리하며
지금까지 Flash Player Incubator 환경에서 Molehill 3D를 테스트 해볼 수 있는 개발환경을 구축하고 테스트하는 방법을 알아보았다. 하지만 이 글은 Molehill 3D API에 대한 자세한 설명을 배제했다. 이 글 다음에는 Molehill 3D API에 대한 내용을 정리할 계획을 가지고 있다.
Molehill 3D API를 이용한 마지막 2개의 테스트 소스를 보면 알겠지만 굉장히 접근하기 형태의 Native API이기 때문에 코딩으로 직접 3D를 표현하는 것은 질 좋은 3D Flash 어플을 만드는데 한계가 있다. 그렇기 때문에 Away3D나 Alternativa3D와 같은 프레임워크를 도입해야 하는 이유가 여기에 있는 것이다. 이 부분에 대해서도 이후에 글을 적어보려고 한다.
앞선 테스트 어플들에 3D가 아닌 2D화면도 봤을 것이다. Molehill이 무조건 3D에서만 GPU를 이용하는 것은 아니다는 것을 보여준다. 기존에 많은 2D Flash 컨텐츠도 Molehill을 적극 활용하면 생각지도 못했던 양질의 퍼포먼스를 기대할 수 있다는 것을 보여주는 셈이다. 일종에 아이폰의 OpenGL ES기반으로 2D를 표현하기 위한 Cocos2d가 있듯이 Flash에서도 이러한 형태로 표현할 수 있음을 알 수 있다. 아래 링크의 동영상을 보면 그 이유를 알 수 있을 것이다.
http://clockmaker.jp/blog/2011/03/molehill_video/
Flash Player에 3D 기능을 추가됨에 따라 Unity3D에 Flash Player에서도 동작할 수 있도록 해주는 기능도 포함되었다. 이것은 Unity3D 개발자나 Flash 개발자 양쪽에 꽤 흥미로운 사실이다.
아직 Flash Player 11이 정식오픈 되려면 시간이 필요할 것이다. 버그 수정을 거치면서 안정화를 시켜야 하기 때문이다.
Flash 3D가 표현된다는 것은 무조건 좋은 일만은 아니다. Flash는 웹브라우저 및 크로스 플랫폼에서 운용되기 때문에 접속할 때마다 새로 자원을 로드 해야 한다. 이는 자원을 로컬에 저장해두는데 제약이 있기 때문인데 결과적으로 접속할때마다 필요한 자원을 로드함에 있어서 2D자원보다 3D자원이 훨씬 크고 관리하기 어렵다. 이는 위에 이미 소개한 Flash 3D 예제를 보면서 느꼈을 것이다. 멋진 3D 화면을 보기 위해 자원을 로드하는데 꽤 오랫동안 기다려야 한다. 물론 AIR로 개발한다면 상관없겠지만 웹기반에서 소셜게임을 만든다면 이야기가 다르다. 이 말은 자원관리가 그만큼 어려워지고 전문적으로 해야함을 의미한다.
그럼에도 불구하고 Flash가 3D를 표현하는데 GPU를 지원한다는 사실만으로도 많은 장점이 있기에 3D를 준비해야 차기 Flash 시장의 미래를 선도할 수 있을 것이다. 미리 준비할 필요가 있다.
7. 관련사이트
Adobe AIR and Adobe Flash Player Incubator : http://goo.gl/pvwzd
Flash Player 11,0,0,58 Incubator Release Notes : http://goo.gl/FlH7C
Flash Player 11,0,0,58 Incubator 다운로드 : http://goo.gl/yXySu
Digging more into the Molehill APIs : http://goo.gl/d2WYu
Away3d 4.0 Alpha : http://goo.gl/bZBav
Alternativa 3D : http://goo.gl/jqfE
Flare3D 2.0 Pre-release : http://goo.gl/1vgCA
Flash CS5 환경에서 테스트 : http://blog.naver.com/q3korea/120125249427
Molehill Getting Start : http://blog.naver.com/q3korea/120126463667
Molehill spinning cube : http://ltslashgt.com/2011/02/28/molehill-spinning-cube/
Unity, Flash & 3D on the web : http://goo.gl/OAY1q
글쓴이 : 지돌스타(http://blog.jidolstar.com/759)
'비공개 > Adobe Flash 3D' 카테고리의 다른 글
| [ACC 기술세미나]Adobe Flash Builder 4.5 환경에서 Molehill 3D를 이용한 개발소개 (5) | 2011.05.29 |
|---|---|
| [Flash] Molehill을 이용한 2D 렌더링 (27) | 2011.04.21 |
| 차세대 Flash Player 3D API Molehill (0) | 2010.12.20 |
| [Flash 3D]Geodesic Sphere 그리기 (7) | 2009.09.17 |
| [오픈캐스트]Flash 3D 세계 (2) | 2009.08.10 |