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，他们分别以Top\Front\Left\Perspecitve的角度渲染了一次整个场景，并将渲染结果放置到自己的范围内。
树型结构的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 - ; 得到了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 < || clientRectangle.Width <= mousePosition.X || mousePosition.Y < || clientRectangle.Height <= mousePosition.Y) { return null; } int x = mousePosition.X;
int y = clientRectangle.Height - mousePosition.Y - ;
// 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, , );
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;
}
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(, , ), new vec3(, , ), new vec3(, , ),
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( + , parent.Size.Height / + );
viewPort.Size = new Size(parent.Size.Width / - , parent.Size.Height / - );
}
如果你查看一下实现了布局机制的 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，场景就要渲染一次。