4415人阅读
游戏开发（16）
上一篇文章的例子中我们可以看到顶点着色器的输出参数可以说是直接作为了片段着色器的形参传递过来，那么不由得一个问题浮现出来，顶点着色器的形参是从何处传递过来的？
顶点着色器的形参是gameObject 的meshRenderer组件将所有的mesh数据按每一帧一次传递给OpenGL。
这中间的过程常常被称作一次draw call，往往一次性传输大量mesh信息作为一次draw call 比多次传输少量mesh信息引起多次draw call更加效率。
而在上一个例子中我们只接受了MeshRenderer传递过来的 POSITION信息，实际上还有很多信息没有接受。想要在顶点着色器中接收Mesh信息的某些数据，只需要在形参后生命正确的语义即可获得对应的信息。
那么顶点着色器可以根据语义获取到的全部mesh信息有：
float4 vertex : POSITION; //顶点坐标
float4 tangent : TANGENT; // tangent，三角函数的一种，缩写为tan我们很熟悉了，他的值是mesh到表面法线的正切值
float3 normal : NORMAL; //表面法向量，以对象的坐标系标准化至单位长度
float4 texcoord : TEXCOORD0;//纹理坐标系的第0个集合
float4 texcoord1 : TEXCOORD1; //纹理坐标系的第1个集合
fixed4 color : COLOR;//颜色，通常为常数
同理我们可以声明一个顶点着色器的输入结构体，包含以上所有信息，然后将这个结构体作为形参传递给顶点着色器的入口函数。
Unity内建的预定义输入结构体：
只要引用UnityCg.cginc头文件(目录Unity & Editor & Data & CGIncludes下)就可以使用预先设定好的结构体直接使用，他们分别有appdata_base &appdata_tan和appdata_full:
struct appdata_base {
float4 vertex : POSITION;
float3 normal : NORMAL;
float4 texcoord : TEXCOORD0;
struct appdata_tan {
float4 vertex : POSITION;
float4 tangent : TANGENT;
float3 normal : NORMAL;
float4 texcoord : TEXCOORD0;
struct appdata_full {
float4 vertex : POSITION;
float4 tangent : TANGENT;
float3 normal : NORMAL;
float4 texcoord : TEXCOORD0;
float4 texcoord1 : TEXCOORD1;
fixed4 color : COLOR;
可以直接根据需要选择合适的输入结构体，我们可以书写这样形式的代码:
Pass{CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include &UnityCG.cginc&
struct vertexOutput {
float4 pos : SV_POSITION;
float4 col : TEXCOORD0;
vertexOutput vert(appdata_full input)
output.pos = mul(UNITY_MATRIX_MVP, input.vertex);
output.col = input.
float4 frag(vertexOutput input) : COLOR
return input.
ENDCG}可以看到运行在球体上的效果:
例2：假彩色图像
我们了解假彩色图像之前更重要的是把颜色真正的当做一个向量，那么我们专注于这个向量的其中一个分量，令另外的分量固定不变。
例如当我们以球体(sphere)的输入信息中的texcoord参数以语义TEXCOORD0传给片段颜色时，颜色在红色方向的分量是最终texcoord的x坐标呈现的颜色。
意思就是说不管颜色是纯红，纯黄，或者纯洋红色，红色分量始终是1。(计算机的三原色是红绿蓝，***并不是三原色之一，***也由红色合成)
相对的不管颜色是纯蓝，纯绿，或者纯青色，红色分量始终是0。
那么我们看一下下面这行代码的作用：
output.col = float4(input.texcoord.x, 0.0, 0.0, 1.0);
显然我们取纹理坐标的x参数作为红色分量构造了一个颜色向量，绿色与蓝色分量恒定为0，不透明度恒定为1，那么在球体中出来的应该是一个以纹理坐标的x坐标为变元的一元线性颜色球体。(也可以理解为以地球的纬度为变元，构成了一个由黑色(0,0,0,1)至红色(1,0,0,1)构成的地球)
上图为水平反向旋转后看向这个假彩色球体的效果
当我们设想我们只关注颜色的红色分量的时候，我们可以看到转动球体从0°旋转至360°再回到0°的时候，红色分量由0变为1，周而复始。它非常类似于行星表面的纬度坐标。
同理下面一行代码的作用是以球面的经度为变元构成的黑色至绿色颜色渐变的线性颜色球体：
output.col = float4(0.0, input.texcoord.y, 0.0, 1.0);可以想象这个球体的南极应该是黑色(0,0,0,1)，北极应该是绿色(0,1,0,1)
上图为从球体的南极看向这个假彩色球体的效果
写到这里，其实假彩色(False Color)这个概念玩过PS的朋友应该可以马上联想到通道，其实就是红色通道 绿色通道和蓝色通道而已，只不过我们以向量的观点来看他们是颜色向量的分量而已。我们可以理解为颜色为3个通道的混合，也可以认为是3个分量的合向量
纹理坐标(texture coordinates)非常适合用来表现颜色，因为他们的值范围都是0~1,所以无需任何转换就能把一个纹理坐标与一个颜色一一映射。
坐标上的法向量同样可以用来表现颜色，但是需要一定的转换。因为法向量的值范围是-1至+1，假设一个坐标x，y，z的法向量是α,那么α的范围是(-1,-1,-1)至(1,1,1)，非常轻松的数学转换就可以将他与一个颜色一一映射:
α与(1,1,1)进行矢量相加，然后与2相除，即可得到一个(0,0,0)至(1,1,1)的向量，再补充第四元不透明度即可称为一个RGBA颜色向量。所以代码为:
output.col = float4((input.normal + float3(1.0, 1.0, 1.0)) / 2.0, 1.0);
这里我不再把效果图给出来了，大家可以自己试试
由此可见，我们如果想让mesh信息中的数据以颜色体现出来，如果原信息的值域的每个分量不在[0,1] 只需要将原信息的值域变换至这个区间内，使其每个分量都不超过[0,1]这个区间，我们就能将mesh信息与颜色建立单向映射体现出来。
那么下面3行代码中返回的颜色是否是正确的颜色，只用判断col向量的分量是否超过了[0,1]区间，超出这个区间我们就只能看到黑色:
output.col = input.texcoord - float4(1.5, 2.3, 1.1, 0.0);
//rgba区间分别为[-1.5,0.5],[-2.3,-1.3],[-1.1,-0.1],[0,1],不能与颜色建立映射
output.col = float4(input.texcoord.z);//rgba区间分别为[0,1],[0,1],[0,1],[0,1],可以与颜色建立映射
output.col = input.texcoord / tan(0.0);//分母为0数学上无意义，因为值无穷大，所以区间是[0,∞]
再看复杂一点的，判断下面的输出颜色是否正确，需要一些点乘和叉乘的知识:
output.col = dot(input.normal, float3(input.tangent)) *input.
output.col = dot(cross(input.normal, float3(input.tangent)),input.normal) * input.
output.col = float4(cross(input.normal, input.normal), 1.0);
output.col = float4(cross(input.normal,float3(input.vertex)), 1.0);
不好意思我的点乘和叉乘已经全部还给老师了，看来是得把我送回学校去重新学学了！我解不出来~
弧度函数radians()与噪音函数noise()总是返回黑色:
output.col = radians(input.texcoord);
output.col = noise(input.texcoord);
通过这一部分的知识我们已经掌握了：
1.顶点着色器的输入参数有哪些
2.怎样将这些输入信息以颜色的形式表现出来
如果我的博客对您有帮助或者您有任何疑问，欢迎加入重庆u3d交流QQ群我会给您解答：，也可以加群与我们一同交流技术
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：206048次
积分：2741
积分：2741
排名：第9401名
原创：43篇
评论：259条
文章：10篇
阅读：32407
(1)(4)(1)(4)(4)(7)(2)(1)(4)(1)(11)(5)shader实例（三十四）ShaderToy漩涡
shadertoy上找到一个比较好上手的类似漩涡的特效。
效果如下：
由于时间有限，暂不能把算法理解的更透彻，留着以后慢慢学习。
大体原理和代码如下：
Shader&"shadertoy/Template"&{&&
&&&&Properties&{&&
&&&&&&&&//start-------------------------------------------------------------&&
&&&&&&&&_MainTex&("Base&(RGB)",&2D)&=&"white"&{}&&
&&&&&&&&//end-------------------------------------------------------------&&
&&&&CGINCLUDE&&
&&&&&&&&#include&"UnityCG.cginc"&&
&&&&&&&&#pragma&target&3.0&&&&
&&&&&&&&#define&vec2&float2&&
&&&&&&&&#define&vec3&float3&&
&&&&&&&&#define&vec4&float4&&
&&&&&&&&#define&mat2&float2x2&&
&&&&&&&&#define&iGlobalTime&_Time.y&&
&&&&&&&&#define&mod&fmod&&
&&&&&&&&#define&mix&lerp&&
&&&&&&&&#define&atan&atan2&&
&&&&&&&&#define&fract&frac&&&
&&&&&&&&#define&texture2D&tex2D&&
&&&&&&&&//&屏幕分辨率&&
&&&&&&&&#define&iResolution&_ScreenParams&&
&&&&&&&&//&所有像素点（0,屏幕分辨率）为左下的参数。xy/w转为齐次坐标位置，屏幕左下为0，右上为1。&&
&&&&&&&&#define&gl_FragCoord&((_iParam.srcPos.xy/_iParam.srcPos.w)*_ScreenParams.xy)&&&&
&&&&&&&&#define&x_y&iResolution.x&/&iResolution.y&&
&&&&&&&&//start-------------------------------------------------------------&&
&&&&&&&&sampler2D&_MainT&&
&&&&&&&&//end-------------------------------------------------------------&&
&&&&&&&&//&顶点输出&&
&&&&&&&&struct&vertOut&{&&&&&&&&
&&&&&&&&&&&&float4&pos&:&SV_POSITION;&&&&&&&&
&&&&&&&&&&&&float4&srcPos&:&TEXCOORD0;&&&&&&
&&&&&&&&};&&&&&&
&&&&&&&&vertOut&vert(appdata_base&v)&{&&&&&&
&&&&&&&&&&&&vertOut&o;&&&&&&
&&&&&&&&&&&&o.pos&=&mul&(UNITY_MATRIX_MVP,&v.vertex);&&
&&&&&&&&&&&&o.srcPos&=&ComputeScreenPos(o.pos);&&&&&
&&&&&&&&&&&&return&o;&&&&&&
&&&&&&&&}&&
&&&&&&&&vec4&main(vec2&fragCoord);&&
&&&&&&&&fixed4&frag(vertOut&_iParam)&:&COLOR0&{&&&&
&&&&&&&&&&&&vec2&fragCoord&=&gl_FragC&&
&&&&&&&&&&&&return&main(fragCoord);&&
&&&&&&&&}&&&&
&&&&&&&&//start-------------------------------------------------------------&&
&&&&&&&&vec4&filter(sampler2D&tex,&vec2&uv,&float&time)&&
&&&&&&&&{&&
&&&&&&&&&&&&//&圆形半径&&
&&&&&&&&&&&&float&radius&=&0.5;&&
&&&&&&&&&&&&//&中心点&&
&&&&&&&&&&&&vec2¢er&=&vec2(0.5&*&x_y,0.5);&&
&&&&&&&&&&&&//&将当前UV移到值域为[-1,1]的坐标中&&
&&&&&&&&&&&&vec2&tc&=&uv&-&&&
&&&&&&&&&&&&//&当前点的长度就是离中心点的距离&&
&&&&&&&&&&&&float&dist&=&length(tc);&&
&&&&&&&&&&&&//&只处理在圆形内的点&&
&&&&&&&&&&&&if&(dist&&&radius)&&
&&&&&&&&&&&&{&&
&&&&&&&&&&&&&&&&//&值域[0.5,1]&原点为1，边界为0.5&&
&&&&&&&&&&&&&&&&float&percent&=&(radius&-&dist)&/&&&
&&&&&&&&&&&&&&&&//&让圆内的点做sin曲线运动，效果为【圆形】交替变大变小
&&&&&&&&&&&&&&&&//&乘以系数16是让下面【s型线条】效果更加明显&&
&&&&&&&&&&&&&&&&float&theta&=&percent&*&percent&*&(sin(time))*16;&&
&&&&&&&&&&&&&&&&//&s,c为坐标系中相对x轴对称的值&&
&&&&&&&&&&&&&&&&float&s&=&sin(theta);&&
&&&&&&&&&&&&&&&&float&c&=&cos(theta);&&
&&&&&&&&&&&&&&&&//&当前点和当前点对应的sin,cos值求点积
&&&&&&&&&&&&&&&&//&将点积的值作为结果，将【圆形】变成【s型线条】
&&&&&&&&&&&&&&&&tc&=&vec2(dot(tc,&vec2(c,&-s)),&dot(tc,&vec2(s,&c)));&&
&&&&&&&&&&&&}&&
&&&&&&&&&&&&//&将当期UV移到值域为[0,1]的屏幕空间&&
&&&&&&&&&&&&tc&+=&&&
&&&&&&&&&&&&vec3&color&=&texture2D(tex,&tc).&&
&&&&&&&&&&&&return&vec4(color,&1.0);&&
&&&&&&&&}&&
&&&&&&&&vec4&main(vec2&fragCoord)&{&&
&&&&&&&&&&&&//&转为UV信息&&
&&&&&&&&&&&&vec2&uv&=&fragCoord.xy&/&iResolution.&&
&&&&&&&&&&&&uv.x&*=&x_y;&&
&&&&&&&&&&&&vec4&fragColor&=&filter(_MainTex,&uv,&iGlobalTime&*&2);&&
&&&&&&&&&&&&return&fragC&&&&
&&&&&&&&}&&
&&&&&&&&//end-------------------------------------------------------------&&
&&&&ENDCG&&
&&&&SubShader&{&&
&&&&&&&&Pass&{&&
&&&&&&&&&&&&CGPROGRAM&&
&&&&&&&&&&&&#pragma&vertex&vert&&
&&&&&&&&&&&&#pragma&fragment&frag&&
&&&&&&&&&&&&#pragma&fragmentoption&ARB_precision_hint_fastest&&&&&
&&&&&&&&&&&&ENDCG&&
&&&&&&&&}&&
&&&&FallBack&"Diffuse"&&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。