[카테고리:] WPF

개요
보통 3D 모델을 화면에 표시하면, 그 다음으로 할 작업은 마우스로 모델을 회전해 보는 것이다. 마우스를 통해 3D 오브젝트를 회전하기 위한 가장 일반적인 기술은 트랙볼 기능이라고 알려져 있다. 이 글은 트랙볼이란 무엇이며, 이를 구현하기 위한 방 법을 살펴본다. 이 글의 마지막에 언급한 링크는 WPF 어플리케이션에서 마우스를 이용하여 카메라를 회전할 수 있는 샘플 코드이다.

1. 소개
트랙볼은 마우스의 이동을 3D 회전으로 변환한 것이다. 이는 마우스의 위치를 그림2에서 보여지는 것처럼 Viewport3D 전면에 존재하는 가상의 구면으로 마우스의 위치를 투영한 것이다. 마우스를 움직임으로써 카메라(또는 장면)은 마우스 포인터 아래의 구면 위의 동일한 위치를 유지하면서 회전된다.

마우스가 수평으로 이동될 때, Y 축에 대한 회전은 마우스 포인터 아래에 동일한 위치가 유지되어야한다.

이와 유사하게 마우스 위치를 수직으로 변경시키는 것은 X 축에 대한 회전을 발생시킨다.

// 범위가 0,0] -[2,2]가 되도록 크기 변환
double x = p.x / (width / 2);
double y = p.y / (height / 2);

// 0,0을 중심으로 이동
x = x - 1;

// Y축이 아래 방향 대신 위방향이 되도록 반전
y = 1 - y;

double z2 = 1 - x*x - y*y;
double z = z2 > 0 ? Math.Sqrt(z2) : 0;

Vector3D p = new Vector3D(x, y, z);
p.Normalize();

이 회전을 계산하기 위해 2가지가 필요하다.

1. 회전 축
2. 회전 각도

구가 원점을 중심으로 하고 있으므로 위치를 백터로 해석할 수 있다. 회전 축과 회전 각도는 각각 백터의 내적과 외적을 사용하여 쉽게 구할 수 있다:

Vector3D axis = Vector3D.CrossProduct(v1, v2);
double theta = Vector3D.AngleBetween(v1, v2);

일단 축과 회전 각도 모두를 알게 되었다면 남은 것은 새로운 회전을 현재 방향에 적용하는 것이다:

// 각도에 음수를 취하는데, 이는 카메라를 회전하기 때문이다.
// 장면을 대신 회전한다면 이렇게 해서는 않된다.
Quaternion delta = new Quaternion(axis, -angle);

// RotateTransform3D로부터 현재의 방향을 얻는다.
RotateTransform3D rt = (RotateTransform3D)camera.Transform;
AxisAngleRotation r = (AxisAngleRotation3D)rt.Rotation;
Quaternion q = new Quaternion(r.Axis, r.Angle);

// 이전 방향과 delta를 합성한다.
q *= delta;

// 새로운 방향을 Rotation3D에 다시 지정한다.
r.Axis = q.Axis;
r.Angle = q.Angle;

3. 기타 세부사항
2절에서 간과한 몇가지 세부사항이 있다. 첫번째는 Viewport3D가 정사각형이라는 가정하고 구면 상에 마우스 포인터의 투영을 계산했다는 것이다. 만약 Viewport3D가 정사각형이 아니라면 트랙볼은 실제로 타원체의 모습일 것이다.

이러한 효과는 실제로 주목할 만한 사실은 아니지만 정사각형이 아닌 사각형의 너비와 높이에 대한 비율이 크다면 짧은 축을 따라 더 빠르게 회전하는 현상이 발생한다. 이러한 현상을 막고자 한다면 2D 포인트를 (width, height) 구 대신에 가로와 세로의 길이가 동일한 구로 맵핑하면 된다. 한가지 좋은 예는 가로와 세로 길이를 모두 min(width, height)이다.

또 다른 이슈는 트랙볼 상의 위치에 맵핑되지 않는 마우스 포인터가 발생할 경우에 대한 처리이다.

한가지 해결법은 이런 경우에 z를 0으로 한정하는 것으로 2.1절의 끝에서 보였다:

double z = z2 > 0 ? Math.Sqrt(z2):0;

기술적으로 x와 y를 정규화해야 하는데, 이는 Z=0인 평면에서 트랙볼 상에 가장 가까운 위치를 찾기 위함이다. 정규화하지 않는다면 반환된 위치는 구면상에 있지 않게 된다:

그러나, 2.2절에서 우리는 정규화된 벡터에 해당하는 Vector3D.AngleBetween(v1, v2)를 사용했다. 이는 위에서 처럼 정규화된 x와 y와 동일한 결과이다.

우리는 또한 모델과 카메라의 초기 위치에 대해 이야기 하지 않았다. 이 구현은 모델이 원점에 존재하며 카메라는 원점을 보고 있고 모델이 보이는 위치에 놓여졌다고 가정한다.

마지막으로 이 글은 확대/축소에 대해 언급하지 않았지만 샘플 코드에서 이에 대한 구현을 포함하고 있으므로 살펴보기 바란다.

4. 샘플 코드
샘플 코드는 재사용이 가능한 3개 파일로 구성된다.

Trackball.cs : 유틸리티 클래스 파일이며 FrameworkElement에 대한 마우스 이벤트를 처리한다. 또한 결과로써 회전과 크기변환을 가지는 Transform3D를 업데이트 한다.

Trackport.proj : loose.xaml 로부터 Model3D을 읽고 표시하는 UserControl이며 트랙볼 기능(Trackball.cs)이 적용되었다.

ModelViewer.proj : 그림 1의 모델 뷰어 어플리케이션(Trackport.proj를 사용하는 예)

감사의 말
모델 뷰 샘플을 제공해준 나의 아내, Bonnie에게 감사한다.

이 놈의 책은 예제 코드에 대한 소스가 없는 관계로.. 그 결과를 꼭 보고 싶은 예제가 있어, 코드를 입력하고서 저와 같은 노고(?) 없이 예제의 결과를 살펴보시라는 의미(?)에서 올려봅니다. 사실, 찰스 아저씨께서는 저와 같은 노고를 가져보라고 소스 코드를 제공하고 있지 않은건데… 뭐 여튼, 저작권에 걸릴지도 모르겠습니다. 찰스페즐드의 WPF, 짱이예요~ 다들 한권쯤 장만하셔도 후회 No 랍니다. =_= 이 정도면.. 저작권에 걸려도 봐주실레나….

결과 화면 나갑니다. Win32에서는 절대 불가능한 표준 컨트롤 뱅뱅 돌리기…

실행환경은 Windows XP입니다. 비스타에서 실행했다면, 좀더 멋진 모습일테지만 말입니다. 12장의 커스텀 패널 323페이지에 있는 예제입니다. 이 예제의 이해 목표의 관건은 MeasureOverride와 ArrangeOverride에 있습니다. 소스 코드 나갑니다. Visual Studio 2008에서 작성했습니다.

제가 이해한 내용에 대한 설명은 다음으로… 시간이 너무 늦었습니다. 저 낼 칼같이 출근해야합니다. ^^;

이제 우리가 진행해야할 것들은 ListBox에 그려진 이미지들의 정렬상태와 크기를 보기 좋게 하는 일과 사용자가 ListBox의 이미지를 선택하는 조작에서 효과를 넣는 일로써, 이 두가지 일을 하나 하나 해보도록 하겠다.

먼저 첫번째 것을 해결해보자. 태크안에 아래의 코드를 추가하자.

두개의 스타일이 지정되어져 있다. 하나는 ListBox에 대한 스타일을 수정하고 있는데, 이미지 항목을 가로로 정렬하고 수평과 수직에 대해서 가운데 정렬을 지정하고 있다. 또한 ListBox의 모서리 부분을 반지름이 6으로 해서 둥그렇게 나타내도록 한다. 그리고 또 하나의 스타일은 ListBox의 항목의 높이 값을 90 픽셀로 지정하고 있어서, 이미지의 크기를 작게 나타내도록 한다. 이렇게 설정된 스타일에 어울리는 ListBox의 높이와 폭을 아래의 코드를 참고해서 기존의 의 코드를 수정하길 바란다.

         Background="DarkGray" Width="630" Height="110"  
         Margin="10" SelectedIndex="0"/>

실행 결과는 아래와 같다.

자, 이제 남은 것은 사용자가 ListBox의 이미지 항목을 선택했을 경우, 그리고 마우스 커서가 이미지 항목에 놓일 때, 떠날 때에 어떤 효과를 줄것이다. 기본적으로 프로그램이 실행되면 모든 이미지 항목에 투명도를 0.4값을 지정해서 흐릿하게 보일 것이다. 이 상태에서 항목을 선택했을때는 선택된 이미지가 선명하게 되면서 커지게 된다. 또한 마우스 커서를 이미지 항목에 놓게 되면 서서히 이미지가 선명하게되고 마우스 커서가 이미지 항목을 떠나게 되면 항목은 다시 서서히 흐릿하게 보이도록 한다. 코드는 바로 앞에서 추가한

부분을 아래로 수정하면 된다. 기본적으로 어떤 이벤트가 발생시에 적절한 효과를 추가하는 것이므로 태그를 사용하고 과 를 써서 정해진 시간에 맞는 에니메이션 기능을 추가했다. 스타일과 템플릿보다는 에니메이션 효과의 내용이 크므로 자세한 설명은 생략하고 코드만 보이도록 하겠다.

최종 실행 결과를 살펴보기에 앞서, 가장 처음 모습을 살짝 다시 보면..

이랬던 아이가 어느덧 커서.. 아래와 같은 美人으로 탄생했다. 스타일과 템플릿의 힘으로 말이다.