Flash/Away3D

얼사마 2011. 4. 6. 17:33

Mipmap 이란?

퍼포먼스 향상을 위해, 텍스쳐로 사용되는 이미지를 미리 여러가지 사이즈로 만들어 놓은 후에, 오브젝트가 화면에 보이는 크기에 적절한 이미지 사용한다.



왼쪽의 가장 큰 이미지가 본래 이미지이며, 2^n * 2^n 사이즈를 가진다.

이 본래의 이미지의 가로 세로를 1/2 줄인 이미지를 만들고(우측 첫번째)

줄여진 이미지의 1/2를 또 줄인 이미지를 만드는 것을 반복하여,

1*1 이미지까지 생성한 후,

실제 렌더링시에, 위의 텍스쳐가 사용된 오브젝트가 화면에 보이는 사이즈를 고려하여 적절한 이미지를 선택하여 렌더링하게 된다.

 

이와 같은 mipmap 방식을 사용하지 않으면, 본래의 가장 큰 이미지를

오브젝트가 화면에 보이는 사이즈와 상관없이 사용하게 된다.

 

Away3D 4.0 에서는 mipmap 사용을 기본으로 하고 있으며,

따라서 모든 material의 사이즈는 가로 세로의 길이가 2 n승이 정사각형의 이미지여야 한다.

 

ColorMaterial

오브젝트에 단일 색상으로 맵핑하는 Material

 

ColorMaterial Class 정의

away3d.materials.ColorMaterial.ColorMaterial(color:uint, alpha:Number=1)

 

  • 파라미터 설명
    • color : 색상 값
    • alpha : 투명도

 

예제 코드

var floorMaterial:ColorMaterial = new ColorMaterial(0xff0000, 1);

var floor:Plane = new Plane(floorMaterial, 700, 700, 1, 1, false);

this._scene.addChild(floor);

 

BitmapMaterial

이미지의 BitmapData를 오브젝트에 맵핑하는 Material

 

BitmapMaterial Class 정의

away3d.materials.BitmapMaterial.BitmapMaterial(bitmapData:BitmapData=null, smooth:Boolean=true, repeat:Boolean=false, mipmap:Boolean=true)

 

  • 파라미터 설명
    • bitmapData : 표시할 이미지의 BitmapData instance
    • smooth : 텍스쳐에 smoothing 옵션 적용 여부
    • repeat : true일 경우, 타일 방식으로 맵핑되고, false일 경우, 해당 이미지 전체로 맵핑
    • mipmap : mipmapping 사용 여부

 

예제코드

var floorMaterial:BitmapMaterial = new BitmapMaterial(this._imageGround.bitmapData, true, false, true);

var floor:Plane = new Plane(floorMaterial, 700, 700, 1, 1, false);

this._scene.addChild(floor);

 

BitmapFileMaterial

동적으로 이미지 파일을 로드하여 맵핑하는 Material

 

BitmapFileMaterial Class 정의

away3d.materials.BitmapFileMaterial.BitmapFileMaterial(url:String="", checkPolicy:Boolean=false)

 

  • 파라미터 설명
    • url : 텍스쳐 이미지의 경로
    • checkPolicy : 로드하고자하는 이미지가 다른 도메인에 있다면, 해당 도메인의 crossdomain.xml 을 확인하기 위해서 true로 설정한다.

 

예제 코드

var sphereMaterial:BitmapFileMaterial = new BitmapFileMaterial('./imageAsset/material/objects/worldmap.png');

var sphere:Sphere = new Sphere(sphereMaterial, 100, 16, 12);

this._scene.addChild(sphere);

 

AnimatedBitmapMaterial

MovieClip bitmap으로 캐싱하여 맵핑하는 Material

 

AnimatedBitmapMaterial Class 정의

away3d.materials.AnimatedBitmapMaterial.AnimatedBitmapMaterial(movie:MovieClip=null, loop:Boolean=true, autoPlay:Boolean=false, index:uint=0, defaultBitmapData:BitmapData=null)

 

  • 파라미터 설명
    • movie : 애니메이션이 있는 MovieClip instance
    • loop : true일 경우, 무한 반복 플레이
    • autoPlay : 자동 플레이 여부
    • index : 애니메이션이 시작될 프레임 번호
    • defaultBitmapData : MovieClip instance AnimatedBitmapMaterial 생성 시에 할당할 수 없는 경우, 기본 bitmapData를 보여주고, 이후에 setFrames 또는 setMovie 시에 해당 애니메이션을 플레이

 

예제 코드

var movie:MovieClip = new SampleMovieClip() as MovieClip;

var boxMaterial:AnimatedBitmapMaterial = new AnimatedBitmapMaterial(movie, true, true, 0, null);

var box:Cube = new Cube(boxMaterial, 100,200,300);


위의 예제를 현재(revision.3124)버전에서 그대로 실행하면 에러가 난다.

AnimatedBitmapMaterial Class update function 에서

if(_nmCache[_index])  ==> if(_nmCache && _nmCache[_index])

와 같이 수정해 주어야 에러가 나지 않는다.

 

 

VideoMaterial

flv 파일을 스트리밍으로 가져와서 맵핑하는 Material

 

VideoMaterial Class 정의

away3d.materials.VideoMaterial.VideoMaterial(source:String, materialSize:int=256, loop:Boolean=true, autoPlay:Boolean=false, player:IVideoPlayer=null)

 

  • 파라미터 설명
    • source : flv 파일의 url
    • materialSize : flv 파일의 사이즈(2^n)
    • loop : 반복 재생 여부
    • autoPlay : 자동 재생 여부
    • player : IVideoPlayer interface implements custom player가 있다면, 해당 플레이어의 instance를 넘기면 해당 플레이어를 사용한다.

 

예제 코드

var cylinderMaterial:VideoMaterial = new VideoMaterial('http://files.fliiby.com/streamVideoNew.php?file=JTBFSyUyMWRr.flv&start=0&id=player&client=FLASH%20WIN%2011,0,0,58&version=4.2.95&width=790&token=JTA5TCUyN2ltaiU1Q0EuJUU5', 256, true, true);

var cylinder:Cylinder = new Cylinder(cylinderMaterial, 50, 100, 200, 16, 1, true, true, true);

this._scene.addChild(cylinder);

 

위 예제에서는 http stream이 필요한 관계로, 특정 http url을 사용하였다.

 

 

위의 Material02.기본오브젝트 생성에 추가로 적용하게 되면 아래와 같은 화면을 볼 수 있다.