근데 아쉽게도 여기에 약간의 문제가 있습니다. Collada는 3D 데이터를 표현하는 단순한 XML 스키마 즉 구조 일 뿐입니다. 그러다보니 각각의 프로그램들이 이 포멧을 표현하는 방식에서 조금씩 차이를 보입니다. 이 표현의 차이가 우리가 PV3D 나 AW3D 에서 파일을 가져다 쓰기 어렵게 만듭니다. 여러번 테스트 해 본 결과 일단 단순한 정지 상태의 오브젝트는 왠만해서는 잘 가져와지는 것 같습니다. 하지만 본애니메이션이 포함되면 이야기가 달라집니다. PV3D 에서 사용할 경우는 Autodesk 의 FBX Converter 로 컨버터를 한번 해주면 대부분 잘 출력됩니다. Collada 가 Mesh 와 Animation 을 표현하는 방법이 몇가지 있는데 FBX Converter의 경우 Mesh 는 폴리곤 Animation 은 각 frame 별로 bake 된 데이터를 저장 하는 것 같습니다. 그리고 PV3D 와 AW3D 모두에서 사용 하려면 Autodesk 3ds Max 에서 ColladaMax 로 ( 또는 Maya 에서 ColladaMaya ) 로 익스포트 하는 방법이 최선입니다. ColladaMax는 Feeling Software 란 곳에서 제작, 배포했었는데 언젠가 부터 다운로드가 사라졌더군요. 여튼 이것저것 고민 하기 싫으시면 그냥 위의 솔루션으로 작업하시면 모든게 해결 됩니다.
하지만 저는 3ds Max 를 사용하지 않는다. ColladaMax 가 업데이트 되지 않고 있다는 쓸데 없는 이유로 다른 3D 프로그램에서 Collada 를 가져오는 방법을 고민해 봤습니다. 결과는 참패입니다. 무려 5일간을 잠도 안자고 고민했지만 답이 없습니다. 죄송합니다 ㅜ.,ㅜ 아래 부터는 결과 데이터 입니다.
테스트 환경
- Cinema4D R11.523
- Blender 2.52b
- 3ds max 2009
- Flash CS5
- Autodesk FBX Converter 2011.3
- Papervision3D 2
- Away3D 3.5
Setting
결과
collada 는 해당 프로그램의 기본 collada 익스포트입니다. fbx 는 먼저 FBX 로 익스포트 한후 Autodesk FBX Converter 로 컨버터 한 파일입니다. 3dsmax 의 경우 기본 익스포트가 autodesk collada 입니다. 이 익스포트는 실제로 FBX Converter 로 나온 collada 와 동일 합니다. 3dsmax_collada 가 ColladaMax 를 통해서 나온 collada 입니다. 실제 익스포트 이름으로 구분했습니다.
표를 보시면 바로 느껴지는게 PV3D는 대부분의 경우 출력을 합니다. AW3D 의 경우 FBX Converter 로 나온 파일을 출력하지 못합니다. 이유는 PV3D 의 경우 ascollada 라는 프로젝트를 통해 파싱하기 때문에 거의 모든 옵션을 파싱하는 거 같습니다. 하지만 AW3D의 경우 폴리곤으로 지정된 Mesh 를 파싱하지 못합니다. 이거 출력하게 만들라고 이틀 까먹었습니다 ㅜ,.ㅜ 그리고 blender_collada 의 경우는 애니메이션이 안되는데 blender 에서 익스포트하는 속성값이 AW3D에 정의 되어 있지 않았습니다. 이건 약간의 소스 수정만 해주면 기본적인 애니메이션은 작동을 해주었습니다. 하지만 최종적으로 원하는 본애니메이션의 경우는 제대로 되지 않았습니다.
결국 위 표에서 보는 바와 같이 모든 라이브러리에서 정상적으로 작동하는 collada 는 ColladaMax 로 익스포트 하는 경우 밖에 없었습니다.
Papervision3D
(W, A, S, D, 마우스 드래그)
Away3D
(마우스 드래그)
테스트에 사용된 캐릭터는 3008폴리 입니다. 테스트 하면서 느낀점은 의외로 PV3D 의 퍼포먼스가 더 좋다라는 점 입니다. 특히 AW3D 의 경우 FlashPlayer10 전용으로 퍼블리싱 했다는 점을 감안 하면 위의 결과는 매우 재미있습니다. PV3D 에서는 AW3D 의 다양한 쉐이더를 사용 할 수 없는게 아쉽고 AW3D 는 Collada 를 맘컷 사용 할 수 없는게 아쉽군요. 앞으로 이 두 엔진이 서로의 장단점을 잘 커버해서 더 좋은 엔진으로 발전 하길 기대합니다.
]]>채널을 로드하는데 시간이 조금 걸리니 잠시만 기다려주시기 바랍니다. #channels: 155 #frames: 30, startTime: 0 endTime: 0.966667 애니메이션을 로드 하는데 시간이 상당히 걸리는데 아직까지는 줄이는 법을 모르겠다. 실작업에 사용하기에는 참 부담스러운 시간이다.
지금까지 공부한 여러가지를 복합적으로 적용시켜보았다. 가장 어려웠던건 카메라 돌리기였다. 일단 lookAt 이 센터로 잡혀 있어서 x, y, z 만 이동 시켜 주면 된느데 이걸 원으로 그리는 게 무지 힘들었다. 원은 어떻게든 그리겠는데 구는 아직도 제대로 구현이 안되고 있다.
W, A, S, D 를 누르면 캐릭터가 걷는데 핵심은 W를 눌러서 앞으로 갈때 걷는 애니메이션을 보여주는 부분이다. 나머지 키로 방향 전환을 하는데 정확하게 컨트롤을 하지 않아서 가끔 문워크를 한다. 이럴때는 S 키를 한번 눌러주면 해결된다.
]]>Papervision3D 2 Great White 의 재질 테스트이다.
기본 소스는 http://dev.papervision3d.org/2008/06/25/pv3d-20-materials/ 를 참고하였다.
특이점은 Environmental Map 과 BitmapFileMaterial 인데 전자는 lightmap이 제대로 만들어지지 않는 것 같고 [ 추가 – lightmap 보다는 pointLight 가 정상 작동 하지 않는 것 같다. Goraud 매터리얼 만 해도 그림자가 고정적으로 보여 하는데 맵핑 되어진 상태로 있다. ] 후자는 이미지 색이 빠진다. 후자는 목록에서 Select Material 를 누르면 다시 볼 수 있다.
일단 이 소스에서는 단일 맵핑만 되어있는데 실제 3D에서는 여러 맵핑이 공존해야 하는데 이게 가능한지의 여부는 아직 모르겠다. 추가 – 혹시 해서 다시 확인해 봤는데 Composite Material 에 여러 재질을 추가 할 수 있다.
light 에 관련한 material 들이 제대로 동작하지 않는건 본 예제에 사용한 collada와 관련 있는 듯하다. 단순한 collada 에서는 light 가 제대로 작동해서 이에 관련 된 material 도 정상작동한다.
]]>Papervision3D를 접하면서 많은 플래셔들이 공통적으로 한번씩 만들어 볼 것 같은 것 중에 하나가 CoverFlow 이다. CoverFlow는 iTuens 에서 그 원형을 찾을 수 있다. 이후 맥OS에도 적용 되었으니 그 인기를 짐작 할 수 있다. CoverFlow 는 이름에서도 알 수 있듯이 원래 앨범자켓을 보여주기 위한 UI였다. 매우 애플적인 감각으로 누가 봐도 멋진 모습에 감탄하게 된다.
본인도 처음 Papervison3D를 접했을때 맨 처음 만들어 본게 CoverFlow 비스무리한 것 이었다. 물론 허접해서 어디 보여주기도 민망하지만..ㅋㅋㅋ 외국에서 Papervision3D를 이용해 CoverFlow를 구현해 놓은 예제를 발견했다. 하나는 일반 as용 클래스이고 하나는 FLEX 용 컴퍼넌트이다.
AS3
http://johndyer.name/post/2007/11/Yet-Another-Coverflow-using-Papervision.aspx
FLEX
몇일 전에 위와 비슷한 FLEX 컴퍼논트 상용으로 판매하는 것을 봤는데 그런 사용판에는 못 미치지만 나름 응용할 곳은 많을 듯 싶다.
]]>Collada를 이용한 애니메이션이다. 이것을 테스트 하기 위해서 로우폴리곤 소스를 열심히 찾았는데 결국 국내에서는 쓸만한 것을 찾을 수가 없었다. 어찌어찌 하다가 재미난 프로젝트를 발견했는데 FFX Project 이다. FFX 에서 나오는 모델링 데이터를 뽑아내는 프로젝트 인거 같은데 스퀘어에서 만들어낸 양질의 모델링 데이터를 가져다 쓸 수 있어서 완전 좋았다. 이 프로젝트에 대해서는 추후에 한번 더 포스트 할 기회가 있을 것 같다.
위의 테스트 플래쉬에서 사용된 소스는 총 3030 triangles 와 2 png 로 이루어져있다. 테스트 해 본 결과 3000개 까지는 어느 정도 소화 하는 것 같지만 더 많아지면 스크립트를 파싱하는 시간 15초를 초과 하게 되서 플래시플레이어가 스크립을 강제종료시켜 버리는 문제가 있었다. 그렇지 않고 로드가 된다고 해도 위에서 처럼 퍼포먼스가 너무 떨어져서 1000개 이상의 폴리곤은 사용은 좀 어려울 것 같다.
위 이미지는 똑같은 Collada 파일을 3D MAX에서 렌더링 한 것으로 확실히 광원효과와 하드웨어 가속을 받는 3D 프로그램이 더 좋은 퀄리티를 보여준다. 당연한건가? ㅡ.ㅡa ㅋㅋㅋ
요청으로 위의 작업물 소스를 올립니다. 이 소스에는 Papervision3D가 없습니다. Papervision3D는 다음의 주소에서 받으 실 수 있습니다. http://pv3d.org/2007/12/12/1-downloading-papervision3d-20-alpha-great-white/ 버전은 반드시 2.0 GreattWhite로 사용하셔야 합니다.
]]>Adobe 가 Flash 를 인수하면서 새롭게 바뀐 것 중에 하나가 바로 ActionScript(AS) 이다. 이전 AS가 단순히 모션에 도움을 주는 Script 였다면 최근 AS3는 Language 에 더 가까워 지고 있는 것 같다. 이는 FLEX나 AIR를 통해 더욱 확실히 알 수 있다. 이런 변화를 통해 AS를 이전까지는 힘들게 여겨지던 기술들도 속속 AS3를 통해서 등장하고 있다. 그 중 하나가 플래쉬를 이용한 3D이다. 예전부터 이러한 시도는 꾸준히 있어왔는데 사실 AS2 의 한계로 실제 필드에서 사용하기에는 무리가 많았다. 하지만 최근 여러 3D라이브러리가 나오면서 불가능하게만 여겨지던 3D영역이 손쉽게 개발되고 있다.
현재 널리 알려져 있는 라이브러리로는 Sandy3D, Papervision3D, Away3D 등이 있는데 각각 장단점이 있는 것 같으나 전부 속속들이 들여다 보지는 못해서 아직 정확한 성능의 차이나 사용상의 용이성등의 평가는 어렵다. 이번 글에서는 셋중 실제 홈페이지에 가장 많이 적용되고 있는 Papervision3D (PV3D)를 기준으로 작성하였다. PV3D는 실무에서도 많이 쓰이고 있을 뿐 아니라 개발 또 한 활발히 이뤄지고 있어 앞으로 더욱 기대되는 라이브러리 이다. 참고로 사용된 PV3D의 버전은 2.0a GreatWhite 이다.
II. Object Build Solution
이번에 테스트 해본 오브젝트 생성 방법은 총 4가지 이다. 첫번째는 PV3D에 기본으로 있는 Object Class를 이용한 방법이고, 두번째는 AS3 Geom Class Exporter를 이용한 방법, 세번째는 DAE 파일을 PV3D의 기본 collada 클래스로 생성한 방법이고 마지막은 같은 DAE 파일을 ASCollada의 DAE 클래스로 생성한 방법이다.
1. 기본 내장 클래스
PV3D는 기본적으로 org.papervision3d.objects 패키지에서 오브젝트를 선언하고 있다. 하위로 종류별로 parsers, primitives, spceial로 구분되며 이 구문에서는 primitives 안의 기본 오브젝트들로 생성하였다.
[sourcecode language=”as3″]var cube:Cube = new Cube(materialList, 100, 100, 100);
var cone:Cone = new Cone(new WireframeMaterial(0xFF0000));
var sphere:Sphere = new Sphere(new WireframeMaterial(0xFF0000));[/sourcecode]
가장 빠른 성능을 보이지만 기본으로 제공하는 이외의 형태를 만들지 못하기 때문에 UI 나 Navigation 이 외에는 활용성 면에서는 조금 부족하지 않나 싶다. 결국 사용자화된 오브젝트를 쓰기 위해서는 외부파일을 로드 해야만 한다.
2. AS3 Geom Class Exporter
이는 3D MAX 에서 AS3 Geom Exporter라는 Max Script를 설치하여서 각 라이브러리 별 .as파일로 바로 export하는 방법이다. 이 방법 또한 각 라이브러리에 맞게 .as파일을 만들어 주기 때문에 성능면에서는 좋지만 이름에서 처럼 Geom 에 대한 데이터만 만들어 주기 때문에 위치나 맵핑에 관한 정보없이 단순한 오브젝트만 만들어 주는 것같다. 결국 애니메이션과 맵핑을 위해서 손이 한번 더 가야 한다.
[sourcecode language=”as3″]test = new Test(new WireframeMaterial(0xFF0000));[/sourcecode]
3. Collada
collada 는 뒤에 좀 더 자세히 설명하겠지만 간단히 말해서 3D데이터를 표준 XML 로 만들어주는 프로젝트이다. 확장자는 .dae 를 사용한다. 이 방법은 PV3D에서 기본으로 지원하던 collada 클래스를 이용하는 방법이다.
[sourcecode language=”as3″]collada = new Collada(“test.DAE” , materialList);[/sourcecode]
4. DAE
이 방법은 위의 방법과 .dae 파일을 사용한다는 점에서 동일하나 .dae 파일을 파싱하는 클래스가 Collada 가 아닌 DAE 이다. 두 파일의 차이는 DAE는 ASCollada 프로젝트의 파일을 PV3D에 합친것으로 이는 PV3D 2.0a 이후 버전에 적용되었다. 또한 위의 방법과 결정적 차이는 .dae파일의 Animation 을 컨트롤 할 수 있다는 점이다.
[sourcecode language=”as3″]dae = new DAE();
dae.animate = true;
dae.load(“test.DAE”, materialList);[/sourcecode]
III. Collada
collada의 정의를 홈페이지에서 보면 다음과 같이 규정하고 있다. ‘COLLADA is an open digital-asset exchange schema for the interactive 3D industry’ collada 에는 대부분의 3D 데이터가 저장되는데 특히 맵핑과 애니메이션이 매우 유용하다. 3D MAX 와 같은 프로그램에서 모델링과 맵핑을 하고 이를 collada로 export 한 후 PV3D 를 통해 Flash 에 바로 적용 할 수 있기 때문이다. 참고로 3D MAX 에서 collada 파일을 export 하기 위해서는 ColladaMax 같은 플러그인을 별도로 설치 해야한다.
IV. Example
위에서 말한 4가지 방법으로 예제를 만들어 보았다. 아래 소스를 보면 알 수 있겠지만 똑같은 조건하에 오브젝트만 생성하고 있는데 생성되어지는 기본값이 조금씩 상이한 것을 알 수 있다. 특히 같은 .dae 파일을 사용하는 Collada 와 DAE 클래스의 다른 점을 눈여겨 볼 필요가 있을 것 같다.
[sourcecode language=”as3″]
package {
import fl.events.ScrollEvent;
import fl.events.SliderEvent;
import flash.display.*;
import flash.filters.*;
import flash.display.Stage;
import flash.events.*;
import flash.ui.Mouse;
import org.papervision3d.core.proto.DisplayObjectContainer3D;
import org.papervision3d.objects.parsers.Collada;
import org.papervision3d.objects.parsers.DAE;
// Import Papervision3D
import org.papervision3d.cameras.*;
import org.papervision3d.scenes.*;
import org.papervision3d.objects.*;
import org.papervision3d.objects.special.*;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.materials.*;
import org.papervision3d.materials.special.*;
import org.papervision3d.materials.shaders.*;
import org.papervision3d.materials.utils.*;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.lights.*;
import org.papervision3d.render.*;
import org.papervision3d.view.*;
import org.papervision3d.events.*;
import org.papervision3d.core.utils.*;
import org.papervision3d.core.utils.virtualmouse.VirtualMouse;
import Test;
public class TestObject extends MovieClip {
public var viewport :Viewport3D;
public var scene :Scene3D;
public var camera :Camera3D;
public var renderer :BasicRenderEngine;
private var materialList : MaterialsList;
private var cont:DisplayObject3D;
private var test:Test;
private var collada:Collada;
private var dae:DAE;
public function TestObject() {
init();
}
public function init():void {
stage.scaleMode = “noScale”
stage.showDefaultContextMenu = false;
init3D();
addEventListener( Event.ENTER_FRAME, loop );
for (var i:int = 1; i < 5; i++) {
this.getChildByName("btn"+i).addEventListener( MouseEvent.CLICK, clickHandler );
}
function clickHandler( e:MouseEvent ):void {
changeObject( e.currentTarget.name );
}
this.getChildByName("carZoom").addEventListener( SliderEvent.CHANGE, carZoomHandler );
function carZoomHandler( e:SliderEvent ):void {
camera.zoom = e.currentTarget.value - 100;
doTrace( String( "camera.zoom : "+camera.zoom ));
}
}
public function doTrace( val:String ):void {
var temp:String = TextArea(this.getChildByName("traceTA")).text;
temp = val + "n" + temp;
TextArea(this.getChildByName("traceTA")).text = temp;
}
private function changeObject( _name:String ):void {
removeObject();
switch (_name) {
case "btn1" :
cont = new DisplayObject3D();
var cube:Cube = new Cube(materialList, 100, 100, 100);
var cone:Cone = new Cone(new WireframeMaterial(0xFF0000));
var sphere:Sphere = new Sphere(new WireframeMaterial(0xFF0000));
cube.x = 400;
cone.z = 400;
sphere.z = -100
cont.addChild( cube );
cont.addChild( cone );
cont.addChild( sphere );
scene.addChild(cont);
doTrace("-------------------------");
doTrace("var cube:Cube = new Cube(materialList, 100, 100, 100);nvar cone:Cone = new Cone(new WireframeMaterial(0xFF0000));nvar sphere:Sphere = new Sphere(new WireframeMaterial(0xFF0000));");
doTrace("-------------------------");
break;
case "btn2" :
//Create Test
test = new Test(new WireframeMaterial(0xFF0000));
scene.addChild(test);
doTrace("-------------------------");
doTrace("test = new Test(new WireframeMaterial(0xFF0000));");
doTrace("-------------------------");
break;
case "btn3" :
//Create Collada
collada = new Collada("https://sewonist.com/examples/TestObject/test.DAE” , materialList);
scene.addChild(collada);
doTrace(“————————-“);
doTrace(“collada = new Collada(“test.DAE” , materialList);”);
doTrace(“————————-“);
break;
case “btn4” :
//Create DAE
dae = new DAE();
dae.animate = true;
dae.load(“https://sewonist.com/examples/TestObject/test.DAE“, materialList);
scene.addChild(dae);
doTrace(“————————-“);
doTrace(“dae = new DAE();ndae.animate = true;ndae.load(“test.DAE”, materialList);”);
doTrace(“————————-“);
break;
}
}
private function removeObject():void {
scene.removeChild( cont );
scene.removeChild( test );
scene.removeChild( collada );
scene.removeChild( dae );
}
// ___________________________________________________________________ Init3D
public function init3D():void {
// Create viewport
viewport = new Viewport3D();
addChild( viewport );
// Create Renderer
renderer = new BasicRenderEngine();
// Create scene
scene = new Scene3D(true);
// Create Material
materialList = new MaterialsList();
materialList.addMaterial( new WireframeMaterial(0xFF0000), “ColorMaterial” );
materialList.addMaterial( new WireframeMaterial(0xFF0000), “all” );
// Create camera
camera = new Camera3D();
renderer.renderScene(scene, camera, viewport);
}
// ___________________________________________________________________ Loop
public function loop(event:Event = null):void
{
if ( cont ) {
cont.yaw(1);
}
if ( test ) {
test.yaw(1);
}
if ( collada ) {
collada.yaw(1);
}
if ( dae ) {
dae.yaw(1);
}
renderer.renderScene(scene, camera, viewport);
}
}
}
[/sourcecode]
V. Results
위의 결과표는 매우 주관적인 견해라는 것을 꼭 기억해주기 바란다. 기본클래스를 이용한 경우에도 따로 추가해주면 맵핑과 애니메이션이 가능하다. 또 한 COLLADA를 이용하는 클래스도 사용성이 꼭 나쁘다고 할 수는 없다. 다만 위의 표는 각 방법에 대한 차이를 좀더 쉽게 이해하기 위해서 만들었으니 차이에 대해 참고 정도의 역활이었으면 한다.
확실히 플래쉬에서 구현되는 3D는 많은 제약을 가지고 있다. 특히 하드웨어 가속을 받지 않기 때문에 성능이나 기능 면에서 현란한 3D게임 같은 화면을 기대 하는 것은 무리가 있다. 하지만 날로 좋아지는 컴퓨터의 성능과 AS3의 성능 향상으로 플래쉬에서 3D를 이용한 다양한 시도가 가능 할 것으로 기대 된다. 조만간 웹에서 Coverflow 와 같은 화려한 UI 나 스페셜포스 같은 FPS 게임을 경험하게 될 지도 모른다.
VI. Links
Papervision3D : http://pv3d.org/
Collada : http://www.collada.org/mediawiki/index.php/Main_Page
ColladaMax : http://www.feelingsoftware.com/content/view/65/79/lang,en/
AS3 Geom Exporter : http://seraf.mediabox.fr/showcase/as3-geom-class-exporter-for-3ds-max-english/
ASCollada : http://ascollada.org/