「UnityShader笔记」08. 卡通渲染技术—渐变纹理
作者:互联网
Part1.效果图
Part2.方法简介
渐变纹理是一种可以用来实现卡通渲染效果的技术,其原理十分简单,使用光照模型计算结果,在一个一维的渐变纹理上进行采样
以半兰伯特模型为例,其表达式为 0.5 * ( Normal · LightDirection) + 0.5,可以看到如果光照方向对于某顶点越接近于直射,其半兰伯特模型计算结果越大,越接近1,对应的在渐变纹理上采样得到的颜色结果也会越深,如果把采样纹理离散化,比如下图的模式
(取指越接近0越靠左,越接近1越靠右)
这样以来,连续的光照计算结果,在经过纹理采样后的颜色值将被离散化,从而模拟卡通风格的块状阴影和高光的美术风格
Part3.代码逐段分析
Properties
{
_Color ("Color", Color) = (1,1,1,1)
_MainTex("Main Tex",2D) = "white"{} //主纹理
_RampTex("Ramp Tex", 2D) = "white" {} //渐变纹理
_Specular("Specular", Color) = (1,1,1,1)
_Gloss("Gloss", Range(8.0,256)) = 20
}
在属性块,需要额外定义一个渐变纹理,不要忘了在CG代码片中也要定义相同的变量
struct a2v{
float4 vertex : POSITION;
float3 normal : NORMAL;
float4 texcoord : TEXCOORD0;
};
在顶点着色的输入结构体中,我们需要获取顶点位置,顶点法向量以及顶点的纹理uv坐标
struct v2f{
float4 pos : SV_POSITION;
float3 worldNormal : TEXCOORD0;
float3 worldPos : TEXCOORD1;
float2 uv : TEXCOORD2;
};
在顶点着色器到片元着色器的通信结构体中,我们需要获取裁剪空间下的顶点位置,世界空间下的顶点位置和法向量,以及经过变换后的纹理uv
v2f vert(a2v v){
v2f o;
//将顶点从模型空间变换到裁剪空间
o.pos = UnityObjectToClipPos(v.vertex);
//使用内置函数和变换矩阵,将模型空间的法向量和顶点位置变换到世界空间,用于片元着色器的光照计算
o.worldNormal = UnityObjectToWorldNormal(v.normal);
o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
//对纹理uv坐标进行尺度变换和偏置
o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
return o;
}
顶点着色器的工作相对简单,我们只需要完成一些常规工作即可
fixed4 frag(v2f i) : SV_Target{
fixed3 worldNormal = normalize(i.worldNormal);
//通过Unity内置函数,获取世界空间下的光照向量,并单位化
fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
//对主纹理进行采样,获取像素点颜色
fixed3 albedo = tex2D(_MainTex, i.uv)* _Color.rgb;
//计算环境光
fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;
//根据半兰伯特模型计算漫反射项
fixed halfLambert = 0.5 * dot(worldNormal, worldLightDir) + 0.5;
//根据半兰伯特模型计算结果,在渐变纹理上采样,得到被离散化的漫反射颜色
fixed3 diffuseColor = tex2D(_RampTex, fixed2(halfLambert,halfLambert)).rgb * albedo * halfLambert;
//后面进行正常的光照计算,输出最终颜色,注释从略,可参考之前笔记
fixed3 diffuse = _LightColor0.rgb * diffuseColor;
fixed3 viewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));
fixed3 halfDir = normalize(worldLightDir + viewDir);
fixed3 specular = _LightColor0.rgb * _Specular.rgb + pow(max(0,dot(worldNormal,halfDir)),_Gloss);
return fixed4(ambient + diffuse + specular, 1.0);
}
在片元着色器中,我们首先需要处理主纹理,即对主纹理采样获得颜色,并用该颜色计算环境光
接下来我们需要获取像素点处半兰伯特模型的光照结果,并根据该结果对渐变纹理进行采样,注意渐变纹理虽然是一维的,但仍然是以2维存储的,其中维度y上的取值均相同,因此我们需要使用一个二维点进行采样,其中两个维度的取值相同即可,因为y轴上没有意义
采样完后,直接与之前计算的主纹理颜色相乘,再与半兰伯特模型结果相乘即可得到离散化的漫反射光照颜色
接下来的工作十分常规化,正常按照Blinn-Phong模型计算高光,输出最终光照结果即可
Part4.一些问题
Q1.为什么要使用半兰伯特模型而不是兰伯特模型?
因为兰伯特模型会出现死黑问题,对于卡通渲染这种颜色鲜艳的风格,死黑问题十分致命
Q2.为什么渐变纹理是一维的,却需要二维的UV坐标去采样?
因为渐变纹理虽然是一维的,但还是按照二维来存储的(可参考Part2给出的样例渐变纹理),但Y维度上取值是完全相同的,因此在Y维度上的采样实际上是没有意义的,代码中简单使用UV相同的采样点采样即可
Part5.完整代码
// Upgrade NOTE: replaced '_Object2World' with 'unity_ObjectToWorld'
Shader "Chapter7/RampGirl"
{
Properties
{
_Color ("Color", Color) = (1,1,1,1)
_MainTex("Main Tex",2D) = "white"{}
_RampTex("Ramp Tex", 2D) = "white" {}
_Specular("Specular", Color) = (1,1,1,1)
_Gloss("Gloss", Range(8.0,256)) = 20
}
SubShader
{
Pass{
Tags { "LightMode"="ForwardBase" }
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "Lighting.cginc"
fixed4 _Color;
sampler2D _MainTex;
float4 _MainTex_ST;
sampler2D _RampTex;
float4 _RampTex_ST;
fixed4 _Specular;
float _Gloss;
struct a2v{
float4 vertex : POSITION;
float3 normal : NORMAL;
float4 texcoord : TEXCOORD0;
};
struct v2f{
float4 pos : SV_POSITION;
float3 worldNormal : TEXCOORD0;
float3 worldPos : TEXCOORD1;
float2 uv : TEXCOORD2;
};
v2f vert(a2v v){
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
o.worldNormal = UnityObjectToWorldNormal(v.normal);
o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
return o;
}
fixed4 frag(v2f i) : SV_Target{
fixed3 worldNormal = normalize(i.worldNormal);
fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));
fixed3 albedo = tex2D(_MainTex, i.uv)* _Color.rgb;
fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;
fixed halfLambert = 0.5 * dot(worldNormal, worldLightDir) + 0.5;
fixed3 diffuseColor = tex2D(_RampTex, fixed2(halfLambert,halfLambert)).rgb * albedo * halfLambert;
fixed3 diffuse = _LightColor0.rgb * diffuseColor;
fixed3 viewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));
fixed3 halfDir = normalize(worldLightDir + viewDir);
fixed3 specular = _LightColor0.rgb * _Specular.rgb + pow(max(0,dot(worldNormal,halfDir)),_Gloss);
return fixed4(ambient + diffuse + specular, 1.0);
}
ENDCG
}
}
FallBack "Specular"
}
标签:采样,卡通,Color,08,纹理,rgb,UnityShader,worldNormal,fixed3 来源: https://www.cnblogs.com/MuTsuKi/p/16349570.html