다음 포스팅에서 기술에 관한 내용을 다뤄보겠습니다.
![]() |
㈜다음커뮤니케이션은 새로운 커뮤니케이션의 일환으로 지도 서비스에 박차를 가하고 있다. 특히 실제 도로나 거리를 촬영한 디지털 파노라마 사진으로 서비스하는 ‘로드뷰’는 다음 지도 서비스 만의 차별화된 기능이다. 다음은 보다 빠르고 안정적으로 사용자가 실물 그대로의 지도 화면을 볼 수 있도록 하기 위해 어도비시스템즈의 Flash Platform 기반으로 3D 애플리케이션을 구현했다.
|
로드뷰 뷰어는 아시다시피 플래시, 정확히 말씀드리면 Actionscript3.0(이하 as3)으로 만들어졌습니다.
즉 Adobe의 Flash Player가 있다면 실행할 수 있겠습니다만 몇 가지 제약이 있습니다.
일단 as3.0 이기 때문에 AVM2 (Adobe Virtual Machine)에서 작동합니다.
AVM1은 Flash Player 8까지이고요, as1,2로 개발을 합니다.
AVM2는 Flash Player 9, 10으로써 as3.0로 개발을 합니다.
당연하겠지만 AVM2는 하위호환을 위해 AVM1용 바이너리(SWF)도 실행이 가능합니다.
LG텔레콤의 오즈폰(아르고폰?)을 써 보니 as3로 개발된 바이너리는 실행이 불가능하더군요.
그래서 아르고폰의 인터넷 서비스가 풀브라우징임에도 as3로 개발된 Daum의 로드뷰는 실행되지 않습니다.
문득 궁금증이 생겼습니다.
' PS3에서 로드뷰가 돌아갈까? '
저희 회사 사무실에 ps3가 비치되어 있어 즉각 실험에 옮겨봤습니다.
(더욱이 제가 근무하는 층에 있습니다.)
그런데 문제가 생겼습니다.
로드뷰는 다음 지도에 소속된 서비스입니다.
즉, 로드뷰를 보려면 먼저 지도서비스에서 로드뷰 버튼을 활성화해야한다는거죠.
근데 아쉽게도 다음 지도서비스는 ps3에서 열리지 않네요.
이는 네이버 지도도 마찬가지입니다.
신기한건 구글지도서비스는 열린다는거고요, 그럼 구글의 스트리트뷰는 볼 수 있지 않을까했는데...
아쉽게도 열리지 않습니다. 추측컨데 왼쪽의 노란색 사람을 드래그해 놓으면 열릴 스트리트뷰가 마우스 드래그 아웃관련 이벤트를 제대로 잡지 못해 못여는것 같습니다.
어쨌든 로드뷰 1차 시도는 실패입니다.
그렇다고 물러설 수는 없죠.
어차피 저는 로드뷰 개발자라 소스 핸들링이 가능합니다.^^;;;
지도 없이 바로 로드뷰를 띄울 수 있게 내부 테스트서버에 올려봤습니다.
즉 특정 url을 치면 바로 로드뷰만 띄우게 해놓고 다시 시도 해봤습니다.
결론은 자~알 된다입니다~
그다지 기대하지 않았는데 되네요;;;
보통 임베디드 브라우저에 탑제된 Flash Player(AVM)는 as3를 지원하지 않는 AVM1인 경우가 많은데 의외였습니다.
급하게 테스트해보느라 몇 가지 로드뷰의 컨트롤러가 빠져있고 해상도도 불안한 모습을 보여주네요~
일단 로드된거에 의의를 두려고요 ^^;
하지만 생각대로 성능은 PC에 비해 많이 떨어집니다.
ps3의 그래픽가속칩을 쓰면 날라댕길텐데 기본 cpu 만으로 돌리는거다보니 인터렉션 및 영상처리 속도가 좀 느리네요.
어떤 브라우져가 탑재되어있는지 궁금해 찾아봤습니다.
Access사의 netfront라는 브라우져인데요, 보통 pda에 들어가는 브라우져입니다.
내친김에 스펙을 찬찬히 보니 java와 flash, media player 등이 plug-in으로써 스펙내에 존재하네요.
또 궁금증이 밀려왔습니다.
'xbox360은? wii는?'
wii는 없지만 xbox360도 회사에 있습니다.
바로 xbox360이 있는 층으로 달려가 해봤는데... 아쉽게 xbox360엔 인터넷 브라우져가 없습니다.
IE가 안들어간게 의외네요.
오로지 게임을 온라인으로 구매, 다운로드, 데모시연, 온라인게임 등만 되는군요~
wii는 기본 브라우져는 없는데 구매가 가능하다는군요. 근데 wii가 어느층에 있는지 몰라서 일단 wii에서의 테스트는 다음에 해보고 다시 올려보겠습니다.
현재 로드뷰가 오직 지도를 베이스로 열리게 되어있어 살짝 아쉬움이 있습니다.
그래서 저희들도 이를 인지하고 좀 더 밖으로 빼내는 별도의 작업과 Open API작업들이 이뤄지고 있으니 조만간 새로운 모습으로 다시 발전되어 나타나게 될것 같습니다.
그렇게 되면 일반 분들도 ps3나 wii같은 pc외의 기기에서 쉽게 사용하실 수 있지 않을까합니다.~
http://local.paran.com/openmap/mapsrch_openmap.php
특징
1. ActiveX (설치필요)
2. 낮은 해상도
3. 드라이브하는 느낌
4. 주요 번화가 위주 제공
드라이빙 모드와 인터페이스는 참신하다.
하지만 참신성을 잘 살리지 못하는 완성도인것 같다.
몇 가지 궁금한것 중 하나는 왜 ActiveX로 만들었냐는 것이다.
Flash나 Silverlight를 이용했으면 더 좋았을걸....
상당히 많은 ActiveX를 설치하면서 극도의 인내심이 필요했다.
또 하나, ActiveX로 했으면 OpenGL이나 DirectX를 활용해 궁극의 3D를 구현할 수 있음에도 않그런점..
물론 개발에 대한 노력을 폄훼할 생각은 없다.
같은 개발자로써 컴퓨터 그래픽스쪽이 힘든작업인지 알기에...
하지만 사용자로써 서비스 질 자체는 실망하지 않을 수는 없다.
설치의 필요성, 속도, 해상도, UX... 어느것 하나 만족스럽지 못한것 또한 사실이다...
KTH가 개발을 주로 외주인력에 의존해서 그런가...
아직 초기라 그럴거라 생각한다.
대부분의 서비스는 시간이 지나면 진화하고 발전하더라...
그래도 화이팅!
잠입 액션 게임 메탈기어솔리드를 아시나요.
저도 직접해본적은 없으나 예전 토요일 늦은 밤 SBS게임방송을 통해 어떤 게임인지는 누차 봐 왔고 한번 해보고 싶다고 생각한적이 많았죠. 유명한 프로듀서의 작품으로써 골수팬들이 많다네요...
레인보우식스처럼 조심스럽게 적을 무찔러야하지만 들키지 않기 위해 주변 지형과 지물을 이용합니다.
근데 이러한 방식을 패러디한 플래시게임을 만들었네요.
Papervision3D 공식 홈페이지에 소개된 내용입니다. (원문: http://blog.papervision3d.org/2008/10/05/flash-gear-solid-vr)
이 글에 의하면 미국 건강산업에 종사하고 있는 Ray Wu (중국계인가봐요?)란 사람이 취미로 만들었다네요.
물론 PS3처럼 막강한 Graphic H/W를 이용할 수 없고 오로지 CPU만으로 처리를 해야 하기에 그 모습은 초라할지 모르겠습니다. 하지만 지금까지 소개된 웹 3D게임 중 최상급인것만은 분명합니다.
별도의 설치, 구매없이 3D게임을 제공할 수 있다는게 플래시3D의 최고 매력이겠죠.
(페이지가 무거워지는것 같아 뺏습니다.)
게임 중 'X'버튼을 누르면 1인칭시점(First Person View)으로 볼 수 있습니다.
미사일이 날라갈 때 누르면 미사일 관점에서 볼 수 있고요...
또 미사일 발사 시 커서키로 유도미사일처럼 방향을 틀 수도 있답니다.
하나의 좌표값들을 다른 카메라로 랜더링을 통해 위에서 보는 Top down 방식과 1인칭시점에서 보는 방식의 두가지 보기 모드가 쉽게 구현됐습니다.
요즘 Actionscript3.0의 3D 라이브러리를 만드는 일을합니다.
Flash 세계에선 Papervision3D라는 유명한 오픈소스 3D 라이브러리가 있는데요,
프로젝트에 도입해 보니 생각보다 만족스러운 성능이 안따라주네요.
Flash Player 10 부터 몇몇 3D API가 제공된다니 너무 기대되나 현재 베타버전이라 그에 맞춰서 개발할 수는 없는 노릇이고요.
또 이는 3D 그래픽 가속기능(GPU)을 사용하겠다는 것인데 대중적인 사용자를 고려한다면 조금 조심스럽습니다.
사용자에게 플래시 플레이어 10을 재설치하라는 대화 창을 띄우는것도 심히 부담되고요.
현재 프로젝트에선 3D 전체 파이프라인 과정이 필요 없어서 투상을거친 뷰포트변환까지의 기하변환 엔진을 직접 만드는게 훨씬 도움이 된다고 판단 했습니다. 아래는 OpenGL 파이프라인의 대략적인 과정입니다.
- 모델변환
- 시점변환
- 뷰변환
- 투상변환
- 뷰포트변환
- 후면제거, 은면제거
- 레스터변환
- 조명과 음영
- 텍스쳐
기하변환들과 비트맵을 이용한 텍스쳐맵핑 과정만 거치면 매우 만족할만한 성능이 나올것 같습니다.
이 엔진에선 가장 부하가 많이 걸릴것 같은 후면제거, 은면제거와 쉐이딩을 처리 과정을 생략했기에 매우 빠른 성능을 기대하고 있습니다.
(테스트상 100fps까지 돌려도 무난하게 돌아갑니다. 100까지 올리니 움직임이 엄청 부드럽네요)
OpenGL이나 DirectX의 국내서적 대부분이 기본 3D지식과 API사용에만 집중되어있어 실제 변환 구현에 도움되는 책은 많지 않은것 같습니다. 그나마 잘 정리된 국내서적과 미국 원서를 소개합니다.
가장 큰 도움을 받은건 'OpenGL로 배우는 컴퓨터 그래픽스'인것 같습니다.
openGL 코드와 API만 설명한게 아니라 하부 구조, 원리, 알고리즘까지 모두 소개한 책으로써 openGL이 아닌 3D를 공부하는데 기본을 제대로 닦을 수 있는것 같습니다.
|
|||||||||||
그리고 '좋은 게임을 만드는 핵심원리 게임수학과 물리'란 국내서적은 쿼터니안(사원수)부분이 다른 책보다 잘 나와있어서 그 공식에 맞춰 쿼터니안(Quaternion) 객체를 만들어주기만 하면 되더라고요.
|
|||||||||||
아래의 'Flash 3D (focal press)'란 원서도 결정적으로 큰 도움이 되었습니다.
특히 2D를 마치 3D처럼 보이게 하는 팁이 좋더라고요. 9장만 봐도 큰 도움이 됩니다.
게임이 아닌 웹서비스의 경우 어떤 객체는 굳이 3D파이프라인을 안거쳐도 되는 부분이 있는데요, 이를 교묘히 3차원처럼 보이게 함으로써 성능을 향상시킬 수도 있습니다.
http://www.amazon.com/Flash-3D-Animation-Interactivity-Games/dp/0240808789/ref=pd_bbs_sr_1?ie=UTF8&s=books&qid=1221497201&sr=8-1
카메라 부분이 예술적으로 잘 나와있는 책도 추천합니다. 이 책은 수학공식이 쓸 때 없이 많이 나와 거부감도 좀 있지만
초기 카메라 개념잡기에 더 없이 좋네요.
http://www.amazon.com/Computer-Vision-Approach-David-Forsyth/dp/0130851981/ref=pd_bbs_sr_2?ie=UTF8&s=books&qid=1221498846&sr=1-2
플래시3D는 맨 땅에 해당이라...
Vertex클래스부터 Camera, Viewport, Model, poly, Mesh, Matrix3D 등등... 아주 생 바닥부터 해야됩니다.
덕분에 몇 개월째 수학과 씨름하고있습니다.
그렇다고 이일이 엄청난 수학지식이 필요한것도 아니고요,
3D 엔진에 필요한 수학은...크게
행렬, 복소수(사원수), 삼각함수, 벡터...조금 더하면 미분정도...
이 들의 기본 개념만 안다면 그다지 어려운 작업도 아닌것 같에요. (책에 잘 설명이 나와있어서요..)
실제 쓰일 엔진은 기하변환이 주이지만 욕심같아선 모든 파이프라인을 다 구현해보고 싶네요.
각종 은면제거 알고리즘도 실제 구현해보고 음영의 각종 셰이딩 등등을요.
하지만 저걸 죄다 CPU만으로 처리하는 플래시는 성능이 안따라준다는게 아쉽네요.
어서 플래시 플레이어10이 나와서 3D가속기능을 마음껏 이용했으면 합니다.
지금 만드는 기하변환 모듈은 저희 프로젝트만 최적화된거라 공개하기가 민망하고 좀 거시기하지만
조금 더 그럴싸하게 손 보고 몇 가지 파이프라인 작업이 추가되어 공개하고 싶답니다.
한국어로 아주 친절하게 소개된 플래시3D라이브러리가 국내엔 없는지라 아마도 많은 분들에게 도움이 되지 않을까해요.
3개 중 마지막 Flex Library Project는 참조되는 라이브러리를 구축/수정할 때나 다른 라이브러리를 가져다 참조의 목적으로 주로 쓰인다.
다른 나머지 두개의 프로젝트는 이 프로젝트를 참조할 수 있다.
(예를 들자면, 잘 알려진 플래시 3D라이브러리인 Papervision3D는 오픈소스로써 SVN주소를 제공해 누구든지 소스를 다운받을 수있다. 이를 다운받아 Flex Library Project로 구축하고 3D 개발을 할 때 좀 전에 만든 프로젝트를 참조해준다. 그럼 내부 소스를 언제든지 쉽게 참조할 수 있고 원한다면 라이브러리의 소스를 추가/수정도 가능할것이다.)
이 글의 주제는 두번째 프로젝트인 ActionScript Project에서 플래시 Wrapper로부터 값을 전달받는 방법이다. 즉 쉽게 말해 HTML의 <object>, <embed> 태그의 속성 중 하나인 'FlashVars'를 통해 플래시가 초기 로딩되면서 받게 되는 파라미터의 값을 AS코드 내에서 전달 받는 방법에 대해 다룰것이다.
Flex Project와 Actionscript Project 두 개의 프로젝트가 각기 다른 방법으로 이 값을 받는다.
우선 이 두 프로젝트의 차이를 설명해보자면,
첫번째인 Flex프로젝트는 Actionscirpt3와 MXML 두가지 기술을 모두 활용할 수 있다.
하지만 반대로 두번째인 Actionscript Project는 오로지 Actionscript3만 이용해 개발할 수 있다.
MXML은 마크업기반의 HTML과 유사한 방식의 언어로써 다양한 장점을 제공한다.
MXML의 장점은 매우 빛나지만 기본 용량이 250KB가량 되기에 ActionScript프로젝트의 712 bytes와 상당한 크기차이를 보여준다.
아래의 그림은 Flex Project로써 컴파일 된 SWF의 기본사이즈는 243,423 bytes 이다.
반면 Actionscript 프로젝트의 SWF기본 사이즈는 712 bytes이다. (대략 300배차이)
암튼 더 자세한 내용은 생략하고...
본격적으로 Flex Project와 Actionscript Project 에서의 방법을 말해본다.
Flex Project로 생성한 플래시에서 FlashVars로 값받기
아래는 매뉴얼에도 있는 내용이라 새로울건 없을것 같다.
flex builder의 Help Contents에서 Flashvars로 검색하면 쉽게 볼 수 있다.
HTML:
<object id='mySwf' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab' height='100%' width='100%'>
<param name='src' value='FlashVarTest.swf'/>
<param name='flashVars' value='firstName=Nick&lastName=Danger'/>
<embed name='mySwf' src='FlashVarTest.swf' pluginspage='http://www.adobe.com/go/getflashplayer' height='100%' width='100%' flashVars='firstName=Nick&lastName=Danger'/>
</object>
Flex:
var firstName:String = Application.application.parameters.firstName;
var lasttName:String = Application.application.parameters.lasttName;
값이 복수개인 경우 아래와 같이 for-in으로 받을 수 있다.
for (var i:String in Application.application.parameters) {
a += i + ":" + Application.application.parameters[i] + "\n";
}
ActionScript Project로 생성한 플래시에서 FlashVars로 값받기
Actionscript project는 Flex Project에 비해 용량만큼 참조되는 라이브러리가 상당히 빈약하다. 즉 Flash Player에서 제공하는 기본적인 핵심 라이브러리만 참조되며 Flex가 제공하는 막강한 UI나 기타 기능의 라이브러리는 참조되지 않는다.
위 예제에서 사용된 Application객체는 플렉스 프로젝트의 가장 기본이 되는 시작 객체로써 당연히 Actionscript Project에선 제공되지 않는다.
따라서 위 예제와는 다른 방법으로 접근해야하겠다.
DisplayObject는 읽기전용인 loaderinfo객체를 갖고있고 loaderinfo는 parameters라는 속성을 갖고있다.
이 loaderinfo.parameters는 URL로 부터 전달받는 파라미터나 flashvars로 부터 전달받는 값 모두 받을 수 있으며 for-in 루프로 N개의 값을 받을 수 있다.
만약 현재 클래스가 DisplayObject를 상속받은 객체라면 아래와같은 코드로 값을 받는다.
var firstName:String = this.loaderInfo.parameters.firstName;
var lasttName:String = this.loaderInfo.parameters.lasttName;
아닐 경우 아래와 같이 루트 DisplayObject를 참조한다.
var firstName:String = root.loaderInfo.parameters.firstName;
값이 복수개인 경우 아래와 같이 for-in으로 받는다.
for (var i:String in root.loaderInfo.parameters) {
a += i + ":" + root.loaderInfo.parameters[i] + "\n";
}
위즈덤하우스,
지식생태학자 유영만의 생각혁신 프로젝트.
여타 한국 서적들의 고리타분한 편집과는 차별화되었다.
창조를 일으키는 10가지 비밀
눈여겨봐라
마음으로 물어라
안 보여도 참아라
이미지로 그려라
뒤집고 엎어라
차이를 존중하라
모순을 끌어안아라
이것저것 엮어라
좌우지간 저질러라
신나게 놀아라
창조행위는 천재들만이 하는 것이 아니라 누구나 할 수 있는 대중적인것
단 서슴없이 발길을 내딛는 불굴의 의지와 실행력, 용기가 필요하다.
외부적 간섭과 통제에도 흔들리지 않고 진정으로 자신의 일을 사랑한 사람들.
상상과 창의, 그리고 창조의 아름다운 삼각관계
상상해야 창조가 따라온다.
- 풍부한 어휘력을 키워라
세계를 바라보고 느낀 점을 표현할 수 있는 능력은 곧 내가 갖고 있는 언어적 수준에 의해 좌우된다.
저는 유난히도 사물이 텅 비었거나 인적이 없는 곳을 좋아합니다.
그냥 사람이 적고 넓은 곳에 가면 앤돌핀이 용솟는 느낌이 들더라고요.
그리고 책으로 꽉꽉 채워있는 책장을 보고 뿌듯해하시는 분이 많다고 하는데요, 저는 반대로 텅 비어있는 책장을 보며 뿌듯해합니다.
물론 책 하나 없이 순도100% 텅빈것이 아니라 절반을 못채운 정도를 최고의 황금비율로 생각한답니다.
제가 어릴 적엔 지금처럼 서울에 사람이 초고밀도는 아니었던것 같습니다.
군데군데 공터도 많았고 한 낮의 지하철역이나 지하철엔 사람이 별로 없었던 기억이 가물가물 납니다. 그 때를 떠올리면 참으로 마음이 편안해집니다.
한여름 매미만이 적막을 깨고 맴~맴~ 울고 아스팔트에선 뜨거운 열로 아지랭이가 피어오르고...
사람 인적 없는..그런 느낌을 되내이면 참으로 맘이 편안해집니다.
아래 사진은 제작년에 제 방에 들여 놓은 새 책장인데요,
사진은 처음 들여왔을 때의 사진이고 지금은 한칸을 제외하고 전부 책으로 가득 차있습니다.
한달 전에 전부 정리한다고 약 40~50권정도를 온라인 중고서적(북코아)에서 팔았는데요,
몇 백권 중에 일부라 책장을 비우고 싶은데 아직 택도 없네요...
처음 샀을 때의 책장으로 돌아가고 싶습니다.
지금은 방바닥에도 책이 쌓여있어서 굉장히 스트레스 받고있습니다.
회사 도서관(작은)에 전부 기부하던가 내다 버릴까합니다.
파는것도 골치아프더라고요.
백권가량을 통째로 팔고 싶은데 다들 사가는 양이 적게는 한권에서 많아봐야 10여권정도라서
택배보내는 일도 만만치 않습니다.
일단, 전부 비우려고요.
요즘 개인적으로 소비 억제주간을 갖고있습니다.
2주째 물건 하나 안샀습니다. (밥먹고 차마시고 지하철타는거 말고요)
당분간 계속비우려합니다.
이올린에 북마크하기

이올린에 추천하기