WPF Viewport3D 解决透视模式时窗体模糊-白红宇

原文:

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

三维图形概述：

概要

三维坐标系

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

照相机

透视投影和正投影

关于TextureCoordinates（纹理坐标）：

上面这段

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

关于视角和距离的关系：

含义：

点	说明
A	视点

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

角度	说明
cAb	视角（FieldOfView）

结论：

BD/bd=AD/Ad

我们如果想看到一个原样大小的窗体，就需要设置我的角cAb为

90。同时设置AD长度为查看目标的

一半宽度。

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

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

具体思路：

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

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

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

示例代码：

using System.Windows;using System.Windows.Controls;using System.Windows.Input;using System.Windows.Media.Animation; namespace App3DWindow{    ///     /// MainWindow.xaml 的交互逻辑    /// 
    public partial class MainWindow : Window    {        public MainWindow()        {            InitializeComponent();        }        ///         /// 载入时进行模糊情况特殊处理        /// 
        ///         ///         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();                };            };        }        ///         /// 设置下载页面进入展示模式        /// 
        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;        }        ///         /// 设置配置页面进入展示模式        /// 
        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;        }        ///         /// 设置下载页面进入翻转模式        /// 
        private void SetDownloadWindowTurningMode()        {            var container = DownloadWindowPart.Parent as UserControl;            if (container == null) return;            container.Content = null;            FrontViewport2DVisual3D.Visual = DownloadWindowPart;        }        ///         /// 设置配置页面进入翻转模式        /// 
        private void SetConfigViewTurningMode()        {            var container = ProxyConfigViewPart.Parent as UserControl;            if (container == null) return;            container.Content = null;            BackViewport2DVisual3D.Visual = ProxyConfigViewPart;        }        ///         /// 支持拖拽        /// 
        ///         ///         private void DisPlayControl_OnPreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)        {            this.DragMove();        }    }}

呈现效果：

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