HLSL初级教程
作者:trcj
目录
前言
1.HLSL入门
1.1什么是着色器
1.2什么是HLSL
1.3怎么写HLSL着色器
1.4怎么用HLSL着色器
2.顶点着色器
2.1可编程数据流模型
2.2顶点声明
2.3用顶点着色器实现渐变动画
3.像素着色器
3.1多纹理化
3.2多纹理效果的像素着色器
3.3应用程序
4.HLSL Effect(效果框架)
4.1Effect代码结构
4.2用Effect实现多纹理化效果
结语
参考资料
前言
本教程针对HLSL(High Level Shading Language)初学者,从应用的角度对HLSL、顶点着色器、像素着色器和Effect效果框架进行了介绍,教程中去掉了对HLSL语法等一些细节内容的讨论,力求帮助读者尽可能快地理解HLSL编程的概念,掌握HLSL编程的方法。
教程中部分阐述直接引用了其他文档,这是因为这些文档表述之精要,已经达到了不能更改的地步,这里表示感谢。
本文档版权为作者所有,非商业用途可免费使用,转载请注明出处。
1.HLSL入门
1.1什么是着色器
DirectX使用管道技术(pipeline)进行图形渲染,其构架如下:
图1.1 Direct3D Graphics Pipeline
之前我们使用管道的步骤如下:
1. 设定顶点、图元、纹理等数据信息;
2. 设定管道状态信息;
² 渲染状态
通过SetRenderState方法设定渲染状态;
另外,使用以下方法设置变换、材质和光照:
SetTransform
SetMaterial
SetLight
LightEnable
² 取样器状态
通过SetSamplerState方法设定取样器状态;
² 纹理层状态
通过SetTextureStageState设定纹理层状态;
3. 渲染;
这部分交由D3D管道按照之前的设定自行完成,这部分操作是D3D预先固定的,所以这种管道技术被称为固定功能管道(fixed function pipeline);
固定功能管道给我们编程提供了一定的灵活性,但是仍有很多效果难以通过这种方式实现,比如:
1. 在渲染过程中,我们要求y坐标值大于10的顶点要被绘制到坐标值(0,0,0)的地方,在之前的固定功能管道中,顶点被绘制的位置是在第1步即被设定好的,不可能在渲染过程中进行改变,所以是不可行的;
2. 谋顶点在纹理贴图1上映射为点A,在纹理贴图2上映射为点B,我们要求该顶点颜色由A、B共同决定,即:
定点颜色 = A点色彩值*0.7 + B点色彩值*0.3
这在固定管道编程中也是不可行的。
以上两个问题都可以由可编程管道(pragrammable pipeline)来解决。
可编程管线允许用户自定义一段可以在GPU上执行的程序,代替固定管道技术中的Vertex Processing和Pixel
Processing阶段(参照图1.1),从而在使我们在编程中达到更大的灵活性。其中替换Vertex Processing的部分叫做Vertex Shader(顶点着色器),替换Pixel
Proccessing的部分叫做Pixel Shader(像素着色器),这就是我们所说的着色器Shader。
1.2什么是HLSL
Direct8.x中,着色器是通过低级着色汇编语言来编写的,这样的程序更像是汇编式的指令集合,由于其效率低、可读性差、版本限制等缺点,迫切要求出现一门更高级的着色语言。到了Direct3D9,HLSL(High
Level Shading Language,高级渲染语言)应运而生了。
HLSL的语法非常类似于C和C++,学习起来是很方便的。
1.3怎么写HLSL着色器
我们可以直接把HLSL着色器代码作为一长串字符串编写进我们的应用程序源文件中,但是,更加方便和模块化的方法是把着色器的代码从应用程序代码中分离出来。因此,我们将着色器代码单独保存为文本格式,然后在应用程序中使用特定函数将其加载进来。
下面是一个完整的HLSL着色器程序代码,我们把它保存在BasicHLSL.txt中。该着色器完成顶点的世界变换、观察变换和投影变幻,并将顶点颜色设定为指定的颜色。
//
// BasicHLSL.txt
//
//
// Global variable
//
matrix WVPMatrix;
vector color;
//
// Structures
//
struct VS_INPUT
{
vector position : POSITION;
};
struct VS_OUTPUT
{
vector position : POSITION;
vector color : COLOR;
};
//
// Functions
//
VS_OUTPUT SetColor(VS_INPUT input)
{
VS_OUTPUT output = (VS_OUTPUT)0;
output.position = mul(input.position, WVPMatrix);
output.color = color;
return output;
}
下面就针对上述代码讲解一下HLSL着色器程序的编写:
代码中声明了两个全局变量:
matrix WVPMatrix;
vector color;
变量WVPMatrix是一个矩阵类型,它包含了世界、观察、投影的合矩阵,用于对顶点进行坐标变换;
变量color是一个向量类型,它用于设定顶点颜色;
代码中并没有对全局变量进行初始化,这是因为我们对全局变量的初始化过程将在应用程序中进行,全局变量在应用程序中赋值而在着色器程序中使用,这是应用程序和着色器通信的关键所在。具体赋值过程将在后续部分讲述。
² 输入输出结构
程序中定义了两个输入输出结构VS_INPUT和VS_OUTPUT
struct VS_INPUT
{
vector position : POSITION;
};
struct VS_OUTPUT
{
vector position : POSITION;
vector color : COLOR;
};
自定义的结构可以采用任意名称,结构不过是一种组织数据的方式,并不是强制的,你也可以不使用,而将本程序的输入改为:
vector position : POSITION;
² 标志符
用于输入输出的变量采用用一种特殊的声明方式:
Type VariableName : Semantic
这个特殊的冒号语法表示一个语义,冒号后面的标志符用来指定变量的用途,如
vector position : POSITION;
其中,POSITION标志符表明该变量表示顶点位置,另外还有诸如COLOR、NORMAL等很多表示其他意义的标志符。
本节所说的输入输出其实是指着色器代码和编译器、GPU之间的通信,和应用程序是无关的,所以这些变量不需要在应用程序中进行赋值,标志符告诉编译器各个输入输出变量的用途(顶点位置、法线、颜色等),这是着色器代码和编译器、GPU之间通信的关键。
程序中还定义了一个函数SetColor:
OUTPUT SetColor(INPUT input)
{
VS_OUTPUT output = (VS_OUTPUT)0;
output.position = mul(input.position, WVPMatrix);
output.color = color;
return output;
}
1.
该函数以input和output类型作为输入输出;
2.
使全局变量WVPMatrix和input.position相乘,以完成顶点的世界、观察、投影变换,并把结果赋值到output.position;
output.position = mul(input.position, WVPMatrix);
3.
将全局变量color的值赋给output.color;
output.color = color;
4.
在同一个着色器代码文件中,可以有多个用户自定义函数,因此在应用程序中需要指定一个入口函数,相当于windows程序的WinMain函数,本程序只包含SetColor一个函数而且它将被做为入口函数使用。
至此,一个HLSL着色器编写完毕,渲染过程中,当一个顶点被送到着色器时:
1.
全局变量WVPMatrix、color将在应用程序中被赋值;
2.
入口函数SetColor被调用编译器根据标志符将顶点信息填充到VS_INPUT中的各个字段;
3.
SetColor函数中,首先定义一个VS_OUTPUT信息,之后根据WVPMatrix和color变量完成顶点的坐标变换和颜色设定操作,最后函数返回VS_OUTPUT结构;
4.
编译器将会再次根据标志符把返回的VS_OUTPUT结构中的各字段映射为顶点相应的信息。
5.
顶点被送往下一个流程接受进一步处理。
上述过程中,全局变量在应用程序中赋值而在着色器程序中使用,这是应用程序和着色器通信的关键所在;标志符告诉编译器各个输入输出变量的用途(顶点位置、法线、颜色等),这是着色器代码和编译器、GPU之间通信的关键。个人认为这是着色器中最为精义的地方
1.4怎么用HLSL着色器
应用程序中对HLSL着色器的使用分为以下步骤:
1.
加载(称为编译更为妥当)着色器代码;
2.
创建(顶点/像素)着色器;
3.
对着色器中的变量进行赋值,完成应用程序和着色器之间的通信。
4.
把着色器设定到渲染管道中;
本例使用的着色器是一个顶点着色器,因此我们将通过顶点着色器的使用来讲解着色器的使用过程,像素着色器的使用过程与此大同小异,二者之间仅有些微差别。
IDirect3DVertexShader9* BasicShader = 0; //顶点着色器指针
ID3DXConstantTable* BasicConstTable = 0; //常量表指针
D3DXHANDLE WVPMatrixHandle = 0;
D3DXHANDLE ColorHandle = 0;
ID3DXMesh* Teapot = 0; //指向程序中D3D茶壶模型的指针
通过D3DXCompileShaderFromFile函数从应用程序外部的文本文件BasicHLSL.txt中编译一个着色器:
//编译后的着色器代码将被放在一个buffer中,可以通过ID3DXBuffer接口对其进行访问,之后的着色器将从这里创建
ID3DXBuffer* shaderBuffer = 0;
//用于接受错误信息
ID3DXBuffer* errorBuffer = 0;
//编译着色器代码
D3DXCompileShaderFromFile("BasicHLSL.txt", //着色器代码文件名
0,
0,
"SetColor", //入口函数名称
"vs_1_1", //顶点着色器版本号
D3DXSHADER_DEBUG,// Debug模式编译
&shaderBuffer, //指向编译后的着色器代码的指针
&errorBuffer,
&BasicConstTable); //常量表指针
应用程序通过CreateVertexShader创建一个顶点着色器,注意使用了上一步得到的shaderBuffer:
g_pd3dDevice->CreateVertexShader((DWORD*)shaderBuffer->GetBufferPointer(), &BasicShader);
1.4.3对着色器中的变量进行赋值
1.3.4节说到着色器的全局变量在应用程序中赋值而在着色器程序中使用,这是应用程序和着色器通信的关键所在,这里就具体说明赋值过程。
着色器中的全局变量在编译后都被放在一个叫常量表的结构中,我们可以使用ID3DXConstantTable接口对其进行访问,参照1.4.1中编译着色器函数D3DXCompileShaderFromFile的最后一个参数,该参数即返回了指向常量表的指针。
对一个着色器中变量进行赋值的步骤如下:
1.
通过变量名称得到指向着色器变量的句柄;
还记得在BasicHLSL.x着色器文件中我们声明的两个全局变量吗:
matrix WVPMatrix;
vector color;
我们在应用程序中相应的声明两个句柄:
D3DXHANDLE WVPMatrixHandle = 0;
D3DXHANDLE ColorHandle = 0;
然后通过变量名得到分别得到对应的两个句柄:
WVPMatrixHandle = BasicConstTable->GetConstantByName(0, "WVPMatrix");
ColorHandle = BasicConstTable->GetConstantByName(0, "color");
2.
通过句柄对着色器变量进行赋值;
我们可以先设置各变量为默认值:
BasicConstTable->SetDefaults(g_pd3dDevice);
之后,可以使用ID3DXConstantTable::SetXXX函数对各个变量进行赋值:
HRESULT SetXXX(
LPDIRECT3DDEVICE9 pDevice,
D3DXHANDLE hConstant,
XXX value
);
其中XXX代表变量类型,例如Matrix类型的变量就要使用SetMatrix函数赋值,而Vector类型的则要使用SetVector来赋值。
这里我们使用SetVertexShader方法把顶点着色器设定到渲染管道中:
g_pd3dDevice->SetVertexShader(BasicShader);
在渲染过程中,我们设定顶点的变换坐标和颜色值,渲染代码如下:
g_pd3dDevice->Clear( 0, NULL, D3DCLEAR_TARGET | D3DCLEAR_ZBUFFER,
D3DCOLOR_XRGB(153,153,153), 1.0f, 0 );
//开始渲染
g_pd3dDevice->BeginScene();
//得到世界矩阵、观察矩阵和投影矩阵
D3DXMATRIX matWorld, matView, matProj;
g_pd3dDevice->GetTransform(D3DTS_WORLD, &matWorld);
g_pd3dDevice->GetTransform(D3DTS_VIEW, &matView);
g_pd3dDevice->GetTransform(D3DTS_PROJECTION, &matProj);
D3DXMATRIX matWVP = matWorld * matView * matProj;
//通过句柄对着色器中的WVPMatrix变量进行赋值
BasicConstTable->SetMatrix(g_pd3dDevice, WVPMatrixHandle, &matWVP);
D3DXVECTOR4 color(1.0f, 1.0f, 0.0f, 1.0f);
//通过句柄对着色器中的color变量进行赋值,这里我们赋值为黄色
BasicConstTable->SetVector(g_pd3dDevice, ColorHandle, &color);
//把顶点着色器设定到渲染管道中
g_pd3dDevice->SetVertexShader(BasicShader);
//绘制模型子集
Teapot->DrawSubset(0);
//渲染完毕
g_pd3dDevice->EndScene();
g_pd3dDevice->Present(NULL, NULL, NULL, NULL);
编译运行程序,运行效果如图1.2所示,这里我们将顶点颜色设置为黄色,如果读者在渲染过程中不断变换对着色器变量color的赋值,你将会得到一个色彩不断变幻的D3D茶壶。
D3DXVECTOR4 color(1.0f, 1.0f, 0.0f, 1.0f); //读者可以尝试改变颜色值
BasicConstTable->SetVector(g_pd3dDevice, ColorHandle, &color);
图1.2
着色器效果
2.顶点着色器
顶点着色器(vertex shader)是一个在显卡的GPU上执行的程序,它替换了固定功能管道(fixed function pipeline)中的变换(transformation)和光照(lighting)阶段(这不是百分之百的正确,因为顶点着色器可以被Direct3D运行时(Direct3D runtime)以软件模拟,如果硬件不支持顶点着色器的话)。图2.1说明了管线中顶点着色器替换的部件。
图2.1
由于顶点着色器是我们(在HLSL中)写的一个自定义程序,因此我们在图形效果方面获得了极大的自由性。我们不再受限于Direct3D的固定光照算法。此外,应用程序操纵顶点位置的能力也有了多样性,例如:布料仿真,粒子系统的点大小操纵,还有顶点混合/变形。此外,我们的顶点数据结构更自由了,并且可以在可编程管线中包含比在固定功能管线中多的多的数据。
正如作者所在群的公告所说,“拍照不在于你对相机使用的熟练程度,而是在于你对艺术的把握。”之前的介绍使读者对着色器的编写和使用都有了一定的了解,下面我们将把重心从介绍如何使用着色器转到如何实现更高级的渲染效果上来。
2.1可编程数据流模型
DirectX 8.0引入了数据流的概念,可以这样理解数据流(图2.2):
图2.2
· 一个顶点由n个数据流组成。
· 一个数据流由m个元素组成。
· 一个元素是[位置、颜色、法向、纹理坐标]。
程序中使用IDirect3DDevice9::SetStreamSource方法把一个顶点缓存绑定到一个设备数据流。
2.2顶点声明
该小节对顶点声明的描述绝大多数都取自翁云兵的《着色器和效果》,该文对顶点声明的描述是我所见到最详尽最透彻的,这里向作者表示敬意
到现在为止,我们已经使用自由顶点格式(flexible vertex format,FVF)来描述顶点结构中的各分量。但是,在可编程管线中,我们的顶点数据可以包含比用FVF所能表达的多的多的数据。因此,我们通常使用更具表达性的并且更强有力的顶点声明(vertex
declaration)。
注意:我们仍然可以在可编程管线中使用FVF——如果我们的顶点格式可以这样描述。不管怎样,这只是为了方便,因为FVF会在内部被转换为一个顶点声明。
我们将一个顶点声明描述为一个D3DVERTEXELEMENT9结构的数组。D3DVERTEXELEMENT9数组中的每个元素描述了一个顶点的分量。所以,如果你的顶点结构有三个分量(例如:位置、法线、颜色),那么其相应的顶点声明将会被一个含3个元素的D3DVERTEXELEMENT9结构数组描述。
D3DVERTEXELEMENT9结构定义如下:
typedef struct _D3DVERTEXELEMENT9 {
BYTE Stream;
BYTE Offset;
BYTE Type;
BYTE Method;
BYTE Usage;
BYTE UsageIndex;
} D3DVERTEXELEMENT9;
²
Stream——指定关联到顶点分量的流;
²
Offset——偏移,按字节,相对于顶点结构成员的顶点分量的开始。例如,如果顶点结构是:
struct Vertex
{
D3DXVECTOR3 pos;
D3DXVECTOR3 normal;
};
……pos分量的偏移是0,因为它是第一个分量;normal分量的偏移是12,因为sizeof(pos)
== 12。换句话说,normal分量以Vertex的第12个字节为开始。
²
Type——指定数据类型。它可以是D3DDECLTYPE枚举类型的任意成员;完整列表请参见文档。常用类型如下:
D3DDECLTYPE_FLOAT1——浮点数值
D3DDECLTYPE_FLOAT2——2D浮点向量
D3DDECLTYPE_FLOAT3——3D浮点向量
D3DDECLTYPE_FLOAT4——4D浮点向量
D3DDECLTYPE_D3DCOLOR—D3DCOLOR类型,它扩展为RGBA浮点颜色向量(r, g, b, a),其每一分量都是归一化到区间[0,
1]了的。
²
Method——指定网格化方法。我们认为这个参数是高级的,因此我们使用默认值,标识为D3DDECLMETHOD_DEFAULT。
²
Usage——指定已计划的对顶点分量的使用。例如,它是否准备用于一个位置向量、法线向量、纹理坐标等,有效的用途标识符(usage identifier)是D3DDECLUSAGE枚举类型的:
typedef enum _D3DDECLUSAGE {
D3DDECLUSAGE_POSITION = 0, // Position.
D3DDECLUSAGE_BLENDWEIGHTS = 1, // Blending weights.
D3DDECLUSAGE_BLENDINDICES = 2, // Blending indices.
D3DDECLUSAGE_NORMAL = 3, // Normal vector.
D3DDECLUSAGE_PSIZE = 4, // Vertex point size.
D3DDECLUSAGE_TEXCOORD = 5, // Texture coordinates.
D3DDECLUSAGE_TANGENT = 6, // Tangent vector.
D3DDECLUSAGE_BINORMAL = 7, // Binormal vector.
D3DDECLUSAGE_TESSFACTOR = 8, // Tessellation factor.
D3DDECLUSAGE_POSITIONT = 9, // Transformed position.
D3DDECLUSAGE_COLOR = 10, // Color.
D3DDECLUSAGE_FOG = 11, // Fog blend value.
D3DDECLUSAGE_DEPTH = 12, // Depth value.
D3DDECLUSAGE_SAMPLE = 13 // Sampler data.
} D3DDECLUSAGE;
其中,D3DDECLUSAGE_PSIZE类型用于指定一个顶点的点的大小。它用于点精灵,因此我们可以基于每个顶点控制其大小。一个D3DDECLUSAGE_POSITION成员的顶点声明意味着这个顶点已经被变换,它通知图形卡不要把这个顶点送到顶点处理阶段(变形和光照)。
²
UsageIndex——用于标识多个相同用途的顶点分量。这个用途索引是位于区间[0, 15]间的一个整数。例如,假设我们有三个用途为D3DDECLUSAGE_NORMAL的顶点分量。我们可以为第一个指定用途索引为0,为第二个指定用途索引为1,并且为第三个指定用途索引为2。按这种方式,我们可以通过其用途索引标识每个特定的法线。
例:假设我们想要描述的顶点格式由两个数据流组成,第一个数据流包含位置、法线、纹理坐标3个分量,第二个数据流包含位置和纹理坐标2个分量,顶点声明可以指定如下:
D3DVERTEXELEMENT9 decl[] =
{
//第一个数据流,包含分量位置、法线、纹理坐标
{ 0, 0, D3DDECLTYPE_FLOAT3, D3DDECLMETHOD_DEFAULT,D3DDECLUSAGE_
POSITION, 0 },
{ 0, 12, D3DDECLTYPE_FLOAT3, D3DDECLMETHOD_DEFAULT, D3DDECLUSAGE_
NORMAL, 0 },
{ 0, 24, D3DDECLTYPE_FLOAT2, D3DDECLMETHOD_DEFAULT, D3DDECLUSAGE_
TEXCOORD, 0 },
//第一个数据流,包含分量位置、纹理坐标
{ 1, 0, D3DDECLTYPE_FLOAT3, D3DDECLMETHOD_DEFAULT, D3DDECLUSAGE_
POSITION, 1 },
{ 1, 12, D3DDECLTYPE_FLOAT3, D3DDECLMETHOD_DEFAULT, D3DDECLUSAGE_
NORMAL, 1 },
D3DDECL_END()
};
D3DDECL_END宏用于初始化D3DVERTEXELEMENT9数组的最后一个顶点元素。
CreateVertexDeclaration函数用于创建顶点声明,decl为指向上一小节定义的D3DVERTEXELEMENT9数组的指针,函数返回IDirect3DVertexDeclaration9指针g_Decl;
IDirect3DVertexDeclaration9 *g_Decl = NULL;
g_pd3dDevice->CreateVertexDeclaration(decl ,&g_Decl);
g_pd3dDevice->SetVertexDeclaration(g_Decl);
至此,可编程数据流模型、顶点声明介绍完毕,在下面的例子中读者将会有更连贯的理解。
2.3用顶点着色器实现渐变动画
Morphing渐变是20世纪90年代出现的一种革命性的计算机图形技术,该技术使得动画序列平滑且易于处理,即使在低档配置的计算机系统上也能正常运行。
渐变是指随时间的变化把一个形状改变为另一个形状。对我们而言,这些形状就是Mesh网格模型。渐变网格模型的处理就是以时间轴为基准,逐渐地改变网格模型顶点的坐标,从一个网格模型的形状渐变到另外一个。请看图2.3:
图2.3
我们在程序中使用两个网格模型——源网格模型和目标网格模型,设源网格模型中顶点1的坐标为A(Ax,Ay,Az),目标网格模型中对应顶点1的坐标为B(Bx,By,Bz),要计算渐变过程中时间点t所对应的顶点1的坐标C(Cx,Cy,Cz),我们使用如下方法:
T为源网格模型到目标网格模型渐变所花费的全部时间,得到时间点t占整个过程T的比例为:
S = t / T
那么顶点1在t时刻对应的坐标C为:
C = A * (1-S)+ B * S
这样,在渲染过程中我们根据时间不断调整S的值,就得到了从源网格模型(形状一)到目标网格模型(形状二)的平滑过渡。
接下来将在程序里使用顶点着色器实现我们的渐变动画。
程序中,我们设定一个顶点对应两个数据流,这两个数据流分别包含了源网格模型的数据和目标网格模型的数据。渲染过程中,我们在着色器里根据两个数据流中的顶点数据以及时间值确定最终的顶点信息。
个数据流包含分量如下:
源网格模型数据流:顶点位置、顶点法线、纹理坐标;
目标网格模型数据流:顶点位置、顶点法线;
注意目标网格模型数据流没有包含纹理坐标,因为纹理对于两个网格模型都是一样的,所以仅使用源网格模型的纹理就可以了。
顶点声明指定如下:
D3DVERTEXELEMENT9 decl[] =
{
//源网格模型数据流,包含分量位置、法线、纹理坐标
{ 0, 0, D3DDECLTYPE_FLOAT3, D3DDECLMETHOD_DEFAULT,D3DDECLUSAGE_
POSITION, 0 },
{ 0, 12, D3DDECLTYPE_FLOAT3, D3DDECLMETHOD_DEFAULT, D3DDECLUSAGE_
NORMAL, 0 },
{ 0, 24, D3DDECLTYPE_FLOAT2, D3DDECLMETHOD_DEFAULT, D3DDECLUSAGE_
TEXCOORD, 0 },
//目标网格模型数据流,包含分量位置、纹理坐标
{ 1, 0, D3DDECLTYPE_FLOAT3, D3DDECLMETHOD_DEFAULT, D3DDECLUSAGE_
POSITION, 1 },
{ 1, 12, D3DDECLTYPE_FLOAT3, D3DDECLMETHOD_DEFAULT, D3DDECLUSAGE_
NORMAL, 1 },
D3DDECL_END()
};
下面给出顶点着色器源码,代码存储于vs.txt中,该顶点着色器根据源网格模型数据流和目标网格模型数据流中的信息以及时间标尺值计算出顶点最终位置信息,并对顶点做了坐标变换和光照处理。代码中给出了详细的注释,帮助读者理解。
//全局变量
//世界矩阵、观察矩阵、投影矩阵的合矩阵,用于顶点的坐标变换
matrix WVPMatrix;
//光照方向
vector LightDirection;
//存储2.3.1小节提到的公式S = t / T中的时间标尺S值
//注意到Scalar是一个vector类型,我们在