Ogre 渲染目标解析与多文本合并渲染

实现目标

　　因为需求,想找一个在Ogre中好用的文本显示,经过查找和一些比对.有三种方案

　　一利用Overlay的2D显示来达到效果.

http://www.ogre3d.org/tikiwiki/tiki-index.php?page=MovableTextOverlay

　　二重写Renderable与MovableObject,利用对应字体查找到每个字符元素纹理坐标.

http://www.ogre3d.org/tikiwiki/tiki-index.php?page=MovableText

　　三利用BillboardSet在3D空间显示(公告板技术),这个有点意思的是对于字体的处理是自己用GUI画成纹理.

http://www.ogre3d.org/tikiwiki/tiki-index.php?page=MOGRE+MovableText+by+Billboards

　　我的要求应该是这样的,文本会比较多,每个文本通常关联3D空间里一个点,在动画效果时点会移动要求文本也能移动,方便添加,删除,修改文本.

　　其中第一与第二没有用到视图变换,透视变换,直接根据3D位置转化成对应屏幕xy中的0到1之间,丢失第三维深度信息,这里倒是没有多大关系.但是这三种都有一个问题,单个显示没什么,如果有100个点,就一百个文本,就有一百个Renderable,一百次渲染,在这个需求里,这是完全存在的.

　　所以自己动手,丰衣足食(好吧,是因为找到的都不满足需求),先细清下要达到的目标及思路.

　　首先.文本是否保持3维,如果3维显示,那么需要一直保证文本面对摄像机.如果2维显示,会简单一些,只需要去掉对应视图,透视变换,然后把对应点的位置直接转化成对应二维的-1到1之间就OK.

　　其次,如何把所有文本一次渲染,先说明在Ogre里如何渲染的,如果是一个字母A,那么我们画一个四边形,然后对应图片(这个图片画着一个A)放在这个四边形上就OK了.那么如果有4个点,分别显示A,B,C,D.我们可以这样考虑,先把ABCD这四个字母画到一张图片上,然后取每个字母在这个图片上的纹理坐标,这样我们就能根据一张纹理一下显示4个文本.

　　最后,因为有动画效果以及添加,删除,修改文本,考虑每桢更新显示,本来想着是用Mesh-Entity,但是感觉是在用高射炮打蚊子,花费高效果不好.如果能最简单方便的达到这个目的,我们需要先看下最基本的渲染元素.

Ogre 渲染基类

　　Renderable则负责渲染,主要包含获取材质,材质技术,得到渲染体RenderOperation,这个类里面比较简单,就是顶点数据,索引数据这些.

　　主要字段:

　　mUseIdentityProjection:是否启用投影矩阵.前面说过,投影矩阵(正交,透视)是把视图矩阵里的空间转化成各边为-1到1的立方体.(ogre中,caram里mFoVy,mFarDist,mNearDist,mAspect可生成二种类型投影矩阵).

　　mUseIdentityView:是否启用视图变换,就是启用不视图变换,如果不启用,那么渲染物体和抽象机的位置无关.(Ogre中,caram里mPosition,mOrientation生成以视图矩阵,其实就是一个以mPosition为原点,以lookat方向为Z值的三维坐标轴).

　　这二个属性一般为false,除非在Overlay(多用于UI)中,都设置false,因为这种UI位置与摄像机位置无关,所以mUseIdentityView,至于把mUseIdentityProjection设为false,则是把对应值(0,1)转化成(-1,1),不然用户需要先把在顶点在视图中的位置除viewport的长宽再转化成(-1,1),会很麻烦.　　mCustomParameters:当用户渲染需要用到着色器,并且需要设置参数时,提供的一种简单方法.mPolygonModeOverrideable:简单来说,就是是否受到摄像机针对显示模式的修改而影响.(显示点,线,面).

　　主要方法:

　　getMaterial(纯虚函数):当前要渲染的纹理.

　　getRenderOperation(纯虚函数):渲染中的顶点缓冲区,顶点索引缓冲区,渲染类型(点,线,三角形这些).

　　preRender:getRenderOperation后,渲染前,可以得到当前场景管理与渲染系统的对象.

　　postRender:和preRender,只是发生在渲染后.

　　MovableObject负责与场景管理中的SceneNode交互,是否可见,包围体,包围圈.查询标识,更新对应渲染体Renderable到渲染列表中.

　　主要字段:

　　mParentNode: 附加上的节点.

　　mVisible:是否可见.

　　mRenderQueneID:一般设置大于0,少于100,值大的会覆盖值少的,越大越显示在上面.

　　mQueryFlags: 场景查询相交测试标示相与,是则查询.

　　mVisibilityFlags: 与对应viewport对应标示相与,是则显示.

　　mWorldAABB:包围圈

　　mCastShadows:是否启用阴影

　　主要方法:

　　_updateRenderQueue(纯虚函数):把自己要渲染的内容(Renderable)更新到渲染列表.

　　_notifyCurrentCamera:在_updateRenderQueue之前,获取当前摄像机的信息,用于后期要和摄像机有关的渲染处理.

Renderable与MovableObject组合渲染物体

　　Renderable可以直接用于渲染,但是Renderable需要依靠MovableObject置入场景管理,更新渲染列表中.所以大部分需要渲染的元素都是Renderable和MovableObject的派生类.在渲染中,一般是根据MovableObject所附加的SceneNode位置来决定对应Renderable是否添加对应到渲染列表(_updateRenderQueue),然后渲染 渲染列表中的物体时,根据Renderable的getMaterial来设置渲染环境(如果有着色器代码,则启用),然后getRenderOperation设置要渲染顶点与索引,开始渲染.

　　Ogre中大致有三种组合方式来渲染.下面列举其中一些比较常见的:

　　第一种:只从Renderable继承,不需要附加到SceneNode上.一般用于OgreUI系统.

　　OverlayElement: Overlay组件里所有元素的基类.如panel,textArea,borderPanel.从基类中得到可以渲染的能力.

　　BorderRenderable:borderPanel比panel多出来要渲染的部分,这个元素会分二次渲染.

　　第二种:从Renderable与MovableObject继承.

　　SimpleRenderable: Ogre中帮我们定义的一个简单实现,Ogre内部有一些此类的派生实现,大家可以简单看下.

　　BillboardSet:公告板技术的一种实现,绘制多个始终面对摄像机的方形框.用于一些特效如草地啥的,还有Ogre中的Particle粒子效果也是交给BillboardSet处理的.

　　BillboardChain:实现线条特效,其子类RibbonTrail实现轨迹特效,如刀光,流星等.

　　Frustum:画对应投影可视体,如正交是一个长方体,透视则是一个立方锥.

　　第三种:类A从MovableObject继承,然后类A中包含类B的列表,而类B从Renderable继承.

　　Entity-SubEntity:Entity继承MovableObject,可以附加到SceneNode上,而SubEntity继承Renderable,才是真正用于渲染.比如一个人是一个整体,但是我们需要分开渲染,先渲染头,手,身体就是这个道理.同时也是内置模型Mesh的包装类,其中,封装了如姿态,顶点,骨骼动画.

　　ManualObject-ManualObjectSection:同Entity-SubEntity一样,让用户能方便实现一个物体包含多个组件的模型,并且参考了opengl即时模式的API,不同之后,最后还是以缓冲区模式提交数据.

实现代码

　　回到我们需求,我们采用最合适的方式当是第二种,从Renderable与MovableObject继承,如果第一种,我们能控制的比较少,第三种我们又只需要一次渲染,用不着.先确定下,我们采用公告板技术,启用视图,投影矩阵.

　　下面是Axiom代码,要转成Ogre,MOgre相应代码都非常方便.　

    public class ALabel
    {
        public string Label { get; set; }
        public Vector3 Position { get; set; }
    }

    public class ALabelSet : MovableObject, IRenderable
    {
        protected AxisAlignedBox aab = new AxisAlignedBox();
        public ALabelList labelList = new ALabelList();
        protected RenderOperation renderOperation = new RenderOperation();

        private Font _font;
        private string _fontName;
        protected Material material;

        //字体名,设置后加载对应字体的纹理,上面有各个字符在纹理中的坐标以及大小
        public string FontName
        {
            get
            {
                return this._fontName;
            }
            set
            {
                if (this._fontName != value || material == null || this._font == null)
                {
                    this._fontName = value;
                    this._font = (Font)FontManager.Instance[this._fontName];
                    if (this._font == null)
                    {
                        throw new Exception(String.Format("Could not find font '{0}'.", this._fontName));
                    }
                    this._font.Load();
                    if (material != null)
                    {
                        if (material.Name != "BaseWhite")
                        {
                            MaterialManager.Instance.Unload(material);
                        }
                        material = null;
                    }
                    material = this._font.Material.Clone(name + "Material", false, this._font.Material.Group);
                    if (material.IsLoaded == true)
                    {
                        material.Load();
                    }
                    material.DepthCheck = false;
                    //material.CullingMode = CullingMode.None;
                    //material.ManualCullingMode = ManualCullingMode.None;
                    material.Lighting = false;
                }
            }
        }

        private int _spaceWidth;
        private int _characterHeight;

        public int CharacterHeight
        {
            get
            {
                return this._characterHeight;
            }
            set
            {
                this._characterHeight = value;
            }
        }
        public int SpaceWidth
        {
            get
            {
                return this._spaceWidth;
            }
            set
            {
                this._spaceWidth = value;
            }
        }

        public bool buffersCreated;

        protected VertexData vertexData = null;
        protected HardwareVertexBuffer mainBuffer = null;
        private BufferBase lockPtr = null;
        private int ptrOffset = 0;

        //多摄像机,在每个viewport渲染时,需要记录对应摄像机,在渲染时要计算对应位置
        protected Camera currentCamera;

        private ColorEx _color = ColorEx.White;
        private int iColor = 0;
        public ColorEx Color
        {
            get
            {
                return this._color;
            }
            set
            {
                this._color = value;
            }
        }

        public ALabelSet(string fontName, int charHeight)
        {
            this.FontName = fontName;
            this._characterHeight = charHeight;
            castShadows = false;
        }

        protected override void dispose(bool disposeManagedResources)
        {
            if (!IsDisposed)
            {
                if (disposeManagedResources)
                {
                    if (this.renderOperation != null)
                    {
                        if (!this.renderOperation.IsDisposed)
                        {
                            this.renderOperation.Dispose();
                        }
                        this.renderOperation = null;
                    }
                }
            }

            base.dispose(disposeManagedResources);
        }

        //先检查是否需要重新申请缓冲区,然后获取当前缓冲区句柄
        private void BeginRender()
        {
            if (this.labelList.Count == 0)
                return;
            if (this.buffersCreated)
            {
                int count = this.labelList.TextAll.Length;
                if (count * 6 != this.vertexData.vertexCount)
                {
                    this.DestroyBuffers();
                }
            }
            if (!this.buffersCreated)
            {
                this.CreateBuffer();
            }
            this.iColor = Root.Instance.ConvertColor(this._color);
            this.lockPtr = this.mainBuffer.Lock(BufferLocking.Discard);
            this.ptrOffset = 0;
        }
        //根据当前摄像机,得到每个字符的位置.根据字体纹理,得到每个字符纹理坐标.
        private void Rendering(ALabel label)
        {
            if (!this.currentCamera.IsObjectVisible(label.Position))
            {
                return;
            }
            var charlen = label.Label.Length;
            var camera = this.currentCamera;
            var camPos = this.parentNode.FullTransform * camera.DerivedPosition;
            //camera to pos
            var camTo = camPos - label.Position;
            camTo.Normalize();
            //var xAxis = camTo.Cross(Vector3.UnitY);
            //var yAxis = camTo.Cross(xAxis);
            //xAxis = camTo.Cross(yAxis);
            //var camQ = Quaternion.FromAxes(xAxis, yAxis, camTo);
            var labelTo = Vector3.UnitZ;
            if (camTo.z < 0)
                labelTo = Vector3.NegativeUnitZ;
            var dotAngle = camTo.Dot(labelTo);
            var angle = Math.Acos(dotAngle);
            var axis = labelTo.Cross(camTo);
            var camQ = Quaternion.FromAngleAxis(angle, axis);
            //if (camera.Name == "PerspectiveViewportCamera")
            //    System.Diagnostics.Debug.WriteLine("{0}<->{1}<->{2}", dotAngle, angle, camTo.z);
            var left = 0.0f;
            for (var i = 0; i != charlen; i++)
            {
                char cr = label.Label[i];
                var clyph = this._font.Glyphs[cr];
                var width = clyph.aspectRatio;// this._font.GetGlyphAspectRatio(cr);                
                //Real u1, u2, v1, v2;this._font.GetGlyphTexCoords(cr, out u1, out v1, out u2, out v2);
                Real u1 = clyph.uvRect.Top;
                Real u2 = clyph.uvRect.Bottom;
                Real v1 = clyph.uvRect.Left;
                Real v2 = clyph.uvRect.Right;

                var xLeft = camQ * Vector3.UnitX * left * 2.0f * labelTo.z;
                var xRigth = camQ * Vector3.UnitX * (left + width) * 2.0f * labelTo.z;
                var y = camQ * (Vector3.UnitY * this._characterHeight * 2.0f);
                var tl = label.Position + xLeft;
                var bl = label.Position + xLeft - y;
                var tr = label.Position + xRigth;
                var br = label.Position - y + xRigth;
                left += width;
                unsafe
                {
                    var posPtr = this.lockPtr.ToFloatPointer();
                    var colPtr = this.lockPtr.ToIntPointer();
                    var texPtr = posPtr;

                    //first tri
                    //top left
                    posPtr[ptrOffset++] = tl.x;
                    posPtr[ptrOffset++] = tl.y;
                    posPtr[ptrOffset++] = tl.z;// ml.Position.z;
                    colPtr[ptrOffset++] = this.iColor;
                    texPtr[ptrOffset++] = u1;
                    texPtr[ptrOffset++] = v1;
                    //2 bottom left
                    posPtr[ptrOffset++] = bl.x;
                    posPtr[ptrOffset++] = bl.y;
                    posPtr[ptrOffset++] = bl.z;// ml.Position.z;
                    colPtr[ptrOffset++] = this.iColor;
                    texPtr[ptrOffset++] = u1;
                    texPtr[ptrOffset++] = v2;
                    //3 top right
                    posPtr[ptrOffset++] = tr.x;
                    posPtr[ptrOffset++] = tr.y;
                    posPtr[ptrOffset++] = tr.z;// ml.Position.z;
                    colPtr[ptrOffset++] = this.iColor;
                    texPtr[ptrOffset++] = u2;
                    texPtr[ptrOffset++] = v1;

                    //second tri
                    //1 top right
                    posPtr[ptrOffset++] = tr.x;
                    posPtr[ptrOffset++] = tr.y;
                    posPtr[ptrOffset++] = tr.z;// ml.Position.z;
                    colPtr[ptrOffset++] = this.iColor;
                    texPtr[ptrOffset++] = u2;
                    texPtr[ptrOffset++] = v1;
                    //2 bottom left
                    posPtr[ptrOffset++] = bl.x;
                    posPtr[ptrOffset++] = bl.y;
                    posPtr[ptrOffset++] = bl.z;// ml.Position.z;
                    colPtr[ptrOffset++] = this.iColor;
                    texPtr[ptrOffset++] = u1;
                    texPtr[ptrOffset++] = v2;
                    //3 bottom right
                    posPtr[ptrOffset++] = br.x;
                    posPtr[ptrOffset++] = br.y;
                    posPtr[ptrOffset++] = br.z;// ml.Position.z;
                    colPtr[ptrOffset++] = this.iColor;
                    texPtr[ptrOffset++] = u2;
                    texPtr[ptrOffset++] = v2;
                }
            }
        }

        //提交修改后的缓冲区数据
        private void EndRender()
        {
            this.mainBuffer.Unlock();
            this.lockPtr = null;
        }

        private void CreateBuffer()
        {
            this.vertexData = new VertexData();
            this.vertexData.vertexStart = 0;
            this.vertexData.vertexCount = this.labelList.TextAll.Length * 6;

            var decl = this.vertexData.vertexDeclaration;
            var binding = this.vertexData.vertexBufferBinding;

            var offset = 0;
            decl.AddElement(0, offset, VertexElementType.Float3, VertexElementSemantic.Position);
            offset += VertexElement.GetTypeSize(VertexElementType.Float3);
            decl.AddElement(0, offset, VertexElementType.Color, VertexElementSemantic.Diffuse);
            offset += VertexElement.GetTypeSize(VertexElementType.Color);
            decl.AddElement(0, offset, VertexElementType.Float2, VertexElementSemantic.TexCoords, 0);

            this.mainBuffer = HardwareBufferManager.Instance.CreateVertexBuffer(decl.Clone(0), this.vertexData.vertexCount,
                                                                     BufferUsage.DynamicWriteOnlyDiscardable);
            binding.SetBinding(0, this.mainBuffer);
            this.buffersCreated = true;
        }

        private void DestroyBuffers()
        {
            this.vertexData = null;
            this.mainBuffer = null;
            this.buffersCreated = false;
        }

        #region MovableObject
        //不需要场景查询.
        public override AxisAlignedBox BoundingBox
        {
            get { return (AxisAlignedBox)this.aab.Clone(); }
        }
        //同上
        public override Real BoundingRadius
        {
            get { return 1.0f; }
        }
        //检查物体是否渲染时,更新当前Renderable到渲染列表中
        public override void UpdateRenderQueue(RenderQueue queue)
        {
            //if (bCameraMove)
            {
                BeginRender();
                foreach (var label in this.labelList)
                {
                    Rendering(label);
                }
                EndRender();
            }
            queue.AddRenderable(this);//, RenderQueue.DEFAULT_PRIORITY, renderQueueID);
        }

        private bool bCameraMove = false;
        private Vector3 prePosition = Vector3.Zero;
        //我们有多个摄像机,而每次渲染需要根据摄像机位置更新缓冲区
        public override void NotifyCurrentCamera(Camera camera)
        {
            var currPos = Root.Instance.SceneManager.GetCamera("PerspectiveViewportCamera").Position;
            bCameraMove = currentCamera == null || currPos != prePosition;
            if (camera.Name == "PerspectiveViewportCamera")
                prePosition = currPos;
            this.currentCamera = camera;
        }
        #endregion

        #region IRenderable
        //不需要阴影
        public bool CastsShadows
        {
            get { return false; }
        }
        //没有启用着色器.不需要
        public Vector4 GetCustomParameter(int index)
        {
            return Vector4.Zero;
        }

        public Real GetSquaredViewDepth(Camera camera)
        {
            return parentNode.GetSquaredViewDepth(camera);
        }
        //当前模型矩阵
        public void GetWorldTransforms(Matrix4[] matrices)
        {
            matrices[0] = parentNode.FullTransform;
        }

        public Axiom.Core.Collections.LightList Lights
        {
            get { return QueryLights(); }
        }
        //字体纹理
        public Material Material
        {
            get { return material; }
        }
        //格式化法线
        public bool NormalizeNormals
        {
            get { return false; }
        }
        //一个
        public ushort NumWorldTransforms
        {
            get { return 1; }
        }
        //是否和摄像机同PolygonMode
        public bool PolygonModeOverrideable
        {
            get { return true; }
        }

        public RenderOperation RenderOperation
        {
            get
            {
                if (bCameraMove)
                {
                    this.renderOperation.vertexData = this.vertexData;
                    this.renderOperation.vertexData.vertexStart = 0;
                    this.renderOperation.operationType = OperationType.TriangleList;
                    this.renderOperation.useIndices = false;
                    this.renderOperation.indexData = null;
                    this.renderOperation.vertexData.vertexCount = this.vertexData.vertexCount;
                }
                return this.renderOperation;
            }
        }
        //着色器
        public void SetCustomParameter(int index, Vector4 val)
        {            
        }

        public Technique Technique
        {
            get { return this.material.GetBestTechnique(); }
        }
        //着色器
        public void UpdateCustomGpuParameter(GpuProgramParameters.AutoConstantEntry constant, GpuProgramParameters parameters)
        {            
        }
        //是否启用投影变换
        public bool UseIdentityProjection
        {
            get { return false; }
        }
        //是否启用视图变换
        public bool UseIdentityView
        {
            get { return false; }
        }
        //当前模型在世界空间方位
        public Quaternion WorldOrientation
        {
            get { return parentNode.DerivedOrientation; }
        }
        //当前模型在世界空间顶点
        public Vector3 WorldPosition
        {
            get { return parentNode.DerivedPosition; }
        }
        #endregion
    }

    public class ALabelList : List<ALabel>
    {
        public ALabelList()
        {
        }
        public void Add(string label, Vector3 position)
        {
            ALabel ab = new ALabel();
            ab.Label = label ?? this.Count.ToString();
            ab.Position = position;
            this.Add(ab);
        }

        public string TextAll
        {
            get
            {
                string text = string.Empty;
                foreach (var txt in this)
                {
                    text += txt.Label;
                }
                return text;
            }
        }
    }

　　代码其实还没有完成,不过大部分已经实现,对照前面Renderable与MovableObject的实现,说下代码中要注意的是.

　　代码中,所有方法都加入了注释.主要重载Renderable与MovableObject相关属性,实现其方法.包含是否启用投影变换,视图变换,阴影,纹理等.

　　注意二个地方,一是当我们设置字体时,从字体中我们能得到一张纹理,里面包含所有字符,通过提供的方法,对得到对应字符在纹理中的坐标.二是当我们渲染时,label要一直面对摄像机方向,而我们提供的是XY方向的位置,如何保证XY变换成垂直于摄像机到Label的方向的平面,

　　我们得到字符的长宽,在水平面的长度,也就是XY方向,水平面的法线是Z轴,如果当我们摄像机与Label方向垂直XY正平面时,那时我们的字符位置就不需要转化.我们已知字符转化前法向量是z轴,而方向矢量(摄像机-label位置)是变化后的法向量.如果我们知道如何从Z轴转化成label位置到摄像机的方向矢量,那么我们把顶点也进行这个转化就OK了.(这里法向量旋转等于顶点的旋转,如果元素发生大小的变化,这个逻辑不再正确,大家具体可以找相关旋转变化的书).

　　前面有说过,二个向量的点乘可以得到二个向量的角度A,二个向量的叉乘可以得到垂直于这个向量的方向向量V,简单来说,在方向向量V上,旋转角度A就能得到达到前面目录.我们知道,四元数的定义就是由着方向轴旋转角度,由此,得到前面的V与A,我们能很容易就得到对应四元数,不过需要注意的,二个向量的角度是计算的0-180度,而我们这明显是360度,比如旋转了270度和90度都是计算为90度的,所以在这里,我们需要做点改变,当摄像机跑到label后面去时,我们把对应的Z轴变为负Z轴.

　　这里我们还可以换个角度来想,Z轴变换后成为(摄像机-label位置)矢量,这个矢量也是新坐标轴的Z轴,知道Z轴,如何求XY轴,想起视图矩阵是如何得到的没?很简单,Z corss Y(0,1,0)得到X,然后Z cross X得到Y,新的三轴我们得到了,或者后变换后的坐标轴我们得到了,根据3轴得到对应矩阵也是一样的效果.

　　下面是效果图,可以看出,有个视图还是有问题,大家可以猜下是那导致的.

　　中间,我想做个尝试,现在是每桢都更新,这是没必要的,只有启用动画这里才需要如此,我开始想的是,如果数据没变化,就不更新,可惜的是,我这里是多视图,多摄像机,然后顶点位置计算又和摄像机有关,而当前缓冲区数据只有一个,这样必需每桢更新,除非每个摄像机声明一个缓冲区才行,这样一想感觉又不划算.

　　最后,如上面问题,我们可以关闭视图变换与投影变换,如Overlay一样,那么我们如何修改了,记的前面说过,关闭视图变换与投影变换后,我们设定的x,y值要在-1到1之间,否则是看不到的.所以如果大家记的把Node上的点变换成对应的-1到1就完成了,比上面公告板技术要简单一点,顺便可以参考Overlay里的计算.