WWW : World Wide Wonsama

<?xml version="1.0" encoding="utf-8"?>

<mx:Application

       creationComplete="init()"

       frameRate="40"

       xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

       <mx:Script>

             <![CDATA[

                    import sample.VerticesExample;

                    import mx.core.UIComponent;

                    private function init():void{

                           var bs:VerticesExample = new VerticesExample();

                           var ui:UIComponent = new UIComponent();

                           ui.addChild(bs);

                           this.addChild(ui);

                    }

             ]]>

       </mx:Script>

</mx:Application>

package sample

{

       import flash.events.Event;

       import org.papervision3d.objects.DisplayObject3D;

       import org.papervision3d.objects.primitives.Sphere;

       import org.papervision3d.view.BasicView;

       public class VerticesExample extends BasicView

       {

             private var _do3D:DisplayObject3D;

             public function VerticesExample()

             {

                    init();

                    startRendering();

             }

             private function init():void{

                    _do3D = new DisplayObject3D();   //회전 축 생성

                    scene.addChild(_do3D);

                    //작은 원들이 들어갈 큰 원을 생성, 실제  scence 에는 추가되지 않음.

                    var bigSphere:Sphere = new Sphere(null,200,10,10);  

                    //큰 원의 꼭지점 수 계산

                    var vLen:uint = bigSphere.geometry.vertices.length; 

                    for(var i:uint=0;i<vLen;i++){

                           //작은 원 생성

                           var smallSphere:Sphere = new Sphere(null,Math.random()*30,2,2);  

                           //큰 원의 꼭지점 좌표에 작은 원을 위치 한다.

                           smallSphere.x = bigSphere.geometry.vertices[i].x;   

                           smallSphere.y = bigSphere.geometry.vertices[i].y;

                           smallSphere.z = bigSphere.geometry.vertices[i].z;

                           //작은원을 삽입한다. 큰원은 삽입 안됨(큰 원은 꼭지점 참조용)

                           _do3D.addChild(smallSphere);

                    }

             }

             override protected function onRenderTick(event:Event=null):void{

                    _do3D.localRotationY+=1;   //회전축 돌리기

                    super.onRenderTick();

             }

       }

}

Plane(material:MaterialObject3D=null, width:Number=0, height:Number=0, segmentsW:Number=0, segmentsH:Number=0)

[그림 : segments(조각) 의 변화에 따른 Plane (1,1) / (2,1) / (2,2)]

참조 => (0,0)으로 설정하면 (1,1)과 동일함.

[알고 가기 : 1]

Plane에 이미지를 투영 시킬 때 흔히 이미지가 찌그러지는 현상을 목격할 수 있는데 이럴 경우에는 segments(조각)의 숫자를 증가시키면 좀더 부드러운 화면을 볼 수 있다. 하지만 조각의 수가 증가하면 할수록 렌더링 속도가 느려짐에 유의해야 한다. 참고로 한 개의 Scene에서 3000개 이하의 Triangle이 존재하도록 하는 것이 좋다.

[알고 가기 : 2]

Plane을 회전(Rotate)시키는 경우, 기본적으로 한 쪽 면의 wireframe(철골구조물 - 외각 뼈대) Material에 적용되어 있어 다른 면에는 null 이 적용된다. 이런 경우에는 양면모드 설정을 적용시켜줘야 한다.

ex) plane.material.doubleSided = true;

[알고 가기 : 기타]

Z축은 depth를 조절하는 것이다 이는 즉 카메라를 찍을 때 Zoom in, out을 조절하는 것과 유사하다, 실제로 적용해서 보면 사물의 크기가 커졌다 작아졌다 하는 것을 볼 수 있다.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application

       creationComplete="init()"

       frameRate="40"

       xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

       <mx:Script>

             <![CDATA[

                    import sample.PlaneExample;

                    import mx.core.UIComponent;

                    private function init():void{

                           var bs:PlaneExample = new PlaneExample();

                           var ui:UIComponent = new UIComponent();

                           ui.addChild(bs);

                           this.addChild(ui);

                    }

             ]]>

       </mx:Script>

</mx:Application>

package sample

{

       import flash.events.Event;

       import org.papervision3d.objects.primitives.Plane;

       import org.papervision3d.view.BasicView;

       public class PlaneExample extends BasicView

       {

             private var _plane:Plane;

             private var _dir:int=1;

             public function PlaneExample()

             {

                    init();

                    startRendering();

             }

             private function init():void{

                    var p:Plane = new Plane(null,300,300,1,1);    //고정용

                    _plane = new Plane(null,300,300,1,1);   //움직이는 거

                    _plane.material.doubleSided = true;

                    scene.addChild(_plane);

                    scene.addChild(p);

             }

             override protected function onRenderTick(event:Event=null):void{

                    _plane.localRotationY+=1;

                    if(_plane.z>100) _dir=-1;

                    else if(_plane.z<-100) _dir=1;

                    _plane.z+=(_dir*10);

                    super.onRenderTick();

             }

       }

}

Vertices (꼭지점) : 3D도형의 Object는 꼭지점의 조합으로 이뤄져 있으며, 2D가 가진 x, y축에 z축을 추가하여 3D는 x, y, z축 상의 점으로 이뤄져 있다.

Triangles (삼각형) : 3개의 꼭지점으로 이뤄진 면을 말한다. 다른 3D프로그램은 4개의 꼭지점으로 이뤄진 quad face (4면)를 제공하지만 PV3D에서는 Triangles만을 지원한다. 아래 그림과 같이 PV3D에서는 Triangles의 조합을 통해 3D Object를 구성할 수 있다.

[ 그림 : 꼭지점 4개 -> 삼각형 2개 -> 삼각 망 ]

여러 Triangle mesh (삼각 망)을 가지고 넓이 높이와 깊이 설정을 통해 아래와 같이 3D Object를 표현 할 수 있다.

Plane (평면), Sphere (구), Cylinder(원통), Cone(원뿔), Cube(정육면체), Arrow(화살), Paper Plane(종이비행기)

여기서 참조로 종이비행기와 화살표는 특별한 케이스로 3D프로그램에서 자주 나오는 Utah teapot (주전자) 와 유사하게 테스트 등에서 자주 사용됩니다.

PV3D에서는 3D Object를 표현하기 위해 여러 경로를 거치며 이 과정을 Rendering Pipeline 이라 한다.

Initialization (초기화) : 초기에 1번만 발생하는 것으로 Viewport, Scene, Camera, Renderer 등을 생성하며 초기화 설정을 한다.

Projection (투영) : 3D 좌표를 2D 화면에 전환하여 표현하는 것으로, Object의 3D 꼭지점을 연산하여 2D

화면에 보여질 것을 투영하는 것이다.

Rendering (표현) : 스크린에 보여질 이미지를 그리는 과정으로, 2D Projection 데이터를 조합하여 표현한다. 렌더링 과정은 lineTo() : 삼각형 그리기 => beginBitmapFill() : 텍스쳐(면) 추가를 거치게 된다.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application

       creationComplete="init()"

       frameRate="40"

       xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

       <mx:Script>

             <![CDATA[

                    import sample.BasicViewExample;

                    import mx.core.UIComponent;

                    private function init():void{

                           var bs:BasicViewExample = new BasicViewExample();

                           var ui:UIComponent = new UIComponent();

                           ui.addChild(bs);

                           this.addChild(ui);

                    }

             ]]>

       </mx:Script>

</mx:Application>

package sample

{

       import flash.events.Event;

       import org.papervision3d.objects.primitives.Sphere;

       import org.papervision3d.view.BasicView;

       public class BasicViewExample extends BasicView

       {

             private var _sphere:Sphere;

             public function BasicViewExample()

             {

                    _sphere = new Sphere();

                    scene.addChild(_sphere);

                    startRendering();               

             }

             override protected function onRenderTick(event:Event=null):void{

                    _sphere.localRotationX += 1;

                    super.onRenderTick();

             }

       }

}

아래 예제를 실행하면 처음으로 3D Object를 확인 할 수 있다 ^_^ 감격의 기쁨 ~

 [ 그림 : 결과물 ]

- Scene, Camera, Viewport를 생성한다음 Object를 삽입한 이후 Rendering 한다가 기본임을 알고 넘어가면 쉽다.

 

this.addChild(_viewport);

_scene.addChild(_sphere);
_renderer.renderScene(_scene,_camera,_viewport);

1. 우리가 실제 볼 viewPort를 sprite에 넣어준다.
2. Scene에 Object를 삽입한다.
3. 우리가 지정한 Scene, Camera, Viewport 를 기준으로 렌더링을 한다.
=> 결과물은 viewport를 통해 볼 수 있게 된다.

 

Camera : Scene 내부에 존재하는 3D공간을 기록하는 것으로 , 카메라는 현재 Scene를 보고 있는 시점을 정의한다. 3D 공간에서 한 시점을 바라보는 것으로 사진 찍는 것을 생각 하면 쉽다. Zoom 또는 Focus 조절 등을 Camera를 통해 손쉽게 하는 것이라 생각 함 된다. 물론 실제 카메라가 아니기 때문에 더 유용한 점이 있다 예를 들면 사물(Object) 뒤에서 시점을 중심으로 바라보는 것도 가능하다.

Viewport (화상 표시영역) : 카메라가 바라보는 결과물이다. 카메라의 렌즈와 비교되어질 수 있는데, 시점을 멀리 잡으면 많은 부분이 보이며, 가깝게 잡으면 적은 부분 또는 일부가 잘려 우리 눈에 보여지는 것과 유사 하다.

3D Objects : 3D오브젝트는 Sprite와 MovieClip이 진화한 형태로써 기존 x,y 2개의 축에서 z축 하나가 추가되어 평면에서 공간을 표현한 것이라 볼 수 있다.

Material : Object 위에 프린트되는 texture(질감) 이다. 건물과 비교하면 철근형태에서 시멘트를 발라 외형을 표현한 것이라 볼 수 있다. Material은 단순한 색상에서 진화된 형태로는 실시간 스트리밍 비디오까지도 사용할 수 있다.

Render engine : 카메라를 돌리면서 연속적으로 관찰하는 것과 유사하다. 렌더링을 시작 하면 Camera의 Viewport가 연속적으로 변화하며 해당 정보를 보여주는 것이다. 렌더링은 실제로 새로운 이미지가 생성되는 것이 아니라 해당 Object의 변경된 위치를 연산하여 Viewport를 통해 보여주는 것이다.

Left-handed Cartesian coordinate system
(왼손 좌표  시스템)

: PV3D는 왼손 좌표 시스템을 도입하고 있다. 스테이지 기준(좌측 상단)으로 X값 증가 시 Object를 오른쪽으로 이동하며, Y값 증가 시 아래쪽으로 이동시키며, Z값은 Object의 Depth(깊이)를 조절한다.

(원서는 늘 느끼지만.. 빡셈 후후 -_-)
 

DOWN : http://code.google.com/p/papervision3d/

SVN : http://papervision3d.googlecode.com/svn/trunk/as3/trunk

=> SWC는 컴파일된 파일이므로 재 컴파일 할 필요가 없음

=> ZIP은 소스를 확인 할 수 있으며 수정 가능.

=> SVN은 최신 버전을 유지할 수 있음. (ZIP의 소스가 상대적으로 좀더 안정적임)

 

1. 프로젝트에서 우 클릭 - Properties 선택

2. Flex Build Path 선택

ㄱ. Zip 파일을 다운 받은 경우

=> 압축해제 , Source Path 탭에서 Add Folder를 선택하여 압축 해제한 폴더를 선택

ㄴ. Swc 파일을 다운 받은 경우

=> Library path를 선택한 이후 Add SWC를 선택하여 해당 swc를 선택