一、前言
继前面的系列文章之后,本篇继续讲解Cg的常用函数的使用案例,帮助巩固Cg语言的基础知识。这些函数都可以在Cg的教程里The Cg Tutorial找到示例代码和函数意义。本文讲解几个常用的函数,分别有
1、Step(a,x):如果x<a返回0;如果x>或=a返回1
2、Clamp(x,a,a):如果x<a返回a;如果x>b返回b;如果在a和b之间就返回x
3、smoothstep(min,max,x):返回的值为–2*(( x – min )/( max – min ))3 +3*(( x – min )/( max – min ))2
4、lerp(a,b,f):线性插值函数,返回值为(1-f)*a+b*f
5、三角函数sin、cos
二、常用函数的使用实例
1、Step函数:在Unity中的Shader代码
Shader "Unlit/Chapter5-Step"
{
Properties
{
_background("背景色",Color)=(0,0,0,0)
}
SubShader
{
// No culling or depth
Cull Off ZWrite Off ZTest Always
CGINCLUDE
ENDCG
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
float4 _background;
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
v2f vert(appdata v)
{
v2f o;
o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
o.uv = v.uv;
o.uv.y = 1 - o.uv.y;
return o;
}
// Functions
fixed4 frag(v2f i) : SV_Target
{
float2 r = 2.0*(i.uv - 0.5);
//_ScreenParams是Unity内置的变量
float aspectRatio = _ScreenParams.x / _ScreenParams.y;
r.x *= aspectRatio;
fixed3 pixel = _background.xyz;
float edge, variable, ret;
//将屏幕划分成五个部分
//第一部分
if (r.x < -0.6*aspectRatio)
{
variable = r.y;
edge = 0.2;
if (variable > edge)
{
ret = 1.0;
}
else
{
ret = 0;
}
}
else if (r.x < -0.2*aspectRatio)
{
variable = r.y;
edge = -0.2;
//step(a,x):如果x<a结果返回0,反之返回1
ret = step(edge, variable);
}
else if (r.x < 0.2*aspectRatio)
{
ret = 1.0 - step(0.5, r.y);
}
else if (r.x < 0.6*aspectRatio)
{
ret = 0.3 + 0.5*step(-0.4, r.y);
}
else
{
ret = step(-0.3, r.y) * (1.0 - step(0.2, r.y));
}
pixel = fixed3(ret, ret, ret);
return fixed4(pixel, 1.0);
}
ENDCG
}
}
}
得到的效果图如图所示:
![](https://i-blog.csdnimg.cn/blog_migrate/a9988565ce10f850c8f39209e627643c.png)
2、Clamp:在Unity中的代码如下:
Shader "Unlit/Chapter5-Clamp"
{
Properties
{
_background("背景色",Color) = (0,0,0,0)
}
SubShader
{
// No culling or depth
Cull Off ZWrite Off ZTest Always
// 追加
CGINCLUDE
//定义宏
#define PI 3.14159
ENDCG
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
float4 _background;
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
v2f vert(appdata v)
{
v2f o;
o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
o.uv = v.uv;
o.uv.y = 1 - o.uv.y;
return o;
}
// Functions
fixed4 frag(v2f i) : SV_Target
{
float2 r = 2.0*(i.uv - 0.5);
//_ScreenParams是Unity内置的变量
float aspectRatio = _ScreenParams.x / _ScreenParams.y;
r.x *= aspectRatio;
fixed3 pixel = _background.xyz;
float edge, variable, ret;
//第一部分
if (i.uv.x < 0.25) { // part1
ret = i.uv.y;
}
else if (i.uv.x < 0.5) { // part2
float minVal = 0.3;
float maxVal = 0.6;
variable = i.uv.y;
if (variable < minVal) {
ret = minVal;
}
if (variable > minVal && variable < maxVal) {
ret = variable;
}
if (variable > maxVal) {
ret = maxVal;
}
}
else if (i.uv.x < 0.75) { // part3
float minVal = 0.6;
float maxVal = 0.8;
variable = i.uv.y;
//clam(x,a,b):x如果小于a返回a,如果大于b返回b,在a~b范围内返回x
ret = clamp(variable, minVal, maxVal);
}
else { // part4
float y = cos(5.0 * 2.0 * PI *i.uv.y);
y = (y + 1.0)*0.5; // map [-1,1] to [0,1]
ret = clamp(y, 0.2, 0.8);
}
pixel = fixed3(ret, ret, ret);
return fixed4(pixel, 1.0);
}
ENDCG
}
}
}
效果图如图所示:
![](https://i-blog.csdnimg.cn/blog_migrate/805f39ca9f4fa224c00f04031d11b5be.png)
说明:对比1和2的图会明显发现,在使用Clamp处理的时候,边缘的颜色会有渐变的效果。
3、smoothstep:这个脚本只给出片段着色器部分,其他部分同2,代码如下:
fixed4 frag(v2f i) : SV_Target
{
fixed3 pixel = _background.xyz;
float edge, variable, ret;
if (i.uv.x < 1.0 / 5.0) { // part1
edge = 0.5;
ret = step(edge, i.uv.y);
}
else if (i.uv.x < 2.0 / 5.0) { // part2
float edge0 = 0.45;
float edge1 = 0.55;
float t = (i.uv.y - edge0) / (edge1 - edge0);
float t1 = clamp(t, 0.0, 1.0);
ret = t1;
}
else if (i.uv.x < 3.0 / 5.0) { // part3
float edge0 = 0.45;
float edge1 = 0.55;
float t = clamp((i.uv.y - edge0) / (edge1 - edge0), 0.0, 1.0);
float t1 = 3.0*t*t - 2.0*t*t*t;
ret = t1;
}
else if (i.uv.x < 4.0 / 5.0) { // part4
//smoothstep(min,max,x):x=-2*((x-min)/(max-min))^3+3*((x-min)/(max-min))^2,当x=min时返回0,当x=max时返回1
ret = smoothstep(0.45, 0.55, i.uv.y);
}
else if (i.uv.x < 5.0 / 5.0) {
float edge0 = 0.45;
float edge1 = 0.55;
float t = clamp((i.uv.y - edge0) / (edge1 - edge0), 0.0, 1.0);
float t1 = t*t*t*(t*(t*6.0 - 15.0) + 10.0);
ret = t1;
}
pixel = fixed3(ret, ret, ret);
return fixed4(pixel, 1.0);
}