Shader学习二(裁剪面)

转载请注明出处

裁剪

1、 一种比较笨拙的裁剪方式:逐像素裁剪

使用discard 可以丢弃掉一些不需要渲染的像素点,需要写在fragment方法中,根据判断像素在==模型空间坐标系==的Y轴的坐标进行裁剪,比如下面的代码,就是吧一个模型的上半部分裁剪掉:

```
float4 frag(vertexOutput input) : COLOR
{
    if (input.posInObjectCoords.y > 0.0)
    {
        discard; // drop the fragment if y coordinate > 0
    }
    return float4(0.0, 1.0, 0.0, 1.0); // green
}
```

先来分析一下上面这个裁剪方法吧,是在即将要渲染这个片元的时候才进行discard,要知道我们游戏中有多少个模型,又有多少个像素点要渲染,对于硬件来说,走到这一步才忽略,从性能的角度来讲,是个很糟糕的办法,所以在我们正常的shader中,不要使用这个discard,否则带来的性能问题,绝对不是你想看到的。
    虽然这个方法不太好,但是我们还是需要学习它的一些东西的;上面说的实在模型坐标系中进行裁剪,那如果我们在游戏开发中,需要世界坐标系下,或者是在相机的视口下进行裁剪怎么办呢?仅仅是模型坐标系是满足不了的,那就看下下面的世界坐标系下的裁剪吧;
    如果你比较熟悉Unity中的脚本编写,你可能会尝试下面的做法,在Shader中定义一个四维的矩阵参数,值是(模型的世界坐标到模型坐标的矩阵)逆转换矩阵,然后在shader中进行计算片元在世界坐标系下的坐标转换为模型坐标系下的坐标进行计算,当你拥有了模型坐标系下的坐标,那么就很容易通过上面的方式来进行discard了。

2、裁剪面

主要是对物体的某些像素点进行忽略渲染,这里是用==Cull==关键字进行裁剪面渲染;这句话要写在CGPROGRAM 前面,因为不是CG语句,是个==Unity ShaderLab命令==

Shader中的Pass块里有这么一行代码 Cull Off,这一行在CGPROGRAM之前,因为它不是Cg,事实上,它是一个Unity ShaderLab的命令,意思是关闭任何三角面的裁剪,(也就是渲染任何三角面)。为什么要设置这个Off呢,因为Shader默认的裁剪方式是Cull Back,因为我们再游戏中,模型的内表面基本是不可见的,所以如果我们不设置Off,那就会裁剪我们看不到的那一面,也就是Back,当然,如果我们不需要渲染的话,最好关闭,==性能问题要时刻注意==。
    那么,Culling是怎么工作的呢,其实三角面和顶点还是正常的处理,只是在摄像机后处理阶段,GPU定义哪些三角面的某个顶点可见,哪些不可见,基于这个测试,每个三角面被分成前面和后面,如果标记了Cull Front 那么前面就会被discard,Cull Back反之,如果都没标记,那么双面都会被渲染。
    So,我们能裁剪什么呢?一个程序可能使用了多个不同的Shader来渲染模型外表面,很少渲染模型内表面的,下面的Shader有两个Pass块,第一个裁剪外表面,
其他的面也就是内表面被渲染成红色,第二个Pass块裁剪了内表面,吧外表面渲染成绿色,所以整体来说,下面的Shader吧模型的内表面渲染成红色,外表面渲染成绿色。

Shader "Cg shader with two passes using discard"
        {
            SubShader
            {
                // first pass (is executed before the second pass)
                Pass
                {
                    Cull Front  // cull only front faces
                    CGPROGRAM
                    #pragma vertex vert
                    #pragma fragment frag
            
                    struct vertexInput
                    {
                        float4 vertex :POSITION;
                    };
                    
                    struct vertexOutput
                    {
                        float4 pos : SV_POSITION;
                        float4 posInObjectCoords : TEXCOORD0;
                    };
                    
                    vertexOutput vert (vertexInput input)
                    {
                        vertexOutput output;
                        output.pos = mul(UNITY_MATRIX_MVP, input.vertex);
                        output.posInObjectCoords = input.vertex;
                        return output;
                    }
                    float4 frag  (vertexOutput input) :COLOR
                    {
                        if (input.posInObjectCoords.y > 0.0)
                        {
                            discard; // drop the fragment if y coordinate > 0
                        }
                        return float4(1.0, 0.0, 0.0, 1.0); // red
                    }
                    ENDCG
                }
            // second pass (is executed after the first pass)
                Pass
                {
                    Cull Back  // cull only back faces
                    CGPROGRAM
                    
                    #pragma vertex vert
                    #pragma fragment frag
                
                    struct vertexInput
                    {
                        float4 vertex :POSITION;
                    };
                    
                    struct vertexOutput
                    {
                        float4 pos : SV_POSITION;
                        float4 posInObjectCoords : TEXCOORD0;
                    }
                    ;
                    vertexOutput vert (vertexInput input)
                    {
                        vertexOutput output;
                        output.pos = mul(UNITY_MATRIX_MVP, input.vertex);
                        output.posInObjectCoords = input.vertex;
                        return output;
                    }
                    float4 frag (vertexOutput input) : COLOR
                    {
                        if (input.posInObjectCoords.y > 0.0)
                        {
                            discard; // drop the fragment if y coordinate > 0
                        }
                        return float4(0.0, 1.0, 0.0, 1.0); // green
                    }
                    ENDCG
                }
            }
        }
    }

混合渲染(Blending)

这一部分主要讲如何渲染透明物体,半透明物体,透明的物体需要能够看到后面的物体,所以它的颜色是自己的颜色和该物体后面的颜色的混合色;

  • 颜色混合

可编程图形管道(programmable graphics pipeline,计算每个片元的颜色输出的shader),混合了两个颜色,一个是当前显示的颜色pixel_color,一个是fragment函数计算出来的颜色 fragment_output,将这两个颜色通过不同的公式计算出来得到最终需要渲染的颜色,也就是fragment方法输出的颜色;至于使用什么公式和函数,不需要自己手动写,只需要配置即可;公式如下:

float4 result = SrcFactor * fragment_output + DstFactor * pixel_color;

SrcFactor和DscFactor是配置的float4类型RGBA颜色值

那么怎么在Shader中定义SrcFactor和Dsctor的值呢?

Blend {SrcFactor代码} {DstFactor代码}

最普通的代码就如下面的表格配置,直接替换即可:

代码 代表的值(SrcFactor or DstFactor)
One float4(1.0)
Zero float4(0.0)
SrcColor fragment_output
SrcAlpha float4(fragment_output.a)
DstColor pixel_color
DstColor float4(pixel_color.a)
OneMinusSrcColor float4(1.0) - fragment_output
OneMinusSrcAlpha float4(1.0 - fragment_output.a)
OneMinusDstColor float4(1.0) - pixel_color
OneMinusDstAlpha float4(1.0 - pixel_color.a)

float4(1.0) 是一种简写方式,完全写法是float4(1.0,1.0,1.0,1.0)

  • 透明度混合

举个栗子吧,一个比较简单的混合等式,透明度混合,在Unity 的Shader中定义如下:

Blend SrcAlpha OneMinusSrcAlpha

那上面的这句话执行了什么呢,是怎么计算的?请看下面的公式,

float4 result = float4(fragment_output.a) * fragment_output + float4(1.0 - fragment_output.a) * pixel_color;

==需要注意的点==

  • Tags { "Queue" = "Transparent"}

需要加入Tags标签,标记 ,这一行的意思是让所有透明的物体,在所有不透明的物体渲染完毕后再渲染,主要也是关于深度缓冲的问题,不透明的物体渲染会被透明的物体渲染覆盖掉,为了解决这个问题,我们首先渲染完全不透明的网格,然后再渲染透明的网格,一个网格是否被渲染成透明和完全不透明,就由这个标签决定

  • ZWrite Off

关闭写入深度缓冲,深度缓冲保留了了片元的深度值,丢弃了比它的深度值高的片元,对于透明渲染来讲,我们需要看透目标透明物体,因此,透明物体渲染的时候,不应该剔除之前已经渲染到该片元的颜色深度缓冲,所以UnityShaderLab引入了剔除和深度测试。

渲染的顺序其实还是会影响到渲染结果的,比如你透过一个几乎不透明的绿色玻璃杯,看后面的一个几乎不透明的红色玻璃杯,那你几乎只能看到绿色,相反过来,你几乎只能看到红色,所以渲染的的前后顺序不同,出来的渲染效果就会有所不同,为了避免这种失真,所以建议使用(Additive-Bleding)饱和相加的方法来混合源像素和目标像素的颜色分量,或者使用小阴影来解决这种失真效果。

上面的例子确实可以不渲染物体的内表面,可是一旦我们从外部看透明物体,我们还是应该渲染内部,使用Cull Off可以渲染内表面,,然而,如果我们只是禁用裁剪,我们可能得到一个问题:如上面所说,它造成透明的物体本来应该裁剪的片元也被渲染出来了,会导致三角面被渲染的顺序是乱掉的。因此,我们需要确定内表面先被渲染,然后再渲染外表面,在Unity ShaderLab中可以使用两个Pass块在不同的Order下来渲染同一个网格;也就是第一个Pass块先渲染内表面,另一个再渲染外表面

小Tip: 比如要渲染两个物体A和B,A是完全不透明物体,B是半透明物体,透过B渲染的话,需要先渲染A,然后渲染B的内表面,然后是B的外表面,所以渲染B就需要使用上面说的两个Pas块。

透明顺序排列(Order-Independent Transparency)

上一小节说到,三角面的渲染顺序决定着混合渲染的结果;这一节主要描述如果避免排序问题导致的渲染问题;

  • Additive Blending (相加混合)

颜色被这种方式叠加以后,多张图片叠加起来看,会让我们很难看出来图片到底哪个在前,哪个灾后,怎么实现还是用上面讲到的那个混合公式,但是这个混合方式的 DstFactor值必须是One,SrcFactor不能依赖pixel-color,值可以使One,SrcColor,SrcAlpha,OneMinusSrcColor,OneMinusSrcAlpha;这种混合方法一半用于处理光源和爆炸效果

  • Multiplicative Blending (相乘混合)

这种方式是用多个灰度过滤器,过滤器应用到相机上的顺序不会影响对图像的减弱程度,然后在三角面光栅化之前,保持帧缓冲器内的强弱度一致。

SrcFactor必须为 Zero ,DstFactor必须依靠片元颜色(fragment color),可以是SrcColor,SrcAlpha,OneMinusSrcColor,OneMinusSrcAlpha;

Shader "Cg shader using order-independent blending" {
    SubShader {
        Tags { "Queue" = "Transparent" }
        // draw after all opaque geometry has been drawn
        Pass {
            Cull Off // draw front and back faces
            ZWrite Off // don't write to depth buffer
            // in order not to occlude other objects
            Blend Zero OneMinusSrcAlpha // multiplicative blending
            // for attenuation by the fragment's alpha
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            float4 vert(float4 vertexPos : POSITION) : SV_POSITION
            {
                return mul(UNITY_MATRIX_MVP, vertexPos);
            }
            float4 frag(void) : COLOR
            {
                return float4(1.0, 0.0, 0.0, 0.3);
            }
            ENDCG
        }
        Pass {
            Cull Off // draw front and back faces
            ZWrite Off // don't write to depth buffer
            // in order not to occlude other objects
            Blend SrcAlpha One // additive blending to add colors
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            float4 vert(float4 vertexPos : POSITION) : SV_POSITION
            {
                return mul(UNITY_MATRIX_MVP, vertexPos);
            }
            float4 frag(void) : COLOR
            {
                return float4(1.0, 0.0, 0.0, 0.3);
            }
            ENDCG
        }
    }
}

注意:上面的两个Pass块的顺序非常重要,第一个是背景是减弱的,第二章是增强的

Silhouette Enhancement(增强轮廓)

这个主要是想实现一个效果:物体的整体的透明度是不一样的,也就是在渲染这个物体的时候,它的不同的部位的透明度是不一样的,在没有光照的情况下,也要有三维立体感,所以这一节需要使用到物体的法线向量。

  • 平滑表面的轮廓

通过计算点到观察点的方向V和点的法线向量N是否垂直来判定该点是不是在这个表面上;也就是如果V点乘N之后得到的结果为0,就认为该点不在物体的表面上,如果得到的值接近于0,那么我们就认为改点在物体表面上;

Increasing the Opacity at Silhouettes (增加轮廓的不透明度)
为了达到我们想要的效果,如果某个点的观察方向和该点的法线向量的点乘结果接近于0,那么我们应该提升某个点的不透明度,也就是值越小,越不透明;具体计算公式如下:

\alpha^` = min{\left(1, {\frac{\left(X\right)}{|VN|}}\right)}

在Shader中实现公式

为了实现上面的公式,有以下几个问题:

  1. 这个计算是写在那个函数中呢?fragment还是vertex呢?
    在一些情况下,很明显因为实现需要进行纹理贴图,而纹理贴图必须写在fragment中,但是如果把代码实现在vertex方法中呢,运行效率会更高(当然除了低分辨率的图片),因此,如果你更注重性能,选择在vertex中实现更好;相反,如果你更注重图片的质量,就要写在fragment中了,具体情况具体定吧,总之就在逐像素光照和逐顶点光照进行平衡;

  2. 在哪个坐标系下进行公式计算?
    又出现两个选择,在世界坐标系下是个好的选择,因为在Unity中很多变量的定义都是在世界坐标系下的

  3. 最后一个问题是:我们从哪里获得公式的参数呢?
    比如法线向量,从点到观察位置的方向怎么获取呢,alpha可以在Shader的属性中定义,法线向量是个标准的顶点输入参数,这个没问题,但是观察方向需要在shader中使用Unity定义好的_WorldSpaceCameraPos(就是世界坐标系下相机的位置)来计算得到;因此,我们必须在进行计算之前先把顶点坐标和法线向量转换到世界坐标系中;转换的矩阵 _Object2World 是将顶点坐标从模型空间下转换到世界坐标系下,还有一个它的逆矩阵 _World2Object可以从世界坐标系下转换到模型坐标系下;

//下面是观察方向的计算公式,世界坐标系下相机位置减去顶点的世界坐标系下的位置得到的向量就是观察向量
output.viewDir = normalize(_WorldSpaceCameraPos- float3(mul(modelMatrix, input.vertex)));

另外一步是法线向量就需要通过逆矩阵来从世界坐标下到模型空间下,特别注意这里是==左乘==,具体的矩阵计算,请自行学习,这里不做补充;

output.normal = normalize(float3(mul(float4(input.normal, 0.0), _World2Object)));

注意最终计算出来的透明度可能大于1,所以要进行一下min函数计算

完成代码如下

Shader "Cg silhouette enhancement" {
    Properties {
        _Color ("Color", Color) = (1, 1, 1, 0.5)
        // user-specified RGBA color including opacity
        }
        SubShader 
        {
            Tags { "Queue" = "Transparent" }
            // draw after all opaque geometry has been drawn
            Pass {
            ZWrite Off // don't occlude other objects
            Blend SrcAlpha OneMinusSrcAlpha // standard alpha blending
            CGPROGRAM
                #pragma vertex vert
                #pragma fragment frag
                uniform float4 _Color; // define shader property for shaders
                // The following built-in uniforms are also defined in
                // "UnityCG.cginc", which could be #included
                uniform float4 unity_Scale; // w = 1/scale; see _World2Object
                uniform float3 _WorldSpaceCameraPos;
                uniform float4x4 _Object2World; // model matrix
                uniform float4x4 _World2Object; // inverse model matrix
                // (all but the bottom-right element have to be scaled
                // with unity_Scale.w if scaling is important)
                struct vertexInput {
                    float4 vertex : POSITION;
                    float3 normal : NORMAL;
                };
                struct vertexOutput {
                    float4 pos : SV_POSITION;
                    float3 normal : TEXCOORD;
                    float3 viewDir : TEXCOORD1;
                };
                vertexOutput vert(vertexInput input)
                {
                    vertexOutput output;
                    float4x4 modelMatrix = _Object2World;
                    float4x4 modelMatrixInverse = _World2Object;
                    // multiplication with unity_Scale.w is unnecessary
                    // because we normalize transformed vectors
                    output.normal = normalize(float3(
                    mul(float4(input.normal, 0.0), modelMatrixInverse)));
                    output.viewDir = normalize(_WorldSpaceCameraPos
                    - float3(mul(modelMatrix, input.vertex)));
                    output.pos = mul(UNITY_MATRIX_MVP, input.vertex);
                    return output;
                }
                float4 frag(vertexOutput input) : COLOR
                {
                    float3 normalDirection = normalize(input.normal);
                    float3 viewDirection = normalize(input.viewDir);
                    float newOpacity = min(1.0, _Color.a
                    / abs(dot(viewDirection, normalDirection)));
                    return float4(float3(_Color), newOpacity);
                }
            }
            ENDCG
        }
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • <转>我也忘了转自哪里,抱歉,感谢原作者 什么是Shader Shader(着色器)是一段能够针对3D对象进行操作...
    星易乾川阅读 5,577评论 1 16
  • 转载注明出处:点击打开链接 Shader(着色器)是一段能够针对3D对象进行操作、并被GPU所执行的程序。Shad...
    游戏开发小Y阅读 3,323评论 0 4
  • 1, OpenGL 编程模型 2, 管线流程(重点,每一个细节都要讲清楚) 渲染流水线,就是一系列有序的处理阶段的...
    rogerwu1228阅读 725评论 0 0
  • 很多时候,你是否觉得想要做的事情有很多,但是做起来效率又很低下呢? 想了很久要去健身,下了好几次决心要减下10斤,...
    轻轻松小步子阅读 347评论 2 3
  • 提到计划,我真心觉得计划赶不上变化。但是还是有两个计划可以今年完成。1.跟着猫叔学习。一步一步来,脚踏实地,坚持下...
    不爱吃香菇阅读 105评论 0 0