CSharpGL(26)在opengl中实现控件布局/渲染文字

CSharpGL(26)在opengl中实现控件布局/渲染文字

效果图

如图所示，可以将文字、坐标轴固定在窗口的一角。

下载

CSharpGL已在GitHub开源，欢迎对OpenGL有兴趣的同学加入（https://github.com/bitzhuwei/CSharpGL）

UI控件布局关键点

ILayout

类似Winform控件那样，控件的位置、大小由其Anchor等属性决定。窗口大小改变时，控件的位置、大小会随之改变。

所以模仿Control类，直接使用Anchor作为UIRenderer的接口。

    /// <summary>
    /// Supports layout UI element in OpenGL canvas.
    /// 实现在OpenGL窗口中的UI布局
    /// </summary>
    public interface ILayout : ITreeNode<UIRenderer>
    {
        //event EventHandler afterLayout;

        /// <summary>
        /// the edges of the <see cref="GLCanvas"/> to which a UI’s rect is bound and determines how it is resized with its parent.
        /// <para>something like AnchorStyles.Left | AnchorStyles.Bottom.</para>
        /// </summary>
        System.Windows.Forms.AnchorStyles Anchor { get; set; }

        /// <summary>
        /// Gets or sets the space between viewport and SimpleRect.
        /// </summary>
        System.Windows.Forms.Padding Margin { get; set; }

        /// <summary>
        /// 相对于Parent左下角的位置(Left Down location)
        /// </summary>
        System.Drawing.Point Location { get; set; }

        /// <summary>
        /// Stores width when <see cref="Anchor"/>.Left &amp; <see cref="Anchor"/>.Right is <see cref="Anchor"/>.None.
        /// <para> and height when <see cref="Anchor"/>.Top &amp; <see cref="Anchor"/>.Bottom is <see cref="Anchor"/>.None.</para>
        /// </summary>
        System.Drawing.Size Size { get; set; }

        /// <summary>
        /// 
        /// </summary>
        System.Drawing.Size ParentLastSize { get; set; }

        /// <summary>
        /// 
        /// </summary>
        int zNear { get; set; }

        /// <summary>
        /// 
        /// </summary>
        int zFar { get; set; }

    }

 

实现在OpenGL窗口中的UI布局

有了数据结构，就可以实现窗口中的UI布局了。当窗口大小改变时，调用下面的函数。

        /// <summary>
        /// layout controls in OpenGL canvas.
        /// <para>This coordinate system is as below.</para>
        /// <para>   /\ y</para>
        /// <para>   |</para>
        /// <para>   |</para>
        /// <para>   |</para>
        /// <para>   |</para>
        /// <para>   |</para>
        /// <para>   |-----------------&gt;x</para>
        /// <para>(0, 0)</para>
        /// </summary>
        /// <param name="uiRenderer"></param>
        internal static void Layout(this ILayout uiRenderer)
        {
            ILayout parent = uiRenderer.Parent;
            if (parent != null)
            {
                uiRenderer.Self.DoBeforeLayout();
                NonRootNodeLayout(uiRenderer, parent);
                uiRenderer.Self.DoAfterLayout();
            }

            foreach (var item in uiRenderer.Children)
            {
                item.Layout();
            }

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

        /// <summary>
        /// leftRightAnchor = (AnchorStyles.Left | AnchorStyles.Right); 
        /// </summary>
        private const AnchorStyles leftRightAnchor = (AnchorStyles.Left | AnchorStyles.Right);

        /// <summary>
        /// topBottomAnchor = (AnchorStyles.Top | AnchorStyles.Bottom);
        /// </summary>
        private const AnchorStyles topBottomAnchor = (AnchorStyles.Top | AnchorStyles.Bottom);

        /// <summary>
        /// Gets <paramref name="currentNode"/>'s location and size according to its state and parent's information.
        /// </summary>
        /// <param name="currentNode"></param>
        /// <param name="parent"></param>
        private static void NonRootNodeLayout(ILayout currentNode, ILayout parent)
        {
            int x, y, width, height;
            if ((currentNode.Anchor & leftRightAnchor) == leftRightAnchor)
            {
                width = parent.Size.Width - currentNode.Margin.Left - currentNode.Margin.Right;
                //width = currentNode.Size.Width + (parent.Size.Width - currentNode.ParentLastSize.Width);
                if (width < 0) { width = 0; }
            }
            else
            {
                width = currentNode.Size.Width;
            }

            if ((currentNode.Anchor & topBottomAnchor) == topBottomAnchor)
            {
                height = parent.Size.Height - currentNode.Margin.Top - currentNode.Margin.Bottom;
                //height = currentNode.Size.Height + (parent.Size.Height - currentNode.ParentLastSize.Height);
                if (height < 0) { height = 0; }
            }
            else
            {
                height = currentNode.Size.Height;
            }

            if ((currentNode.Anchor & leftRightAnchor) == AnchorStyles.None)
            {
                x = (int)(
                    (parent.Size.Width - width)
                    * ((double)currentNode.Margin.Left / (double)(currentNode.Margin.Left + currentNode.Margin.Right)));
            }
            else if ((currentNode.Anchor & leftRightAnchor) == AnchorStyles.Left)
            {
                x = parent.Location.X + currentNode.Margin.Left;
            }
            else if ((currentNode.Anchor & leftRightAnchor) == AnchorStyles.Right)
            {
                x = parent.Location.X + parent.Size.Width - currentNode.Margin.Right - width;
            }
            else if ((currentNode.Anchor & leftRightAnchor) == leftRightAnchor)
            {
                x = parent.Location.X + currentNode.Margin.Left;
            }
            else
            { throw new Exception("uiRenderer should not happen!"); }

            if ((currentNode.Anchor & topBottomAnchor) == AnchorStyles.None)
            {
                y = (int)(
                    (parent.Size.Height - height)
                    * ((double)currentNode.Margin.Bottom / (double)(currentNode.Margin.Bottom + currentNode.Margin.Top)));
            }
            else if ((currentNode.Anchor & topBottomAnchor) == AnchorStyles.Bottom)
            {
                //y = currentNode.Margin.Bottom;
                y = parent.Location.Y + currentNode.Margin.Bottom;
            }
            else if ((currentNode.Anchor & topBottomAnchor) == AnchorStyles.Top)
            {
                //y = parent.Size.Height - height - currentNode.Margin.Top;
                y = parent.Location.Y + parent.Size.Height - currentNode.Margin.Top - height;
            }
            else if ((currentNode.Anchor & topBottomAnchor) == topBottomAnchor)
            {
                //y = currentNode.Margin.Top + parent.Location.Y;
                y = parent.Location.Y + currentNode.Margin.Bottom;
            }
            else
            { throw new Exception("This should not happen!"); }

            currentNode.Location = new System.Drawing.Point(x, y);
            currentNode.Size = new Size(width, height);
        }

 

glViewport/glScissor

这是避免复杂的矩阵操作，实现稳定的UI布局显示的关键。glViewport指定了GLRenderer在窗口的渲染位置，glScissor将GLRenderer范围之外的部分保护起来。

在渲染之前，根据UIRenderer的位置和大小更新viewport和scissor即可。不再需要为UI固定在窗口某处而煞费苦心地设计projection,view,model矩阵了。

    /// <summary>
    /// Renderer  that supports UI layout.
    /// 支持2D UI布局的渲染器
    /// </summary>
    public class UIRenderer : RendererBase, ILayout
    {
        private ViewportSwitch viewportSwitch;
        private ScissorTestSwitch scissorTestSwitch;
        private GLSwitchList switchList = new GLSwitchList();

        /// <summary>
        /// 
        /// </summary>
        public GLSwitchList SwitchList
        {
            get { return switchList; }
        }

        /// <summary>
        /// triggered before layout in <see cref="ILayout"/>.Layout().
        /// </summary>
        public event EventHandler BeforeLayout;
        /// <summary>
        /// triggered after layout in <see cref="ILayout"/>.Layout().
        /// </summary>
        public event EventHandler AfterLayout;

        internal void DoBeforeLayout()
        {
            EventHandler BeforeLayout = this.BeforeLayout;
            if (BeforeLayout != null)
            {
                BeforeLayout(this, null);
            }
        }

        internal void DoAfterLayout()
        {
            EventHandler AfterLayout = this.AfterLayout;
            if (AfterLayout != null)
            {
                AfterLayout(this, null);
            }
        }

        /// <summary>
        /// 
        /// </summary>
        public RendererBase Renderer { get; protected set; }
        /// <summary>
        /// 
        /// </summary>
        /// <param name="anchor"></param>
        /// <param name="margin"></param>
        /// <param name="size"></param>
        /// <param name="zNear"></param>
        /// <param name="zFar"></param>
        public UIRenderer(
            System.Windows.Forms.AnchorStyles anchor, System.Windows.Forms.Padding margin,
            System.Drawing.Size size, int zNear, int zFar)
        {
            this.Children = new ChildList<UIRenderer>(this);// new ILayoutList(this);

            this.Anchor = anchor; this.Margin = margin;
            this.Size = size; this.zNear = zNear; this.zFar = zFar;
        }

        /// <summary>
        /// 
        /// </summary>
        public System.Windows.Forms.AnchorStyles Anchor { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public System.Windows.Forms.Padding Margin { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public System.Drawing.Point Location { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public System.Drawing.Size Size { get; set; }
        /// <summary>
        /// 
        /// </summary>
        public System.Drawing.Size ParentLastSize { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public int zNear { get; set; }

        /// <summary>
        /// 
        /// </summary>
        public int zFar { get; set; }

        /// <summary>
        /// 
        /// </summary>
        protected override void DoInitialize()
        {
            this.viewportSwitch = new ViewportSwitch();
            this.scissorTestSwitch = new ScissorTestSwitch();

            RendererBase renderer = this.Renderer;
            if (renderer != null)
            {
                renderer.Initialize();
            }
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="arg"></param>
        protected override void DoRender(RenderEventArg arg)
        {
            this.viewportSwitch.X = this.Location.X;
            this.viewportSwitch.Y = this.Location.Y;
            this.viewportSwitch.Width = this.Size.Width;
            this.viewportSwitch.Height = this.Size.Height;
            this.scissorTestSwitch.X = this.Location.X;
            this.scissorTestSwitch.Y = this.Location.Y;
            this.scissorTestSwitch.Width = this.Size.Width;
            this.scissorTestSwitch.Height = this.Size.Height;

            this.viewportSwitch.On();
            this.scissorTestSwitch.On();
            int count = this.switchList.Count;
            for (int i = 0; i < count; i++) { this.switchList[i].On(); }

            // 把所有在此之前渲染的内容都推到最远。
            // Push all rendered stuff to farest position.
            OpenGL.Clear(OpenGL.GL_DEPTH_BUFFER_BIT);

            RendererBase renderer = this.Renderer;
            if (renderer != null)
            {
                renderer.Render(arg);
            }

            for (int i = count - 1; i >= 0; i--) { this.switchList[i].Off(); }
            this.scissorTestSwitch.Off();
            this.viewportSwitch.Off();
        }

        /// <summary>
        /// 
        /// </summary>
        protected override void DisposeUnmanagedResources()
        {
            RendererBase renderer = this.Renderer;
            if (renderer != null)
            {
                renderer.Dispose();
            }
        }

        /// <summary>
        /// 
        /// </summary>
        public UIRenderer Self { get { return this; } }

        /// <summary>
        /// 
        /// </summary>
        public UIRenderer Parent { get; set; }

        //ChildList<UIRenderer> children;

        /// <summary>
        /// 
        /// </summary>
        [Editor(typeof(IListEditor<UIRenderer>), typeof(UITypeEditor))]
        public ChildList<UIRenderer> Children { get; private set; }
    }

 

叠加/覆盖

注意在UIRenderer.DoRender(RenderEventArgs arg)中，使用

            // 把所有在此之前渲染的内容都推到最远。
            // Push all rendered stuff to farest position.
            OpenGL.Clear(OpenGL.GL_DEPTH_BUFFER_BIT);

 

把所有在此之前渲染的内容都推到最远。

从ILayout的定义中可以看到，控件与控件组成了一个树结构。其根结点是覆盖整个窗口的控件，在渲染UI时处于第一个渲染的位置，然后渲染它的各个子结点代表的控件。这就实现了子控件能够完全覆盖在父控件之上。

我突然想到了WPF。

渲染文字

从TTF文件获取字形

（https://github.com/MikePopoloski/SharpFont）是一个纯C#的解析TTF文件的库，能够代替C++的FreeType。我将其稍作修改，实现了从TTF文件获取任意uncode字形，进而获取字形纹理，实现渲染文字的功能。

例如下面这几个字形纹理。

使用FontResource

FontResource类型封装了使用字形贴图的功能。

使用方式也非常简单。首先创建一个字体资源对象。

FontResource fontResouce = FontResource.Load(ttfFilename, ' ', (char)126);

然后交给GLText。

var glText = new GLText(AnchorStyles.Left | AnchorStyles.Top,
    new Padding(3, 3, 3, 3), new Size(850, 50), -100, 100, fontResouce);
glText.Initialize();
glText.SetText("The quick brown fox jumps over the lazy dog!");

GLText在初始化时指定此字体对象包含的二维纹理。

        protected override void DoInitialize()
        {
            base.DoInitialize();

            this.Renderer.SetUniform("fontTexture", this.fontResource.GetSamplerValue());
        }

2016-07-30

现在我已经废弃了FontResource，改用更简单的实现方式（FontTexture）。

FontResource需要通过复杂的SharpFont来自行解析TTF文件。我至今没有详细看过SharpFont的代码，因为SharpFont实在太大了。而FontTexture直接借助System.Drawing.Font类型的Font.MeasureString()方法来获取字形的大小，并且可以通过Graphics.DrawString()把字形贴到 Bitmap 对象上。这就解决了获取文字贴图及其UV字典的问题。

不得不说.net framework自带类库的功能之丰富，简直富可敌国。

2016-8-3

如何创建一个对象，然后用UI的方式渲染？

创建一个对象SomeRenderer时，像普通对象一样，用IBufferable+Renderer的方式创建模型和渲染器（或者用RendererBase，这可以使用Legacy OpenGL）。注意，模型的边界应该是(-0.5, -0.5, -0.5)到(0.5, 0.5, 0.5)，即边长为(1, 1, 1)且中心在原点的立方体。如此一来，就可以在SomeRenderer的DoRender()方法里指定对象的缩放比例为：

mat4 model = glm.scale(mat4.identity(), new vec3(this.Size.Width, this.Size.Height, 1));

这样的缩放比例就可以恰好使得SomeRenderer的模型填满UI的矩形范围。

 

总结

CSharpGL支持控件布局，支持渲染文字了。

欢迎对OpenGL有兴趣的同学关注（https://github.com/bitzhuwei/CSharpGL）