U3d Shader语法教程2:顶点着色器(vertex)、片元着色器(fragment )、结构体(Struct)

说到着色器,不得不先说说流水线

GPU流水线和着色器

GPU流水线.jpg

  当GPU从CPU得到渲染命令后,就会进行一系列流水线操作,最终把图元渲染到屏幕上。
对于几何阶段和光栅化阶段,开发者无法拥有绝对的控制权,其实现的载体是GPU。GPU通过实现流水线化,大大加快了渲染速度。
  几何阶段和光栅化阶段可以分成若干更小的流水线阶段,这些流水线阶段由GPU实现,每个阶段GPU提供了不同的可配置性或可编程性。
  从图中可以看出,GPU的渲染流水线接收顶点数据作为输入。这些顶点数据是由应用阶段加载到显存中,再由DrawCall指定的。这些数据随后被传递给顶点着色器。

1.顶点着色器(Vertex Shader):完全可编程
  通常用于实现顶点的空间变换、顶点着色等功能。
  顶点着色器是流水线的第一个阶段,它的输入来自于CPU。顶点着色器的处理单位是顶点,输入进来的每个顶点都会调用一次顶点着色器。顶点着色器本身并不会创建或者销毁顶点,而且无法得到顶点与顶点之间的关系。
  例如:我们无法得知两个顶点是否属于一个三角网格。正因为这样的相互独立性,GPU可以利用本身的特性并行化处理每一个顶点。
  顶点着色器需要完成的工作主要有:坐标变换和顶点光照。当然还可以输出后续阶段所需的数据。

2.裁剪(Clipping):可配置
  这一阶段的目的是将那些不再摄像机视野内的顶点裁减掉,并剔除某些三角图元的面片。
  目的:处理不在摄像机视野范围内的物体。
  一个图元和摄像机视野有三种关系:完全在视野内、部分在视野内、完全在视野外。完全在视野内的图元即系传递给下一个流水线阶段,完全在视野外的图元就不会向下传递,因为不需要被渲染。而那些部分在视野内的图元就需要进行一个处理,那就是裁剪。
和顶点着色器不同,这一步是不可编程的。无法通过编程来控制裁剪的过程,是硬件上的固定操作
但是可以自定义一个剪裁操作来对这一步进行配置

3.屏幕映射(Screen Mapping):不可配置和编程的
  这一步输入的坐标仍然是三维坐标系下的坐标。
  负责把每个图元的坐标转换到屏幕坐标系中。

4.三角形设置(Triangle Setup)和三角形变量(Triangle Traversal)阶段都是固定函数(Fixed-Function)的阶段
  这一阶段开始进入光栅化阶段。从上一个阶段输出的信息是屏幕坐标系下的顶点位置以及和它们相关的额外信息,如:深度值(Z)、法线方向、视角方向等。
  光栅化阶段有两个重要的目标:计算每个图元的覆盖了哪些像素,以及为这些像素计算颜色。
  三角形设置:计算光栅化一个三角网格所需的信息。具体来讲,上一个阶段输出的都是三角网格的顶点,即我们得到的是三角网格每条边的两个顶点。但是如果要得到整个三角形网格对像素的覆盖情况,我们就必须计算每条边上的像素坐标。为了能够计算边界像素的坐标信息,我们就需要得到三角形边界的表示方式。这样一个计算三角形网格表示数据的过程叫做三角形设置。
  三角形遍历:检查每个像素是否被一个三角网格所覆盖。如果覆盖的话,就会生成一个片段(fragment)。这样一个找到哪些像素被三角网格覆盖的过程就是三角形遍历,这个阶段也被称为扫描变换(Scan Conversion)。
  片段并不是真正意义上的像素,而是包含了很多状态的集合,这些状态用于计算每个像素的最终颜色。

5.片段着色器(Fragment Shader):完全可编程
  用于实现逐片元(Per-Fragment)的着色操作。
片段着色器的输入是上一个阶段对顶点信息插值得到的结果,更具体来说,是根据那些从顶点着色器中输出的数据插值得到的。输出的是一个或者多个颜色值。
  这一个阶段可以完成很多重要的渲染技术,其中最重要的技术之一就是纹理采样。为了在片段着色器中进行纹理采样,通常会在顶点着色器阶段输出每个顶点对应的纹理坐标,然后经过光栅化阶段对三角网格的3个顶点对应的纹理进行插值后,就可以得到其覆盖的片段的纹理坐标了。

6.逐片元操作(Per-Fragment Operations):不可编程,但具有很高的可配置性
  负责执行很多重要的操作,例如:修改颜色、深度缓冲、进行混合等。
  这一阶段OpenGL-逐片元操作 DirectX-输出合并阶段
  这一阶段有几个重要的任务:
  (1) 决定每个片元的可见性:这涉及了很多测试工作,例如:深度测试、模板测试
  (2) 如果一个片元通过了所有的测试,就需要把这个片元的颜色值和已经储存在颜色缓冲区中的颜色进行合并,混合




顶点/片元着色器语法

Pass{
      //标签和状态  这里不明白的请看上一章
    CGPROGRAM
    //编译指令,指定着色器处理函数
    #pragma  vertex vert          
    #pragma fragment frag     
  
    float4 vert(float4 v: POSITION) :SV_POSITION{
        return mul(UNITY_MAXTRIX_MVP,v);
    }

   fixed4 frag(): SV_TARGET{
      return fixed4(1.0,1.0,1.0,1.0);
    }

   ENDCG
   //其他设置
}
vertex 输入类型(从应用阶段模型数据传递) 描述
POSITION 模型空间中的顶点位置,一般是float4类型
NORMAL 顶点的法线,通常是float3类型
TANGENT 顶点切线,通常是float4类型
TEXCOORDn 比如TEXCOORD1、 TEXCOORD2 该顶点的纹理坐标,TEXCOORD0表示第一组纹理以此类推,通常是float2或者float4
COLOR 顶点的颜色,通常是fixed4或者float4类型
vertex输出类型(传递给片元着色器) 描述
SV_POSITION 裁减空间中的顶点坐标,至少包含一个
COLOR0 用于输出第一组顶点颜色,但不是必须的
COLOR1 用于输出第二组颜色,但不是必须的
TEXCOORD0~TEXCOORD7 输出纹理坐标,但不是必须的
fragment 输出类型 描述
SV_Target 输出值将会存储到渲染目标(render target)中




结构体

struct StructName{
    Type  Name : Semantic;
    Type  Name : Semantic;
     ...
};


  • Semantic: 是上表中 vertex的输入和输出类型;
    • 指明变量取模型中的那个数据(应用阶段自动传递)
    • 具体计算后输出给片元处理的数据类型


使用结构体,让片元着色器接收顶点着色器输出数据

Shader "Unlit/Shader_1"
{
    Properties
    {
        _Color("Color Tint" ,color) = (1.0, 1.0, 1.0, 1.0)
    }
    SubShader
    {
        Pass
        {
            CGPROGRAM
            #pragma vertex vert 
            #pragma fragment frag


            fixed4 _Color;

            struct a2v
            {
                float4 vertex: POSITION;  // [POSITION] - 指明模型顶点坐标数据
                float3 normal: NORMAL; //[NORMAL] - 指明顶点发现数据
                float4 texcoord: TEXCOORD0; //[TEXCOORD0] - 指明顶点纹理坐标
            };

            struct v2f {
                float4 pos: SV_POSITION; //[SV_POSITION] - 指明裁减空间中的位置 必须存在
                fixed3 color : COLOR0; //[COLOR0] - 一般用于存储颜色信息
            };



            v2f vert(a2v v)
            {
                v2f o; //声明输出结构
                o.pos = UnityObjectToClipPos(v.vertex);//计算裁减空间中的位置

                //v.normal 包含了顶点的发现方向,其分量范围在[-1.0, 1.0]
                
                o.color = v.normal * 0.5 + fixed3(0.5, 0.5, 0.5);//根据法线计算颜色, 存储到o.color 中 传递给片元着色器
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                fixed3 c = i.color;
                //使用_Color来计算最后的颜色
                c *= _Color.rgb;
                return fixed4(c, 1.0);
            }

        ENDCG
        }
    }
}

白色
红色
  • "Unlit/Shader_1" : 根据输入颜色和法线计算出模型的颜色

其中顶点着色器根据发现计算颜色
o.color = v.normal * 0.5 + fixed3(0.5, 0.5, 0.5);

最后片元着色器根据材质输入的颜色,计算出最终的颜色
c *= _Color.rgb;

至于变量_Color.rgb的语法
请看我的 Unity Shader Cg/HLSL 数值类型篇幅

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容