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里的计算.
