그림1a) 기본 구성을 가지는 호랑이 모델

그림1b) 마우스를 눌러 왼쪽 아래로 조금 드래그하여 회전된 호랑이 모델

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

그림4) 마우스를 수직으로 움직이는 것은 X 축에 대해 장면을 회전시키는 것이다.

이러한 인터페이스는 X와 Y축에 대한 회전의 조합을 적용하여 사용자가 원하는 방향에서 모델을 살펴볼 수 있는 매우 직관적인 방법이다.

2. 회전 계산
각각 마우스 이동 이벤트에서 마우스 포인터 아래의 동일한 위치를 유지하는 회전을 계산할 필요가 있으며 이를 수행하기 위한 2가지 단계가 필요하다. 첫번째는 마우스 포인터가 구면의 어느 위치에 있는지 계산하는 것이다. 두번째는 예전 위치를 새로운 위치로 변환하기 위해 필요한 회전을 계산하는 것이다.

그림5a) 마우스 위치는 좌상단에 (0,0)을 가지는 UIElement의 좌표공간 상에서 알 수 있다.

그림5b) 2차원 마우스 위치를 Viewport3D의 구면 상의 위치로 투영하며 이 위치는 3차원이다.

우리는 회전을 계산하는 것만을 생각할 것이므로 우리에게 가장 편리한 구를 선택할 수 있다. 반지름이 1이며 중심이 (0,0,0)인 구를 사용하는 것이 가장 간단하다. 그림6에서 보는 것처럼 두개의 2D 좌표계 사이의 변환의 예에서 X, Y 요소를 찾는다.

그림6a) UIElement의 좌표계

그림6b) 우리가 정한 트랙볼의 좌표계

이를 수행하기 위해 Viewport3D의 경계를 [0,0]-[2,2] 범위로 맵핑되도록 크기 변환을 한다. 다음으로 좌상단 코너에서 중심 위치를 원점으로 움직이도록 변환한다. 위치를 범위 [-1,1]-[1,-1]로 놓는다. 마지막으로 2D 좌표계에서 Y축이 위 방향 대신 아래방향으로 향하도록 한다.

// 범위가 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; 이제 z값을 가진 x와 y 위치에 대한 구면 상의 위치를 알수 있게 되었다. 구의 반지름이 1이므로 z는 다음의 공식으로 구할 수 있다.

double z2 = 1 - x*x - y*y; double z = z2 > 0 ? Math.Sqrt(z2) : 0; Vector3D p = new Vector3D(x, y, z); p.Normalize(); 이제 마우스 포인터 아래의 구면 상의 위치 (x, y, z)를 알게 되었다.

2.2 포인트 간의 회전
우리는 마우스 이동시에 마우스 포인트 아래에 대한 구면 상의 동일한 위치를 유지하는 모델의 회전을  원한다. 마지막으로 호출된 마우스 이동 이벤트에서 구면상의 이전 위치를 기억하고 마우스 포인터 아래의 현재 위치로 변환될 회전을 만들어 이를 수행할 수 있다.

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

1. 회전 축
2. 회전 각도

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

// 각도에 음수를 취하는데, 이는 카메라를 회전하기 때문이다. // 장면을 대신 회전한다면 이렇게 해서는 않된다. 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가 정사각형이 아니라면 트랙볼은 실제로 타원체의 모습일 것이다.

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

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

3DTools-Enhanced.zip

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

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

<Style TargetType="ListBox">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ListBox">
        <Border CornerRadius="6" 
                Background="{TemplateBinding ListBox.Background}">
          <ScrollViewer HorizontalScrollBarVisibility="Auto">
            <StackPanel Orientation="Horizontal"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"
                        IsItemsHost="True"/>
          </ScrollViewer>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style TargetType="ListBoxItem">
  <Setter Property="MaxHeight"  Value="90" />
</Style>

<ListBox ItemsSource="{Binding Source={StaticResource MyPhotos}}"
         Background="DarkGray" Width="630" Height="110"  
         Margin="10" SelectedIndex="0"/>

<Style TargetType="ListBoxItem">
  <Setter Property="MaxHeight"  Value="90" />
  <Setter Property="Opacity" Value="0.4" />
  <Style.Triggers>
    <Trigger Property="IsSelected" Value="True">
      <Trigger.Setters>
        <Setter Property="Opacity" Value="1.0" />
        <Setter Property="MaxHeight" Value="100" />
      </Trigger.Setters>
    </Trigger>

    <EventTrigger RoutedEvent="Mouse.MouseEnter">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
              Duration="0:0:1.2"
              Storyboard.TargetProperty="Opacity"
              To="1.0"  />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>

    <EventTrigger RoutedEvent="Mouse.MouseLeave">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
              Duration="0:0:1.2"
              Storyboard.TargetProperty="Opacity" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Style.Triggers>
</Style>

<Style TargetType="TextBlock">
  <Setter Property="HorizontalAlignment" Value="Center" />
  <Setter Property="FontFamily" Value="Comic Sans MS"/>
  <Setter Property="FontSize" Value="14"/>
</Style>

<Style BasedOn="{StaticResource {x:Type TextBlock}}"
       TargetType="TextBlock"
       x:Key="TitleText">
  <Setter Property="FontSize" Value="26"/>
  <Setter Property="Foreground">
    <Setter.Value>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
        <LinearGradientBrush.GradientStops>
          <GradientStop Offset="0.0" Color="#0000FF" />
          <GradientStop Offset="1.0" Color="#000000" />
        </LinearGradientBrush.GradientStops>
      </LinearGradientBrush>
    </Setter.Value>
  </Setter>
</Style>

<TextBlock Name="textblock1" 
           Style="{StaticResource TitleText}">My Photos
</TextBlock>

<DataTemplate DataType="{x:Type local:Photo}">
  <Border Margin="10">
    <Image Source="{Binding Source}"/>
  </Border>
</DataTemplate>

<Window x:Class="StylingIntroSample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:StylingIntroSample"
    Loaded="WindowLoaded" 
    Title="StylingIntroSample" 
    SizeToContent="WidthAndHeight">
  
  <Window.Resources>
    <ObjectDataProvider x:Key="MyPhotos"
      ObjectType="{x:Type local:PhotoList}"/>
  </Window.Resources>
  
  <StackPanel Margin="25">
    <TextBlock Name="textblock1">My Photos</TextBlock>
    <TextBlock>Check out my new photos!</TextBlock>
    <ListBox ItemsSource="{Binding Source={StaticResource MyPhotos}}"
             Background="DarkGray" Width="900" Height="200"  
             Margin="10" SelectedIndex="0"/>
    </StackPanel>
</Window>

public class PhotoList : ObservableCollection<Photo>
{
    public PhotoList() { }

    public PhotoList(string path) : this(new DirectoryInfo(path)) { }

    public PhotoList(DirectoryInfo directory)
    {
        _directory = directory;
        Update();
    }

    public string Path
    {
        set {
            _directory = new DirectoryInfo(value);
            Update();
        }

        get { return _directory.FullName; }
    }

    public DirectoryInfo Directory
    {
        set
        {
            _directory = value;
            Update();
        }

        get { return _directory; }
    }

    private void Update()
    {
        foreach (FileInfo f in _directory.GetFiles("*.jpg"))
        {
            Add(new Photo(f.FullName));
        }
    }

    DirectoryInfo _directory;
}

public class Photo
{
    public Photo(string path)
    {
        _source = path;
    }

    public override string ToString()
    {
        return Source;
    }

    private string _source;

    public string Source { get { return _source; } }
}

private void WindowLoaded(object sender, RoutedEventArgs e)
{
    Photos = (PhotoList)(this.Resources["MyPhotos"] 
        as ObjectDataProvider).Data;

    Photos.Path = "...\\...\\Images";
}

WPF는 기본적으로 렌더링을 전담하는 스레드를 가지고 있음으로해서 자체적인 에니메이션 프레임워크를 가진다. 이번에는 WPF의 에니메이션 프레임워크를 기반으로 한 작은 에니메이션 샘플을 만들어 보고자 한다.

만들고자 하는 에니메이션은 이렇다. 화면상에 Windows Vista 문장을 렌더링하고, 'W'문자부터 시작해서 한문자 한문자씩 움직이는데 움직이는 형태는 하나의 문자가 아래방향으로 이동하고 다시 원래 위치로 돌아오는 것이다. 여기에 더해서 <VisualBrush>를 이용해서 마치 물위에 비치는 효과를 넣어 마무리하고자 한다.

wpf_animation_gisdeveloper.Co.Kr.zip

WPF Window Application 기반으로 기본적으로 XAML은 <Window>로 시작한다. 이 Element안을 작성하는 것이 시작이자 종착점이다. 먼저 Window의 배경을 설정해보자.

  <Window.Background>
  <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
     <LinearGradientBrush.GradientStops>
       <GradientStop Offset="0.0" Color="Black" />
       <GradientStop Offset="1.0" Color="#666666" />
     </LinearGradientBrush.GradientStops>
  </LinearGradientBrush>
  </Window.Background>

배경을 위에서 아래방향으로 검정색에서 회색으로 그라디언트 채움 효과를 지정한 것이다. 다음으로 주인공이 위치할 컨테이너로써 <Border>을 사용하며 주인공은 <TextBlock>이다. 다시 <Border>는 <StackPanel>을 컨테이너로 사용된다. <StackPanel>은 추가하는 Item을 순서대로 차곡차곡 옆으로, 또는 아래에 위치하도록 한다.

  <StackPanel Margin="40">
  <Border Name="TextBorder" HorizontalAlignment="Left"
     VerticalAlignment="Top">
     <TextBlock
       Name="RealText"
       FontFamily="Segoe UI"
       FontSize="60 px"
       Margin="40"
       Foreground="White">
       Windows Vista
     </TextBlock>
  </Border>
  </StackPanel>

<Border> 역시 배경 효과를 지정할 수 있는데, 체크 무늬를 넣어보도록 하자. 정적 리소스에 바인딩시키는 방법을 사용하고자 하는데 정적 리소스를 정의하기에 앞서 <Border>의 배경을 지정하도록 수정하자.

  <Border Name="TextBorder" HorizontalAlignment="Left"
     VerticalAlignment="Top" Background="{StaticResource MyWireBrushResource}">

우리가 정의할 정적 리소스의 이름이 MyWireBrushResource 라는 것을 알 수 있다. 이제 이 리소스를 정의해보자.

  <Window.Resources>
  <DrawingBrush x:Key="MyWireBrushResource"
  Viewport="0,0,10,10" ViewportUnits="Absolute" TileMode="Tile">
    <DrawingBrush.Drawing>
      <DrawingGroup>
        <DrawingGroup.Children>
          <GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" Brush="#66CCCCFF" />
          <GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="#66CCCCFF" />
        </DrawingGroup.Children>
      </DrawingGroup>
    </DrawingBrush.Drawing>
  </DrawingBrush>
  </Window.Resources>

이렇게 정적 리소스를 만들어 놓으면 다른 여러곳에서 x:Key 속성값을 참조함으로써 재활용이 가능함으로 적극 활용하길 바란다.

이제 주인공과 그 무대가 거의 완성되어져 간다. 무지막 무대 효과로써 수면에 반사되는 효과를 넣어보자.

여기서 사용한 방법은 이렇다. 이미 앞서 만들어 놓은 화면을 <VisualBrush>를 이용해서 또 하나의 <Rectangle>에 채움으로써 구현할 수 있다. <VisualBrush>의 Transform 중 ScaleTransform의 ScaleY의 값을 -1로 주어 위와 아래가 뒤집히게 하면 되는 것이다. 여기에 몇가지 많은 데이타 바인딩 개념이 사용되었는데, 특히 주목해야할 곳은 <VisualBrush>의 Visual 속성에 대한 데이터 바인딩이다. 바인딩의 ElementName의 값이 TextBorder인데, 이 값은 위에서 만든 <Border>의 Name이다. 즉, 앞서 만들어 놓은 <Border>의 모양이 그대로 브러시가 되어 <Rectangle>의 채움 속성으로 사용되는 것이다.

  <Rectangle Name="ReflectedText"
    Height="{Binding ElementName=TextBorder, Path=ActualHeight}"
    Width="{Binding ElementName=TextBorder, Path=ActualWidth}"
    HorizontalAlignment="Left">
    <Rectangle.OpacityMask>
      <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
        <LinearGradientBrush.GradientStops>
          <GradientStop Offset="0.0" Color="#66000000" />
          <GradientStop Offset="1.0" Color="#00000000" />
        </LinearGradientBrush.GradientStops>
      </LinearGradientBrush>
    </Rectangle.OpacityMask>
    <Rectangle.Fill>
      <VisualBrush
        Visual="{Binding ElementName=TextBorder}">
        <VisualBrush.RelativeTransform>
          <TransformGroup>
            <ScaleTransform ScaleX="1" ScaleY="-1" />
            <TranslateTransform Y="1" />
          </TransformGroup>
        </VisualBrush.RelativeTransform>
      </VisualBrush>
    </Rectangle.Fill>
  </Rectangle>

이제, 에니메이션을 위한 주인공과 배경에 대한 정의가 모두 마무리 되었다. 이제 에니메이션을 지정하는 것만 남았다. 에니메이션의 대상이 되는 것은 Windows Vista이고 이 문자열은 <TextBlock>의 내용이므로 <TextBlock>가 에니메이션의 대상이 된다. 즉, <TextBlock>안에 <TextBlock.TextEffects>와 <TextBlock.Triggers>를 추가하고 <DoubleAnimation>, <StoryBoard>, <Int32AnimationUsingKeyFrames>를 이용해 우리가 원하는 에니메이션을 지정하게 된다. 세세하게 살펴보도록 하자.

     <TextBlock ... >
       Windows Vista
       <TextBlock.TextEffects>
       </TextBlock.TextEffects>
       <TextBlock.Triggers>
       </TextBlock.Triggers>
     </TextBlock>

기존의 <TextBlock>에 <TextBlock.TextEffects>와 <TextBlock.Triggers>가 새롭게 추가되었다. <TextBlock.TextEffects>는 문자에 대해 여러가지 효과를 줄 수 있는 것으로, 이동 효과에는 회전, 이동, Skew, 늘리기가 있다. <TextBlock.Triggers>는 에니메이션에 대한 정의와 시작 시점을 지정하는 것이다.

<TextBlock.TextEffects>의 정의는 다음과 같은데, 먼저 효과를 받을 문자의 수를 지정하기 위해 <TextEffect>의 PositionCount 속성값으로 1을 사용했으며 이 효과에 대한 이름을 MyTextEffect로 지정했다. 또한 우리가 원하는 에니메이션이 하나의 문자가 아래에서 다시 원래 자리와 에니메이션되는 이동 효과이므로 <TextEffect.Transform>의 <TranslateTransform>을 추가하였고 이름을 TextEffectTranslateTransform으로 주었다.

  <TextBlock.TextEffects>
     <TextEffect PositionCount="1" x:Name="MyTextEffect">
       <TextEffect.Transform>
         <TranslateTransform x:Name="TextEffectTranslateTransform"/>
       </TextEffect.Transform>
     </TextEffect>
  </TextBlock.TextEffects>

<TextEffect>와 <TranslateTransform>에 이름을 준 이유는 <TextBlock.Triggers>에서 이 이름을 통해 <TextEffect>와 <TranslateTransform>의 속성값을 적절한 시간에 변경시켜 에니메이션이 되도록 하기 위함이다. <TextBlock.Triggers>를 작성하기 전에, 먼저 우리는 영화감독이 되어 각 장면, 장면을 면밀하게 고려해야하는 고통이 필요하다. 고통스럽기도 하지만 한편으로는 멋지지 않은가!!? 먼저 생각해야할 것은 Windows Vista라는 문장은 공백문자 하나를 포함해서 총 13자이다. 이 13개의 문자가 0.5초씩 시간을 할당 받는데, 0.5초 동안 하는 액션(Action~~)은 Y축 아래로 20픽셀 이동하고 다시 원래 자리로 이동하는데 쓰인다. 즉, 0.5초의 반인 0.25초는 아래로 이동하고 나머지 0.25초는 원래 자리로 이동하는데 쓰인다. 비록 간단한 에니메이션의 구현이지만 등장인물의 수와 한치의 시간 오차없는 계산이 필요하다. 시간이 1초만 틀려져도 쌩뚱맞는 액션이 나오게 된다.

  <TextBlock.Triggers>
  <EventTrigger RoutedEvent="TextBlock.Loaded">
     <BeginStoryboard>
       <Storyboard>
         <DoubleAnimation />
         <Int32AnimationUsingKeyFrames>
         </Int32AnimationUsingKeyFrames>
       </Storyboard>
     </BeginStoryboard>
  </EventTrigger>
  </TextBlock.Triggers>

위는 <TextBlock.Triggers>의 아직은 완전하지 않은 시작 단계 코드이다. 여기에서 에니메이션이 시작할 시점을 <TextBlock>의 Loaded 이벤트가 발생할때 시작하도록 지정하고 있다.  여기서 필요한 추가 코드는 <DoubleAnimation>와 <Int32AnimationUsingKeyFrames>의 속성을 지정하는 것이다.

  <DoubleAnimation
     Storyboard.TargetName="TextEffectTranslateTransform"
     Storyboard.TargetProperty="Y"
     From="0"
     To="20"
     Duration="00:00:0.25"
     RepeatBehavior="Forever"
     AutoReverse="True" />

먼저 <DoubleAnimation>은 하나의 실수형 값만을 변경함으로써 우리가 원하는 에니메이션을 얻을 수 있는 경우 사용한다. <DoubleAnimation>을 살펴보면 앞서 정의한 TextEffectTranslateTransform이라는 이름의 <TextEffect.Transform>의 Y 속성을 0~20(From, To 속성)으로 0.25초 동안(Duration="00:00:0.25") 변화시킨다는 내용이다. RepeatBehavior="Forever"는 모든 문자들에 대해 반복하다는 의미이고 AutoReverse="True"는 Y 축으로 0~20까지 변경이 완료되면 다시 역으로 변경되도록 하는 것이다.

  <Int32AnimationUsingKeyFrames
     Storyboard.TargetName="MyTextEffect"
     Storyboard.TargetProperty="PositionStart"
     Duration="0:0:6.5"
     AutoReverse="True"
     RepeatBehavior="Forever">
       <Int32AnimationUsingKeyFrames.KeyFrames>
         <DiscreteInt32KeyFrame Value="0" KeyTime="0:0:0" />
         <DiscreteInt32KeyFrame Value="1" KeyTime="0:0:0.5" />
         <DiscreteInt32KeyFrame Value="2" KeyTime="0:0:1" />
         <DiscreteInt32KeyFrame Value="3" KeyTime="0:0:1.5" />
         <DiscreteInt32KeyFrame Value="4" KeyTime="0:0:2" />
         <DiscreteInt32KeyFrame Value="5" KeyTime="0:0:2.5" />
         <DiscreteInt32KeyFrame Value="6" KeyTime="0:0:3" />
         <DiscreteInt32KeyFrame Value="7" KeyTime="0:0:3.5" />
         <DiscreteInt32KeyFrame Value="8" KeyTime="0:0:4" />
         <DiscreteInt32KeyFrame Value="9" KeyTime="0:0:4.5" />
         <DiscreteInt32KeyFrame Value="10" KeyTime="0:0:5" />
         <DiscreteInt32KeyFrame Value="11" KeyTime="0:0:5.5" />
         <DiscreteInt32KeyFrame Value="12" KeyTime="0:0:6" />
       </Int32AnimationUsingKeyFrames.KeyFrames>
     </Int32AnimationUsingKeyFrames>

다음으로 <Int32AnimationUsingKeyFrames>은 하나의 정수형 값을 변경하는 에니메이션이면서 정확한 시간별로 프레임을 지정한다. <Int32AnimationUsingKeyFrames>의 대상은 TargetName과 TargetProperty로 지정해준다. 즉 앞서 이동 변환 효과로 설정했던 <TextEffect>의 Name과 <TextEffect>의 효과를 받을 문자의 인덱스 프로퍼티로써 PositionStart 값을 지정했다. 바로 이 PositionStart 프로퍼티가 Int32 형이고 <Int32AnimationUsingKeyFrames>가 에니메이션을 위해 변경시킬 값이다. 총 6.5초 동안 한 사이클을 도는 이 에니메이션의 시간을 0.5초 간격으로 Frame을 나누어주고 있다. 즉, <DiscreteInt32KeyFrame>을 통해 속성 KeyTime 시간에 Value 속성의 값으로 PositionStart 값을 설정하고 있다.

WPF에서 제공하는 에니메이션 기능은 유연하고 막강하다고 생각한다. WPF가 나오기 이전의 개발환경에서 에니메이션을 구현하려면 무척 많은 것을을 고민하고 기존의 것을 대폭적으로 수정해야했으나 WPF는 이미 모든 요소에 대해 에니메이션을 적용받을 수 있도록 되어있다. 이제는 정적인 컨텐츠가 아니라 항상 사용자가 교감하는 동적인 컨텐츠를 만들기가 어려운 것이 아니다. 개발자에게 있어 기술보다는 창의력으로 개발할 수 있는 기반을 제공하고 있다.

<Window x:Class="Visual3DSample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:my="clr-namespace:Primitive3DSurfaces;assembly=Primitive3DSurfaces" 
    Title="tst WPF3D">

  <Grid>
    <Grid.Background>
      <LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
        <LinearGradientBrush.GradientStops>
          <GradientStop Color="Black" Offset="0"/>
          <GradientStop Color="DarkBlue" Offset="1"/>
        </LinearGradientBrush.GradientStops>
      </LinearGradientBrush>
    </Grid.Background>
    
    <Viewport3D Grid.Column="0" Grid.Row="0">
      <Viewport3D.Camera>
        <PerspectiveCamera Position="0,0,-8" 
                           UpDirection="0,1,0" LookDirection="0,0,1" 
                           FieldOfView="30" NearPlaneDistance="0.125"/>
      </Viewport3D.Camera>

      <Viewport3D.Children>
        <ModelVisual3D>
          <ModelVisual3D.Content>
            <DirectionalLight Color="White" Direction="0,0,1" />
          </ModelVisual3D.Content>
        </ModelVisual3D>
        <ModelVisual3D>
          
        <my:Sphere3D>
          <ModelVisual3D.Transform>
            <TranslateTransform3D OffsetX="0" OffsetY="0" OffsetZ="0"  />
          </ModelVisual3D.Transform>
          <my:Sphere3D.Material>
            <DiffuseMaterial>
              <DiffuseMaterial.Brush>
                <ImageBrush ImageSource="Azul.jpg" />
              </DiffuseMaterial.Brush>
            </DiffuseMaterial>
          </my:Sphere3D.Material>
        </my:Sphere3D>

      </ModelVisual3D>
    </Viewport3D.Children>
  </Viewport3D>
  </Grid>
</Window>

using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Media3D;

namespace Primitive3DSurfaces
{
    public abstract class Primitive3D : ModelVisual3D
    {
        //<1>
        internal abstract Geometry3D Tessellate();
        //<2>
        internal readonly GeometryModel3D _content 
            = new GeometryModel3D();

        //<3>
        public Primitive3D()
        {
            Content = _content;
            _content.Geometry = Tessellate();
        }

        //<4-1>
        public static DependencyProperty MaterialProperty =
            DependencyProperty.Register(
                "Material",
                typeof(Material),
                typeof(Primitive3D), 
                new PropertyMetadata( null, 
                    new PropertyChangedCallback(OnMaterialChanged)));
        //<4-2>
        public Material Material
        {
            get { return (Material)GetValue(MaterialProperty); }
            set { SetValue(MaterialProperty, value); }
        }

        //<5>
        internal static void OnMaterialChanged(Object sender, 
            DependencyPropertyChangedEventArgs e)
        {
            Primitive3D p = ((Primitive3D)sender);
            p._content.Material = p.Material;
        }

        //<6>
        internal static void OnGeometryChanged(DependencyObject d)
        {
            Primitive3D p = ((Primitive3D)d);
            p._content.Geometry = p.Tessellate();
        }

        //<7>
        internal double DegToRad(double degrees)
        {
            return (degrees / 180.0) * Math.PI;
        }
    }
}

using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Media3D;

namespace Primitive3DSurfaces
{
    public sealed class Sphere3D : Primitive3D
    {
        internal Point3D GetPosition(double t, double y)
        {
            double r = Math.Sqrt(1 - y * y);
            double x = r * Math.Cos(t);
            double z = r * Math.Sin(t);

            return new Point3D(x, y, z);
        }

        private Vector3D GetNormal(double t, double y)
        {
            return (Vector3D) GetPosition(t, y);
        }

        private Point GetTextureCoordinate(double t, double y)
        {
            Matrix TYtoUV = new Matrix();
            TYtoUV.Scale(1 / (2 * Math.PI), -0.5);

            Point p = new Point(t, y);
            p = p * TYtoUV;

            return p;
        }

        internal override Geometry3D Tessellate()
        {
            int tDiv = 32;
            int yDiv = 32;
            double maxTheta = DegToRad(360.0);
            double minY = -1.0;
            double maxY = 1.0;

            double dt = maxTheta / tDiv;
            double dy = (maxY - minY) / yDiv;

            MeshGeometry3D mesh = new MeshGeometry3D();

            for (int yi = 0; yi <= yDiv; yi++)
            {
                double y = minY + yi * dy;

                for (int ti = 0; ti <= tDiv; ti++)
                {
                    double t = ti * dt;

                    mesh.Positions.Add(GetPosition(t, y));
                    mesh.Normals.Add(GetNormal(t, y));
                    mesh.TextureCoordinates.Add(GetTextureCoordinate(t, y));
                }
            }

            for (int yi = 0; yi < yDiv; yi++)
            {
                for (int ti = 0; ti < tDiv; ti++)
                {
                    int x0 = ti;
                    int x1 = (ti + 1);
                    int y0 = yi * (tDiv + 1);
                    int y1 = (yi + 1) * (tDiv + 1);

                    mesh.TriangleIndices.Add(x0 + y0);
                    mesh.TriangleIndices.Add(x0 + y1);
                    mesh.TriangleIndices.Add(x1 + y0);

                    mesh.TriangleIndices.Add(x1 + y0);
                    mesh.TriangleIndices.Add(x0 + y1);
                    mesh.TriangleIndices.Add(x1 + y1);
                }
            }

            mesh.Freeze();
            return mesh;
        }
    }
}

using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Media3D;

namespace Primitive3DSurfaces
{
    public sealed class Cylinder3D : Primitive3D
    {
        internal Point3D GetPosition(double t, double y)
        {
            double x = Math.Cos(t);
            double z = Math.Sin(t);

            return new Point3D(x, y, z);
        }

        private Vector3D GetNormal(double t, double y)
        {
            double x = Math.Cos(t);
            double z = Math.Sin(t);

            return new Vector3D(x, 0, z);
        }

        private Point GetTextureCoordinate(double t, double y)
        {
            Matrix m = new Matrix();
            m.Scale(1 / (2 * Math.PI), -0.5);

            Point p = new Point(t, y);
            p = p * m;

            return p;
        }

        internal override Geometry3D Tessellate()
        {
            int tDiv = 32;
            int yDiv = 32;
            double maxTheta = DegToRad(360.0);
            double minY = -1.0;
            double maxY = 1.0;

            double dt = maxTheta / tDiv;
            double dy = (maxY - minY) / yDiv;

            MeshGeometry3D mesh = new MeshGeometry3D();

            for (int yi = 0; yi <= yDiv; yi++)
            {
                double y = minY + yi * dy;

                for (int ti = 0; ti <= tDiv; ti++)
                {
                    double t = ti * dt;

                    mesh.Positions.Add(GetPosition(t, y));
                    mesh.Normals.Add(GetNormal(t, y));
                    mesh.TextureCoordinates.Add(GetTextureCoordinate(t, y));
                }
            }

            for (int yi = 0; yi < yDiv; yi++)
            {
                for (int ti = 0; ti < tDiv; ti++)
                {
                    int x0 = ti;
                    int x1 = (ti + 1);
                    int y0 = yi * (tDiv + 1);
                    int y1 = (yi + 1) * (tDiv + 1);

                    mesh.TriangleIndices.Add(x0 + y0);
                    mesh.TriangleIndices.Add(x0 + y1);
                    mesh.TriangleIndices.Add(x1 + y0);

                    mesh.TriangleIndices.Add(x1 + y0);
                    mesh.TriangleIndices.Add(x0 + y1);
                    mesh.TriangleIndices.Add(x1 + y1);
                }
            }

            mesh.Freeze();
            return mesh;
        }
    }
}

using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Media3D;

namespace Primitive3DSurfaces
{
    public sealed class Cone3D : Primitive3D
    {
        internal Point3D GetPosition(double t, double y)
        {
            double r = (1 - y) / 2;
            double x = r * Math.Cos(t);
            double z = r * Math.Sin(t);

            return new Point3D(x, y, z);
        }

        private Vector3D GetNormal(double t, double y)
        {
            double x = 2 * Math.Cos(t);
            double z = 2 * Math.Sin(t);

            return new Vector3D(x, 1, z);
        }

        private Point GetTextureCoordinate(double t, double y)
        {
            Matrix m = new Matrix();
            m.Scale(1 / (2 * Math.PI), -0.5);

            Point p = new Point(t, y);
            p = p * m;

            return p;
        }

        internal override Geometry3D Tessellate()
        {
            int tDiv = 32;
            int yDiv = 32;
            double maxTheta = DegToRad(360.0);
            double minY = -1.0;
            double maxY = 1.0;

            double dt = maxTheta / tDiv;
            double dy = (maxY - minY) / yDiv;

            MeshGeometry3D mesh = new MeshGeometry3D();

            for (int yi = 0; yi <= yDiv; yi++)
            {
                double y = minY + yi * dy;

                for (int ti = 0; ti <= tDiv; ti++)
                {
                    double t = ti * dt;

                    mesh.Positions.Add(GetPosition(t, y));
                    mesh.Normals.Add(GetNormal(t, y));
                    mesh.TextureCoordinates.Add(GetTextureCoordinate(t, y));
                }
            }

            for (int yi = 0; yi < yDiv; yi++)
            {
                for (int ti = 0; ti < tDiv; ti++)
                {
                    int x0 = ti;
                    int x1 = (ti + 1);
                    int y0 = yi * (tDiv + 1);
                    int y1 = (yi + 1) * (tDiv + 1);

                    mesh.TriangleIndices.Add(x0 + y0);
                    mesh.TriangleIndices.Add(x0 + y1);
                    mesh.TriangleIndices.Add(x1 + y0);

                    mesh.TriangleIndices.Add(x1 + y0);
                    mesh.TriangleIndices.Add(x0 + y1);
                    mesh.TriangleIndices.Add(x1 + y1);
                }
            }

            mesh.Freeze();
            return mesh;
        }
    }
}

WPF의 2D Graphic의 효과 중에 채움(Fill) 효과에 대한 것이다. WPF의 채움은 Brush라는 개념으로 이루어지며 다음과 같은 종류가 있다.

• SolidColorBrush
• LinearGradientBrush
• RadialGradientBrush
• ImageBrush
• DrawingBrush
• VisualBrush

SolidBrush는 Geometry에 대해 단색으로 칠하는 브러쉬이고 LinearGradientBrush는 Gradient 색상을 선형으로 생성하여 채워준다. 또한 RadialGradientBrush는 방사형으로 Gradient 색상을 생성하여 채워주며 ImageBrush는 Image를 이용해 원하는 Geometry의 안을 채워준다. 그리고 DrawingBrush는 채우기 위한 내용을 사용자가 직접 또 다른 Geometry를 이용하여 만들어 채울 수 있다.  마지막으로 VisualBrush는 Control 등과 같은 내용(Content)를 이용하여 그 UI의 외형을 Geometry에 채울 수 있는 브러쉬이다. 참고로 브러쉬는 2차원뿐만이 아니라 3차원에서도 사용할 수 있다.

그럼 6개의 브러쉬에 대해 하나 하나 살펴 보기로 하자.

  <StackPanel Orientation="Horizontal" 
              VerticalAlignment="Top" Margin="10,10,10,10">
    <Rectangle Width="50" Height="50" Stroke="White" StrokeThickness="1">
      <Rectangle.Fill>
        <SolidColorBrush Color="Blue" Opacity="1.0" />
      </Rectangle.Fill>
    </Rectangle>

    <Rectangle Width="50" Height="50" Stroke="White" StrokeThickness="1">
      <Rectangle.Fill>
        <SolidColorBrush Color="Blue" Opacity="0.8" />
      </Rectangle.Fill>
    </Rectangle>

    <Rectangle Width="50" Height="50" Stroke="White" StrokeThickness="1">
      <Rectangle.Fill>
        <SolidColorBrush Color="Blue" Opacity="0.6" />
      </Rectangle.Fill>
    </Rectangle>

    <Rectangle Width="50" Height="50" Stroke="White" StrokeThickness="1">
      <Rectangle.Fill>
        <SolidColorBrush Color="Blue" Opacity="0.4" />
      </Rectangle.Fill>
    </Rectangle>    
  </StackPanel>

Geometry는 Rectangle이고 총 4개를 화면상에 렌더링했으며 Geometry의 Fill을 위해 SolidColorBrush를 사용하였다. 채움색의 지정을 위해 Color 속성을 사용하였고 투명도를 위해 Opacity를 사용하였다.

  <StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="10,10,10,10">
   <Rectangle Width="150" Height="150" Grid.Row="0" Margin="2,2,2,2">
     <Rectangle.Fill>
       <LinearGradientBrush>
         <GradientStop Color="Yellow" Offset="0.0" />
         <GradientStop Color="Orange" Offset="0.5" />
         <GradientStop Color="Red" Offset="1.0" />
       </LinearGradientBrush>
     </Rectangle.Fill>
   </Rectangle>

   <Rectangle Width="150" Height="150" Margin="2,2,2,2">
     <Rectangle.Fill>
       <LinearGradientBrush>
         <GradientStop Color="Blue" Offset="0.0" />
         <GradientStop Color="Purple" Offset="1.0" />
       </LinearGradientBrush>
     </Rectangle.Fill>
   </Rectangle>

   <Rectangle Width="150" Height="150" Margin="2,2,2,2">
     <Rectangle.Fill>
       <LinearGradientBrush>
         <GradientStop Color="Purple" Offset="0.0" />
         <GradientStop Color="BlueViolet" Offset="0.5" />
         <GradientStop Color="White" Offset="1.0" />
       </LinearGradientBrush>
     </Rectangle.Fill>
   </Rectangle>

   <Rectangle Width="150" Height="150" Margin="2,2,2,2">
     <Rectangle.Fill>
       <LinearGradientBrush>
         <GradientStop Color="Gold" Offset="0.0" />
         <GradientStop Color="Red" Offset="0.5" />
         <GradientStop Color="Orange" Offset="1.0" />
       </LinearGradientBrush>
     </Rectangle.Fill>
   </Rectangle>
  </StackPanel>

마찬가지로 Rectangle Geometry를 이용하여 화면상에 총 4개를 그렸다. 여러개의 GradientStop Element를 사용해서 선형으로 생성할 Gradient 색상을 단계적으로 지정할 수 있다.

  <StackPanel Orientation="Horizontal" 
              VerticalAlignment="Top" Margin="10,10,10,10">
  <Rectangle Width="150" Height="150" Grid.Row="0" Margin="2,2,2,2">
     <Rectangle.Fill>
       <RadialGradientBrush GradientOrigin="0.75,0.25">
         <GradientStop Color="Yellow" Offset="0.0" />
         <GradientStop Color="Orange" Offset="0.5" />
         <GradientStop Color="Red" Offset="1.0" />
       </RadialGradientBrush>
     </Rectangle.Fill>
  </Rectangle>

  <Ellipse Width="150" Height="150" Margin="2,2,2,2">
     <Ellipse.Fill>
       <RadialGradientBrush GradientOrigin="0.75,0.25">
         <GradientStop Color="White" Offset="0.0" />
         <GradientStop Color="MediumBlue" Offset="0.5" />
         <GradientStop Color="Black" Offset="1.0" />
       </RadialGradientBrush>
     </Ellipse.Fill>
  </Ellipse>
  <Ellipse Width="150" Height="150" Margin="2,2,2,2">
     <Ellipse.Fill>
       <RadialGradientBrush GradientOrigin="0.75,0.25">
         <GradientStop Color="AliceBlue" Offset="0.0" />
         <GradientStop Color="Purple" Offset="0.5" />
         <GradientStop Color="#330033" Offset="1.0" />
       </RadialGradientBrush>
     </Ellipse.Fill>
  </Ellipse>
  <Ellipse Width="150" Height="150" Margin="2,2,2,2">
     <Ellipse.Fill>
       <RadialGradientBrush GradientOrigin="0.75,0.25">
         <GradientStop Color="Yellow" Offset="0.0" />
         <GradientStop Color="Orange" Offset="0.5" />
         <GradientStop Color="Red" Offset="1.0" />
       </RadialGradientBrush>
     </Ellipse.Fill>
  </Ellipse>
  </StackPanel>

방사형의 Gradient 색상을 생성하는 것으로 RadialGradientBrush Element를 사용하였고 방사형의 중심을 지정하기 위해 GradientOrigin을 사용하였다. GradientOrigin의 밤위는 0~1 사이의 실수값이다. LinearGradientBrush와 마찬가지로 다수의 GradientStop을 사용하여 색상과 Offset 위치를 지정할 수 있다. 효과적인 방사형의 Gradient 적용을 살펴보기 위해 Geometry로 Ellipse를 사용해보았다.

  <StackPanel Orientation="Horizontal" 
              VerticalAlignment="Top" Margin="10,10,10,10">
  <Rectangle Width="140" Height="140" Grid.Row="0" 
             Margin="2,2,2,2" Stroke="Black">
     <Rectangle.Fill>
       <ImageBrush ImageSource="pinkcherries.jpg"  />
     </Rectangle.Fill>
  </Rectangle>

  <Rectangle Width="140" Height="140" 
             Margin="2,2,2,2" Stroke="Black">
     <Rectangle.Fill>
       <ImageBrush Stretch="None" ImageSource="pinkcherries.jpg"  />
     </Rectangle.Fill>
  </Rectangle>

  <Rectangle Width="70" Height="70" 
             Margin="2,2,2,2" Stroke="Black">
     <Rectangle.Fill>
       <ImageBrush Viewport="0,0,25,25" 
                   ViewportUnits="Absolute" TileMode="Tile"
                   ImageSource="pinkcherries.jpg" />
     </Rectangle.Fill>
  </Rectangle>

  <Rectangle Width="70" Height="70" 
             Margin="2,2,2,2" Stroke="Black">
     <Rectangle.Fill>
       <ImageBrush Viewport="0,0,10,10" 
                   ViewportUnits="Absolute" TileMode="Tile"
                   ImageSource="pinkcherries.jpg" />
     </Rectangle.Fill>
  </Rectangle>

이미지를 이용하여 Geometry를 채우는 것으로써 Geometry의 크기에 맞게 이미지를 키울 수 도 있고, 키우지 않고 원래 크기대로 채워 그릴 수도 있으며, 타일형식으로 채워 넣을 수도 있다. 사용하는 Element는 ImageBrush이다.    
 

  <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="10,10,10,10">
  <Rectangle Width="150" Height="150" Margin="2,2,2,2">
     <Rectangle.Fill>
       <DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
         <DrawingBrush.Drawing>
           <DrawingGroup>
             <GeometryDrawing Brush="White">
               <GeometryDrawing.Geometry>
                 <RectangleGeometry Rect="0,0,1,1" />
               </GeometryDrawing.Geometry>
             </GeometryDrawing>
             <GeometryDrawing Brush="Black"
               Geometry="M 0,0 L0,0.5 0.5,0.5 0.5,1 1,1 1,0.5 0.5,0.5 0.5,0" />
           </DrawingGroup>
         </DrawingBrush.Drawing>
       </DrawingBrush>
     </Rectangle.Fill>
  </Rectangle>

  <Rectangle Width="150" Height="150" Margin="2,2,2,2">
     <Rectangle.Fill>
       <DrawingBrush Viewport="0,0,1,1" TileMode="Tile">
         <DrawingBrush.Drawing>
           <DrawingGroup>
             <GeometryDrawing Brush="Pink">
               <GeometryDrawing.Geometry>
                 <RectangleGeometry Rect="0,0,1,1" />
               </GeometryDrawing.Geometry>
             </GeometryDrawing>
             <GeometryDrawing>
               <GeometryDrawing.Brush>
                 <ImageBrush ImageSource="cherries.jpg"  />
               </GeometryDrawing.Brush>
               <GeometryDrawing.Geometry>
                 <RectangleGeometry Rect="0,0,0.5,0.5" />
               </GeometryDrawing.Geometry>
             </GeometryDrawing>
             <GeometryDrawing>
               <GeometryDrawing.Brush>
                 <ImageBrush ImageSource="cherries.jpg"  />
               </GeometryDrawing.Brush>
               <GeometryDrawing.Geometry>
                 <RectangleGeometry Rect="0.5,0.5,0.5,0.5" />
               </GeometryDrawing.Geometry>
             </GeometryDrawing>
           </DrawingGroup>
         </DrawingBrush.Drawing>
       </DrawingBrush>
     </Rectangle.Fill>
  </Rectangle>

  <Rectangle Width="150" Height="150" Margin="2,2,2,2">
     <Rectangle.Fill>
       <DrawingBrush Viewport="0,0,10,10" ViewportUnits="Absolute" TileMode="Tile">
         <DrawingBrush.Drawing>
           <DrawingGroup>
             <GeometryDrawing Brush="White">
               <GeometryDrawing.Geometry>
                 <RectangleGeometry Rect="0,0,1,1" />
               </GeometryDrawing.Geometry>
             </GeometryDrawing>
             <GeometryDrawing Brush="Blue"
               Geometry="M 0,0 L 0,1 0.1,1 0.1,0.1 1,0.1 1,0 Z" />
           </DrawingGroup>
         </DrawingBrush.Drawing>
       </DrawingBrush>
     </Rectangle.Fill>
  </Rectangle>

  <Rectangle Width="150" Height="150" Margin="2,2,2,2">
     <Rectangle.Fill>
       <DrawingBrush Viewport="0,0,1,1" TileMode="Tile">
         <DrawingBrush.Drawing>
           <DrawingGroup>
             <GeometryDrawing>
               <GeometryDrawing.Geometry>
                 <RectangleGeometry Rect="0,0,1,1" />
               </GeometryDrawing.Geometry>
               <GeometryDrawing.Brush>
                 <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                   <LinearGradientBrush.GradientStops>
                     <GradientStop Color="Blue" Offset="0.0" />
                     <GradientStop Color="#9966CC" Offset="0.5" />
                     <GradientStop Color="MediumBlue" Offset="1.0" />
                   </LinearGradientBrush.GradientStops>
                 </LinearGradientBrush>
               </GeometryDrawing.Brush>
             </GeometryDrawing>
             <GeometryDrawing>
               <GeometryDrawing.Geometry>
                 <RectangleGeometry Rect="0,0,1,1" />
               </GeometryDrawing.Geometry>
               <GeometryDrawing.Brush>
                 <RadialGradientBrush GradientOrigin="0.75,0.25">
                   <RadialGradientBrush.GradientStops>
                     <GradientStop Color="White" Offset="0.0" />
                     <GradientStop Color="Transparent" Offset="0.5" />
                     <GradientStop Color="Transparent" Offset="0.9" />
                     <GradientStop Color="Black" Offset="1.0" />
                   </RadialGradientBrush.GradientStops>
                 </RadialGradientBrush>
               </GeometryDrawing.Brush>
             </GeometryDrawing>
           </DrawingGroup>
         </DrawingBrush.Drawing>
       </DrawingBrush>
     </Rectangle.Fill>
  </Rectangle>
  </StackPanel>

Effect가 적용된 Geometry 자체를 채움을 위한 브러쉬로써 사용할 수 있는 DrawingBrush Element의 사용예이다. 앞서 사용했던 다양한 Brsuh들이 적용된 Geometry가 다시 Brush로써 사용되는 것을 알 수 있다.

  <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="10,10,10,10">
  <Rectangle Width="150" Height="150" Grid.Row="0" Margin="2,2,2,2">
     <Rectangle.Fill>
       <VisualBrush TileMode="Tile">
         <VisualBrush.Visual>
           <StackPanel>
             <StackPanel.Background>
               <DrawingBrush>
                 <DrawingBrush.Drawing>
                   <GeometryDrawing>
                     <GeometryDrawing.Brush>
                       <RadialGradientBrush>
                         <GradientStop Color="MediumBlue" Offset="0.0" />
                         <GradientStop Color="White" Offset="1.0" />
                       </RadialGradientBrush>
                     </GeometryDrawing.Brush>
                     <GeometryDrawing.Geometry>
                       <GeometryGroup>
                         <RectangleGeometry Rect="0,0,0.5,0.5" />
                         <RectangleGeometry Rect="0.5,0.5,0.5,0.5" />
                       </GeometryGroup>
                     </GeometryDrawing.Geometry>
                   </GeometryDrawing>
                 </DrawingBrush.Drawing>
               </DrawingBrush>
             </StackPanel.Background>
             <TextBlock FontSize="10pt" Margin="10">Hello, World!</TextBlock>
           </StackPanel>
         </VisualBrush.Visual>
       </VisualBrush>
     </Rectangle.Fill>
  </Rectangle>

  <Rectangle Width="150" Height="150" Margin="2,2,2,2">
     <Rectangle.Fill>
       <VisualBrush Viewport="0,0,1,0.25" TileMode="Tile" Stretch="Uniform">
         <VisualBrush.Visual>
           <StackPanel Background="White">
             <TextBlock FontSize="10pt" Margin="1">Hello, World!</TextBlock>
           </StackPanel>
         </VisualBrush.Visual>
       </VisualBrush>
     </Rectangle.Fill>
  </Rectangle>

  <Rectangle Width="150" Height="150" Margin="2,2,2,2">
     <Rectangle.Fill>
       <VisualBrush Viewport="0,0,1,0.25" TileMode="Tile" Stretch="Uniform">
         <VisualBrush.Visual>
           <StackPanel Background="White">
             <TextBlock FontSize="10pt" Margin="1">Hello, World!</TextBlock>
           </StackPanel>
         </VisualBrush.Visual>
         <VisualBrush.RelativeTransform>
           <RotateTransform Angle="-45" CenterX="0.5" CenterY="0.5" />
         </VisualBrush.RelativeTransform>
       </VisualBrush>
     </Rectangle.Fill>
  </Rectangle>

  <Rectangle Width="150" Height="150" Margin="2,2,2,2">
     <Rectangle.Fill>
       <VisualBrush>
         <VisualBrush.Visual>
           <StackPanel Background="White">
             <Button Margin="1">Button Control</Button>
             <Button Margin="1">Another Button</Button>
           </StackPanel>
         </VisualBrush.Visual>
       </VisualBrush>
     </Rectangle.Fill>
  </Rectangle>
  </StackPanel>

마지막으로 가장 융통성이 뛰어난 VisualBrush이다. Control은 물론이거니와 DrawingBrush의 기능까지도 포함할 수 있는 브러쉬로써 3차원으로 렌더링된 장면까지도 담을 수 있는 Brush이다. 또한 이 브러쉬를 이용하면 3차원 장면에서 2D GUI를 활용할 수 있게 하는 가장 화려한 브러쉬이다.

  <Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
    <Path.Data>
      <RectangleGeometry Rect="30,55 100 30" />
    </Path.Data>
  </Path>

Path를 이용한 Geometry를 렌더링 하는 가장 간단한 코드이다. Rectangle Geometry를 나타내고 있다. Path Element의 속성으로써 Stroke와 Fill을 줄 수 있는데, Stroke는 외곽선의 색상을 의미하고 Fill은 채움색을 의미한다. StrokeThickness는 외곽선의 굵기값이다.

   <Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
     <Path.Data>
       <GeometryGroup FillRule="Nonzero">
         <LineGeometry StartPoint="10,10" EndPoint="50,30" />
         <EllipseGeometry Center="40,70" RadiusX="30" RadiusY="30" />
         <RectangleGeometry Rect="30,55 100 30" />
       </GeometryGroup>
     </Path.Data>
   </Path>

Path를 이용한 Geometry를 렌더링하는 코드로써 여러개의 Geometry를 하나의 Geometry로 묶기 위해 GeometryGroup Element를 사용하였다. GemoetryGroup는 FillRule 속성을 가지고 있으며 EvenOdd와 Nonzero 값을 가질 수 있다. FillRule는 Geometry가 서로 겹치는 부분을 어떻게 처리할 것인지를 결정하는 것으로써 Nonzero는 그냥 채움이고 EvenOdd는 빈공간으로 채우지 않는다.

  <Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
  <Path.Data>
     <GeometryGroup FillRule="EvenOdd">
       <LineGeometry StartPoint="10,10" EndPoint="50,30" />
       <EllipseGeometry Center="40,70" RadiusX="30" RadiusY="30" />
       <RectangleGeometry Rect="30,55 100 30" />
     </GeometryGroup>
  </Path.Data>
  </Path>

FillRule를 EvenOdd인 경우이다.

  <Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
  <Path.Data>
     <PathGeometry>
       <PathGeometry.Figures>
         <PathFigureCollection>
           <PathFigure IsClosed="True" StartPoint="10,100">
             <PathFigure.Segments>
               <PathSegmentCollection>
                 <LineSegment Point="100,100" />
                 <LineSegment Point="100,50" />
               </PathSegmentCollection>
             </PathFigure.Segments>
           </PathFigure>
           <PathFigure IsClosed="True" StartPoint="10,10">
             <PathFigure.Segments>
               <PathSegmentCollection>
                 <LineSegment Point="100,10" />
                 <LineSegment Point="100,40" />
               </PathSegmentCollection>
             </PathFigure.Segments>
           </PathFigure>
         </PathFigureCollection>
       </PathGeometry.Figures>
     </PathGeometry>
  </Path.Data>
  </Path>

Path를 생성하는 방법으로써 직접 직선이나 다양한 곡선을 이용해 구성하는 방법이다. 직선을 이용한 예로써 LineSegment를 사용하였다.

  <Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
  <Path.Data>
     <PathGeometry>
       <PathGeometry.Figures>
         <PathFigureCollection>
           <PathFigure StartPoint="10,10">
             <PathFigure.Segments>
               <PathSegmentCollection>
                 <ArcSegment Size="100,50" RotationAngle="45"
                             IsLargeArc="True" 
                             SweepDirection="CounterClockwise" 
                             Point="200,100" />
               </PathSegmentCollection>
             </PathFigure.Segments>
           </PathFigure>
         </PathFigureCollection>
       </PathGeometry.Figures>
     </PathGeometry>
  </Path.Data>
  </Path>

곡선을 이용한 예로써 ArcSegment를 이용하였다. Stroke를 완전하게 폐합하고자 한다면 PathFigure Element의 IsClosed 속성을 True로 주면 된다. 기본값은 False이다.

  <Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
  <Path.Data>
     <PathGeometry>
       <PathGeometry.Figures>
         <PathFigureCollection>
           <PathFigure StartPoint="10,10" IsClosed="True">
             <PathFigure.Segments>
               <PathSegmentCollection>
                 <QuadraticBezierSegment Point1="200,200" Point2="300,100" />
               </PathSegmentCollection>
             </PathFigure.Segments>
           </PathFigure>
         </PathFigureCollection>
       </PathGeometry.Figures>
     </PathGeometry>
  </Path.Data>
  </Path>

곡선을 이용한 또 다른 예로써 QuadraticBezierSegment를 사용하였다.

  <Path Stroke="Black" StrokeThickness="1">
  <Path.Data>
     <PathGeometry>
       <PathGeometry.Figures>
         <PathFigureCollection>
           <PathFigure StartPoint="10,10">
             <PathFigure.Segments>
               <PathSegmentCollection>
                 <BezierSegment Point1="100,0" 
                                Point2="200,200" 
                                Point3="300,100" />
               </PathSegmentCollection>
             </PathFigure.Segments>
           </PathFigure>
         </PathFigureCollection>
       </PathGeometry.Figures>
     </PathGeometry>
  </Path.Data>
  </Path>

곡선을 이용한 또 다른 예로써 BezierSegment를 사용하였다.

  <Image Source="Waterlilies.jpg" Width="200" Height="200"
  HorizontalAlignment="Left">
  <Image.Clip>
     <GeometryGroup>
       <RectangleGeometry Rect="50,5 100,10" />
       <RectangleGeometry Rect="5,5 95,180" />
       <EllipseGeometry Center="100, 100" RadiusX="20" RadiusY="30"/>
       <RectangleGeometry Rect="50,175 100,10" />
       <PathGeometry>
         <PathGeometry.Figures>
           <PathFigureCollection>
             <PathFigure IsClosed="true" StartPoint="50,50">
               <PathFigure.Segments>
                 <PathSegmentCollection>
                   <BezierSegment Point1="75,300" 
                                  Point2="125,100" 
                                  Point3="150,50"/>
                   <BezierSegment Point1="125,300" 
                                  Point2="75,100" 
                                  Point3="50,50"/>
                 </PathSegmentCollection>
               </PathFigure.Segments>
             </PathFigure>
           </PathFigureCollection>
         </PathGeometry.Figures>
       </PathGeometry>
     </GeometryGroup>
  </Image.Clip>
  </Image>

Geometry를 이용하여 Image를 Clip하는 코드이다. 이미지를 화면에 나타내기 위해 가장 먼저 Image Element를 사용하였고 Source로 이미지 파일을 지정하였다. 이후에 Clip하기 위한 Geometry를 지정하기 위하는데, 두개 이상의 Geometry를 지정하기 위해 GeometryGroup Element를 사용하였으며 Geometry로써 단순 Geometry와 Path를 이용한 복합 Geometry를 사용하여 Clip을 위한 Geometry를 생성한다.

  <Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
  <Path.Data>
     <GeometryGroup>
       <RectangleGeometry Rect="50,5 100,10" />
       <RectangleGeometry Rect="5,5 95,180" />
       <EllipseGeometry Center="100, 100" RadiusX="20" RadiusY="30"/>
       <RectangleGeometry Rect="50,175 100,10" />
       <PathGeometry>
         <PathGeometry.Figures>
           <PathFigureCollection>
             <PathFigure IsClosed="true" StartPoint="50,50">
               <PathFigure.Segments>
                 <PathSegmentCollection>
                   <BezierSegment Point1="75,300" 
                                  Point2="125,100" 
                                  Point3="150,50"/>
                   <BezierSegment Point1="125,300" 
                                  Point2="75,100"  
                                  Point3="50,50"/>
                 </PathSegmentCollection>
               </PathFigure.Segments>
             </PathFigure>
           </PathFigureCollection>
         </PathGeometry.Figures>
       </PathGeometry>
     </GeometryGroup>
  </Path.Data>
  </Path>

Path를 생성하기 위해 두개 이상의 Geometry를 사용할 경우 GeometryGroup로 묶게 되는데, 하나의 Geometry로써 PathGeometry를 사용하여, 이 PathGeometry Element 안쪽에 여러개의 Geometry 격인 PathFigure를 넣는 경우에 대한 코드이다.

  <Rectangle Height="200" Width="200" Stroke="Black" StrokeThickness="1"
  HorizontalAlignment="Left">
  <Rectangle.Fill>
     <DrawingBrush Viewbox="0,0,200,200" ViewboxUnits="Absolute" 
                   Viewport="0,0,0.5,0.5" TileMode="FlipXY">
       <DrawingBrush.Drawing>
         <GeometryDrawing Brush="#CCCCFF">
           <GeometryDrawing.Pen>
             <Pen Thickness="1" Brush="Black" />
           </GeometryDrawing.Pen>
           <GeometryDrawing.Geometry>
             <GeometryGroup>
               <RectangleGeometry Rect="50,5 100,10" />
               <RectangleGeometry Rect="5,5 95,180" />
               <EllipseGeometry Center="100, 100" RadiusX="20" RadiusY="30"/>
               <RectangleGeometry Rect="50,175 100,10" />
               <PathGeometry>
                 <PathGeometry.Figures>
                   <PathFigureCollection>
                     <PathFigure IsClosed="true" StartPoint="50,50">
                       <PathFigure.Segments>
                         <PathSegmentCollection>
                           <BezierSegment Point1="75,300" 
                                          Point2="125,100" 
                                          Point3="150,50"/>
                           <BezierSegment Point1="125,300" 
                                          Point2="75,100" 
                                          Point3="50,50"/>
                         </PathSegmentCollection>
                       </PathFigure.Segments>
                     </PathFigure>
                   </PathFigureCollection>
                 </PathGeometry.Figures>
               </PathGeometry>
             </GeometryGroup>
           </GeometryDrawing.Geometry>
         </GeometryDrawing>
       </DrawingBrush.Drawing>
     </DrawingBrush>
  </Rectangle.Fill>
  </Rectangle>

Path 자체를 채움을 위한 Brush의 Pattern으로 사용하는 코드이다.

<Path Stroke="Black" StrokeThickness="1"
Fill="#CCCCFF" 
Data="M 10,100 L 100,100 100,50 Z M 10,10 100,10 100,40 Z" />

Path를 생성하는 세번째 경우로써 가장 최적화되고 함축적인 방법이다. Path Element의 Data 속성을 이용하여 좌표를 직접 하나 하나 지정한다. M은 Move, L은 Line, Z는 폐합을 의미한다. Data로써 Data="M 10,10 A 100,50,45,1,0,200,100"와 Data="M 10,100 C35,0 135,0 160,100 S285,200 310,100", Data="M 10,100 Q 200,200 300,100", Data="M 10,100 C 100,0 200,200 300,100", Data="M 10,50 V 200", Data="M 10,50 H 200"를 사용하여 그 결과를 확인해보기 바란다.

  <Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
  <Path.Data>
     <CombinedGeometry GeometryCombineMode="Xor">
       <CombinedGeometry.Geometry1>
         <EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75" />
       </CombinedGeometry.Geometry1>
       <CombinedGeometry.Geometry2>
         <EllipseGeometry RadiusX="50" RadiusY="50" Center="125,75" />
       </CombinedGeometry.Geometry2>
     </CombinedGeometry>
  </Path.Data>
  </Path>

Path를 구상하는 Geometry에 대한 결합규칙을 지정하는 방법 중 Xor 규칙에 대한 코드와 그 결과이다. 겹치는 부분에 대해서 채움을 무시한다.

  <Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
  <Path.Data>
     <CombinedGeometry GeometryCombineMode="Union">
       <CombinedGeometry.Geometry1>
         <EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75" />
       </CombinedGeometry.Geometry1>
       <CombinedGeometry.Geometry2>
         <EllipseGeometry RadiusX="50" RadiusY="50" Center="125,75" />
       </CombinedGeometry.Geometry2>
     </CombinedGeometry>
  </Path.Data>
  </Path>

Path를 구성하는 Geometry를 하나의 Geometry로 합하는 것으로 겹합규칙을 Union을 사용하였다.

  <Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
  <Path.Data>
     <CombinedGeometry GeometryCombineMode="Intersect">
       <CombinedGeometry.Geometry1>
         <EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75" />
       </CombinedGeometry.Geometry1>
       <CombinedGeometry.Geometry2>
         <EllipseGeometry RadiusX="50" RadiusY="50" Center="125,75" />
       </CombinedGeometry.Geometry2>
     </CombinedGeometry>
  </Path.Data>
  </Path>

Path를 구성하는 Geometry들이 교차하는 부분만을 남기고 나머지는 무시하는 것으로 결합규칙으로써 Intersect를 사용하였다.

  <Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
  <Path.Data>
     <CombinedGeometry GeometryCombineMode="Exclude">
       <CombinedGeometry.Geometry1>
         <EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75" />
       </CombinedGeometry.Geometry1>
       <CombinedGeometry.Geometry2>
         <EllipseGeometry RadiusX="50" RadiusY="50" Center="125,75" />
       </CombinedGeometry.Geometry2>
     </CombinedGeometry>
  </Path.Data>
  </Path>

Path를 구성하는 Geometry들에서 첫번째에서 두번째 Geometry를 뺀 부분만을 남기는 것으로 결합규칙은 Exclude이다.

<Window 
  x:Class="NonRectangularWindowSample.NonRectangularWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Kim Hyoung Jun" 
  MouseLeftButtonDown="eventMouseLeftButtonDown"
  WindowStyle="None" 
  AllowsTransparency="True" 
  Background="Transparent">
  <Canvas Width="200" Height="100" >
    <Path Stroke="LightBlue" StrokeThickness="2">
      <Path.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
          <GradientStop Color="White" Offset="0" />
          <GradientStop Color="White" Offset="0.2" />
          <GradientStop Color="LightBlue" Offset="0.9" />
          <GradientStop Color="Black" Offset="1" />
        </LinearGradientBrush>
      </Path.Fill>

      <Path.Data>
        <PathGeometry>
          <PathFigure StartPoint="40,20" IsClosed="True">
            <LineSegment Point="160,20" />
            <ArcSegment Point="180,40" Size="20,20" 
                        SweepDirection="Clockwise" />
            <LineSegment Point="180,80" />
            <ArcSegment Point="160,100" Size="20,20" 
                        SweepDirection="Clockwise" />
            <LineSegment Point="40,100" />
            <ArcSegment Point="20,80" Size="20,20" 
                        SweepDirection="Clockwise" />
            <LineSegment Point="20,40" />
            <ArcSegment Point="40,20" Size="20,20" 
                        SweepDirection="Clockwise" />
          </PathFigure>
        </PathGeometry>
      </Path.Data>
    </Path>

    <Label Width="200"
           Height="120"
           FontSize="15"
           HorizontalContentAlignment="Center"
           VerticalContentAlignment="Center"
           Content="끌면 이동됩니다" />
  </Canvas>
</Window>

void eventMouseLeftButtonDown(object sender, 
                              MouseButtonEventArgs e) {
     DragMove();
}

한때 3D의 꽃을 뽑으라면 Texture Mapping이였다. 물론 한때다. 지금 다시 뽑으라면 Shader가 되겠지만... 여하튼 오늘 잠시 WPF 3D 쪽으로 눈을 돌리면서 WPF 3D 입문에서 다소 부족했던 부분인, Texutre Mapping 부분을 정리하기로 하겠다.

먼저 Texture Mapping을 하기 위해서는 Texture Mapping 좌표가 필요하다. 이전에 했던 부분은 Texture Mapping 좌표를 제외한 Mesh의 정점과 정점 인덱스 그리고 법선 벡터 만을 지정하였다. 이제 Texture Mapping 좌표를 지정해보는 것을 살펴보자.

우리가 지금까지 구축해 왔던 것에서 시작해보자. Mesh의 정점과 인덱스 그리고 법선 벡터를 지정해 주는 부분을 포함하는 함수가 Windows1.xaml.cs 파일 안의 Window1 클래스에 대한 CreateTriangleModel 함수였다. 이제 이것이 아래와 같이 바뀐다. 파랑색의 코드 부분이 변경이나 추가된 부분이다.

private GeometryModel3D CreateTriangleModel(Point3D p0, Point3D p1, 
    Point3D p2, Point p0t, Point p1t, Point p2t)
{
    MeshGeometry3D mesh = new MeshGeometry3D();
            
    mesh.Positions.Add(p0);
    mesh.Positions.Add(p1);
    mesh.Positions.Add(p2);

    mesh.TriangleIndices.Add(0);
    mesh.TriangleIndices.Add(1);
    mesh.TriangleIndices.Add(2);

    mesh.TextureCoordinates.Add(p0t);
    mesh.TextureCoordinates.Add(p1t);
    mesh.TextureCoordinates.Add(p2t);

    Vector3D normal = CalculateNormal(p0, p1, p2);
            
    mesh.Normals.Add(normal);
    mesh.Normals.Add(normal);
    mesh.Normals.Add(normal);

    BitmapImage bi = new BitmapImage();
    bi.BeginInit();
    bi.UriSource = new Uri(@"y:/face.PNG", UriKind.RelativeOrAbsolute);
    bi.EndInit();

    Brush brush = new ImageBrush(bi);
    Material material = new DiffuseMaterial(brush);
    GeometryModel3D model = new GeometryModel3D(mesh, material);

    return model;
}

private void ClickCubeButton(object Sender, RoutedEventArgs e)
{
    if (model != null) return;

    Model3DGroup cube = new Model3DGroup();

    Point3D p0 = new Point3D(-1, -1, -1);
    Point3D p1 = new Point3D(1, -1, -1);
    Point3D p2 = new Point3D(1, -1, 1);
    Point3D p3 = new Point3D(-1, -1, 1);
    Point3D p4 = new Point3D(-1, 1, -1);
    Point3D p5 = new Point3D(1, 1, -1);
    Point3D p6 = new Point3D(1, 1, 1);
    Point3D p7 = new Point3D(-1, 1, 1);

    Point t00 = new Point(0, 0);
    Point t01 = new Point(0, 1);
    Point t10 = new Point(1, 0);
    Point t11 = new Point(1, 1);

    //front side triangles
    cube.Children.Add(CreateTriangleModel(p3, p2, p6, t00, t10, t11));
    cube.Children.Add(CreateTriangleModel(p3, p6, p7, t00, t11, t01));

    //right side triangles
    cube.Children.Add(CreateTriangleModel(p2, p1, p5, t00, t10, t11));
    cube.Children.Add(CreateTriangleModel(p2, p5, p6, t00, t11, t01));

    //back side triangles
    cube.Children.Add(CreateTriangleModel(p1, p0, p4, t10, t00, t01));
    cube.Children.Add(CreateTriangleModel(p1, p4, p5, t10, t01, t11));

    //left side triangles
    cube.Children.Add(CreateTriangleModel(p0, p3, p7, t10, t00, t01));
    cube.Children.Add(CreateTriangleModel(p0, p7, p4, t10, t01, t11));

    //top side triangles
    cube.Children.Add(CreateTriangleModel(p7, p6, p5, t00, t10, t11));
    cube.Children.Add(CreateTriangleModel(p7, p5, p4, t00, t11, t01));

    //bottom side triangles
    cube.Children.Add(CreateTriangleModel(p2, p3, p0, t10, t00, t01));
    cube.Children.Add(CreateTriangleModel(p2, p0, p1, t10, t01, t11));

    model = new ModelVisual3D();
    model.Content = cube;

    mainViewport.Children.Add(model);
}

private ModelVisual3D model = null;
private Transform3DGroup transformGroup = new Transform3DGroup();

private void ClickCubeButton(object Sender, RoutedEventArgs e)
{
     if (model != null) return;

     Model3DGroup cube = new Model3DGroup();

     Point3D p0 = new Point3D(-1, -1, -1);
     Point3D p1 = new Point3D(1, -1, -1);
     Point3D p2 = new Point3D(1, -1, 1);
     Point3D p3 = new Point3D(-1, -1, 1);
     Point3D p4 = new Point3D(-1, 1, -1);
     Point3D p5 = new Point3D(1, 1, -1);
     Point3D p6 = new Point3D(1, 1, 1);
     Point3D p7 = new Point3D(-1, 1, 1);

     //front side triangles
     cube.Children.Add(CreateTriangleModel(p3, p2, p6));
     cube.Children.Add(CreateTriangleModel(p3, p6, p7));
     //right side triangles
     cube.Children.Add(CreateTriangleModel(p2, p1, p5));
     cube.Children.Add(CreateTriangleModel(p2, p5, p6));
     //back side triangles
     cube.Children.Add(CreateTriangleModel(p1, p0, p4));
     cube.Children.Add(CreateTriangleModel(p1, p4, p5));
     //left side triangles
     cube.Children.Add(CreateTriangleModel(p0, p3, p7));
     cube.Children.Add(CreateTriangleModel(p0, p7, p4));
     //top side triangles
     cube.Children.Add(CreateTriangleModel(p7, p6, p5));
     cube.Children.Add(CreateTriangleModel(p7, p5, p4));
     //bottom side triangles
     cube.Children.Add(CreateTriangleModel(p2, p3, p0));
     cube.Children.Add(CreateTriangleModel(p2, p0, p1));

     model = new ModelVisual3D();
     model.Content = cube;

     mainViewport.Children.Add(model);
}

private Model3DGroup CreateTriangleModel(Point3D p0, Point3D p1, Point3D p2)
{
    MeshGeometry3D mesh = new MeshGeometry3D();
        
    mesh.Positions.Add(p0);
    mesh.Positions.Add(p1);
    mesh.Positions.Add(p2);

    mesh.TriangleIndices.Add(0);
    mesh.TriangleIndices.Add(1);
    mesh.TriangleIndices.Add(2);

    Vector3D normal = CalculateNormal(p0, p1, p2);
            
    mesh.Normals.Add(normal);
    mesh.Normals.Add(normal);
    mesh.Normals.Add(normal);

    Material material = new DiffuseMaterial(new SolidColorBrush(Colors.Blue));
    GeometryModel3D model = new GeometryModel3D(mesh, material);
            
    Model3DGroup group = new Model3DGroup();
    group.Children.Add(model);
            
    return group;
}

private Vector3D CalculateNormal(Point3D p0, Point3D p1, Point3D p2)
{
    Vector3D v0 = new Vector3D(p1.X - p0.X, p1.Y - p0.Y, p1.Z - p0.Z);
    Vector3D v1 = new Vector3D(p2.X - p1.X, p2.Y - p1.Y, p2.Z - p1.Z);

    return Vector3D.CrossProduct(v0, v1);
}

private void ClickRotateXButton(object Sender, RoutedEventArgs e) 
{
    AxisAngleRotation3D rotation = new AxisAngleRotation3D(
        new Vector3D(1, 0, 0), 5);

    RotateTransform3D rt = new RotateTransform3D(rotation);
            
    transformGroup.Children.Add(rt);

    model.Transform = transformGroup;
}

<Window x:Class="tstWPF3D.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="tstWPF3D" Height="300" Width="300"
    >
  <Grid>
    <DockPanel
     Width="Auto"
     VerticalAlignment="Stretch"
     Height="Auto"
     HorizontalAlignment="Stretch"
     Grid.ColumnSpan="1"
     Grid.Column="0"
     Grid.Row="0"
     Margin="0,0,0,0"
     Grid.RowSpan="1">
      <StackPanel Margin="5" Width="70">
        <Button Name="Cube" Click="ClickCubeButton">Cube</Button>
        <Button Name="RotateX" Click="ClickRotateXButton">RotateX</Button>
        <Button Name="RotateY" Click="ClickRotateYButton">RotateY</Button>
        <Button Name="RotateZ" Click="ClickRotateZButton">RotateZ</Button>
      </StackPanel>
      
      <Viewport3D Name="mainViewport" ClipToBounds="True">
        <Viewport3D.Camera>
          <PerspectiveCamera
          NearPlaneDistance="1"
          FarPlaneDistance="100"
          LookDirection="0,0,-1"
          UpDirection="0,1,0"
          Position="0,0,5"
          FieldOfView="45" />
        </Viewport3D.Camera>
        <ModelVisual3D>
          <ModelVisual3D.Content>
            <DirectionalLight
             Color="White"
             Direction="1.5,-2.5,-2" />
          </ModelVisual3D.Content>
        </ModelVisual3D>
      </Viewport3D>
    </DockPanel>
  </Grid>
</Window>

<StackPanel Margin="5" Width="70">
    <Button Name="Cube" Click="ClickCubeButton">Cube</Button>
    <Button Name="RotateX" Click="ClickRotateXButton">RotateX</Button>
    <Button Name="RotateY" Click="ClickRotateYButton">RotateY</Button>
    <Button Name="RotateZ" Click="ClickRotateZButton">RotateZ</Button>
</StackPanel>

<Viewport3D Name="mainViewport" ClipToBounds="True">
    <Viewport3D.Camera>
        <PerspectiveCamera
        NearPlaneDistance="1"
        FarPlaneDistance="100"
        LookDirection="0,0,-1"
        UpDirection="0,1,0"
        Position="0,0,5"
        FieldOfView="45" />
    </Viewport3D.Camera>
    <ModelVisual3D>
        <ModelVisual3D.Content>
            <DirectionalLight
            Color="White"
            Direction="1.5,-2.5,-2" />
        </ModelVisual3D.Content>
    </ModelVisual3D>
</Viewport3D>