Silverilght3 - 3D기능

MIX 09에서 Silverlight 3(Beta)가 새롭게 발표되었습니다. 이번에 발표된 Silverlight 3는 Silverlight 2에는 없던 3D, Out of browser 그리고 새로운 Binding등의 특징들이 추가되었습니다. 이 글을 시작으로 하나씩 추가된 특징들을 알아볼 것이며, 이번에는 Silverlight 3에서 지원하는 3D 기능에 대해서 알아보도록 하겠습니다.

들어가기에 앞서..
Silverlight 3에 새롭게 추가된 3D 기능은 WPF에서 지원하는 3D처럼 복잡한 mesh, light, camera를 지원하지는 않습니다. 단지 Perspective(원근감)을 지원해서 2D인 객체가 마치 3D인 것처럼 보이는 방법을 사용합니다.

Projection
3D를 지원하기 위해 Silverlight 3의 UIElement에는 Projection이라는 프로퍼티가 추가되었습니다. Projection 프로퍼티는 Projection 클래스 타입으로 선언되어 있습니다.

위 다이어그램은 Projection과 PlaneProjection 클래스 다이어그램을 나타낸 것입니다. Projection 클래스는 추상(Abstract) 클래스로 어떠한 멤버(변수나 메서드)도 가지고 있지 않으며, PlaneProjection이라는 클래스가 유일하게 Projection 클래스를 상속받아 구현하고 있습니다.
 
그럼 Projection을 XAML에서 어떻게 사용하는지 알아보도록 하겠습니다. 
다음 XAML과 같이 앞서 설명한 UIElement의 Projection 프로퍼티에 PlaneProjectoin를 추가하는 것으로 모든 준비를 마칠 수 있습니다.

XAML         <Image x:Name="_Image"                Width="200"                Source="http://www.outsource-dotnet.com/images/silverlight.png">             <Image.Projection>                 <PlaneProjection/>           </Image.Projection>         </Image>

이제 위에서 추가한 PlaneProjection을 어떻게 사용하는지 알아보기 위해 PlaneProjection는 어떤 종류의 프로퍼티를 가지고 있는지 알아보겠습니다.

위 클래스 다이어그램은 PlaneProjection 클래스가 가지고 있는 12개의 프로퍼티를 보여줍니다. 12개의 프로퍼티는 크게 총 4개의 그룹 CenterOfRotation, GlobalOffset, LocalOffset, Rotation으로 나눌 수 있으며 각 그룹은 UIElement의 원근감을 조절하는데 사용합니다.

Rotation(X,Y,Z) 프로퍼티 그룹
Rotation(X,Y,Z) 프로퍼티를 설명하기에 앞서 3차원 좌표 체계를 알아야 합니다.

위 그림처럼 3차원은 X축, Y축, Z축을 가지고 있습니다. PlaneProjectoin 클래스의 각 프로퍼티가 X, Y, Z가 쌍으로 있는 이유도 여기 있습니다.

그럼 RotationX를 이미지에 적용해서 결과가 어떻게 나오는지 확인해 보겠습니다.

위 그림은 Image 객체에 RotationX를 각각 0, 35, 50을 적용한 화면입니다. 가운데 검은색 줄은 X축을 나타내며 검은 선을 기준으로 0도, 35도, 50도 기울어진 화면을 보여주는 것입니다. 다음 코드는 위 예제를 구현한 XAML 소스입니다.

XAML <UserControl x:Class="Silverlight3.MainPage"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     >     <Grid>         <Image x:Name="_Image"                Width="300"                Source="http://asymptotia.com/wp-images/2008/02/knut_polar_bear_cub.jpg">             <Image.Projection>                 <PlaneProjection RotationX="35"/>             </Image.Projection>         </Image>     </Grid> </UserControl>

다음으로 RotationY를 이미지에 적용해서 결과가 어떻게 나오는지 확인해 보겠습니다.

위 그림은 Image 객체에 RotationY를 각각 0, 35, 80을 적용한 화면입니다. 가운데 검은색 줄은 Y축을 나타내며 X 프로퍼티와 마찬가지로 Y축을 중심으로 회전하는 것을 확인할 수 있습니다.

XAML <UserControl x:Class="Silverlight3.MainPage"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     >     <Grid>         <Image x:Name="_Image"                Width="300"                Source="http://asymptotia.com/wp-images/2008/02/knut_polar_bear_cub.jpg">             <Image.Projection>                 <PlaneProjection RotationY="80"/>             </Image.Projection>         </Image>     </Grid> </UserControl>

다음 그림은 RotationZ를 기준으로 0도 35도 80도 변경한 화면입니다. 축만 바뀌었을 뿐 X, Y와 동일하게 동작하는 것을 확인할 수 있습니다.

지금까지 알아본 RotationX, Y, Z는 혼자 쓰이는 것뿐 아니라 다음과 같이 2개 또는 3개를 한꺼번에 적용시킬 수 있습니다.

XAML <UserControl x:Class="Silverlight3.MainPage"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     >     <Grid>         <Image x:Name="_Image"                Width="300"                Source="http://asymptotia.com/wp-images/2008/02/knut_polar_bear_cub.jpg">             <Image.Projection>                 <PlaneProjection RotationX=”30” RotationY="80" RotationZ=”20”/>             </Image.Projection>         </Image>     </Grid> </UserControl>

CenterOfRotation(X,Y,Z) 프로퍼티 그룹
앞서 살펴봤던 Rotation을 이용해 객체를 X, Y, Z축으로 회전할 때 다음 그림과 같이 축은 항상 이미지의 가운데 있었습니다.

 

하지만 이미지를 회전하는 축을 CenterOfRotation(X, Y, Z) 프로퍼티를 이용해 이동시킬 수 있습니다. 먼저 CenterOfRotationX는 0부터 1까지의 값을 가지며 0은 이미지의 좌측, 0.5는 이미지의 가운데, 1은 이미지의 우측을 나타냅니다. CenterOfRotation을 설정하지 않으면 디폴트로 0.5가 입력되어 이미지의 가운데 축이 위치한 것입니다.
CenterOfRotationY 역시 0부터 1까지의 값을 가지며 0은 이미지의 상단, 0.5는 이미지의 가운데, 1은 이미지의 하단을 나타냅니다.

                   

그럼 앞서 알아본 RotationY를 CenterOfRotationY와 함께 적용시켜 보도록 하겠습니다.

상단의 예제 프로그램은 Image의 RotationY를 0에서 360까지 변경하는 간단한 애니메이션을 적용한 것입니다. 왼쪽 이미지는 CenterOfRotationX가 0.5이고 오른쪽 이미지는 CenterOfRotationX가 0입니다. 앞서 설명한 것처럼 왼쪽 이미지는 이미지의 가운데를 축으로 두고 회전하고 오른쪽 이미지는 이미지의 왼쪽을 축으로 두고 회전하는 것을 확인할 수 있습니다.

GlobalOffset(X,Y,Z) 프로퍼티 그룹
지금까지 축을 기준으로 회전하는 방법과 축을 이동시키는 방법을 알아보았습니다. GlobalOffset(X, Y, Z)는 이미지가 축을 따라서 움직일 수 있도록 해줍니다. 간단히 말해서 GlobalOffsetX=”10”을 입력하면 이미지가 X축으로 10만큼 이동하게 됩니다. 마찬가지로 GlobalOffsetY, GlobalOffsetZ 역시 각 축을 기준으로 이미지를 이동시키는 역할을 합니다. 다음 예제를 실행시켜보면 Global(X, Y, Z)가 어떻게 작동하는지 확인할 수 있습니다.

LocalOffset(X,Y,Z) 프로퍼티 그룹

LocalOffset(X, Y, Z) 프로퍼티는 GlobalOffset(X, Y, Z) 프로퍼티와 비슷한 기능을 합니다. LocalOffset(X, Y, Z) 프로퍼티 역시 X, Y, Z축을 기준으로 이동하지만 LocalOffset(X, Y, Z)에서 기준이 되는 X, Y, Z 축은 현재 이미지의 회전 상태에 따라 새로운 축을 가지게 됩니다.

위 화면은 이미지의 RotationY 값을 0과 35를 준 결과입니다. 여기에 GlobalOffsetX를 변경하게 되면 고정된 전역 X축을 따라서 이미지가 이동하게 됩니다. 하지만 LocalOffsetX를 변경하게 되면 기준 좌표축을 고정된 전역 X축을 사용하지 않고 이미지가 회전한 것을 따라 기준 축도 같이 이동시키게 됩니다. 
GlobalOffsetX와 LocalOffsetX를 0에서 100으로 이동시켰을 경우 차이는 다음 그림과 같습니다.

 

위 그림 중 상단의 그림은 GlobalOffsetX를 변경해 이미지를 이동시킨 화면 입니다. GlobalOffsetX를 이용했기 때문에 이미지는 회전한 것과는 상관없이 단지 오른쪽으로 움직이기만 합니다.
아래쪽 그림은 LocalOffsetX를 변경해 이미지를 이동시킨 화면입니다. 오른쪽에 이미지가 이동된 화면을 보면 이미지가 RotationY로 35도 이동된 만큼 기준 축 역시 35도만큼 회전한 것을 확인할 수 있습니다. 그리고 이미지의 이동 경로도 변경된 축을 기준으로 하기 때문에 오른쪽 상단으로 이미지가 작아지면서(멀어지면서) 이동하는 것을 확인할 수 있습니다.
밑에 있는 예제 프로그램에서 LocalOffsetX와 GlobalOffsetX 그리고 LocalOffsetZ와 GlobalOffsetZ를 이동시키면서 GlobalOffset과 LocalOffset의 차이를 살펴보기 바랍니다.

마치며..
이상으로 Silverlight 3에 추가된 3D 기능을 간단히 살펴봤습니다. 복잡한 3D 기능이 추가된 것이 아니기 때문에 프로퍼티를 변경해보면 금방 익히실 수 있을 것이라고 생각합니다 ^^ 마지막으로.. 부족한 글이지만 도움이 되셨으면 좋겠습니다.