Unity Shader 素描效果

量子计算9 · 发表于 2021-3-30 14:40

Unity Shader系列文章：Unity Shader目录-初级篇

Unity Shader系列文章：Unity Shader目录-中级篇

效果：

素描风格的渲染效果

原理：

使用6张素描纹理进行渲染。在渲染阶段，首先在顶点着色阶段计算逐顶点的光照，根据光照结果来决定6张纹理的混合权重，并传递给片元着色器。然后，在片元着色器中根据这些权重来混合6张纹理的采样结果。

6张素描纹理：

hatch_0.jpg

hatch_1.jpg

hatch_2.jpg

hatch_3.jpg

hatch_4.jpg

hatch_5.jpg

shader代码：
// 素描风格效果Shader "Custom/Hatching"{ Properties { _Color ("Color Tint", Color) = (1, 1, 1, 1) _TileFactor ("Tile Factor", Float) = 1 // 纹理的平铺系数，越大则素描线条越密 _Outline ("Outline", Range(0, 1)) = 0.1 // 描边宽度 _Hatch0 ("Hatch 0", 2D) = "white" { }// 6张素描纹理 _Hatch1 ("Hatch 1", 2D) = "white" { } _Hatch2 ("Hatch 2", 2D) = "white" { } _Hatch3 ("Hatch 3", 2D) = "white" { } _Hatch4 ("Hatch 4", 2D) = "white" { } _Hatch5 ("Hatch 5", 2D) = "white" { } } SubShader { Tags { "RenderType" = "Opaque" "Queue" = "Geometry" } // 通过UsePass语义，指明调用之前写好的Pass渲染轮廓线（Pass代码详见之前文章《Unity Shader 卡通渲染效果》） UsePass "Custom/ToonShading/OUTLINE" // Base Pass 计算平行光、环境光 Pass { Tags { "LightMode" = "ForwardBase" } CGPROGRAM // 编译指令，保证在pass中得到Pass中得到正确的光照变量 #pragma multi_compele_fwdbase #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" #include "Lighting.cginc" #include "AutoLight.cginc" #include "UnityShaderVariables.cginc" fixed4 _Color; float _TileFactor; sampler2D _Hatch0; sampler2D _Hatch1; sampler2D _Hatch2; sampler2D _Hatch3; sampler2D _Hatch4; sampler2D _Hatch5; // 应用传递给定点着色器的数据 struct a2v { float4 vertex: POSITION; // 语义: 顶点坐标 float3 normal: NORMAL; // 语义: 法线 float4 texcoord: TEXCOORD0; // 语义: 纹理坐标 float4 tangent: TANGENT; // 语义: 切线 }; // 顶点着色器传递给片元着色器的数据 struct v2f { float4 pos: SV_POSITION; // 语义: 裁剪空间的顶点坐标 float2 uv: TEXCOORD0; fixed3 hatchWeights0: TEXCOORD1; // 存储6张纹理的权重 fixed3 hatchWeights1: TEXCOORD2; // 存储6张纹理的权重 float3 worldPos: TEXCOORD3; SHADOW_COORDS(4) // 内置宏：声明一个用于对阴影纹理采样的坐标 (这个宏参数需要是下一个可用的插值寄存器的索引值，这里是4) }; // 顶点着色器 v2f vert(a2v v) { v2f o; // 将顶点坐标从模型空间变换到裁剪空间 // 等价于o.pos = mul(UNITY_MATRIX_MVP, v.vertex); o.pos = UnityObjectToClipPos(v.vertex); o.uv = v.texcoord.xy * _TileFactor; fixed3 worldLightDir = normalize(WorldSpaceLightDir(v.vertex)); fixed3 worldNormal = UnityObjectToWorldNormal(v.normal); // 计算漫反射系数 fixed diff = max(0, dot(worldLightDir, worldNormal)); o.hatchWeights0 = fixed3(0, 0, 0); o.hatchWeights1 = fixed3(0, 0, 0); // 将漫反射系数diff缩放到[O, 7] 范围 // 们把[O, 7] 区间均匀划分为7个子区间，通过判断 hatchFactor 所处的子区间来计算对应的纹理混合权重。 float hatchFactor = diff * 7; if (hatchFactor > 6) { // 纯白色，什么也不做 } else if (hatchFactor > 5) { o.hatchWeights0.x = hatchFactor - 5; } else if (hatchFactor > 4) { o.hatchWeights0.x = hatchFactor - 4; o.hatchWeights0.y = 1 - o.hatchWeights0.x; } else if (hatchFactor > 3) { o.hatchWeights0.y = hatchFactor - 3; o.hatchWeights0.z = 1 - o.hatchWeights0.y; } else if (hatchFactor > 2) { o.hatchWeights0.z = hatchFactor - 2; o.hatchWeights1.x = 1 - o.hatchWeights0.z; } else if (hatchFactor > 1) { o.hatchWeights1.y = hatchFactor; o.hatchWeights1.z = 1 - o.hatchWeights1.y; } else { o.hatchWeights1.y = hatchFactor; o.hatchWeights1.z = 1.0 - o.hatchWeights1.y; } o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz; // 内置宏：用于计算声明的阴影纹理坐标 TRANSFER_SHADOW(o); return o; } // 片元着色器 fixed4 frag(v2f i): SV_TARGET { // 采样素描纹理，并和它们对应的权重值相乘得到每张纹理的采样颜色 fixed4 hatchTex0 = tex2D(_Hatch0, i.uv) * i.hatchWeights0.x; fixed4 hatchTex1 = tex2D(_Hatch1, i.uv) * i.hatchWeights0.y; fixed4 hatchTex2 = tex2D(_Hatch2, i.uv) * i.hatchWeights0.z; fixed4 hatchTex3 = tex2D(_Hatch3, i.uv) * i.hatchWeights1.x; fixed4 hatchTex4 = tex2D(_Hatch4, i.uv) * i.hatchWeights1.y; fixed4 hatchTex5 = tex2D(_Hatch5, i.uv) * i.hatchWeights1.z; // 计算纯白在渲染中的贡献度，通过从1中减去所有6纹理的权重来得到的。 // 是因为素描中往往有留白的部分，一般在最后的渲染中光照最亮的部分是纯白色的 fixed4 whiteColor = fixed4(1, 1, 1, 1) * (1 - i.hatchWeights0.x - i.hatchWeights0.y - i.hatchWeights0.z - i.hatchWeights1.x - i.hatchWeights1.y - i.hatchWeights1.z); fixed4 hatchColor = hatchTex0 + hatchTex1 + hatchTex2 + hatchTex3 + hatchTex4 + hatchTex5 + whiteColor; // 计算阴影值和光照衰减 UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos); return fixed4(hatchColor.rgb * _Color.rgb * atten, 1); } ENDCG } } FallBack "Diffuse"}

		自动登录	找回密码
密码			立即注册

Unity Shader 素描效果

本帖子中包含更多资源