Directx11教程(66) D3D11屏幕文本输出(1)

     在D3D10中,通过ID3DX10Font接口对象,我们可以方便的在屏幕上输出文字信息,一个DrawText函数就能解决所有问题,但在D3D11中个,这个变得超级麻烦,因为微软移除了Font接口,要在屏幕上输出文本,用户需要做很多事情。

通常我们可以用以下的方法来输出文本信息:

(1)用纹理贴图的方法,把所有的字体存储在一张纹理上,再做一个字体查询表,对应纹理的相应位置,可以用2D渲染的方式,把文本染出来,但这种方法不是很灵活,英文还好说,字母字符就那么多,但对于汉字就麻烦了,另外字体大小不能任意缩放。

(2)通过和GDI/GDI+进行交互,得到字体,把它们存储在纹理中,然后再用2D渲染的方式渲染出来,这种方法可以得到任意大小的文字,而且对英文、中文都适用。

(3)用direct write,但据说效率不高,http://www.braynzarsoft.net/index.php?p=D3D11FONT 这篇教程中有详细的介绍。

(4)使用一些文本输出控件,比如CEGUI。

(5)用FreeType2动态生成字体纹理,然后用2D渲染的方式显示。

在本篇教程中,我们先看看第一种方法的具体实现,程序的代码是在myTutorialD3D11_61的基础上修改的。

1、准备一副图片,该图片中包含所有的英文字母、标点以及特殊字符(ascii码32-126之间的所有字符),该图片将被当作纹理。

    该图片背景是纯黑色,RGB为(0,0,0),用该图片产生font.dds纹理资源文件。

2、建立一个文本索引文件fontdata.txt,该文件索引ascii码32-126之间的所有字符,该文件的格式为:

[Ascii value of character] [The character] [Left Texture U coordinate] [Right Texture U Coordinate] [Pixel Width of Character]

     第一列为字符的ascii码,第二列为字符,第三列为字符左边的纹理坐标,第四列为字符右边的纹理坐标,第五列为像素宽度。

32   0.0        0.0         0
33 ! 0.0        0.000976563 1
34 " 0.00195313 0.00488281  3
35 # 0.00585938 0.0136719   8

125 } 0.573242  0.576172    3
126 ~ 0.577148  0.583984    7

      通过这几列值,我们就可以把一个字符和纹理中的相应位置对应起来,比如一个字符串"hello”,我们可以动态创建5个四边形,每个四边形有2个三角形组成,三角形的顶点位置为该字符在屏幕上的显示位置,顶点属性中包括纹理坐标,该四边形将通过纹理的方式显示该字符。

下边大致介绍下增加的代码:

我们的2D 文本渲染在TextClass中,可以把该类看作一个sprites class, 主要的功能就是渲染文本。

首先该类用了2个结构来描述文本,第一个是文本句子的结构类型,因为文本都是显示在四边形中,所以该类中包含了顶点缓冲、索引缓冲、顶点数量、顶点颜色等信息。

struct SentenceType
{
    ID3D11Buffer *vertexBuffer, *indexBuffer;
    int vertexCount, indexCount, maxLength;
    float red, green, blue;
};

struct VertexType
{
    D3DXVECTOR3 position;
    D3DXVECTOR2 texture;
};

     通过函数InitializeSentence、UpdateSentence我们生成文本句子数据,RenderSentence函数渲染执行最终的渲染,其中的texture就是包含字体的纹理,该函数调用FontShader类实现最终的渲染。

bool TextClass::RenderSentence(ID3D11DeviceContext* deviceContext, SentenceType* sentence, D3DXMATRIX worldMatrix,
                               D3DXMATRIX orthoMatrix,  ID3D11ShaderResourceView* texture)

    类FontClass建立文本句子顶点、索引数据,FontShaderClass类用执行渲染。

    另外,还有2个shader文件:font.vs和font.ps, ps文件中会根据纹理的颜色来设置alpha的值,这样既可以很好的把字体纹理和背景混合起来。

// 根据选取字符.
color = shaderTexture.Sample(SampleType, input.tex);

//如果纹理为黑色,设置透明,这样可以镂空不需要的背景,只显示字体
if(color.r == 0.0f)
{
    color.a = 0.0f;
}
else
{
    color.rgb = pixelColor.rgb;
    color.a = 1.0f;
}

    最终的渲染代码在GraphicsClass类中,主要在开始文本渲染时,要禁用zbuffer,并开启alpha blend功能,渲染完成后,进行相反的操作。

// 关掉z buffer,以便2d渲染
m_D3D->TurnZBufferOff();

// 打开alpha blending
m_D3D->TurnOnAlphaBlending();

//得到正交投影矩阵
m_D3D->GetOrthoMatrix(orthoMatrix);
// 渲染文本
result = m_Text->Render(m_D3D->GetDeviceContext(), worldMatrix, orthoMatrix,m_TexManager->createTex(m_D3D->GetDevice(),string("font.dds")));
if(!result)
    {
    return false;
    }

// 关闭alpha blending
m_D3D->TurnOffAlphaBlending();

// 打开z buffer
m_D3D->TurnZBufferOn();

程序执行后的界面如下,我们用白色和黄色显示了几个字tessellation demo by mikewolf:

完整的代码请参考:

工程文件myTutorialD3D11_63

代码下载:

稍后提供

 

时间: 2024-09-20 14:58:40

Directx11教程(66) D3D11屏幕文本输出(1)的相关文章

Directx11教程(18) D3D11管线(7)

光栅化阶段(RS)之后,将进入PS/OM阶段. 参考外文资料:http://fgiesen.wordpress.com/2011/07/01/a-trip-through-the-graphics-pipeline-2011-part-7/ 大致的管线流程应该是这样的:       RS光栅化的fragment达到64或者32(一个wave或者warp)后,PS调度模块会产生一个新的wave或者warp,并把它们传给PS shader阶段,PS shader得到调度信息后,会从video mem

Directx11教程(15) D3D11管线(4)

本章我们首先了解一下D3D11中的逻辑管线,认识一下管线中每个stage的含义. 参考资料:http://fgiesen.wordpress.com/2011/07/01/a-trip-through-the-graphics-pipeline-2011-part-3/ D3D11逻辑管线如下图所示: 首先,我们来学习一下每个stage的名字含义,在后面章节学习它们的细节功能: IA:input assembler,输入装配阶段,主要是从内存中读顶点和索引数据. VS: vertex shade

Directx11教程(16) D3D11管线(5)

本章我们学习VS中具体做些什么事情? 首先再看看我们的VS shader代码: Clolor.vs - PixelInputType ColorVertexShader(VertexInputType input) {     PixelInputType output;         // Change the position vector to be 4 units for proper matrix calculations.     input.position.w = 1.0f;

Directx11教程(53) D3D11管线(8) GS的调度执行

       在前面的教程中,我们分析了VS-PS的shader管线组合执行过程,本章我们分析一下VS-GS-PS的管线执行过程,主要是GS阶段hardware何如调度.      参考资料:http://fgiesen.wordpress.com/2011/07/01/a-trip-through-the-graphics-pipeline-2011-part-8/      从D3D10开始,D3D 管线中增加了GS 阶段,如下图所示:        从前面的教程中,我们知道在VS-PS的管

Directx11教程(14) D3D11管线(3)

      现在我们开始学习一些CP(command processor)的知识.参考资料: http://fgiesen.wordpress.com/2011/07/01/a-trip-through-the-graphics-pipeline-2011-part-3/       CP(command processor)应该是GPU最前端的block,它从位于video memory中的command buffer中取出UMD产生的command packet,比如状态设置,drawInd

Directx11教程(17) D3D11管线(6)

      VS shader输出clip空间的顶点位置及参数信息(比如颜色)到一个FIFO中,之后PA(primitive assembly)会从该FIFO中取得顶点位置信息,并根据IA传来的primitive信息,把单独的顶点装配成点.线或者三角形.经过PA阶段后,我们不再是处理单个顶点,而是处理整个体元. 参考资料:http://fgiesen.wordpress.com/2011/07/01/a-trip-through-the-graphics-pipeline-2011-part-5

Directx11教程(14) D3D11管线(2)

下面我们来了解一些GPU memory的知识,主要参考资料:http://fgiesen.wordpress.com/0211/07/02/a-trip-through-the-graphics-pipeline-2011-part-2      [注:请参考另一篇日志:2012-11-13:http://www.cnblogs.com/mikewolf2002/archive/2012/11/13/2768804.html]    下面我们看下memory 如何与GPU和 host连接,了解v

java jtextfield文本输出

问题描述 java jtextfield文本输出 大家好,我在jtextfield写的文本,怎么随时打印出来?用jtextfield.gettext(),弄不出来! 解决方案 Java IO之有缓冲的文本输出java中如何在JTextField追加文本

c#-C#怎么解析以下xml,以表格形式文本输出

问题描述 C#怎么解析以下xml,以表格形式文本输出 解决方案 C#实现XML与DataTable互转http://www.cnblogs.com/JuneZhang/archive/2011/04/14/2016068.html 解决方案二: 本人小白,能给出代码吗 谢谢! 解决方案三: 解析XML[C#] 解决方案四: 通过DOM的方式进行解析