ShadersforGameProgrammersandArtists阅读笔记Chapter4

Chapter4 学习第一个shader

第一个Shader
首先创建一个空的Effect group &＃xff0c;右键该节点&＃xff0c;导入一个Teapot模型&＃xff0c;模型创建完成后你需要告诉RenderMonkey集合体信息如何发送到顶点着色器中&＃xff0c;所以需要创建一个Stream Mapping 节点&＃xff0c;创建后打开可以看到目前只有一个Position信息&＃xff0c;对于这个Shader这些信息足够了。

对于这个简单的Shader我们还需要一个叫做View-projection matrix的矩阵&＃xff0c;右键添加该变量到我们的效果中&＃xff0c;这个矩阵用来将我们的模型的顶点数据由原本的物体空间转换到屏幕空间。
最后可以创建我们的渲染通道&＃xff0c;右键效果添加通道&＃xff0c;并删除其中的内容此时你的目录应该如下图所示

在渲染通道中首先需要添加模型和Stream mapping 的引用&＃xff0c;右键通道将之前创建的模型和stream mapping引用到pass中&＃xff0c;最后只需要添加顶点和像素着色器你的第一个shader就可以开始准备编写了&＃xff0c;
首先你需要声明一个变量矩阵&＃xff0c;View_proj_matrix来进行投影变换

float4x4 view_proj_matrix;


如果有其他的变量也需要在这个阶段声明&＃xff0c;对于这个shader这个就足够了&＃xff0c;接下来声明一个结构用来从顶点着色器向像素着色器传递顶点信息&＃xff0c;这里我们只需要position信息就足够

struct VS_OUTPUT
{float 4 pos: POSITION;
}


这本质上是创建了一个名为pos的向量变量作为结构体的一部分。

shader的核心是进入点函数&＃xff0c;比如进入点函数命名为vs_main&＃xff0c;可以创建一个空函数作为顶点着色器的模板&＃xff0c;函数的参数就是之前在Stream mapping 中定义的值&＃xff0c;需要将其传入你的函数中&＃xff0c;目前只需要position 数据。

VS_OUTPUT vs_main(float4 inPos:POSITION)
{VS_OUTPUT out;return Out;
}


输入参数inpos后面跟着语义声明POSITION&＃xff0c;这告诉顶点着色器如何映射顶点流信息到这个输入参数上&＃xff0c;请注意这个函数的返回值是VS_OUTPUT类型的参数&＃xff0c;这个数据会从顶点着色器传输到像素着色器中在顶点着色器处理完成后&＃xff0c;因为只是要将模型显示在视口&＃xff0c;没有其他的效果&＃xff0c;所以我们只需要将视口变换矩阵和模型POSITION相乘即可

Out.Pos &＃61; mul(view_proj_matrix,inPos);


这个顶点着色器将会把你的模型投射到屏幕空间中&＃xff0c;并发送最后的信息到像素着色器中&＃xff0c;最后顶点着色器部分完成的代码

float4x4 view_proj_matrix;struct VS_OUTPUT
{float4 Pos: POSITION;
};VS_OUTPUT vs_main(float4 inpos:POSITION,float4 innor:NORMAL)
{VS_OUTPUT Out;Out.Pos &＃61; mul(view_proj_matrix,inpos);return Out;
}


注意开头声明的view_proj_matrix和一开始你在workspace 中创建的视口投射矩阵的名称应该保持一致。

完成顶点着色器后打开之前创建的像素着色器窗口,看到默认的像素着色器代码

float4 ps_main( float4 inDiffuse:COLOR0) : COLOR0
{// Output constant color:float4 color;color[0] &＃61; color[3] &＃61; 1.0;color[1] &＃61; color[2] &＃61; 0.0;return color;
}


像素着色器的返回值是一个float4 的semantic COLOR0这定义了函数的最终返回的颜色值&＃xff0c;另一个是函数的输入值 indiffsue的语义也是COLOR0&＃xff0c;这映射了顶点着色器中的输出作为像素着色器的输入&＃xff0c;我们刚才编写的顶点着色器并不包括COLOR0的输出所以在这里这个输入是多余的&＃xff0c;所以最终你的像素着色器应为

float4 ps_main() : COLOR0
{// Output constant color:float4 color;color[0] &＃61; color[3] &＃61; 1.0;color[1] &＃61; color[2] &＃61; 0.0;return color;
}


现在第一个着色器就完成了点击编译&＃xff0c;你会在预览窗口中看到一个红色的茶壶

为你的物体应用纹理
首先需要创建一个纹理&＃xff0c;在效果上右键&＃xff0c;添加纹理然后在通道中右键添加texture object 展开添加的texture object 右键引用之前导入的2dtexture&＃xff0c;双击texture object节点可以打开texture的设置窗口&＃xff0c;在这个shader中保持默认就好。

因为要将贴图映射到模型上&＃xff0c;首先我们要在stream mapping中添加TEXCOORD通道&＃xff0c;然后打开顶点着色器&＃xff0c;在输出结构中添加纹理坐标的输出&＃xff0c;同时在顶点着色器的主函数上添加坐标输入顶点着色器部分的代码完成后如下所示

float4x4 view_proj_matrix;struct VS_OUTPUT
{float4 Pos: POSITION;float2 Txrl: TEXCOORD0;
};VS_OUTPUT vs_main(
float4 inpos:POSITION,
float2 Txrl: TEXCOORD0
)
{VS_OUTPUT Out;//转换到屏幕空间Out.Pos &＃61; mul(view_proj_matrix,inpos);//传递纹理坐标Out.Txrl &＃61; Txrl;return Out;
}


然后打开像素着色器&＃xff0c;首先需要声明一个sampler变量告诉像素着色器哪一张贴图会被调用

在像素着色器的参数输入中&＃xff0c;加入坐标的输入 &＃xff0c;最后读取之前采样的纹理的像素使用tex2d函数&＃xff0c;用输入的坐标作为读取纹理的坐标完成的像素着色器如下

sampler Texture0;float4 ps_main(
float2 inTxrl:TEXCOORD0
) : COLOR0
{return tex2D(Texture0,inTxrl);
}


添加更多模型
为了添加多个模型进入场景首先需要添加渲染通道&＃xff0c;添加一个名为 Pass1的通道到效果中&＃xff0c;复制之前通道的节点到新的通道中

此时第二个模型实际上已经渲染&＃xff0c;但两个模型重叠&＃xff0c;需要一个新的变量确定第二个模型的位置&＃xff0c;在效果下新建一个变量名为teapot_position&＃xff0c;xyz的值可以任意指定&＃xff0c;只需要保持w分量的值为0。

打开pass1的顶点着色器&＃xff0c;在开头声明之前创建的变量 teapot_position&＃xff0c;最后用之前输入的position与该变量相加作为输出的POSTION调节teapot_position的值可以看到第二个茶壶已经被渲染&＃xff0c;顶点着色器部分的代码如下所示

float4x4 view_proj_matrix;
float4 teapot_position;
struct VS_OUTPUT
{float4 Pos: POSITION;float2 Txrl: TEXCOORD0;
};VS_OUTPUT vs_main(
float4 inpos:POSITION,
float2 Txrl: TEXCOORD0
)
{VS_OUTPUT Out;//转换到屏幕空间inpos &＃61; inpos &＃43; teapot_position;Out.Pos &＃61; mul(view_proj_matrix,inpos);//传递纹理坐标Out.Txrl &＃61; Txrl;return Out;
}