CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口

CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口

开始

像下面这样的四个视口的功能是很常用的，所以我花了几天时间在CSharpGL中集成了这个功能。

 

在CSharpGL中的多视口效果如下。效果图是粗糙了些，但是已经实现了拖拽图元时4个视口同步更新的功能，算是一个3D模型编辑器的雏形了。

 

原理

ViewPort

多视口的任务，是在不同的区域用不同的摄像机渲染同一个场景。这个“区域”我们称其为 ViewPort 。（实际上 ViewPort 是强化版的 glViewport() ，它附带了摄像机等其他成员）

为了渲染多个视口，就应该有一个 ViewPort 列表，保存所有的视口。这就是 Scene 里新增的RootViewPort属性。

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

为了让视口也能像UIRenderer那样使用ILayout接口的树型布局功能，我们也让ViewPort实现ILayout接口。

    public partial class ViewPort : ILayout<ViewPort>
    {
        private const string viewport = "View Port";

        /// <summary>
        ///
        /// </summary>
        [Category(viewport)]
        [Description("camera of the view port.")]
        [Editor(typeof(PropertyGridEditor), typeof(UITypeEditor))]
        public ICamera Camera { get; private set; }

        /// <summary>
        /// background color.
        /// </summary>
        [Category(viewport)]
        [Description("background color.")]
        public Color ClearColor { get; set; }

        /// <summary>
        /// Rectangle area of this view port.
        /// </summary>
        [Category(viewport)]
        [Description("Rectangle area of this view port.")]
        public Rectangle Rect { get { return new Rectangle(this.location, this.size); } }

        public ViewPort(ICamera camera, AnchorStyles anchor, Padding margin, Size size)
        {
            this.Children = new ChildList<ViewPort>(this);

            this.Camera = camera;
            this.Anchor = anchor;
            this.Margin = margin;
            this.Size = size;
        }
    }

有了这样的设计，CSharpGL在渲染上述效果图时就有了5个视口。如下图所示，其中根结点上的ViewPort.Visible属性为false，表示这个ViewPort不会参与渲染，即不会显示到最终的窗口上。而此根结点下属的4个子结点，各自代表一个ViewPort，他们分别以TopFrontLeftPerspecitve的角度渲染了一次整个场景，并将渲染结果放置到自己的范围内。

 

树型结构的ViewPort，其布局就和UIRenderer、Winform控件的布局方式是一样的。你可以像安排控件一样安排ViewPort的Location和Size。因此ViewPort是支持重叠、支持任意多个的。

渲染

有多少个ViewPort，就要渲染多少次。同时，ViewPort修改了glViewport()的值，这个情况也要反映到每个Renderer的渲染过程。

    public partial class Scene
    {
        private object synObj = new object();

        // Render this scene.
        public void Render(RenderModes renderMode,
            bool autoClear = true,
            GeometryType pickingGeometryType = GeometryType.Point)
        {
            lock (this.synObj)
            {
                // update view port's location and size.
                this.rootViewPort.Layout();
                // render scene in every view port.
                this.RenderViewPort(this.rootViewPort, this.Canvas.ClientRectangle, renderMode, autoClear, pickingGeometryType);
            }
        }

        // Render scene in every view port.
        private void RenderViewPort(ViewPort viewPort, Rectangle clientRectangle, RenderModes renderMode, bool autoClear, GeometryType pickingGeometryType)
        {
            if (viewPort.Enabled)
            {
                // render in this view port.
                if (viewPort.Visiable)
                {
                    viewPort.On();// limit rendering area.
                    // render scene in this view port.
                    this.Render(viewPort, clientRectangle, renderMode, autoClear, pickingGeometryType);
                    viewPort.Off();// cancel limitation.
                }

                // render children viewport.
                foreach (ViewPort item in viewPort.Children)
                {
                    this.RenderViewPort(item, clientRectangle, renderMode, autoClear, pickingGeometryType);
                }
            }
        }
    }

坐标系

再次强调一个问题，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方面的计算。

    public partial class Scene
    {
        /// <summary>
        /// Get geometry at specified <paramref name="mousePosition"/> with specified <paramref name="pickingGeometryType"/>.
        /// <para>Returns null when <paramref name="mousePosition"/> is out of this scene's area or there's no active(visible and enabled) viewport.</para>
        /// </summary>
        /// <param name="mousePosition">mouse position in Windows coordinate system.(Left Up is (0, 0))</param>
        /// <param name="pickingGeometryType">target's geometry type.</param>
        /// <returns></returns>
        public List<Tuple<Point, PickedGeometry>> Pick(Point mousePosition, GeometryType pickingGeometryType)
        {
            Rectangle clientRectangle = this.Canvas.ClientRectangle;
            // if mouse is out of window's area, nothing picked.
            if (mousePosition.X < 0 || clientRectangle.Width <= mousePosition.X || mousePosition.Y < 0 || clientRectangle.Height <= mousePosition.Y) { return null; }

            int x = mousePosition.X;
            int y = clientRectangle.Height - mousePosition.Y - 1;
            // now (x, y) is in OpenGL's window cooridnate system.
            Point position = new Point(x, y);
            List<Tuple<Point, PickedGeometry>> allPickedGeometrys = null;
            var pickingRect = new Rectangle(x, y, 1, 1);
            foreach (ViewPort viewPort in this.rootViewPort.DFSEnumerateRecursively())
            {
                if (viewPort.Visiable && viewPort.Enabled && viewPort.Contains(position))
                {
                    allPickedGeometrys = ColorCodedPicking(viewPort, pickingRect, clientRectangle, pickingGeometryType);

                    break;
                }
            }

            return allPickedGeometrys;
        }
    }

Picking的过程

Picking的步骤比较长，分支情况也超级多。这里只大体认识一下即可。

首先，如果depth buffer在鼠标所在的像素点上的深度为1（最深），就说明鼠标没有点中任何东西，因此直接返回即可。

然后，我们在给定的 ViewPort 范围内，用color-coded方式渲染一遍整个场景。

然后，用 glReadPixels() 获取鼠标所在位置的颜色值。

最后，由于这个颜色值是与图元的编号一一对应的，我们就可以通过这个颜色值辨认出它到底是属于哪个Renderer里的哪个图元。

        /// <summary>
        /// Pick primitives in specified <paramref name="viewPort"/>.
        /// </summary>
        /// <param name="viewPort"></param>
        /// <param name="pickingRect">rect in OpenGL's window coordinate system.(Left Down is (0, 0)), size).</param>
        /// <param name="clientRectangle">whole canvas' rectangle.</param>
        /// <param name="pickingGeometryType"></param>
        /// <returns></returns>
        private List<Tuple<Point, PickedGeometry>> ColorCodedPicking(ViewPort viewPort, Rectangle pickingRect, Rectangle clientRectangle, GeometryType pickingGeometryType)
        {
            var result = new List<Tuple<Point, PickedGeometry>>();

            // if depth buffer is valid in specified rect, then maybe something is picked.
            if (DepthBufferValid(pickingRect))
            {
                lock (this.synObj)
                {
                    var arg = new RenderEventArgs(RenderModes.ColorCodedPicking, clientRectangle, viewPort, pickingGeometryType);
                    // Render all PickableRenderers for color-coded picking.
                    List<IColorCodedPicking> pickableRendererList = Render4Picking(arg);
                    // Read pixels in specified rect and get the VertexIds they represent.
                    List<Tuple<Point, uint>> stageVertexIdList = ReadPixels(pickingRect);
                    // Get all picked geometrys.
                    foreach (Tuple<Point, uint> tuple in stageVertexIdList)
                    {
                        int x = tuple.Item1.X;
                        int y = tuple.Item1.Y;

                        uint stageVertexId = tuple.Item2;
                        PickedGeometry pickedGeometry = GetPickGeometry(arg,
                           x, y, stageVertexId, pickableRendererList);
                        if (pickedGeometry != null)
                        {
                            result.Add(new Tuple<Point, PickedGeometry>(new Point(x, y), pickedGeometry));
                        }
                    }
                }
            }

            return result;
        }

这其中包含了太多的细节，关键详情可参看这6篇介绍（这里，这里，这里，这里，这里，还有这里）

自定义布局方式

虽然ViewPort实现了ILayout接口，但是这难以完成按比例布局的功能。（即：当窗口Size改变时，TopFrontLeftPerspective始终保持各占窗口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原有的布局操作就没有必要实施了。）

        public static void Layout<T>(this ILayout<T> node) where T : ILayout<T>
        {
            ILayout<T> parent = node.Parent;
            if (parent != null)
            {
                bool cancelTreeLayout = false;

                var layoutEvent = node.Self as ILayoutEvent;
                if (layoutEvent != null)
                { cancelTreeLayout = layoutEvent.DoBeforeLayout(); }

                if (!cancelTreeLayout)
                { NonRootNodeLayout(node, parent); }

                if (layoutEvent != null)
                { layoutEvent.DoAfterLayout(); }
            }

            foreach (T item in node.Children)
            {
                item.Layout();
            }

            if (parent != null)
            {
                node.ParentLastSize = parent.Size;
            }
        }

总结

ViewPort在Scene里是一个树型结构，支持ILayout布局和Before/AfterLayout自定义布局。有一个Visible的ViewPort，场景就要渲染一次。