3.11 Billboarding:在3D世界绘制2D图像使它们总是面向相机
问题
要使画面给人留下深刻印象,一个3D世界需要包含许多物体,特别是处理室外场景时。例如,如果没有绘制成百上千棵树,树林看起来就会显得不真实。但是,以3D模型的形式绘制几百颗树是不可能的,因为这样做会极大地拖慢应用程序。
你也可以使用少量的billboarding(译者注:billboard可以翻译为公告板,广告牌),例如,绘制激光束或子弹。这通常和一个粒子引擎组合在一起(见教程3-12)。
解决方案
你可以通过使用一张2D图像代替3D物体解决这个问题。但是当相机在2D图像旁边时,观察者很容易看出这是一张2D图像,如图3-16的左图所示,左图中有5张2D图像放置在3D世界中。
图3-16 3D场景中的2D图像。没有bilboarded (左图),有billboarded (右图)。
要解决这个问题,对每个图像你想在3D空间中定义两个三角形显示这个图像,而且你想旋转这些三角形使图像能够朝向相机。如图3-16中的右图所示,有与左图相同的5张2D图像,但经过旋转朝向相机。如果这些图像包含树木,它们的边界会使用透明色,可以实现一个漂亮的效果。
XNA Framework包含计算每个图像两个三角形的六个顶点的旋转位置的功能,这个功能由Matrix. CreateBillboard方法提供,但是在vertex shader中进行这些计算会获得极大的性能提升,这会在本教程的第二部分解释。
工作原理
作为树林或粒子引擎的共同部分,你想只定义2D图像的中心的3D位置和它的大小。所以,你想使用一个集合包含每个2D图像的3D位置和大小:
List<Vector4> billboardList = new List<Vector4>(); Texture2D myTexture; VertexPositionTexture[] billboardVertices;
可以看到billboards存储为一个Vector4:三个浮点数存储中心的3D位置,另一个浮点数保存billboard的大小。
对每个billboarded 2D图像,你需要计算图像的两个三角形的六个顶点。这些顶点存储在最后一行代码定义的billboardVertices变量中。myTexture变量保存用来给显卡采样颜色的纹理。
技巧:如教程3-4中所述,绘制多个纹理的最快方法是将它们存储在一张大纹理中,这样显卡就无需切换纹理了。
在LoadContent方法中添加以下代码将纹理加载到myTexture变量中:
myTexture = content.Load<Texture2D>("billboardtexture");
然后添加一个简单的方法让你可以容易地将billboard添加到场景中:
private void AddBillboards() { billboardList.Add(new Vector4(-20, -10, 0, 10)); billboardList.Add(new Vector4(0, 0, 0, 5)); billboardList.Add(new Vector4(20, 10, 0, 10)); }
现在这个方法只添加了三个billboard。第四个分量表示你想让第二个billboard大小只有另两个的四分之一,因为边长为另两个的二分之一。别忘了在Initialize方法中调用这个方法:
AddBillboards();
然后,你需要计算六个顶点的位置。Billboarding有两种主要方式:球面billboarding和圆柱面billboarding。球面billboarding主要用于粒子引擎,圆柱面billboarding主要用于绘制树木,人等。
为球面Billboarding计算六个顶点位置
技巧:如果你想使用HLSL实现billboard,可以略过此节直接看本教程的“性能考虑:第二部分”,因为在GPU上进行billboarding计算可以给程序带来极大的提升。“性能考虑:第一部分”也值得一读。
现在你已经定义了billboard的中心位置,可以计算中心点周围的六个顶点了:
private void CreateBBVertices() { billboardVertices = new VertexPositionTexture[billboardList.Count * 6]; int i = 0; foreach (Vector4 currentV4 in billboardList) { Vector3 center = new Vector3(currentV4.X, currentV4.Y, currentV4.Z); float scaling = currentV4.W; //add rotated vertices to the array } }
上述代码首先创建了一个数组存储每个billboard的两个三角形的六个顶点。然后,对存储在billboardList 中的每个billboard,获取它的中心位置和大小。for循环中的其余部分是计算六个顶点位置的实际代码。
对每张2D图像,你需要定义两个三角形用以在3D空间定义一个矩形。这意味着你需要定义六个顶点,但其中四个是独立的。
因为需要显示一张纹理,所以使用VertexPosit ionTexture。因为billboardList保存每个矩形的中心位置,你想让所有的顶点到中心的距离相同。在本例中,需要到/从中心的X和Y分量中增加/减少0.5f的偏移量获取顶点的位置。
例如,下面的三个位置保存离开一个三角形中心位置的偏移量,DL指左下,UR指右上:
Vector3 posDL = new Vector3(-0.5f, -0.5f, 0); Vector3 posUR = new Vector3(0.5f, 0.5f, 0); Vector3 posUL = new Vector3(-0.5f, 0.5f, 0);
如果你将中心位置添加到上述位置中,就获得了一个三角形的顶点位置。但是,无论相机的位置如何,这些位置将保持不变。所以当你移动相机时,就会看到这个三角形的侧面,如图3-16的左图所示。而你想让三角形始终朝向相机,因此需要根据相机的位置对这些偏移量进行某种形式的旋转。这需要数学知识,幸运的是,XNA可以立即生成一个矩阵用来进行这种变换。在for循环的顶部添加以下代码:
Matrix bbMatrix = Matrix.CreateBillboard(center, quatCam.Position, quatCam.UpVector, quatCam.Forward);
要能创建这个矩阵用来旋转三角形使图像始终朝向相机,XNA需要知道矩形和相机的位置,相机的Forward向量。因为你想让球形billboarding旋转图像使它根据相机朝向上方,你还需要指定Up向量。
注意:当你颠倒相机时,矩形也会随之颠倒。要展示这种情况,本例中使用了一个向上箭头作为纹理。而且,为了让你不受限制地旋转相机,使用了教程2-4中的四元数相机而不是教程2-3中的quake相机。
有了这个矩阵,就可以获取旋转偏移量:
Vector3 posDL = new Vector3(-0.5f, -0.5f, 0); Vector3 billboardedPosDL = Vector3.Transform(posDL*scaling, bbMatrix); billboardVertices[i++] = new VertexPositionTexture(billboardedPosDL, new Vector2(1, 1));
第一行代码定义了一个静态偏移量,并没有考虑相机的位置。你还需指定矩形的大小,将偏移量乘以scaling值,这样矩形会在 AddBillboards 方法中成为你指定的大小。现在知道了顶点相对于中心的偏移量,使用矩阵进行变换。最后,在顶点数组中存储这个变换过的位置和纹理坐标。
如果对三角形的三个顶点都进行这样的操作,那么三角形就会始终朝向相机。
注意:你只对偏移量进行变换:相对于中心的顶点平移会通过矩阵变换自动实现!这也是创建bbMatrix时需要指定矩形中心位置的原因之一。
你需要对每个偏移量都进行这个变换。因为两个三角形共享两个两个点,因此只需进行四次变换。下面是CreateBBVertices方法:
private void CreateBBVertices() { billboardVertices = new VertexPositionTexture[billboardList.Count * 6]; int i = 0; foreach (Vector4 currentV4 in billboardList) { Vector3 center = new Vector3(currentV4.X, currentV4.Y, currentV4.Z); float scaling = currentV4.W; Matrix bbMatrix = Matrix.CreateBillboard(center, quatCam.Position, quatCam.UpVector, quatCam.Forward); //first triangle Vector3 posDL = new Vector3(-0.5f, -0.5f, 0); Vector3 billboardedPosDL = Vector3.Transform(posDL * scaling, bbMatrix); billboardVertices[i++] = new VertexPositionTexture(billboardedPosDL, new Vector2(1, 1)); Vector3 posUR = new Vector3(0.5f, 0.5f, 0); Vector3 billboardedPosUR = Vector3.Transform(posUR * scaling, bbMatrix); billboardVertices[i++] = new VertexPositionTexture(billboardedPosUR, new Vector2(0, 0)); Vector3 posUL = new Vector3(-0.5f, 0.5f, 0); Vector3 billboardedPosUL = Vector3.Transform(posUL * scaling, bbMatrix); billboardVertices[i++] = new VertexPositionTexture(billboardedPosUL, new Vector2(1, 0)); //second triangle: 2 of 3 corner points already calculated! billboardVertices[i++] = new VertexPositionTexture(billboardedPosDL, new Vector2(1, 1)); Vector3 posDR = new Vector3(0.5f, -0.5f, 0); Vector3 billboardedPosDR = Vector3.Transform(posDR * scaling, bbMatrix); billboardVertices[i++] = new VertexPositionTexture(billboardedPosDR, new Vector2(0, 1)); billboardVertices[i++] = new VertexPositionTexture(billboardedPosUR, new Vector2(0, 0)); } }
对billboardList中的每个项目,这个方法都会计算四个点,让矩形朝向相机。
确保在相机的位置或旋转发生变化时调用这个方法,因为所有billboard的旋转都会相应地进行调整!为了安全起见,在Update方法的最后调用这个方法。
从顶点数组绘制
有了包含3D位置和纹理坐标的所有顶点,你就可以在Draw方法中绘制它们了,解释请见教程5-1:
//draw billboards basicEffect.World = Matrix.Identity; basicEffect.View = quatMousCam.ViewMatrix; basicEffect.Projection = quatMousCam.ProjectionMatrix; basicEffect.TextureEnabled = true; basicEffect.Texture = myTexture; basicEffect.Begin(); foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes) { pass.Begin(); device.VertexDeclaration = new VertexDeclaration(device, VertexPositionTexture.VertexElements); device.DrawUserPrimitives<VertexPositionTexture> (PrimitiveType.TriangleList, billboardVertices, 0, billboardList.Count*2); pass.End(); } basicEffect.End();
你想从billboardVertices数组进行绘制,数组中的顶点表示三角形的集合。因为每个2D图像都是一个矩形,需要绘制两个三角形,所有你需要绘制总共billboard List . Count*2 个三角形。因为使用的是TriangleList,这个数量等于billboardVertices. Length/3。
性能考虑:第一部分
当使用billboard时,很容易碰到需要绘制几千个billboard的情况。例如你可以像以下代码一样定义几千个billboards:
private void AddBillboards() { int CPUpower = 10; for (int x = -CPUpower; x < CPUpower; x++) for (int y = -CPUpower; y <CPUpower; y++) for (int z = -CPUpower; z < CPUpower; z++) billboardList.Add(new Vector4(x, y, z, 0.5f)); }
上述代码会使用边长为0.5f的billboard填充从(-10, -10, -10)到(9, 9, 9)范围内的立方体,billboard 间的距离为1个单位,总共有8000个billboards!如果在你的PC上运行得不流畅,可以试着减少CPU power值,这样绘制的billboard更少。
你的PC之所以可以绘制这么多的billboard只是因为你使用了一个很大的顶点数组存储了所有biillboard。通过这种方式,显卡可以一次性在单一的过程中处理16000个三角形。 这个代码与前面的代码相比还有一个小变化。
在前面的代码中,对每个billboard都会创建一个新的顶点数组并填充了六个顶点,与前面的方式一样。然后,对每个billboard,显卡从六个顶点绘制两个三角形,整个过程周而复始。 对CPU来说几乎同样的工作量,显卡需要被调用8000次绘制两个三角形,在这个任务中显卡被打搅了7999次,因此显卡很“生气”。
使用这个方法,我可以将CPUpower设为3减少帧率的下降,这种情况下只绘制了216个!
所以底线是让显卡在一次性在单一过程中做自己的工作,这也是显卡喜欢的工作方式。请总是从尽可能少的顶点缓冲/纹理中绘制场景。
为圆柱形Billboarding计算六个顶点
在某些情况中,你并不想让矩形朝向相机。例如,如果使用一张树的2D图像创建一片树林,你想让每张图像绕着树木的主干旋转。使用球形billboarding会导致绕着三个轴旋转,使它们完全朝向相机。
想象一下这种情况,你有一些树木的图像,相机在它们上面。使用球形billboarding,结果如图3-17的左上所示。在图3-17的左下,你可以看到为了让矩形朝向相机,树木以一种不自然的方式进行了旋转,当相机移动时会产生一些奇怪的效果。
你想要的效果是让矩形只绕着树木的Up向量旋转,如图3-17的右下所示。在3D视角中,会产生如图3-17中右上图所示的效果。
图3-17 球形billboarding (左),圆柱形billboarding (右)
注意:这种billboarding之所以称之为圆柱形的,是因为如果你将相机放置在如此多的billboard图像之内,它们会成为一个圆柱体隧道。导致这个现象的原因是它们只被允许沿着一个方向旋转。图3-18显示了这样一个隧道。
计算每个billboard顶点的代码与前面的几乎一样。你只需使用另一个billboarding矩阵,这个矩阵可以通过使用Matrix.CreateConstrainedBillboard方法获取:
Matrix bbMatrix = Matrix.CreateConstrainedBillboard(center,quatCam.Position, new Vector3(0, 1, 0), quatCam.Forward, null);
作为一个有约束的旋转,现在你可以指定billboard 绕着那条边旋转。对一颗树来说,这条边是(0,1,0) Up向量。为使当相机非常靠近物体时旋转更加精确,你也可以指定相机的Up向量。
图3-18 大量的圆柱形billboarding
性能考虑:第二部分
本教程的第一部分展示了如何使用XNA代码创建一个billboarding引擎。但是,这个方法会给CPU带来极大地压力,而对显卡利用效率不高。
想象一下在3D场景中绘制1000个billboard图像。只要相机改变位置,就需要重新计算图像四个顶点的位置使它们可以重新朝向相机。若更新频率为60次/秒,需要每秒计算60乘以4000个3D位置,这都会在CPU中进行。而且,每帧都需要创建一个6000个顶点的数组保存所需的三角形用来显示每个billboard。
CPU是通用目的的处理器,并没有对这种计算进行优化。这样的任务会拖慢CPU,限制了CPU做其他任务,例如处理游戏逻辑。
而且,每一帧这个更新过的顶点缓冲都要被发送到显卡中!这会让显卡将这个数据放置在系统内存中,在PCI-express (或 AGP)总线上进行大量的搬运工作。
如果你一次性地将每个billboard的中心位置和大小存储在显存中,让GPU(显卡的计算单元)代替CPU进行所有的billboarding计算,性能会有很大的提升。记住显卡对顶点的操作是经过优化的,这些运算在GPU中要比在CPU中要快得多。有以下几个优点:
- 在PCI-express (或AGP) 总线中只需进行一次传输
- 计算时间大大缩短(因为GPU对这种计算进行过优化)
- CPU不进行billboarding计算,让CPU可以做其他更重要的事情
针对HLSL Billboarding所做的代码准备
你仍可以使用一个集合存储billboard,所以AddBillboards方法无需改动。但是CreateBBVertices方法进行了简化,因为所有的billboarding计算在GPU的vertex shader中进行。
一个billboard仍使用两个三角形绘制,因此每对个billboard仍需传递六个顶点至GPU。 那么,你想让vertex shader做什么呢?你想让vertex shader计算六个顶点的3D旋转坐标使billboard可以朝向相机。要做到这步,vertex shader需要知道每个顶点的如下信息:
- 顶点所属的billboard的中心的3D位置
- 当前顶点位于billboard的哪个位置,这样vertex shader才可以计算对应的偏移量
- 纹理坐标,它们被传递到pixel shader用来从纹理中采样正确的位置
注意:显然在旋转billboard之前vertex shader还需要知道相机在3D空间中的位置。相机位置对每个顶点来说都是一样的,因此应该被设置为一个XNA-to-HLSL变量,而不是在每个顶点中存储这个位置。
这意味着属于一个billboard的六个顶点所携带的部分信息是相同的:billboard中心的3D位置。因为定义顶点的信息是四个顶点之一,你可以,例如,传递一个介于0和3之间的数字,0表示左上角顶点,3表示右下角顶点。
但是,你已经将这个信息通过纹理坐标的方式传递到vertex shader中了。事实上,(0,0)纹理坐标表示当前顶点为左上角顶点,(1,0)纹理坐标表示右上角顶点。
总而言之:对你想绘制的每个billboard,你需要绘制两个三角形,所以需要传递六个顶点到vertex shader中。这六个顶点携带了同样的位置信息:billboard的中心点位置。每个顶点都携带各自的纹理坐标,用来对两个三角形正确地施加纹理,但在这种情况中纹理坐标还被用vertex shader来确定当前顶点是哪个位置的顶点,所以vertex shader可以计算当前顶点离开 billboard中心点的偏移量。
所以在XNA代码中,需要调整CreateBBVertices方法使它生成这些顶点并将这些顶点存储在一个数组中:
private void CreateBBVertices() { billboardVertices = new VertexPositionTexture[billboardList.Count * 6]; int i = 0; foreach (Vector4 currentV4 in billboardList) { Vector3 center = new Vector3(currentV4.X, currentV4.Y, currentV4.Z); billboardVertices[i++] = new VertexPositionTexture(center,new Vector2(0, 0)); billboardVertices[i++] = new VertexPositionTexture(center,new Vector2(1, 0)); billboardVertices[i++] = new VertexPositionTexture(center,new Vector2(1, 1)); billboardVertices[i++] = new VertexPositionTexture(center, new Vector2(0, 0)); billboardVertices[i++] = new VertexPositionTexture(center,new Vector2(1, 1)); billboardVertices[i++] = new VertexPositionTexture(center, new Vector2(0, 1)); } }
对集合中的每个billboard,在数组中添加六个顶点。每个顶点包含billboard中心点的位置信息和纹理坐标。
你只需在程序的开头调用这个方法一次,因为相机位置发生变化时数组的内容并不需要更新!所以在Initialize方法中在AddBillboards方法之后调用这个方法:
AddBillboards(); CreateBBVertices();
现在顶点已经做好了传递到GPU的准备,可以开始vertex shader的编写了。让我们从圆柱形billboarding开始,因为这个比球形billboarding容易点。
注意:将这个数据存储在显存中可以让你获益,因为你无需更新它的内容。这可以通过从billboardVertices数组创建一个VertexBuffer实现,可见教程5-4学习如何创建一个 VertexBuffer。
用于圆柱形Billboarding的Vertex Shader
首先定义变量,纹理和vertex/pixel shader输出结构:
//XNA interface float4x4 xView; float4x4 xProjection; float4x4 xWorld; float3 xCamPos; float3 xAllowedRotDir; //Texture Samplers Texture xBillboardTexture; sampler textureSampler = sampler_state { texture = <xBillboardTexture>; magfilter = LINEAR; minfilter = LINEAR; mipfilter=LINEAR; AddressU = CLAMP; AddressV = CLAMP; }; struct BBVertexToPixel { float4 Position : POSITION; float2 TexCoord : TEXCOORD0; }; struct BBPixelToFrame { float4 Color : COLOR0; };
和往常一样要将3D世界绘制到2D屏幕中,需要World,View和Projection矩阵。要进行billboarding计算,你还需要知道相机的当前位置。因为你编写的是圆柱形billboarding,你还需要定义一个图像绕着旋转的轴。
你只需要一个纹理,将图像绘制在两个三角形中。对每个顶点,vertex shader会计算对应的2D屏幕坐标和纹理坐标。对每个像素,pixel shader将输出颜色。
在billboarding的情况中,vertex shader用来计算偏离中心位置的偏移量。让我们从编写添加偏移量的代码开始,billboarding是建立在这个代码的基础上的:
// Technique: CylBillboard BBVertexToPixel CylBillboardVS(float3 inPos: POSITION0, float2 inTexCoord: TEXCOORD0) { BBVertexToPixel Output = (BBVertexToPixel)0; float3 center = mul(inPos, xWorld); float3 upVector = float3(0,1,0); float3 sideVector = float3(1,0,0); float3 finalPosition = center; finalPosition += (inTexCoord.x-0.5f)*sideVector; finalPosition += (0.5f-inTexCoord.y)*upVector; float4 finalPosition4 = float4(finalPosition, 1); float4x4 preViewProjection = mul (xView, xProjection); Output.Position = mul(finalPosition4, preViewProjection); Output.TexCoord = inTexCoord; return Output; }
对每个顶点,vertex shader接受定义在XNA项目中的位置和纹理坐标。注意这个位置是 billboard 中心点的3D位置。与World矩阵的乘积让你可以定义一个全局World矩阵旋转/缩放/平移所有billboards。最后的中心位置存储在一个叫做center的变量中,对一个billboard中的六个顶点都是相同的。
然后,定义一个静态的Side向量和Up向量。这些向量用来对顶点相对于billboard 中心点进行偏移。在图3-19中看一下如何偏移六个顶点,图中显示了一个billboard的两个三角形。注意看外部四个纹理坐标和三角形顶角上的六个顶点索引。
图3-19 六个顶点相对于中心位置的偏移量
接下来的代码计算指定顶点的3D位置。首先从中心位置开始然后,你想知道当前向量是否需要偏移到(-1,0,0)向左方向或(1,0,0)向右方向。你可以通过观察图3-19中的X纹理坐标进行这个判断:纹理坐标为(0,0)的顶点位于左上方,所以它需要移动到左边。纹理坐标为(1,0)的顶点在右上方,它需要被移动到右方。
以上的操作只需使用一行代码:首先将X纹理坐标减0.5,如果顶点在左侧结果是–0.5f,如果在右侧则为+0.5f。将结果乘以(+1,0,0)向量,左边的顶点结果为(–0.5f,0,0),右边的顶点结果为(+0.5f,0,0)!
同样的方法也用在Y纹理坐标上:纹理坐标(0,0)代表左上角顶点,(0,1)代表左下角顶点。所以如果Y纹理坐标为0,就是顶部顶点;如果为1则为底部顶点。
将正确的Side和Up偏移作用在中心位置上,你就获得了指定顶点的3D位置。
现在你要做的就是像往常一样使用ViewProjection矩阵将这个3D位置转换到2D屏幕空间中。在使用一个4 × 4矩阵将这个float3进行转换前,还需要使它变为一个float4,只需将1作为第四个坐标就可以了。
当使用pixel shader时,所有billboard都是漂亮的矩形,但是它们是互相平行的。这是因为你还没有使用代码中的相机位置计算偏移量,而这个偏移量用来旋转三角形使它们朝向相机。
显然在vertex shader中使用静态的Up和Side向量是无法实现上述功能的。圆柱形 billboarding容易些,因为你已经定义了billboard的Up向量:它是允许的旋转方向,通过XNA程序中的xAllowedRotDir变量被传递到shader中。
图3-20中的左图显示了两个billboard的例子,例如两棵树。因为你在XNA程序中指定了旋转方向作为树的Up向量,所以在vertex shader中已经知道了Up向量。
图3-20 两个圆柱形bilboard
Billboard的Side向量预先不知道,但是你可以获取这个向量。你需要知道Eye向量,这个向量从眼睛指向billboard的中心,如图3-20中的虚线所示。你知道Side向量垂直于Eye向量和Up向量,如图3-20右图所示,显示的情况与左图相同,只是观察角度不同。
你可以通过叉乘两个向量获取同时垂直于这两个向量的向量(见教程4-18),所以这就是获取Side向量的方法。
现在的vertex shader如下所示:
float3 center = mul(inPos, xWorld); float3 eyeVector = center - xCamPos; float3 upVector = xAllowedRotDir; upVector = normalize(upVector); float3 sideVector = cross(eyeVector, upVector); sideVector = normalize(sideVector); float3 finalPosition = center; finalPosition += (inTexCoord.x-0.5f)*sideVector; finalPosition += (0.5f-inTexCoord.y)*upVector;
你可以通过B-A获取任何从点A指向点B的向量,这个方法可以获取Eye向量。前面已经说过,billboard的Up向量是允许旋转的方向,是在XNA代码中指定的。因为Side向量垂直于Eye向量和Up向量,你可以通过叉乘这两个向量获取Side向量。
你需要确保Side和Up向量是单位长度(否则你无法控制billboard的大小),因此需要归一化这两个向量。
知道了billboard的Up和Side向量后,你可以重用前面变换3D位置的代码。现在vertex shader使用相机的当前位置计算顶点的最终位置,只要相机发生移动顶点就会改变它们的位置。
完成Billboarding:Pixel Shader和定义Technique
现在vertex shader可以计算顶点的3D坐标了,你要做的就是在pixel shader中将纹理施加在三角形上:
BBPixelToFrame BillboardPS(BBVertexToPixel PSIn) : COLOR0 { BBPixelToFrame Output = (BBPixelToFrame)0; Output.Color = tex2D(textureSampler, PSIn.TexCoord); return Output; }
当然还要定义technique:
technique CylBillboard { pass Pass0 { VertexShader = compile vs_1_1 CylBillboardVS(); PixelShader = compile ps_1_1 BillboardPS(); } }
现在你要做的就是将这个HLSL文件(即bbEffect. fx)导入到项目中,在LoadContent方法中加载到一个变量中:
bbEffect = content.Load<Effect>("bbEffect");
在Draw中,设置所需的XNA-to-HLSL变量并绘制billboards!
bbEffect.CurrentTechnique = bbEffect.Techniques["CylBillboard"]; bbEffect.Parameters["xWorld"].SetValue(Matrix.Identity); bbEffect.Parameters["xProjection"].SetValue(quatMousCam.ProjectionMatrix); bbEffect.Parameters["xView"].SetValue(quatMousCam.ViewMatrix); bbEffect.Parameters["xCamPos"].SetValue(quatMousCam.Position); bbEffect.Parameters["xAllowedRotDir"].SetValue(new Vector3(0,1,0)); bbEffect.Parameters["xBillboardTexture"].SetValue(myTexture); bbEffect.Begin(); foreach (EffectPass pass in bbEffect.CurrentTechnique.Passes) { pass.Begin(); device.VertexDeclaration = new VertexDeclaration(device, VertexPositionTexture.VertexElements); device.DrawUserPrimitives<VertexPositionTexture> (PrimitiveType.TriangleList, billboardVertices, 0, billboardList.Count*2); pass.End(); } bbEffect.End();
这里将(0,1,0) Up方向作为billboards旋转方向。
如果你的PC有一块独立显卡的话,你可以绘制比XNA-only版本多得多的billboard。
用于球形Billboarding的Vertex Shader
球形billboarding和圆柱形billboarding的区别在于球形billboarding中每个billboard都是完全朝向相机的。对vertex shader代码来说,Up和Side向量都要垂直于Eye向量(在圆柱形billboarding中,只有Side向量垂直于Eye向量)。
球形billboarding的挑战是你还需要获取Up向量,因为这个向量预先是不知道的。要解决这个问题,你首先需要知道相机的Up向量。
因为你想让billboard的整个面都朝向相机,所以需要将billboard的Side向量同时垂直于Eye向量和相机的Up向量。要展示这个情况,我在图3-21的左图中将Eye和CamUp向量所在平面涂成了灰色,这样你就可以看出Side向量是垂直于这个平面的。因为它们是垂直的,你已经知道如何获取Side向量了:叉乘Eye向量和CamUp向量:
float3 sideVector = cross(eyeVector,xCamUp); sideVector = normalize(sideVector);
图3-21 为球形bilboarding找到Side和Up向量
知道了Side向量,你还可以获取 billboard 的Up向量:它垂直于Side向量和Eye向量。我在图3-21的右图中将Side和Eye向量所在平面涂成了灰色,让你可以将它形象化。这意味着billboard的Up向量就是Eye和Side向量的叉乘:
float3 upVector = cross(sideVector,eyeVector); upVector = normalize(upVector);
这就是球形billboarding相对于圆柱形billboarding需要改变的地方!别忘了定义xCamUp variable . . .
float3 xCamUp;
. . .和一个新technique:
technique SpheBillboard { pass Pass0 { VertexShader = compile vs_1_1 SpheBillboardVS(); PixelShader = compile ps_1_1 BillboardPS(); } }
pixel shader是相同的。
确保在XNA项目中调用正确的technique并设置xCamUp参数:
bbEffect.CurrentTechnique = bbEffect.Techniques["SpheBillboard"]; bbEffect.Parameters["xWorld"].SetValue(Matrix.Identity); bbEffect.Parameters["xProjection"].SetValue(quatCam.ProjectionMatrix); bbEffect.Parameters["xView"].SetValue(quatCam.ViewMatrix); bbEffect.Parameters["xCamPos"].SetValue(quatCam.Position); bbEffect.Parameters["xCamUp"].SetValue(quatCam.UpVector); bbEffect.Parameters["xBillboardTexture"].SetValue(myTexture);
代码
注意你可以看到五种不同类型的billboarding的代码:
- XNA—only代码:球形billboarding
- XNA—only代码:圆柱形billboarding
- XNA + HLSL代码:球形billboarding
- XNA + HLSL代码:圆柱形billboarding
- XNA + HLSL代码:可变大小的球形billboarding
下面的代码是XNA+HLSL球形billboarding。下面的方法定义在哪放置billboards:
private void AddBillboards() { int CPUpower = 10; for (int x = -CPUpower; x < CPUpower; x++) for (int y = -CPUpower; y <CPUpower; y++) for (int z = -CPUpower; z < CPUpower; z++) billboardList.Add(new Vector4(x, y, z, 0.5f)); }
下面的代码将集合转换为数组:
private void CreateBBVertices() { billboardVertices = new VertexPositionTexture[billboardList.Count * 6]; int i = 0; foreach (Vector4 currentV4 in billboardList) { Vector3 center = new Vector3(currentV4.X, currentV4.Y, currentV4.Z); billboardVertices[i++] = new VertexPositionTexture(center,new Vector2(1, 1)); billboardVertices[i++] = new VertexPositionTexture(center,new Vector2(0, 0)); billboardVertices[i++] = new VertexPositionTexture(center,new Vector2(1, 0)); billboardVertices[i++]= new VertexPositionTexture(center, new Vector2(1, 1)); billboardVertices[i++]= new VertexPositionTexture(center, new Vector2(0, 1)); billboardVertices[i++] = new VertexPositionTexture(center,new Vector2(0, 0)); } }
下面的代码调用正确的technique,设置它的参数,并从数组进行绘制:
bbEffect.CurrentTechnique = bbEffect.Techniques["SpheBillboard"]; bbEffect.Parameters["xWorld"].SetValue(Matrix.Identity); bbEffect.Parameters["xProjection"].SetValue(quatMousCam.ProjectionMatrix); bbEffect.Parameters["xView"].SetValue(quatMousCam.ViewMatrix); bbEffect.Parameters["xCamPos"].SetValue(quatMousCam.Position); bbEffect.Parameters["xAllowedRotDir"].SetValue(new Vector3(0,1,0)); bbEffect.Parameters["xBillboardTexture"].SetValue(myTexture); bbEffect.Parameters["xCamUp"].SetValue(quatMousCam.UpVector); bbEffect.Begin(); foreach (EffectPass pass in bbEffect.CurrentTechnique.Passes) { pass.Begin(); device.VertexDeclaration = new VertexDeclaration(device, VertexPositionTexture.VertexElements); device.DrawUserPrimitives<VertexPositionTexture> (PrimitiveType.TriangleList, billboardVertices, 0, billboardList.Count*2); pass.End(); } bbEffect.End();
在HLSL部分,首先是vertex shader:
BBVertexToPixel SpheBillboardVS(float3 inPos: POSITION0, float2 inTexCoord: TEXCOORD0) { BBVertexToPixel Output = (BBVertexToPixel)0; float3 center = mul(inPos, xWorld); float3 eyeVector = center - xCamPos; float3 sideVector = cross(eyeVector,xCamUp); sideVector = normalize(sideVector); float3 upVector = cross(sideVector,eyeVector); upVector = normalize(upVector); float3 finalPosition = center; finalPosition += (inTexCoord.x-0.5f)*sideVector*0.5f; finalPosition += (0.5f-inTexCoord.y)*upVector*0.5f; float4 finalPosition4 = float4(finalPosition, 1); float4x4 preViewProjection = mul (xView, xProjection); Output.Position = mul(finalPosition4, preViewProjection); Output.TexCoord = inTexCoord; return Output; }
然后是简单的pixel shader:
BBPixelToFrame BillboardPS(BBVertexToPixel PSIn) : COLOR0 { BBPixelToFrame Output = (BBPixelToFrame)0; Output.Color = tex2D(textureSampler, PSIn.TexCoord); return Output; }
传递额外的信息
如果你想设置vertex shader生成的billboard的大小或将额外信息从XNA程序传递到 vertex shader中,你需要将这个信息添加到每个顶点中。你可以通过,例如,VertexPositionNormalTexture和在Normal向量的一个分量中存储大小信息达到以上目的。
但是,这样做虽然可以解决问题,当你需要传递顶点中的真实法线数据时仍会碰到同样的问题。因此为了保持通用性,你可以创建自己的顶点格式,它可以保存纹理和额外数据。关于自定义顶点格式的更多信息可参加教程5-14。
public struct VertexBillboard { public Vector3 Position; public Vector2 TexCoord; public Vector4 AdditionalInfo; public VertexBillboard(Vector3 Position, Vector2 TexCoord,Vector4 AdditionalInfo) { this.Position = Position; this.TexCoord = TexCoord; this.AdditionalInfo = AdditionalInfo; } public static readonly VertexElement[] VertexElements = new VertexElement[] { new VertexElement(0, 0, VertexElementFormat.Vector3, VertexElementMethod.Default, VertexElementUsage.Position, 0), new VertexElement(0, 12, VertexElementFormat.Vector2, VertexElementMethod.Default, VertexElementUsage.TextureCoordinate, 0), new VertexElement(0, 20, VertexElementFormat.Vector4, VertexElementMethod.Default, VertexElementUsage.TextureCoordinate, 1), }; public static readonly int SizeInBytes = sizeof(float) * (3 + 2 + 4); }
这个格式接受一个额外的叫做Add itionalInfo的Vector4。你将这个Vector4作为另一个TextureCoordinate。要区别这两个TextureCoordinate,请注意最后一个参数索引的区别。这意味着真实的纹理坐标在vertex shader中作为TEXCOORD0,而额外的Vector4作为TEXCOORD1 (见教程5-14)。
然后,使用新定义的VertexBillboarding替换VertexPositionTexture(你可以在XNA Game Studi中使用Ctrl+H进行这个操作)。最后,调整CreateBBVertices方法将四个额外的float值添加到顶点中:
private void CreateBBVertices() { billboardVertices = new VertexBillboard[billboardList.Count * 6]; int i = 0; foreach (Vector4 currentV4 in billboardList) { Vector3 center = new Vector3(currentV4.X, currentV4.Y, currentV4.Z); billboardVertices[i++] = new VertexBillboard(center, new Vector2(1, 1), new Vector4(0.8f, 0.4f, 0, 0)); billboardVertices[i++] = new VertexBillboard(center, new Vector2(0, 0), new Vector4(0.8f, 0.4f, 0, 0)); billboardVertices[i++] = new VertexBillboard(center, new Vector2(1, 0), new Vector4(0.8f, 0.4f, 0, 0)); billboardVertices[i++] = new VertexBillboard(center, new Vector2(1, 1), new Vector4(0.8f, 0.4f, 0, 0)); billboardVertices[i++] = new VertexBillboard(center, new Vector2(0, 1), new Vector4(0.8f, 0.4f, 0, 0)); billboardVertices[i++] = new VertexBillboard(center, new Vector2(0, 0), new Vector4(0.8f, 0.4f, 0, 0)); } }
在本例中,你可以改变让billboard的大小。Vector4中的第一个参数,这里是0.8f,用来缩放billboard的宽度,第二个参数,这里是0.4f,缩放高度。这会导致billboard的宽度是高度的两倍。
以上是XNA代码;你要做的就是在vertex shader中将这个Vector4作为TEXCOORD1:
BBVertexToPixel SpheBillboardVS(float3 inPos: POSITION0, float2 inTexCoord: TEXCOORD0, float4 inExtra: TEXCOORD1)
现在你可以以inExtra 变量的形式访问Vector4,使用它缩放billboard的宽和高:
finalPosition += (inTexCoord.x-0.5f)*sideVector*inExtra.x; finalPosition += (0.5f-inTexCoord.y)*upVector*inExtra.y;
这个例子只使用了float4的x和y值,如果需要你也可以访问z和w值。
译者注:在http://creators.xna.com/en-US/sample/billboard上也有一个示例可供研究,比较复杂,使用内容管道生成billboard图像,在HLSL中还实现了风吹动的效果,源代码BillboardSample.rar下载。
发布时间:2009/10/10 上午8:39:09 阅读次数:8957