2012년 12월 1일 토요일

EAD - 특수목적 게임정보 DB


http://www.mabicolor.com
Javascript(jQuery) + PHP + MySQL(RDB) + HTML5 +XSLT
2012.11.21~2012.11.26

마비노기의 각 아이템에 지정된 순수색을 계산하여 이를 염색하는 아이템 '지정 색상 염색 앰플'의 실제 색을 분석, 검색하여, 커뮤니티 상에서 실제로 사용되는 통칭이나 정보를 검색하는 특수용도의 게임 팬사이트입니다.

4GB정도의 트래픽의 계정을 사용하여 작성하였고,
현 시점에서는 구체적인 이용자량의 통계가 나와있지 않기 때문에 올릴 수가 없습니다만.
이는 차후에 갱신을 통해 추가하도록 하겠습니다.

첫날 트래픽 사용량 100M, 방문수 420,
이튿날 트래픽 사용량 70M, 방문수 325

PicasaWebAlbum API를 활용하여 이미지의 트래픽을 외부로 분산하였습니다.
등록하는 아이템의 정보는 모두 Picasa측에 캐싱되어 Picasa측의 트래픽을 이용합니다.

서버에서 전송되는 정보는 텍스트이외에는 html5 canvas의 crossdomain문제점을 해결 하기 위한 일부 이미지를 제외하고는 없습니다.

내부적으로 데이터 캐싱을 통하여 대인원 접근시에도 안정될 수 있게끔 작업하였습니다.

이 사이트는 일본어에 대응하고 있으므로, 일본어 구사에 관해서 참고적으로 봐주시면 됩니다.

2012년 9월 17일 월요일

Spherical Coordinate system based Progressive Mesh loader


2012/09/24 Fully Optimized

2012/09/18

2012/09/17
2012. 9
Visual Studio(C++) 2008 Express Edition
DirectX SDK June 2010 (9.0c)
OpenMP

knot.x 1.68 MB (1,768,573 bytes)
knot.p3d(오리지널 바이너리)  510 KB (522,944 bytes)

샘플 코드는 별도로 공개하지 않겠습니다. 코드는 각 회사 지원시 제출할 예정입니다.
메쉬정보를 구면좌표계로 변환하여, 변환된 Theta, Phi값에 대해 최대값인 (+-)PI값을 심도별로 비트화후 직렬화, 읽어들인 바이트수만큼 표시 가능하게끔 메쉬를 구성합니다.

비트열은 최대값을 PI, 최소값을 -PI값으로 가정한 상태로, PI값으로부터 절반이 되는 값을 의미하는 비트를 채워나갑니다. 프로그램의 폭주를 방지하기 위해 비트수를 한정하도록 코드를 구성하였으며, 이 샘플코드에서는 최대 32비트까지 구성 가능하도록 설정하였고. 실제로 프로그램을 구동하였을때 knot.x의 경우 26비트의 정밀도로 재생이 가능했습니다.

프로그램 구동시 knot.p3d파일이 없을 경우 knot.x파일로부터 새로운 knot.p3d파일을 생성해 캐시합니다. 이후에는 별다른 조작이 없을경우 knot.p3d파일은 삭제되지 않으며, 파일이 유지되고 있을경우 별도 생성 작업을 거치지 않고 캐시된 파일을 사용합니다.

샘플 코드는 효율적인 DirectX환경의 랜더링 환경을 확보하기 위해 OptimizedMesh(DirectX 공식샘플)을 기반으로 작성되었으며, 로더를 포함하는 파서, 직렬화 코드는 모두 직접 작성되었습니다.

통상적으로 메쉬를 프로그레시브 로드가 가능하도록 구성할때는 인덱스의 구성에서 접근을 하는게 일반적인 방법론입니다만, 이 샘플에서는 vertex자체에 대해 프로그레시브 로드가 가능하게끔 만든것이 특징입니다. 인덱스값은 raw값을 사용하고 있기 때문에, 기존의 인덱스 프로그레시브 메쉬를 구성하려고 하였을 시에 별도 적용이 가능할것으로 생각되며, 심도별로 인덱스와 벡터비트를 나누어서 순차적으로 저장했을시 인덱스 및 벡터 데이터를 동시에 프로그레시브 로드가 가능할 것으로도 생각이 됩니다.

이 샘플에서는 벡터 프로그레시브 로더를 작성 했을때의 효과를 명확하게 하기위해 인덱스 프로그레시브 구성은 하지 않았습니다. 최대 26비트(표시상 25은 0~25의 25) 중 15비트에 도달한 시점에서는 최종형과 거의 차이를 느낄수 없는 것을 확인 할 수 있습니다. 모델링 시에 이 포맷을 염두하고 모델링을 하였을 시에 의도적으로 비트수를 줄여 용량의 조절도 가능 할거라 생각됩니다.

데이터의 로드는 18일 시점에서 더블 버퍼링을 적용 시켜 fps를 안정시켰고, 기본적으로 네트워크상에서 조금씩 자료를 읽어오는것으로 가정하여 0.1초 간격으로 10KB씩 읽어들이게끔 소스코드를 구성하였습니다.

내부적으로 Thread, OpenMP(안정성을 이유로 제거), DirectX 9.0c, DXUT등을 사용하고 있습니다.

촬영된 샘플 동영상은 아직 작업중인 화면으로, 최종제출물과는 그 성능이나 동작, 화면구성이 틀릴 수 있습니다.

2012년 8월 31일 금요일

Experimental Sample : 3D to 2D Vectorize


2012. 4 ~
Visual C++ 2008 Express Edition
OpenVG, Asset Importer(http://assimp.sourceforge.net)

Description
3D모델 데이터를 2D벡터화 후에 결과물을 보정하기 위한 중간과정의 샘플
현재 2D벡터화 시키는 작업까지 진행하였으나 아직 여러 문제가 남아있는 상태입니다.
모델 로더는 Asset Importer을 사용하였고, 벡터 데이터의 표시는 OpenVG를 이용하고 있습니다.
OpenVG Implementation은 ShivaVG(http://sourceforge.jp/projects/sfnet_shivavg/)를 이용하고 있습니다.
일부분만 OpenGL을 통하여 가속화 되어 있는 상태로, 그렇게 고속이진 못합니다

소스 파일은 아래 URL에서 다운로드 가능합니다.
https://sites.google.com/site/kcbacks1/files/3dto2d.zip

현재 이 코드는 다음과 같은 동작을 거쳐서 동작합니다.

1. 3D모델 데이터의 로드(Asset Importer 사용)
2. 최적화 되지 않은 모델에 대한 정점 공유화 작업 (::unifyPoints)
3. 모든 정점에 대한 행렬변환 적용 (테스트 샘플에서는 이 과정은 생략하고 있습니다)
4. 시계방향으로 회전하는 삼각형을 추출후, 각 삼각형의 사용횟수를 Index값을 기준으로 작성
5. 중복 사용된 선(Line)의 제거(2회 이상 사용된 횟수의 선을 제거)
6. 별도 작성한 클래스 CircleIndexFactory를 사용하여 정점Index를 폴리곤 별로 정렬, 하나의 폴리곤 또는 남는 선의 그룹을 만듦
 -> CircleIndexFactory를 별도 작성한 이유는, static동작이긴 하지만 회귀함수 호출을 알기쉽게 정리하기 위해서입니다.
 -> CircleIndexFactory는 최초의 선을 기준으로
1->2
2->3
3->4,   3->10,   3->20(추가 탐색 하지 않음)
4->5,   10->11,
5->x(x),11->1(o),
 -> 와 같은 작업을 수행합니다.
 -> (x)와 같은 결과가 나오는 경우 3->4 단계로 돌아가 3->10으로 재탐색을 실시합니다. 이후 11->1과 같이 복귀하는 값이 나왔을 경우 탐색을 중지합니다.
 -> 3->4 4->5 와 같이 폴리곤이 성립되지 않는 선은 별도의 배열에 기록되어 선으로 취급됩니다.
 -> 각 라인은 사용수가 기록되며, CircleIndexFactory는 모든 선이 사용될때까지 탐색을 실시합니다.

7. 폴리곤/라인 분류가 완료된 선들을 OpenVG의 메모리로 전송하여, 이를 표시합니다.

Fan Application : Mabinogi Character Simulator (Milletian)




2011.12-2012.3
Flashdevelop IDE (Flex 4.6.0 SDK)
Google Drive SpreadSheet : Script XML etc
Picasa Web (Image resources) : PNG file etc
Google Site (Binary resources) : PMG file etc

Description /
현재 개발이 중단된 AS3 베이스의 캐릭터 시뮬레이터 Milletian입니다.
화면상 탭에 보이는 목록들의 시뮬레이션과 3D캐릭터의 커스터마이징 시뮬레이션을
플래시상에서 개발하여 전 웹 브라우저 및 모바일용으로 개발하려던 예정이었습니다만

2011년 말 Adobe가 플래시 개발을 모바일에서 철수한 것을 이유로 개발이 중단되었습니다.
개발은 2011년 말부터 2012년 초까지였는데 이야기를 뒤늦게 들은게 문제기도 하였고
당시 개발환경이 개인 PC가 아닌 군부대 '사이버 지식 정보방' 이었기에, 포트폴리오용의 작업으로 가능한건 이정도의 물건이었습니다.

개발은 Flash Develop IDE와 기존 마비노기의 포맷형식인 PMG를 분석하기위해 도처에 있던 HEX에디터를 이용해 이루어졌고 라이브러리는 Away3D를 이용하였습니다. 그냥 Stage3D를 직접 이용하는 방법도 생각 하였지만. 기존 포맷들을 읽어들이고 하는 작업에서 이용 가능한 자원을 이용하는것이 효과적이라 생각되어 이 라이브러리를 사용하였습니다.
PMG포맷의 경우에는 당연히 기존에 나와있는 파서가 없었기에 직접 분석하였고(실제로 개발된것은 있었으나 소스가 공개되어있지 않았습니다)

내부구현내용
Google Drive(구 Google Docs)에서 읽어오는 ATOM형식(RSS)의 XML파일을 스크립트 형식으로 읽어 들여 명령어를 일괄 실행합니다. 이는 AS의 작업 없이 내부 갱신을 용이하게 하기 위해서입니다. Google Drive를 이용하고 있는것은 내부적으로 Excel급의 편집기능이 준비되어있어서이고, 이는 XML의 편집을 용이하게 해줍니다. 웹에 실제로 올리려 했을때는 Flash의 보안정책관련으로 따로 Proxy해야할 필요가 있었습니다.
 내부적으로는 ChainMemory라는 이름의 폼-메모리 링크형식이 존재하는데, 이는 엑셀과 비슷한 느낌의 계산동작을 하기위해 만들어진 메모리 구조입니다. 이 앱은 연결된 말단의 한 폼의 수치가 갱신되면, 이와 연결된 타 메모리들의 수치들을 업데이트합니다. 처리량을 최소화 하기 위해, 수치에 지속적인 변화가 주어지고 있는지를 모니터 하여, 입력이 없을때 일괄 작업하게끔 작업 되어 있습니다. 계산의 양이 많아지면 한번의 동작을 하는데도 막대한양의 처리양이 발생하기때문에, 이와 같은 처리가 필요했습니다.
 또한 앱에 맞는 형식의 UI가 무료 공개된 것이 없어, 슬라이드 탭이나 버튼 등은 자체구현 하였습니다.
 Away3D를 이용하여 표시하고 있는 모델데이터는 Away3D의 Parser를 베이스로 작성되었습니다. PMG를 분석하는 부분은 전적으로 직접 작성된것이며, 이를 적재하며 표시하는 부분은 Away3D에 의존되고 있습니다. PMG는 정점의 위치, 인덱스, 일부 헤더정도가 분석되었고, UV맵은 분석이 진행되지 않은채 프로젝트의 진행이 중단되었습니다.

현재 이 소스는 Google Code 에 공개해둔 상태입니다.
직접적인 개발예정은 아직 잡혀있지 않습니다.

http://code.google.com/p/milletian/

Blog Widget : Erinnon Preview


2011.12-2012.3
Javascript, jQuery, lower than html 4.x
Google App Engine/Java

http://erinnutil.appspot.com/

Description /
한국 마비노기 한정의 SNS기능, 에린온을 프록시하여 블로그 위젯용으로 배부하고 있습니다.
jQuery가 사용되었으며, html 4.x 이하의 환경에서 작성되었습니다.

이미지 리소스는 Picasa웹에서 끌어오고 있으며, 프록시는 google app engine의 개인서버를 쓰고있습니다. 무료플랜만으로 이용하고 있기에 서버가 다운될때가 있습니다.

작성은 2012년 초, 군부대에서 메모장으로 작성하였습니다. google app engine의 경우는 이클립스를 사용하여야 하는 관계로 제대 해서부터 완료하였습니다.

에린온상에서 메세지의 앞에 :)를 붙이면 팔로우 하지 않은 상대에게 위젯상에서 표시하게끔 할수 있는 기능이 있습니다. 이 경우 메세지는 위젯상에 표시되었던 메세지가 캐시됩니다.

네이버 블로그 등 위젯을 직접 사용할 수 없는 경우를 위해 RSS도 제공하고 있습니다.

2012년 8월 30일 목요일

Academy website (US)



2012.4-2012.6
PHP, MySQL, jQuery, javascript, HTML5

약 3개월간 미국 한인 학원의 웹사이트를 작업했습니다.
내부적으로 성적관리 기능 및 그룹메일 기능, 자체적인 회원관리 기능 및 SNS기능, PayPal을 통한 결제기능, 공지 및 일련의 게시판 관리기능 등을 구현했습니다.


http://jcm.nyeton.com/