[WPF 3D UI 구현하기 - 2]

이전글 : [WPF 3D UI 구현하기 - 1]

우선 내가 WPF 3D를 이용하여 구현해보고 싶은 것은 앞면 뒷면 Panel 두 개를 만들어 버튼을 누르면 180도로 회전하여 뒤집기가 가능한 형태이다.

위와 같은 Panel 두 개를 만들어 놓았다고 가정했을 때, Front Panel에 우측 상단에 있는 노란색 버튼을 누르면 Front Panel이 180도 회전하면서 Back Panel이 뒤집어져 나와야 할 것이고, Back Panel 중앙에 있는 노란색 버튼을 누르면 반대로 180도 회전하면서 Front Panel이 뒤집어져 나와야 할 것이다.

자 이제 XAML 코드에서 Viewport3D 객체를 생성하고 카메라를 돌려보자!
이전에 두 종류의 Camera에 대해 말했을 것이다.
OrthographicCamera와 PerspectiveCamera가 있는데 그 둘의 차이를 쉽게 이해하기 위해 밑의 그림을 msdn에서 따왔다.

http://msdn.microsoft.com/ko-kr/library/system.windows.media.media3d.perspectivecamera.aspx

나는 PerspectiveCamera를 이용하도록 하겠다.

1 2 3

<Viewport3D.Camera> <PerspectiveCamera Position="0,0,4" /> </Viewport3D.Camera>

정면에서 비출 것이기 때문에 Position만 설정하였다.
Z축으로 물체로부터 4만큼 떨어져 있는 상태라고 보면 된다. 숫자가 작아질수록 물체에 근접한 상태라고 보면 된다.

이제 앞면 패널을 표현해보자.
패널에는 회전을 위한 버튼이 있기 때문에 Viewport2DVisual3D를 이용할 것이다.
Viewport2DVisual3D에서 설정해주면 되는 것은 Transform, Geometry, Material, Visual 4 가지이다.
코드 상에서만 확인을 하면 눈에 띄게 속성을 이해하기 어렵기 때문에 Blend를 열고 속성을 확인해보도록 하자.

Viewport2DVisual3D 객체의 속성을 살펴보면 위와 같은 모습을 볼 수 있다.
Transform, Geometry, Material, Visual ... 우리가 조작할 속성들이 고대로 보인다.

Transform에서는
1. 좌표 이동
2. 회전
3. 비율 크기 조정
4. 중심점
5. 대칭 이동
을 수정할 수 있다.

1 2 3 4 5 6 7 8 9 10 11 12 13

<Viewport2DVisual3D.Transform> <Transform3DGroup> <TranslateTransform3D OffsetX="0" OffsetY="0" OffsetZ="0"/> <ScaleTransform3D ScaleX="1" ScaleY="2" ScaleZ="1"/> <RotateTransform3D d:EulerAngles="0,0,0"> <RotateTransform3D.Rotation> <AxisAngleRotation3D Angle="0" Axis="0,1,0"/> </RotateTransform3D.Rotation> </RotateTransform3D> <TranslateTransform3D OffsetX="0" OffsetY="0" OffsetZ="0"/> <TranslateTransform3D OffsetX="0" OffsetY="0" OffsetZ="0"/> </Transform3DGroup> </Viewport2DVisual3D.Transform>

XAML상에서는 이런 식으로 표현할 수 있을 것이다.
중심점과 대칭 이동은 특정 용어로 표현되지 않는다. 하지만, Blend에서 확인을 해보면 쉽게 알 수 있다.

앞면 Panel은 Y축으로만 패널의 Scale을 2배로 조정했고, 회전을 시키지 않은채로 Y축으로 회전할 것임을 명시해뒀다.
굳이 ScaleY만을 2로 한 이유는 이 ScaleTransform은 비율로 계산되어 조절되기 때문이다.
즉 ScaleTransform을 (1,1,1)로 하면 바로 뒤에 설명이 나올 Gemetry에서 Y축 Position을 수정하지 않는 이상 1:1비율의 높이와 너비를 가진 정사각형 모양이 된다.
내가 원하는 형태의 앞면 Panel은 너비에 비해 높이가 2배이기 때문에 ScaleY를 2로 설정한 것이다.
만약 Geometry에서 지금의 ScaleTransform에서 ScaleY를 조작한 것처럼 높이를 2배로 설정하고 싶다면, Position에서 Y축에 관련된 좌표값을 2로 설정하면 된다.
그 외 나머지는 손대지 않았다.

Geometry는 대략 -ㅅ-) 세 개의 꼭지점을 정해주고 그 점들을 이어 만든 삼각형을 합쳐서 물체를 표현할 범위를 나타내준다고 생각하면 된다.
Geometry에서 조정할 수 있는 것들은 Positions, TextureCoordinates, TriangleIndices, Normals 들이 있다.
X, Y, Z축을 0,0,0으로 기준을 보았을 때, Positions에서 각 선을 이을 점들을 찍는다고 생각해야 한다.
Positions에서 정한 각 점들을 선으로  이어주는 순서를 정하는 것이 TriangleIndices이다.
그리고 TextureCoordinates가 2D의 좌표를 3D 좌표로 매핑해 준다.
예를 들어, 2D의 shape이 (0,0 0,1 1,0 1,1) 이런식으로 사각형 도형이 있다면 3D상으로 (-1,1,0 -1,1,0 1,-1,0 1,1,0)으로 변환될 수 있다는 말이다.

<Viewport2DVisual3D.Geometry>
    <MeshGeometry3D Positions="-1,1,0 -1,-1,0 1,-1,0 1,1,0" TextureCoordinates="0,0 0,1 1,1 1,0" TriangleIndices="0 1 2 0 2 3"/>
</Viewport2DVisual3D.Geometry>

0번째 점은 (-1,1,0) 이고 1번째 점은 (-1,-1,0), 2번째 점은 (1,-1,0), 3번째 점은 (1,1,0)이다.
0번째와 1번째와 2번째 점을 이어 삼각형을 만들고, 0번째와 2번째 3번째 점을 이어서 또 다른 삼각형을 만들면 두 삼각형이 합쳐서 사각형을 이루게 된다.
이제 앞면 패널이 보이게 될 영역이 확보가 되었다. ^ㅁ^)

남은 요소들인 Material, Visual, 중요한 조명을 담당할 Light는 다음으로 소개를 미루도록 하겠다.

슝~ ' ㅁ')/