025-026 HLSL高级特效(1)

专业教程理论讲解部分网络游戏开发hlslhlsl卡通渲染颜色过渡算法卡通渲染边缘算法卡通渲染颜色过渡算法卡通渲染边缘算法熟练应用hlsl中顶点着色器和像素着色器卡通渲染颜色过渡算法卡通渲染边缘算法hlsl41卡通渲染411卡通渲染介绍卡通渲染是非真实渲染nprnonphotorealisticrenderin物体向里的面 即渲染物体向里的面（也就是原来玩家看不到的那面）。
4.1 卡通渲染
4.1.2 卡通渲染算法
//世界变换，观察变换和投影变换的矩阵 WorldViewProjection; float4x4 worldViewProj : WorldViewProjection //法向量变换矩阵 float4x4 normalMat : worldView worldView; float4x4 worldView : worldView worldView; texture diffuseTexture : DIFFUSE; float4 lightDir : Direction < string Object = "DirectionalLight DirectionalLight"; string Space = "World"; > = {1.0f, -1.0f, 1.0f, 0.0f}; float4 lightColor : Diffuse < string UIName = "Diffuse Light Color"; string Object = "DirectionalLight DirectionalLight";
4.1 卡通渲染
4.1.2 卡通渲染算法
1．卡通渲染颜色过渡算法 ．
在处理漫反射时，显示效果不是逐渐过渡的 显示效果不是逐渐过渡的，而是划分区域，在某个范围内 的值全部采用一个值来表示。这样就实现了卡通效果 这样就实现了卡通效果。
4.1 卡通渲染
4.1.2 卡通渲染算法
2．卡通渲染边缘算法 ．
计算边缘原理：
4.1 卡通渲染
4.1.2 卡通渲染算法
2．卡通渲染边缘算法 ．
if(EdotL < 0.4) EdotL = 0.0; else EdotL = 1.0;
float4 diffAmbColor = (lightColor * fNDotL + lightAmbient) * EdotL lightColor diffAmbColor.w = 1.0f; return diffAmbColor * tex2D( TextureSampler IN.texCoordDiffuse ) TextureSampler, }
利用Vertex Shader，在画每个面的时候 在画每个面的时候，把顶点朝法向量相反的方向移动， 1% ～2%，把物体渲染一次。
Pass2: 把物体以原来大小用黑色再渲染一次，就可以得到黑边了。 把物体以原来大小用黑色再渲染一次
需要注意的是，在第二遍渲染时需要改变背面拣选的方式 在第二遍渲染时需要改变背面拣选的方式，D3DCULL_CCW
: POSITION; : TEXCOORD0; : TEXCOORD1; : TEXCOORD2;
4.1 卡通渲染
4.1.2 卡通渲染算法
1．卡通渲染颜色过渡算法 ． 顶点计算
vertexOutput VS_TransformAndTexture VS_TransformAndTexture(vertexInput IN) { vertexOutput OUT; OUT.hPosition = mul( float4(IN.position.xyz , 1.0) , worldViewProj IN.position.xyz OUT.texCoordDiffuse = IN.texCoordDiffuse IN.texCoordDiffuse; //计算N, E, L, 和 H float3 EyePos = (0.0f,0.0f,0.0f); OUT.N = mul(IN.normal, normalMat normalMat); OUT.L = normalize( mul( -lightDir.xyz , normalMat) ); lightDir.xyz //计算完成 return OUT; }
4.1 卡通渲染
4.1.2 卡通渲染算法
2．卡通渲染边缘算法 ． 参考值的决定钩边线的粗细。
最后把结果小于这个参考值的像素都变成黑色，结果大于修正值的像素颜色 最后把结果小于这个参考值的像素都变成黑色 保持不变，就出现了钩边效果。
4.1 卡通渲染
4.1.2 卡通渲染算法
其他边缘算法 pass1:
4.1 卡通渲染
4.1.2 卡通渲染算法
1．卡通渲染颜色过渡算法 ．
float4 lightAmbient : Ambient < string UIWidget = "Ambient Light Color"; string Space = "material"; > = {0.0f, 0.0f, 0.0f, 1.0f}; float shininess : SpecularPower < string UIWidget = "slider"; float UIMin = 1.0; float UIMax = 128.0; float UIStep = 1.0; string UIName = "specular power"; > = 30.0;
4.1 卡通渲染
4.1.2 卡通渲染算法
float4 lightAmbient : Ambient < string UIWidget = "Ambient Light Color"; string Space = "material"; > = {0.0f, 0.0f, 0.0f, 1.0f}; float shininess : SpecularPower < string UIWidget = "slider"; float UIMin = 1.0; float UIMax = 128.0; float UIStep = 1.0; string UIName = "specular power"; > = 30.0; struct vertexInput //输入数据 { float3 position : POSITION; float3 normal : NORMAL; : TEXCOORD0; float4 texCoordDiffuse }; struct vertexOutput //输出数据 : POSITION; { float4 hPosition float4 texCoordDiffuse : TEXCOORD0;
顶点法线单位化以后与向量(0,0,-1.0) 1.0)做点乘，如果结果小于某一个值，就说明 法线向量与向量(0,0,-1.0)的夹角大于某一个角度 的夹角大于某一个角度。
乘积越大，与视线夹角越小；乘积越小 乘积越小，越接近侧面。
4.1 卡通渲染
4.1.2 卡通渲染算法
2．卡通渲染边缘算法 ．
//--------像素计算----------------------------------------------------float4 PS_Textured( vertexOutput IN): COLOR { float3 N = normalize(IN.N); float3 L = normalize(IN.L); //计算漫反射光 float fNDotL = max(0 , dot(N,L)); if(fNDotL < 0.5) fNDotL = 0.5; else fNDotL = 1.0; float EdotL = dot(N,float3(0,0, dot(N,float3(0,0,-1.0));
4.1 卡通渲染
4.1.1 卡通渲染介绍
颜色填充 卡通渲染的一个显著特征是使用有限数量的颜色。 卡通渲染的一个显著特征是使用有限数量的颜色 在没有特殊光照需求的情况下，使用 使用2种颜色； 需要高光效果时，可以增加一种颜色 可以增加一种颜色。 颜色可以是预先选定的。
4.1 卡通渲染
4.1.1 卡通渲染介绍
4.1 卡通渲染
4.1.2 卡通渲染算法
1．卡通渲染颜色过渡算法 ． 像素阶段
//计算漫反射光 float fNDotL = max(0 , dot(N,L)); if(fNDotL < 0.5) fNDotL = 0.5; else fNDotL = 1.0; float EdotL = dot(N,float3(0,0,-1.0)); if(EdotL < 0.4) EdotL = 0.0; else EdotL = 1.0; float4 diffAmbColor = (lightColor * fNDotL + lightAmbient) * EdotL lightColor diffAmbColor.w = 1.0f; return diffAmbColor * tex2D( TextureSampler IN.texCoordDiffuse ) TextureSampler, }
第4章 HLSL高级特效 章 高级特效
网络游戏开发-HLSL
专业教程 理论讲解部分
卡通渲染颜色过渡算法 卡通渲染边缘算法
卡通渲染颜色过渡算法 卡通渲染边缘算法
卡通渲染颜色过渡算法 卡通渲染边缘算法
熟练应用HLSL中顶点着色器和像素着色器 器和像素着色器
4.1 卡通渲染
4.1.1 卡通渲染介绍
卡通渲染是非真实渲染（NPR，Non-Photorealistic Rendering Photorealistic Rendering）的一种： 卡通渲染 铅笔画渲染 水彩渲染 …
4.1 卡通渲染
4.1.2 卡通渲染算法
1．卡通渲染颜色过渡算法 ． 像素阶段
sampler TextureSampler = sampler_state { texture = <diffuseTexture>; AddressU = WRAP; AddressV = WRAP; AddressW = WRAP; MIPFILTER = LINEAR; MINFILTER = LINEAR; MAGFILTER = LINEAR; }; //--------像素计算----------------------------------------------------float4 PS_Textured( vertexOutput IN): COLOR { float3 N = normalize(IN.N); float3 L = normalize(IN.L);
4.1 卡通渲染
4.1.2 卡通渲染算法
1．卡通渲染颜色过渡算法 ．
//---输入数据------------------------------------------------struct vertexInput { float3 position : POSITION; float3 normal : NORMAL; float4 texCoordDiffuse : TEXCOORD0; }; //---输出数据 struct vertexOutput { float4 hPosition float4 texCoordDiffuse float3 N float3 L
轮廓渲染 针对给定的观察方向，物体上的每个轮 物体上的每个轮 廓线都被绘制。
边界渲染 物体每个边界都能被渲染。
4.1 卡通渲染
4.1.2 卡通渲染算法
1．卡通渲染颜色过渡算法 ． 不同的区域间颜色有过渡关系，在同一区域内则显示为同一颜色 在同一区域内则显示为同一颜色。
//世界变换，观察变换和投影变换的矩阵 float4x4 worldViewProj : WorldViewProjection WorldViewProjection; //法向量变换矩阵 float4x4 normalMat : worldView worldView; float4x4 worldView : worldView worldView; texture diffuseTexture : DIFFUSE; float4 lightDir : Direction < string Object = "DirectionalLight DirectionalLight"; string Space = "World"; > = {-1.0f, -1.0f, -1.0f, 0.0f}; float4 lightColor : Diffuse < string UIName = "Diffuse Light Color"; string Object = "DirectionalLight DirectionalLight"; > = {1.0f, 1.0f, 1.0f, 1.0f};