WPF Viewport3D 解决透视模式时窗体模糊

最近折腾Viewport3D玩，遇到了一些诡异的问题，研究一下略有心得，特此和大家分享~

三维图形概述：

https://msdn.microsoft.com/zh-cn/library/ms747437.aspx

概要

三维坐标系

二维图形的 WPF 坐标系将原点定位在呈现区域（通常是屏幕）的左上角。在二维系统中，x 轴上的正值朝右，y 轴上的正值朝下。但是，在三维坐标系中，原点位于呈现区域的中心，x 轴上的正值朝右，但是 y 轴上的正值朝上，z 轴上的正值从原点向外朝向观察者。

照相机

透视投影和正投影

关于TextureCoordinates（纹理坐标）：

<MeshGeometry3D Positions="-250,-150,0 250,-150,0 250,150,0 -250,150,0"

                TextureCoordinates="0,1 1,1 1,0 0,0"

                TriangleIndices="0,1,2 0,2,3" />

上面这段MeshGeometry3D（用于生成3-D形状的三角形基元）对照图2三维坐标系会发现是个从左下角逆时针绘制的矩形。如果要将一个窗体UserControl纹理应用到Viewport2DVisual3D上，我们就需要合理的设置TextureCoordinates（纹理坐标）。对照图1二维坐标系，纹理坐标同样是由左下开始绘制的矩形。这样设置，纹理就可以显示正常了。

关于视角和距离的关系：

含义：

点	说明
A	视点

线	说明
BC	查看的目标宽度
bc	展示的视窗宽度
AD	视点到查看目标的距离
ad	视点到视窗的距离

角度	说明
cAb	视角（FieldOfView）

结论：

BD/bd=AD/Ad

我们如果想看到一个原样大小的窗体，就需要设置我的角cAb为。同时设置AD长度为查看目标的一半宽度。

好不容易设置好Viewport3D，将UserControl作为窗体的查看对象，却发现虽然窗体大小一致，但是显示出的UserControl字体和控件却很模糊。当我们以3D模型渲染窗体时，WPF应该做了性能优化，然而我并不清楚如何开启高清模式= =。

怎么解决这个问题呢？我试了好久，发现并没有比较简单快捷的解决方法。没办法，只能采取一些小技巧来解决啦。

具体思路：

第一步：窗体呈现时，将UserControl实例化后直接呈现到页面最前端的展示面板上，此时Viewport3D内容为空。

第二部：触发页面翻转动画时，将最前的展示面板置空，UserControl实例剪切到Viewport3D里面。

第三步：动画执行完毕后再从Viewport3D里面将UserControl剪切到页面最前端的展示面板中。

示例代码：

<Window x:Class="App3DWindow.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:app3DWindow="clr-namespace:App3DWindow"

        xmlns:asyncDelegate="clr-namespace:AsyncDelegate"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        Title="MainWindow"

        Width="500"

        Height="310"

        AllowsTransparency="True"

        Background="Transparent"

        Loaded="MainWindow_OnLoaded"

        WindowStyle="None"

        WindowStartupLocation="CenterScreen"

        mc:Ignorable="d">

    <Window.Resources>

        <Storyboard x:Key="Turn2ConfigViewStoryboard">

            <Rotation3DAnimationUsingKeyFrames Storyboard.TargetName="containerUIElement3D" Storyboard.TargetProperty="(Visual3D.Transform).(Transform3DGroup.Children)[2].(RotateTransform3D.Rotation)">

                <EasingRotation3DKeyFrame KeyTime="0:0:2">

                    <EasingRotation3DKeyFrame.EasingFunction>

                        <QuinticEase EasingMode="EaseOut" />

                    </EasingRotation3DKeyFrame.EasingFunction>

                    <EasingRotation3DKeyFrame.Value>

                        <AxisAngleRotation3D Angle="180" Axis="0,1,0" />

                    </EasingRotation3DKeyFrame.Value>

                </EasingRotation3DKeyFrame>

            </Rotation3DAnimationUsingKeyFrames>

        </Storyboard>

        <Storyboard x:Key="Turn2DownloadViewStoryboard">

            <Rotation3DAnimationUsingKeyFrames Storyboard.TargetName="containerUIElement3D" Storyboard.TargetProperty="(Visual3D.Transform).(Transform3DGroup.Children)[2].(RotateTransform3D.Rotation)">

                <EasingRotation3DKeyFrame KeyTime="0:0:2">

                    <EasingRotation3DKeyFrame.EasingFunction>

                        <QuinticEase EasingMode="EaseOut" />

                    </EasingRotation3DKeyFrame.EasingFunction>

                    <EasingRotation3DKeyFrame.Value>

                        <AxisAngleRotation3D Angle="360" Axis="0,1,0" />

                    </EasingRotation3DKeyFrame.Value>

                </EasingRotation3DKeyFrame>

            </Rotation3DAnimationUsingKeyFrames>

        </Storyboard>

        <!--  相机  -->

        <PerspectiveCamera x:Key="PerspectiveCamera"

                           FieldOfView="90"

                           LookDirection="0,0,-1"

                           NearPlaneDistance="1"

                           Position="0,0,250"

                           UpDirection="0,1,0" />

        <OrthographicCamera x:Key="OrthographicCamera"

                            Width="500"

                            LookDirection="0,0,-1"

                            Position="0,0,250"

                            UpDirection="0,1,0" />

    </Window.Resources>

    <Grid Background="Transparent">

        <Viewport3D Margin="0">

            <Viewport3D.Camera>

                <!--  相机  -->

                <PerspectiveCamera x:Name="PerspectiveCamera"

                                   FieldOfView="90"

                                   LookDirection="0,0,-1"

                                   NearPlaneDistance="1"

                                   Position="0,0,250"

                                   UpDirection="0,1,0" />

            </Viewport3D.Camera>

            <Viewport3D.Children>

                <ContainerUIElement3D x:Name="containerUIElement3D">

                    <ContainerUIElement3D.Transform>

                        <Transform3DGroup>

                            <TranslateTransform3D OffsetX="0"

                                                  OffsetY="0"

                                                  OffsetZ="0" />

                            <ScaleTransform3D ScaleX="1"

                                              ScaleY="1"

                                              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>

                    </ContainerUIElement3D.Transform>

                    <!--  正面视角  -->

                    <Viewport2DVisual3D x:Name="FrontViewport2DVisual3D">

                        <Viewport2DVisual3D.Transform>

                            <Transform3DGroup>

                                <TranslateTransform3D OffsetX="0"

                                                      OffsetY="0"

                                                      OffsetZ="0" />

                                <ScaleTransform3D ScaleX="1"

                                                  ScaleY="1"

                                                  ScaleZ="1" />

                                <RotateTransform3D d:EulerAngles="0,0,0">

                                    <RotateTransform3D.Rotation>

                                        <AxisAngleRotation3D Angle="0" Axis="0,0,0" />

                                    </RotateTransform3D.Rotation>

                                </RotateTransform3D>

                                <TranslateTransform3D OffsetX="0"

                                                      OffsetY="0"

                                                      OffsetZ="0" />

                                <TranslateTransform3D OffsetX="0"

                                                      OffsetY="0"

                                                      OffsetZ="0" />

                            </Transform3DGroup>

                        </Viewport2DVisual3D.Transform>

                        <Viewport2DVisual3D.Geometry>

                            <MeshGeometry3D Positions="-250,-150,0 250,-150,0 250,150,0 -250,150,0"

                                            TextureCoordinates="0,1 1,1 1,0 0,0"

                                            TriangleIndices="0,1,2 0,2,3" />

                        </Viewport2DVisual3D.Geometry>

                        <Viewport2DVisual3D.Material>

                            <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" />

                        </Viewport2DVisual3D.Material>

                        <Viewport2DVisual3D.Visual>

                            <app3DWindow:DownloadWindow x:Name="DownloadWindowPart"

                                                        Width="500"

                                                        Height="300"

                                                        Background="White"

                                                        SnapsToDevicePixels="True" />

                        </Viewport2DVisual3D.Visual>

                    </Viewport2DVisual3D>

                    <!--  背面视角  -->

                    <Viewport2DVisual3D x:Name="BackViewport2DVisual3D">

                        <Viewport2DVisual3D.Transform>

                            <Transform3DGroup>

                                <TranslateTransform3D OffsetX="0"

                                                      OffsetY="0"

                                                      OffsetZ="0" />

                                <ScaleTransform3D ScaleX="1"

                                                  ScaleY="1"

                                                  ScaleZ="1" />

                                <RotateTransform3D d:EulerAngles="0,0,0">

                                    <RotateTransform3D.Rotation>

                                        <AxisAngleRotation3D Angle="0" Axis="0,0,0" />

                                    </RotateTransform3D.Rotation>

                                </RotateTransform3D>

                                <TranslateTransform3D OffsetX="0"

                                                      OffsetY="0"

                                                      OffsetZ="0" />

                                <TranslateTransform3D OffsetX="0"

                                                      OffsetY="0"

                                                      OffsetZ="0" />

                            </Transform3DGroup>

                        </Viewport2DVisual3D.Transform>

                        <Viewport2DVisual3D.Geometry>

                            <MeshGeometry3D Positions="-250,-150,0 250,-150,0 250,150,0 -250,150,0"

                                            TextureCoordinates="1,1 0,1 0,0 1,0   "

                                            TriangleIndices="0,3,2 0,2,1" />

                        </Viewport2DVisual3D.Geometry>

                        <Viewport2DVisual3D.Material>

                            <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" />

                        </Viewport2DVisual3D.Material>

                        <Viewport2DVisual3D.Visual>

                            <app3DWindow:ProxyConfigView x:Name="ProxyConfigViewPart"

                                                         Width="500"

                                                         Height="300"

                                                         Background="White"

                                                         SnapsToDevicePixels="True" />

                        </Viewport2DVisual3D.Visual>

                    </Viewport2DVisual3D>

                </ContainerUIElement3D>

                <ModelVisual3D>

                    <ModelVisual3D.Content>

                        <!--  光源  -->

                        <AmbientLight x:Name="ViewLight" />

                    </ModelVisual3D.Content>

                </ModelVisual3D>

            </Viewport3D.Children>

        </Viewport3D>

        <Grid x:Name="DisplayGrid">

            <Grid.RowDefinitions>

                <RowDefinition Height="40" />

                <RowDefinition Height="*" />

            </Grid.RowDefinitions>

            <UserControl x:Name="DisPlayControl"

                         Grid.Row="0"

                         Grid.RowSpan="2" />

            <!--<Border x:Name="Part_Drag"

                    Grid.Row="0"

                    Background="AliceBlue"

                    PreviewMouseLeftButtonDown="DisPlayControl_OnPreviewMouseLeftButtonDown" />-->

        </Grid>

    </Grid>

</Window>

using System.Windows;

using System.Windows.Controls;

using System.Windows.Input;

using System.Windows.Media.Animation;

namespace App3DWindow

{

    /// <summary>

    /// MainWindow.xaml 的交互逻辑

    /// </summary>

    public partial class MainWindow : Window

    {

        public MainWindow()

        {

            InitializeComponent();

        }

        /// <summary>

        /// 载入时进行模糊情况特殊处理

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        private void MainWindow_OnLoaded(object sender, RoutedEventArgs e)

        {

            //return;

            SetDownloadWindowDisplayMode();

            var turn2ConfigViewStoryboard = this.TryFindResource("Turn2ConfigViewStoryboard") as Storyboard;

            if (turn2ConfigViewStoryboard != null)

            {

                turn2ConfigViewStoryboard.Completed += (s, e1) =>

                {//动画执行完成切换展示模式

                    SetConfigViewDisplayMode();

                    SetDownloadWindowTurningMode();

                };

                turn2ConfigViewStoryboard.CurrentTimeInvalidated += (s, e1) =>

                {//动画执行时切换成翻转模式

                    SetDownloadWindowTurningMode();

                };

            };

            var turn2DownloadViewStoryboard = this.TryFindResource("Turn2DownloadViewStoryboard") as Storyboard;

            if (turn2DownloadViewStoryboard != null)

            {

                turn2DownloadViewStoryboard.Completed += (s, e1) =>

                {//动画执行完成切换展示模式

                    SetDownloadWindowDisplayMode();

                    SetConfigViewTurningMode();

                };

                turn2DownloadViewStoryboard.CurrentTimeInvalidated += (s, e1) =>

                {//动画执行时切换成翻转模式

                    SetConfigViewTurningMode();

                };

            };

        }

        /// <summary>

        /// 设置下载页面进入展示模式

        /// </summary>

        private void SetDownloadWindowDisplayMode()

        {

            //var container = DownloadWindowPart.Parent as Viewport2DVisual3D;

            //if (container == null) return;

            //container.Visual = null;

            if (FrontViewport2DVisual3D.Visual==(DownloadWindowPart))

            {

                FrontViewport2DVisual3D.Visual = null;

            }

            DisPlayControl.Content = DownloadWindowPart;

        }

        /// <summary>

        /// 设置配置页面进入展示模式

        /// </summary>

        private void SetConfigViewDisplayMode()

        {

            //var container = ProxyConfigViewPart.Parent as Viewport2DVisual3D;

            //if (container == null) return;

            //container.Visual = null;

            if (BackViewport2DVisual3D.Visual==(ProxyConfigViewPart))

            {

                BackViewport2DVisual3D.Visual = null;

            }

            DisPlayControl.Content = ProxyConfigViewPart;

        }

        /// <summary>

        /// 设置下载页面进入翻转模式

        /// </summary>

        private void SetDownloadWindowTurningMode()

        {

            var container = DownloadWindowPart.Parent as UserControl;

            if (container == null) return;

            container.Content = null;

            FrontViewport2DVisual3D.Visual = DownloadWindowPart;

        }

        /// <summary>

        /// 设置配置页面进入翻转模式

        /// </summary>

        private void SetConfigViewTurningMode()

        {

            var container = ProxyConfigViewPart.Parent as UserControl;

            if (container == null) return;

            container.Content = null;

            BackViewport2DVisual3D.Visual = ProxyConfigViewPart;

        }

        /// <summary>

        /// 支持拖拽

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        private void DisPlayControl_OnPreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)

        {

            this.DragMove();

        }

    }

}

呈现效果：

效果见下图，翻转动画执行完毕后不再模糊。