開始

像下面這樣的四個視口的功能是很常用的，所以我花了幾天時間在CSharpGL中集成了這個功能。

在CSharpGL中的多視口效果如下。效果圖是粗糙了些，但是已經實現了拖拽圖元時4個視口同步更新的功能，算是一個3D模型編輯器的雛形了。

原理

ViewPort

多視口的任務，是在不同的區域用不同的攝像機渲染同一個場景。這個“區域”我們稱其為 ViewPort 。（實際上 ViewPort 是強化版的 glViewport() ，它附帶了攝像機等其他成員）

為了渲染多個視口，就應該有一個 ViewPort 列表，保存所有的視口。這就是 Scene 里新增的RootViewPort屬性。

 1     public class Scene : IDisposable
 2     {
 3         /// <summary>
 4         /// Root object of all viewports to be rendered in the scene.
 5         /// </summary>
 6         [Category(strScene)]
 7         [Description("Root object of all viewports to be rendered in the scene.")]
 8         [Editor(typeof(PropertyGridEditor), typeof(UITypeEditor))]
 9         public ViewPort RootViewPort { get; private set; }
10         // other stuff …
11     }

為了讓視口也能像UIRenderer那樣使用ILayout接口的樹型布局功能，我們也讓ViewPort實現ILayout接口。

 1     public partial class ViewPort : ILayout<ViewPort>
 2     {
 3         private const string viewport = "View Port";
 4 
 5         /// <summary>
 6         ///
 7         /// </summary>
 8         [Category(viewport)]
 9         [Description("camera of the view port.")]
10         [Editor(typeof(PropertyGridEditor), typeof(UITypeEditor))]
11         public ICamera Camera { get; private set; }
12 
13         /// <summary>
14         /// background color.
15         /// </summary>
16         [Category(viewport)]
17         [Description("background color.")]
18         public Color ClearColor { get; set; }
19 
20         /// <summary>
21         /// Rectangle area of this view port.
22         /// </summary>
23         [Category(viewport)]
24         [Description("Rectangle area of this view port.")]
25         public Rectangle Rect { get { return new Rectangle(this.location, this.size); } }
26 
27         public ViewPort(ICamera camera, AnchorStyles anchor, Padding margin, Size size)
28         {
29             this.Children = new ChildList<ViewPort>(this);
30 
31             this.Camera = camera;
32             this.Anchor = anchor;
33             this.Margin = margin;
34             this.Size = size;
35         }
36     }

有了這樣的設計，CSharpGL在渲染上述效果圖時就有了5個視口。如下圖所示，其中根結點上的ViewPort.Visible屬性為false，表示這個ViewPort不會參與渲染，即不會顯示到最終的窗口上。而此根結點下屬的4個子結點，各自代表一個ViewPort，他們分別以Top\Front\Left\Perspecitve的角度渲染了一次整個場景，并將渲染結果放置到自己的范圍內。

樹型結構的ViewPort，其布局就和UIRenderer、Winform控件的布局方式是一樣的。你可以像安排控件一樣安排ViewPort的Location和Size。因此ViewPort是支持重疊、支持任意多個的。

渲染

有多少個ViewPort，就要渲染多少次。同時，ViewPort修改了glViewport()的值，這個情況也要反映到每個Renderer的渲染過程。

 1     public partial class Scene
 2     {
 3         private object synObj = new object();
 4 
 5         // Render this scene.
 6         public void Render(RenderModes renderMode,
 7             bool autoClear = true,
 8             GeometryType pickingGeometryType = GeometryType.Point)
 9         {
10             lock (this.synObj)
11             {
12                 // update view port's location and size.
13                 this.rootViewPort.Layout();
14                 // render scene in every view port.
15                 this.RenderViewPort(this.rootViewPort, this.Canvas.ClientRectangle, renderMode, autoClear, pickingGeometryType);
16             }
17         }
18 
19         // Render scene in every view port.
20         private void RenderViewPort(ViewPort viewPort, Rectangle clientRectangle, RenderModes renderMode, bool autoClear, GeometryType pickingGeometryType)
21         {
22             if (viewPort.Enabled)
23             {
24                 // render in this view port.
25                 if (viewPort.Visiable)
26                 {
27                     viewPort.On();// limit rendering area.
28                     // render scene in this view port.
29                     this.Render(viewPort, clientRectangle, renderMode, autoClear, pickingGeometryType);
30                     viewPort.Off();// cancel limitation.
31                 }
32 
33                 // render children viewport.
34                 foreach (ViewPort item in viewPort.Children)
35                 {
36                     this.RenderViewPort(item, clientRectangle, renderMode, autoClear, pickingGeometryType);
37                 }
38             }
39         }
40     }

坐標系

再次強調一個問題，Winform的坐標系，是以左上角為(0, 0)原點的。OpenGL的窗口坐標系，是以左下角為(0, 0)原點的。

那么一個良好的習慣就是，通過Winform獲取的鼠標坐標，應該第一時間轉換為OpenGL下的坐標，然后再參與OpenGL的后續計算。等OpenGL部分的計算完畢時，應立即轉換回Winform下的坐標。

保持這個好習慣，再遇到鼠標坐標時就不會有便秘的感覺了。

拾取

為了適應新出現的ViewPort功能，原有的Picking功能也要調整了。

之前沒有ViewPort樹的時候，其本質上是只有一個覆蓋整個窗口的'ViewPort'。現在，新出現的ViewPort可能只覆蓋窗口的一部分，那么拾取時也要修改為只在這部分內進行。

只在一個ViewPort內拾取

現在有了多個ViewPort。很顯然，即使ViewPort之間有重疊，也只應在一個ViewPort內執行Picking操作。因為鼠標不會同時出現在2個地方。即使鼠標位于重疊的部分，也只應在最先（后序優先搜索順序）接觸到的ViewPort上執行Picking操作。

注意，這里先用 int y = clientRectangle.Height - mousePosition.Y - 1; 得到了OpenGL坐標系下的鼠標位置，然后才開始OpenGL方面的計算。

 1     public partial class Scene
 2     {
 3         /// <summary>
 4         /// Get geometry at specified <paramref name="mousePosition"/> with specified <paramref name="pickingGeometryType"/>.
 5         /// <para>Returns null when <paramref name="mousePosition"/> is out of this scene's area or there's no active(visible and enabled) viewport.</para>
 6         /// </summary>
 7         /// <param name="mousePosition">mouse position in Windows coordinate system.(Left Up is (0, 0))</param>
 8         /// <param name="pickingGeometryType">target's geometry type.</param>
 9         /// <returns></returns>
10         public List<Tuple<Point, PickedGeometry>> Pick(Point mousePosition, GeometryType pickingGeometryType)
11         {
12             Rectangle clientRectangle = this.Canvas.ClientRectangle;
13             // if mouse is out of window's area, nothing picked.
14             if (mousePosition.X < 0 || clientRectangle.Width <= mousePosition.X || mousePosition.Y < 0 || clientRectangle.Height <= mousePosition.Y) { return null; }
15 
16             int x = mousePosition.X;
17             int y = clientRectangle.Height - mousePosition.Y - 1;
18             // now (x, y) is in OpenGL's window cooridnate system.
19             Point position = new Point(x, y);
20             List<Tuple<Point, PickedGeometry>> allPickedGeometrys = null;
21             var pickingRect = new Rectangle(x, y, 1, 1);
22             foreach (ViewPort viewPort in this.rootViewPort.DFSEnumerateRecursively())
23             {
24                 if (viewPort.Visiable && viewPort.Enabled && viewPort.Contains(position))
25                 {
26                     allPickedGeometrys = ColorCodedPicking(viewPort, pickingRect, clientRectangle, pickingGeometryType);
27 
28                     break;
29                 }
30             }
31 
32             return allPickedGeometrys;
33         }
34     }

Picking的過程

Picking的步驟比較長，分支情況也超級多。這里只大體認識一下即可。

首先，如果depth buffer在鼠標所在的像素點上的深度為1（最深），就說明鼠標沒有點中任何東西，因此直接返回即可。

然后，我們在給定的 ViewPort 范圍內，用color-coded方式渲染一遍整個場景。

然后，用 glReadPixels() 獲取鼠標所在位置的顏色值。

最后，由于這個顏色值是與圖元的編號一一對應的，我們就可以通過這個顏色值辨認出它到底是屬于哪個Renderer里的哪個圖元。

 1         /// <summary>
 2         /// Pick primitives in specified <paramref name="viewPort"/>.
 3         /// </summary>
 4         /// <param name="viewPort"></param>
 5         /// <param name="pickingRect">rect in OpenGL's window coordinate system.(Left Down is (0, 0)), size).</param>
 6         /// <param name="clientRectangle">whole canvas' rectangle.</param>
 7         /// <param name="pickingGeometryType"></param>
 8         /// <returns></returns>
 9         private List<Tuple<Point, PickedGeometry>> ColorCodedPicking(ViewPort viewPort, Rectangle pickingRect, Rectangle clientRectangle, GeometryType pickingGeometryType)
10         {
11             var result = new List<Tuple<Point, PickedGeometry>>();
12 
13             // if depth buffer is valid in specified rect, then maybe something is picked.
14             if (DepthBufferValid(pickingRect))
15             {
16                 lock (this.synObj)
17                 {
18                     var arg = new RenderEventArgs(RenderModes.ColorCodedPicking, clientRectangle, viewPort, pickingGeometryType);
19                     // Render all PickableRenderers for color-coded picking.
20                     List<IColorCodedPicking> pickableRendererList = Render4Picking(arg);
21                     // Read pixels in specified rect and get the VertexIds they represent.
22                     List<Tuple<Point, uint>> stageVertexIdList = ReadPixels(pickingRect);
23                     // Get all picked geometrys.
24                     foreach (Tuple<Point, uint> tuple in stageVertexIdList)
25                     {
26                         int x = tuple.Item1.X;
27                         int y = tuple.Item1.Y;
28 
29                         uint stageVertexId = tuple.Item2;
30                         PickedGeometry pickedGeometry = GetPickGeometry(arg,
31                            x, y, stageVertexId, pickableRendererList);
32                         if (pickedGeometry != null)
33                         {
34                             result.Add(new Tuple<Point, PickedGeometry>(new Point(x, y), pickedGeometry));
35                         }
36                     }
37                 }
38             }
39 
40             return result;
41         }

ColorCodedPicking in view port.

這其中包含了太多的細節，關鍵詳情可參看這6篇介紹（這里，這里，這里，這里，這里，還有這里）

自定義布局方式

雖然ViewPort實現了ILayout接口，但是這難以完成按比例布局的功能。（即：當窗口Size改變時，Top\Front\Left\Perspective始終保持各占窗口1/4大小）

這時可以通過自定義布局的方式來實現這個功能。

具體方法就是自定義 ViewPort.BeforeLayout 和 ViewPort.AfterLayout 事件。

例如，對于Top，我們想讓它始終保持在窗口的左上角，且占窗口1/4大小。

        private void Form_Load(object sender, EventArgs e)
        {
           // other stuff ...
           // ‘top’ view port
           var camera = new Camera(
           new vec3(0, 0, 15), new vec3(0, 0, 0), new vec3(0, 1, 0),
           CameraType.Perspecitive, this.glCanvas1.Width, this.glCanvas1.Height);
           ViewPort viewPort = new ViewPort(camera, AnchorStyles.None, new Padding(), new Size());
           viewPort.BeforeLayout += viewPort_BeforeLayout;
           viewPort.AfterLayout += topViewPort_AfterLayout;
           this.scene.RootViewPort.Children.Add(viewPort);
           // other stuff ...
        }
    
        private void viewPort_BeforeLayout(object sender, System.ComponentModel.CancelEventArgs e)
        {
            // cancel ILayout's layout action for this view port.
            e.Cancel = true;
        }
        
        private void topViewPort_AfterLayout(object sender, EventArgs e)
        {
            var viewPort = sender as ViewPort;
            ViewPort parent = viewPort.Parent;
            viewPort.Location = new Point(0 + 1, parent.Size.Height / 2 + 1);
            viewPort.Size = new Size(parent.Size.Width / 2 - 2, parent.Size.Height / 2 - 2);
        }

如果你查看一下實現了布局機制的 ILayoutHelper 的代碼，會發現 e.Cancel = true; 這句話取消了 ILayout 對此 ViewPort 的布局操作。（我們要自定義布局操作，因此ILayout原有的布局操作就沒有必要實施了。）

 1         public static void Layout<T>(this ILayout<T> node) where T : ILayout<T>
 2         {
 3             ILayout<T> parent = node.Parent;
 4             if (parent != null)
 5             {
 6                 bool cancelTreeLayout = false;
 7 
 8                 var layoutEvent = node.Self as ILayoutEvent;
 9                 if (layoutEvent != null)
10                 { cancelTreeLayout = layoutEvent.DoBeforeLayout(); }
11 
12                 if (!cancelTreeLayout)
13                 { NonRootNodeLayout(node, parent); }
14 
15                 if (layoutEvent != null)
16                 { layoutEvent.DoAfterLayout(); }
17             }
18 
19             foreach (T item in node.Children)
20             {
21                 item.Layout();
22             }
23 
24             if (parent != null)
25             {
26                 node.ParentLastSize = parent.Size;
27             }
28         }