Flash/Away3D

얼사마 2011. 3. 30. 10:39

Project Setting

  • Flash builder 실행
  • SDK 추가

    • Window -> Preferences -> Flash Builder -> Installed Flex SDKs
    • Add -> Browse -> 위의 SDK 경로 선택 -> 적당한 이름 (eg:Flex 4.5 (FP11)) -> OK -> OK
  • 새로운 ActionScript 프로젝트 생성

    • File -> new -> ActionScript project
    • Flex SDK version

      • Use a specific SDK -> Flex 4.5 (FP11)
    • Finish 클릭
  • 타겟 swf 버전 설정

    • 프로젝트 선택 후, 우클릭
    • Properties -> ActionScript Compiler

      • Adobe Flash Player options

        • Use a specific version: 11.0.0 으로 변경
      • Additional complier arguments 에 "-swf-version=13" 추가. (따옴표는 안 씀)
      • OK
  • html-template 수정

    • Project의 html-template 폴더의 index.template.html 소스를 연다.
    • params.wmode = "direct"; 를 추가한다.

      • wmode="direct"가 아닐 경우, 소프트웨어 렌더링으로 동작한다.



기본 예제 코드

참고 : 블로그 편집기의 버그로 인해 아래 소스 코드의 'import' 에 '!' 부호가 추가되었습니다.

package

{

       import away3d.cameras.Camera3D;

       import away3d.containers.Scene3D;

       import away3d.containers.View3D;

       import away3d.debug.AwayStats;

      

       import flash.display.Sprite;

       import flash.display.StageAlign;

       import flash.display.StageScaleMode;

       import flash.events.Event;

      

       [SWF(frameRate="60",width="800",height="600")]

      

       public class TestAway3D extends Sprite

       {

             private var _scene:Scene3D;  // 오브젝트를 배치할 공간

             private var _camera:Camera3D;  // 촬영할 카메라

             private var _view:View3D;  // 카메라를 통해 렌더링 오브젝트가 실제로 화면에 보여지는 부분

            

             public function TestAway3D()

             {

                    this.initStage();

                    this.init3D();

                    this.addEventListener(Event.ENTER_FRAME, render);

             }

            

             private function initStage():void

             {

                    this.stage.scaleMode = StageScaleMode.NO_SCALE;

                    this.stage.align = StageAlign.TOP_LEFT;

             }

            

             private function init3D():void

             {

                    this._scene = new Scene3D();

                    this._camera = new Camera3D();

                    this._view = new View3D(this._scene, this._camera);

                    this.addChild(this._view);

                   

                    // 아래 코드를 추가하면, 아래와 같은 내용이 수치와 그래프를 통해 나타난다.

                    // _view 실시간 fps 평균 fps

                    // _view 렌더링 되고 있는 폴리곤 개수

                    // FlashPlayer 메모리 사용량의 변화

                    var stat:AwayStats = new AwayStats(this._view);

                    this.addChild(stat);

             }

            

             private function render(e:Event):void

             {

                    this._view.render();

             }

       }

}

 
 
 

Flash/Away3D

얼사마 2011. 3. 24. 15:12

Scene, Camera, View(또는 Viewport)

대게의 3D 관련 툴 사용이나 개발에는 Scene, Camera, View(또는 Viewport) 의 개념이 등장한다.

이 3가지가 서로 연결이 되어, 최종적으로 화면에 보여지는 그림을 만들게 된다.

 

Scene

Scene이란 '무대'를 뜻한다.

어떤 장면을 표현하기 위해 필요한 물체들을 배치 하는 '장소'인 것이다.

 

Camera

Camera란 설명할 것도 없이 '카메라'다.

물체가 배치된 Scene(장소)를 촬영하는 역할을 한다.

 

View(또는 Viewport)

View란 실제로 보여지는 '화면'을 뜻한다.

Scene에 배치된 물체들을 Camera를 통해서 촬영하여, 비로소 View라는 화면에 보여지는 것이다.

 

3가지의 연관성

위의 View에서도 언급했지만, 예를 들어 설명하자면 이렇다.

영화가 만들어지고, 관객들에게 보여지는 과정을 보자.

 

어떤 장소에서 적절한 소품들이 배치된 가운데 배우들이 있다. 이것이 Scene이다.

이 상황을 여러 대의 카메라가 촬영을 한다. 이것이 Camera다.

그리고 편집 과정을 통해, 화면에는 (주로) 여러대의 카메라로 촬영된 장면 중에 하나의 장면이 스크린을 통해 보여지게 된다. 이 때 스크린이 View이다.



Vertex(복수형-Vertices), Segment(또는 edge), Face(또는 Polygon), Mesh(또는 Surface)

 

720px-Mesh_overview.svg.png

 

Vertex

Vertex는 3D 물체를 표현하기 위해, 색상값, 벡터, 텍스쳐 정보등을 가지는 하나의 "점"이다.

 

Segment(또는 edge)

Segment는 두 개의 Vertex가 연결된 "선"이다.

 

Face(또는 Polygon)

Face는 3개 또는 4개의 Segment가 특정 평면위에 연결된 하나의 "면"이다.

3개의 Segment를 가지는 Face를 Triangle face, 4개의 Segment를 가지는 Face를 Quad face라 부른다.

 

Polygon은 Face와 거의 같은 의미이다.

다만 대게의 3D 렌더링 하드웨어가 3개 또는 4개의 Segment를 가지는 Face만 지원하기 때문에,

Polygon이라는 것은 복수개의 Face들(다각형)을 나타내는 것으로 쓰인다.

 

Mesh(또는 Surface)

위의 Vertex(점), Segment(선), Face(면)을 의 묶음을 나타낸다.

아래 그림은 Mesh의 예시.

250px-Dolphin_triangle_mesh.png

 



Material(또는 Texture)


Face 또는 Mesh에 특정한 색이나 이미지를 입혀서, 어떤 재질을 나타내도록 해준다.

예를 들어, 주변 환경을 투영시켜 반짝이는 금속의 재질처럼 보이도록 해주는 것 등이다.

 

Away3D 3.6.x 이전 버전에서는, 재질의 종류에 따라 모두 다른 Class로 분류가 되었으나,

현재(2011-03-24)까지 commit된 버전에서는 기본적으로 BitmapMaterial이나 ColorMaterial 등의 속성을 지정함으로써

다양한 재질의 특성을 나타낼 수 있도록 변경되었다.

 

Ambient

환경광에 의한 색의 변화를 나타낸다.

흰 공이, 붉은 조명에서는 불게, 푸른 조명에서는 푸르게 보이는 등의 효과를 위한 것이다.

 

Diffuse

분산광에 의한 색의 변화를 나타낸다.

 

Specular

반사광에 의한 색의 변화를 나타낸다.

 

color(1).png  

위의 그림은, 흰색 공에 흰색 빛을 위쪽에서 쏘았으나, 주변광이 빨간색이서, 빨간 색처럼 보이게 된다.

또한 specular의 세기에 따라 공이 빛을 반사하는 양이 변경되어,

반사량이 0 이면 고무공처럼, 값이 증가할 수록 당구공처럼 느껴지게 된다.





PointLight, DirectionalLight, SpotLight

 

PointLight

3D 공간상의 특정 지점에 위치하여, 전방위적으로 빛을 발산하는 성격을 가진 Light이다.

쉽게, 전구를 연상하면 되겠다.

 

DirectionalLight

3D 공간상에 위치하지 않으며, 특정한 각도로 Scene의 모든 오브젝트에 같은 양의 빛을 적용시키는 Light이다.

쉽게, 태양을 연상하면 되겠다. (아침, 점심, 저녁...)

 

SpotLight

3D 공간상의 특정 지점에 위치하며, 일정한 범위에 특정한 각도로 빛을 쏘아주는 Light이다.

무대의 핀조명 또는 스포트라이트라 불리는 빛을 연상하면 되겠다.

 

SpotLight는 아직까진 (Away3D 4.0 alpha) 지원되지 않는다.

 


좌표계

컴퓨터 상의 일반적인 2D 좌표계

화면에 표시 될 수 있는 영역의 좌측 상단이 (0,0) 이며,

  • 우측으로 갈수록 x 값이 증가
  • 하단으로 갈수록 y 값이 증가


일반적인 3D 좌표계

2D 모니터에 3D 이미지를 투영하여 보여주는 것이므로,

모니터의 2D 좌표계와 3D 좌표계를 일치시킬 수 없다.

따라서, 3D상에서는 가상의 좌표계를 사용하며, 우리가 수학적으로 알고 있는 좌표계와 동일한 좌표계를 사용한다.


특정한 한 지점이 (0,0,0) 일 때,

  • 우측으로 갈수록 x 값이 증가
  • 상단으로 갈수록 y 값이 증가
  • 멀어지는(작아지는) 방향으로 z 값이 증가

    • 모니터 바라보고 물체가 자신으로부터 멀어지는 방향이, z 값이 증가하는 방향이다.


많은 도움 받고있습니다~!!
멋지십니다 꺄~

 
 
 

카테고리 없음

얼사마 2011. 2. 28. 09:15

샘플만 실행해보기


다운로드

데모 실행


이미지 리소스가 많이 필요한 데모의 경우, 로드하는데 시간이 꽤 소요될 수 있음.




직접 코드 실행해보기


다운로드


설치하기

  • Flash Player 11.0.0.58 설치
  • SDK 압축풀기

    • Flash builder 설치된 경로/sdks/4.5.0.19786/ 하위에 풀기
  • playerglobal.swf 설치

    • .../sdks/4.5.0.19786/frameworks/libs/player/11.0 폴더 생성
    • 위 폴더에 flashplayer_inc_playerglobal_022711.swc 복사 후, playerglobal.swc로 이름 변경


프로젝트 설정하기

  • Flash builder 실행
  • SDK 추가

    • Window -> Preferences -> Flash Builder -> Installed Flex SDKs
    • Add -> Browse -> 위의 SDK 경로 선택 -> 적당한 이름 (eg:Flex 4.5 (FP11)) -> OK -> OK
  • 새로운 ActionScript 프로젝트 생성

    • File -> new -> ActionScript project
    • Flex SDK version

      • Use a specific SDK -> Flex 4.5 (FP11)
    • Finish 클릭
  • 타겟 swf 버전 설정

    • 프로젝트 선택 후, 우클릭
    • Properties -> ActionScript Compiler

      • Adobe Flash Player options

        • Use a specific version: 11.0.0 으로 변경
      • Additional complier arguments 에 "-swf-version=13" 추가. (따옴표는 안 씀)
      • OK
  • 실행

    • F11 또는 Ctrl+F11 로 실행 후, 하단에 "Adobe Flash Player 11 (11,0,0,58d) (Incubator build) 라고 뜨는지 확인.


Away3D 4.0 alpha 테스트

  • 위에서 생성한 프로젝트의 경로에

    • svn으로 checkout한 폴더의 내용을 아래와 같이 되도록 export

      • TestFP11 (프로젝트명)

        • src

          • (default package)   <== away3d/broomstick/Examples/Away3D/as/src
          • away3d   <== away3d/broomstick/Away3D/src/away3d
          • com   <== away3d/broomstick/Away3D/src/com
        • embeds   <== away3d/broomstick/Examples/Away3D/as/embeds
        • libs   <== away3d/broomstick/Examples/Away3D/as/libs
        • html-template   <== away3d/broomstick/Examples/Away3D/as/html-template
  • 프로젝트 선택 후, 우클릭 -> Properties

    • Build Path -> Add SWC Folder -> libs -> OK
    • ActionScript Applications -> Add... -> [실행할 모든 Test.as 파일 선택] -> OK
  • 실행을 원하는 as 파일 선택 후, Run