SymBall은 2004년 겨울 플래시를 처음 접한 후 만든 첫 작품? 입니다.
이번에 로보밥 블로그 오픈을 계기로 다시 Online에 올려봤습니다. 한번 심심풀이 심볼 해보시죠!!

본 어플의 목적:
  동그란 Ball들을 3D 공간상에 자유롭게 배치하여 3D 상징(Symbol)을 만드는 것입니다.

왜 Symball인가?
  Ball로 만들어진 상징물(Symbol)이므로  새로운 합성어로 Symball 이란 단어를 만들어 봤습니다.


3D Symball  강아지 만들어본 예

[3D Symball  강아지 만들어본 예]


사용법:

사용법은 매우 간단하여 10분이면 독파가능한 수준입니다. 
키보드 키를 눌러서 바로바로 작동하게 하는 방법을 사용하여, 불필요한 기능별 메뉴 선택작업이 없으며,
가령 A 키는  Add 를 연상시키며, D 키는 Delete키를 연상시킬 수 있도록 키를 배정하여 기억하기 쉽게 구성하였습니다.
하지만, 화면상의 키를 마우스로 눌러도 아무 작동도 안하고, 키보드로 눌러줘야 한다는점을 잊지 말아주세요!
화면상의 아이콘 키들은  본 어플 작동을 위한 모든 기능키들을 화면에 보여줘서 곧바로 모든 키를 익힐 수 있도록 하기 위함입니다.  궁굼한 기능키에 마우스를 올려보면 기능키 mini도움말이 바로 뜹니다.
화면상의 아이콘 키들의 기능만 알면, 본 어플 작동법을 마스터 하는것입니다.

일단, 아래의 글을 읽고 작동해보신다면 더 쉽게 이해가 되실 듯 합니다.


기능키 소개

------- Ball 다루기  ----------------

사이트 접속 후, 처음 뜨는 도움말 창을 보신 후, Close 버튼을 눌러서 도움말창을 닫습니다.

이제부터는 키보드 키와 마우스를 이용하여 3D 조형을 해봅니다.

1단계. Ball추가하기   -  Add key

 A(dd) 키를 눌러보세요.   ->  Ball이 하나 생성됩니다.
 주의.  키보드상의 A키를 눌러야 A 기능이 작동됩니다. A키를 마우스로 클릭하면 A키 도움말만 뜹니다.

2단계. Ball 이동하기

 생성된 Ball을 마우스로 Drag하면 이동합니다.

 이때 마우스 왼쪽 버튼대신 키보드 Space버튼을 이용할 수 도 있습니다.

 ☆ 오른손 검지손가락 휴식모드:
  본 기능은 디자인, 프로그래밍, 웹서핑, 게이밍 작업시 너무 많은 클릭으로 고생하고 있는 검지손가락을
  잠시나마 쉬게 해줄 수 있도록 특별히 개발한 기능입니다. 제가 이때쯤 손가락이 너무 아팠습니다. ㅡㅡ; )

3단계. 특정 지점에 Ball 생성하기

 Ball을 Drag중에 A 버튼을 누르면 마우스 현 위치에 Ball이 생성됩니다.
 이 기능으로 원하는 위치에 Ball들을 배치할 수 있습니다.

4단계. Ball 지우기   - Delete key

 지우려는 Ball 위에 마우스를 가져다 된 후,  D(elete) 키를 눌러줍니다.

5단계. Ball 선택하기  - Select key

 Ball을 하나 선택하려면, 원하는 Ball에 마우스를 가져간후 S(elect) Key를 눌러줍니다.
 여러번 반복하여 S 선택가능합니다.

6단계. Ball 영역 선택하기  

 여러개의 Ball을 한번에 선택하려면,  마우스로 해당영역을 Drag 해줍니다.

7단계. 다중 선택된 Ball들의 이동

 다중 선택된 Ball중의 하나를 선택후 드레그하면 전체 이동됩니다.

8단계. 다중 선택된 Ball들의 삭제

 D(elete) Key를 눌러주면 선택된 Ball들이 일괄적으로 삭제됩니다.

9단계. Ball의 복사 Copy

C(opy) key;  특정 Ball(들)이 선택된 상태에서 C키를 눌러주면 선택된 Ball들이 현재 위치에 복제됩니다.
                   선택된 Ball들을 Drag or 3D 회전 하면서 Copy를 수행하면, 손쉽게 특정 모양들을 복제해 낼 수 있습니다.
                   가령 직선을 회전하면서 copy를 반복하면 원이 됩니다.  2축회전을 하면서 복사를 하면 구가 됩니다.


---------  3D 이동 기능  X,Y,Z 평명이동 --------------

X-Y평면 드레그 모드

 X key를 눌러주면  선택된 Ball(들)을 Drag시 x,y 평면상 이동이 됩니다.  (기본상태)
 일반적인, 마우스 좌/우, 상/하 이동이 됩니다.

Z-X평명 드레그 모드

 Z key를 눌러주면 선택된 Ball(들)을 Drag시 z,x 평면상 이동이 됩니다.
 즉, 위아래 이동시 모니터 뒷쪽, 앞쪽으로 이동 (멀고,가까워지는 이동)
 일반모드로 되돌아 가려면 X key를 눌러줘야합니다.


----------  3D View 보기 및 선택 Ball 회전하기   ------------------
3D View 모드
선택된 Ball이 없는경우, 전체 Ball이 해당되고,
선택된 Ball이 있다면 선택된 Ball만 회전되게 됩니다.

V(iew) 키를 눌러주면 Z축과 Y축 회전용 핸들이 보입니다.
용도1. 작품 감상: 이 두 핸들을 조절하여 Z/Y축 회전 속도를 부여하면,  3D공간상의 회전하는 조형물을 볼 수 있습니다.
용도2. 조형 작업: 특정 Ball들만 선택하여 회전하여 3D 배치 작업에 이용합니다.
          힌트.  회전중에도 S, F, C, D키 사용이 가능합니다. 이를 통해 복잡한 3D 조형물도 손쉽게 만들 수 있습니다.

--- 저장하기 ---
PgUp key를 누르면 뜨는 폼에 제목을 적어줍니다. 
중요, 저장하려는 Ball 들은 선택된 상태여야합니다.  미선택된 Ball들은 저장되지 않습니다.

--- 불러오기 ---
PgDown key
검색어를 입력하여 찾기 기능을 지원하며, 목록에서 선택후 불러오기 하면, 저장되었던 Symball을 볼 수 있습니다.
참고로, 상단의 Sample download는 원 data가 손실되어 작동하지 않는상태입니다.

--- Ball 크기와 색상 변경 ----

F(unction) key를 누르면  마우스 스크롤 모드가 토글 되며 변경됩니다.
 모드1. Ball Size 조절 모드
 모드2. Ball 색상 조절 모드

모드에 따라 선택된 Ball(들)에 마우스 올린 후 스크롤을 해보면  크기 or 색상이 변화됩니다.


--- 기능키 숨기기 모드 ---

H(idden)키를 눌러주면, 안내키들을 숨기기/보이기 를 반복. 이미 기능키들을 충분히 익힌 후에 사용하면 좋은 기능

--- 도움말 ----

mini 도움말: 화면에 있는 기능안내키 A, S, D, F 등에 마우스를 올려놓으면 각 키들의 도움말이 화면 하단에 뜹니다.

자세한 도움말:  Q(uestion) Key를 눌러주면 도움말 창이 뜹니다.
                     본 도움말 모드에서 화면상에 떠 도는 키를 클릭해주면,  각 기능키별 상세한 도움말이 보입니다.


-- 안내. 2014년 8월 현재 --
  무료로 서버 호스팅을 지원하던 paran.com 서비스가 종료되어  제가 올렸던 서비스도 종료되게 되었습니다.  차후 재등록 되면 링크를 올리도록 하겠습니다!!







플래시로 AR(증강현실)을 구현해 봤습니다.

3D Engine은 Sandy3D, 마커인식은 FlarToolKit  을 사용했습니다.

증강현실 개발 지원킷인 ARToolKit을 AS용으로 포팅한것이 FlarToolKit인 데요

플래시도 AS3.0 들어와서 속도도 꽤빨라지고, 거의 못하는게 없는것 같습니다.

FlarToolKit 내에 예제용 3D모델까지 포함되어있으니 여러분도 한번 시도해 보시죠~

시중에 돌고있는 Simson 종이인형을 3D모델링하고 관절 몇개 만들어 왕복운동 시켜본 것 입니다.





체험 서버 종료

무료 호스팅 서비스를 이용하던중 해당 회사 서비스가 종료되어  현재 체험이 불가합니다.  죄송합니다!!

동영상에서 보셨듯이 별다른 기능은 없고요, 그냥 목과 팔을 흔드는 심슨 3D 로봇이랍니다. 

차후 서버에 재등록하게되면 링크를 수정하도록하겠습니다.


준비물:

  1. 웹캠 : 플래시에서 인식되는 웹캠이면 됩니다.

  2. 마커(인식용 이미지가 인쇄된 종이) : 첨부파일을 다운로드 하셔서 가능한 두꺼운 종이에 인쇄하세요.


사용 방법:

접속 후 웹캠 사용 허락하기를 선택하신 후,  인쇄된 마커용지를 카메라에 비춰줍니다. 이후 마커의 위치와 방향에 맞쳐서 3D 로봇이 오버레이 되는것을 보실 수 있습니다. 조명이 중요하니 적절히 주변광을 맞춰주시면 인식이 더 잘됩니다.


어떻게 작동하는가?

웹캡으로 실시간 캡쳐한 영상에서 마커(특정 이미지 패턴이 인쇄된 종이)를 찾고, 그 위치와 방향을 계산해 냅니다. 여기까지가 FlarTooKkit(ARToolkit)이 하는 일이고요, 마커의 위치와 방향에 해당되는 영상이미지 위에 3D로 가상의 영상을 오버레이시켜서 실제화면과 가상화면을 동기화 시키게됩니다. 이때 3D 형상을 보여주는데 사용되는것이 Flash 3D 엔진입니다.  본 예에선 Flash 액션스크립트 개발환경을 이용하여 Flash Player상에서 작동되게되므로 별도의 프로그램 설치없이 웹카메라와 웹브라우져만으로 작동되는 장점이 있습니다.  다만 속도가 조금(많이?) 느립니다.  때문에 매우 빠르고 고화질을 원하는경우는 C/C++기반의 개발환경을 이용하곤 합니다. 다만 이경우엔 별도의 실행파일을 설치하여야 한다는 단점이 있습니다.


[]첨부파일: 증강현실FlarToolkit용 마커이미지(pdf파일)

flarlogo-marker.pdf


[]참고자료

FlarToolKitSandy3D  , Away3D

심슨종이로봇: http://cubeecraft.com/  직접인쇄해서 종이로봇 만들어보시면 로봇 장난감이 뚝딱~.


+ Recent posts