2008년 12월 18일
PV3D. Blog Title 제작기
Blog Title 제작기
Tools - Flash CS3.0 & PhotoShopCS3.0
ActionScrip Ver - AS3.0 (PV3D)
Paper Vision 3D (앞으로 PV3D라고 약칭)를 접한뒤로 이녀석의 매력에 빠져들었다.
국내에 AS3.0이 자리를 잡기도 전에 이미 외국의 개발자님들께서는 이런 좋은 아이템을
만들어 놓고 있었던 것이다. 그것도 완전 오픈소스로 말이다. 먼저 그런 훌륭하신
개발자분들께 심심한 감사의 뜻을 전하고 이야기를 풀어 볼가 한다.
나는 순수 개발자 혈통이(나는 단지 일개 디자이너) 아닌 관계로 고급 스킬을 구사 한다거나
충분히 있을수 있는 여러가지 질문에 적절한 대처를 할수 없음을 밝히는 바이다. 대부분의
코딩은 여러 블로거분들의 블로그를 방문하여 참조 한 것이고, 간단한 설명과 핵심적인
아이디어들만 이자리에서 정리해 볼까 한다. 그리고 나의 미흡한 AS 이해도를 감안하고
잘못된 부분들을 바로 잡아 주고 올바른 정보들 알려 준다면 감사할 것이다.
그 이름도 거창한 Blog Title 제작에 있어서 가장 포인트가 되는것은 아무래도, 많은
오브젝트들을 화면에 뿌려주고 카메라의 Focus에 반응하여 Blur 이펙트를 얼마나
가볍게 구현할 수 있느냐 하는 것이 관건이 되겠다.
일반적으로 생각할때 메터리얼에 블러 이펙트를 주고 카메라와 오브젝트간의 거리를 참조하여
이펙트의 어마운트 값을 OnEnterFrame함수 안에 넣는것을 생각할것이다.
처음에 나도 그렇게 생각 했다.그리고 무수히 많은 오브젝트들에게 블러이펙트를 적용한다면
엄청난 과부화가 생기지 않을까 하는 의문도 들게 되는것이다.
그러던 와중에 여기를 방문하게 되었다. http://mrdoob.com/
200개가 넘는 Plane들이 규칙적으로 배열하며 자연스럽게 Depth & Field 효과가 이루어 지고 있다.
private function snowFloStart():void
// Plane과 Material 생성----------------------------------------------
{
for (var i:Number = 0; i < 100; i++)
{
depth_material[i] = new MovieMaterial(snowFlo, true);
snowFlo.filters = new Array(new BlurFilter(i,i,2));
depth_material[i].oneSide = false;
}
여기서 알수 있듯이 블러 이펙트가 각단계별로 적용된 메터리얼이 미리 생성되어진다.
for(i = 0; i < num; i++ )
{
snowArray[i] = new Plane( depth_material[0], 400, 400 );
scene.addChild( snowArray[i]);
그리고 0값이 들어간 블러메터리얼을 초기에 랜덤포지션으로 생성되는 모든 Plan에
입히게 되는것이다.
snowArray[i].x = Math.random()*3000-1500;
snowArray[i].y = Math.random()*3000-500;
snowArray[i].z = Math.random()*2800-1000;
snowArray[i].scale = Math.random()*1.1;
snowArray[i].lookAt(camera);
}
}
// OnEnterFrame함수에서 카메라와의 거리를 계산하고 Blur이펙트 적용 ------
private function update3D(event:Event)
{
if(cameraSwit == true)
{
camera.x = camera.x +( ((stage.mouseX-380)*1.2) - camera.x)*0.07;
camera.y = camera.y +( ((stage.mouseY-115)*1) - camera.y)*0.07;
}
else
{
camera.x = camera.x + ((0 - camera.x)*0.1)
camera.y = camera.y + ((0 - camera.y)*0.1)
}
for(i = 0; i < num; i++ )
{
****매번 Blur 이펙트가 적용되는 것이 아니라 이미 Blur 처리가 단계적으로 되어 있는 메터리얼을
카메라와의 거리를 계산해서 각 메터리얼을 대입시켜 주는것이다. 이것이 바로 포인트 *****
snowArray[i].material = depth_material[ Math.abs( Math.min(99, (snowArray[i].screenZ-1000) * .02 << 1 )) ];
snowArray[i].lookAt( camera );
if(snowArray[i].y < -800)
{snowArray[i].y = (Math.random()*3000-500) + 1000;}
else { snowArray[i].y = snowArray[i].y - 5; }
}
}
장황하게 블로깅을 시작했지만 생각보다 싱거운듯한 느낌이다. 본인은 이렇게 코딩된 소스를 보고
큰 감흥을 받았지만 말이다. 코드 소스는 위에서 소개한 링크를 타고 들어 가면 Depth & Field
뿐만 아니라 Bump 메터리얼을 이용한 사운드 이컬라이즈 효과와 같은 다양한 예제의 소스가
준비되어 있다. 많은 참고 하길 바란다.
# by | 2008/12/18 02:17 | AS3.0 & PV3D | 트랙백 | 덧글(0)
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]