【Unity Shader入门精要 第10章】高级纹理(二)

1. 渲染纹理

渲染纹理(Render Texture —— RT)是非常常用的一种渲染技术,其工作原理是将指定摄像机的渲染结果储存到一张纹理(中间缓存)上,而不是直接显示到屏幕上,通过这张中间纹理就可以对当前渲染结果添加各种效果的处理。

渲染纹理的生成通常有两种方式:

  • 在工程中直接创建,通过这种方式创建的RT,我们可以指定它的分辨率、抗锯齿等级、颜色格式等
    在这里插入图片描述
    在这里插入图片描述
  • 通过GrabPass或OnRenderImage函数抓取摄像机渲染结果,此时Unity会将抓取的图像储存在一张渲染纹理中,通过这种方式创建的渲染纹理,保持跟屏幕相同的分辨率

2. 简单镜子效果

这个例子中我们通过渲染纹理实现一个简单的镜子效果。

  • 首先在工程中创建一个渲染纹理 Chapter_10_Mirror_RT
  • 创建一个摄像机用来模拟镜子看到的视角,调整摄像机的各项参数,使其渲染的结果满足我们需要的镜子的效果
  • 将 Chapter_10_Mirror_RT 拖到摄像机的 Target Texture选项,该摄像机的渲染结果就会保存到 Chapter_10_Mirror_RT中,而不会直接显示到屏幕上
    在这里插入图片描述
  • 在场景中创建一个 Quad 作为镜子,为 Quad 创建测试材质 Chapter_10_Mirror_Mat
  • 创建 Chapter_10_Mirror_Shader 作为测试Shader,并赋给Chapter_10_Mirror_Mat
  • 将 Chapter_10_Mirror_RT 赋给 Chapter_10_Mirror_Shader 的 MainTex,这样摄像机的渲染结果就可以作为一张正常的纹理被测试 Shader 使用了

另外需要注意的一点,为了模拟镜子的镜像效果,在对RT采样时,需要通过 uv.x = 1 - uv,x 对采样的X坐标进行翻转

测试Shader如下:

Shader "MyShader/Chapter_10/Chapter_10_Mirror_Shader"
{
    Properties
    {
        _MainTex("MainTex", 2D) = "white"{}
        _Color("Color", Color) = (1, 1, 1, 1)
    }
    SubShader
    {
        Pass
        {
            Tags{"LightMode" = "ForwardBase"}
            
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma multi_compile_fwdbase
            #include "UnityCG.cginc"
            #include "Lighting.cginc"
            #include "AutoLight.cginc"
            
            struct a2v
            {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                float2 uv : TEXCOORD0;
            };
            
            struct v2f
            {
                float4 pos : SV_POSITION;
                float2 uv : TEXCOORD0;
                float3 worldNormal : TEXCOORD1;
                float3 worldPos : TEXCOORD2;
                SHADOW_COORDS(3)
            };
            
            sampler2D _MainTex;
            float4 _MainTex_ST;
            fixed4 _Color;
            
            v2f vert(a2v v)
            {
               v2f o;
               o.pos = UnityObjectToClipPos(v.vertex);
               o.uv = TRANSFORM_TEX(v.uv, _MainTex);
               o.uv.x = 1 - o.uv.x;
               o.worldNormal = UnityObjectToWorldNormal(v.normal);
               o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
               TRANSFER_SHADOW(o);
               return o;
            }
            
            fixed4 frag(v2f i) : SV_Target
            {
                fixed3 _ambient = UNITY_LIGHTMODEL_AMBIENT.rgb;
                
                fixed3 _samplerColor = tex2D(_MainTex, i.uv).rgb;
                float3 _worldNormal = normalize(i.worldNormal);
                float3 _worldLight = normalize(_WorldSpaceLightPos0.xyz);
                fixed3 _diffuse = _LightColor0.rgb * _Color.rgb * _samplerColor * (0.5 * dot(_worldLight, _worldNormal) + 0.5);
                
                UNITY_LIGHT_ATTENUATION(_atten, i, i.worldPos);
                return fixed4(_ambient + _diffuse * _atten, 1);
            }
            
            ENDCG
        }
    }
}

效果如下:
在这里插入图片描述

3. 玻璃效果

下面的例子中,通过在 SubShader 中调用 GrabPass 抓取摄像机渲染的内容生成一张 Render Texture,通过对这张RT进行采样显示,模拟玻璃的透明效果。

使用GrabPass抓取屏幕图像生成RT有两种方式:

  • 指定纹理名,形式为 GrabPass {“_XXXTexture”} ,此时会动态生成一张名为 _XXXTexture 的 RenderTexture,并把当前摄像机已经渲染的图像存储到该纹理中,同时,Shader 中也需要声明名为 _XXXTexture 的变量,在后续的Pass中就可以对这张纹理进行使用了。使用这种方式进行抓取时,场景中所有指定了相同RT名字的物体使用的都是同一张渲染纹理,也就是同名情况只会抓取一次,在满足需求的情况下,可以节省下反复抓取屏幕的消耗。
  • 不指定纹理名,形式为 GrabPass {},此时会动态生成一张名为固定为 _GrabTexture 的 RenderTexture,并把当前摄像机已经渲染的图像存储到该纹理中。每个调用 GrabPass {} 的物体都会为自己生成一张独立的 _GrabTexture,有可能会造成浪费。

通过这种方式模拟玻璃的透明效果虽然不进行透明度混合,但 SubShader 的 “Queue” 标签依然需要设置为 “Transparent”,这是为了在抓取屏幕时所有不透明的物体都已经渲染完成了,这样才能抓取到完整的显示内容,从而达到透过玻璃看到后面物体的效果。

在通过GrabPass获取了RT之后,还需要确定对应的采样坐标,由于存在针对不同平台的纹理翻转等问题,针对GrabPass纹理,可以通过内置的方法来获取采样坐标:

o.screenPos = ComputeGrabScreenPos(o.pos);

注意这里虽然方法名叫 ScreenPos,但其实得到的并不是屏幕坐标,而是一个特殊构造的坐标

inline float4 ComputeGrabScreenPos (float4 pos) {
    #if UNITY_UV_STARTS_AT_TOP
    float scale = -1.0;
    #else
    float scale = 1.0;
    #endif
    float4 o = pos * 0.5f;    
    o.xy = float2(o.x, o.y*scale) + o.w;
#ifdef UNITY_SINGLE_PASS_STEREO
    o.xy = TransformStereoScreenSpaceTex(o.xy, pos.w);
#endif
    o.zw = pos.zw;
    return o;
}

该方法传进来的是一个投影空间下的坐标,这个坐标已经经过了一系列这样那样的空间变换,此时范围在[-w, w]之间,由于我们需要用它来进行采样,因此只需要关心其xy的值。

  • 方法中先乘以0.5将其缩放到[-0.5w, 0.5w]的范围
  • 然后处理翻转,并上移0.5w(注意此时o.w是pos.w * 0.5的结果,也就是上移了0.5w),将xy的范围映射到了[0, w]的区间
  • 最后重新保存回原始的z和w值,此时screenPos.w的值又变回了原始的w值
  • 在片元着色器中,通过 i.screenPos.xy/i.screenPos.w 将xy缩放至 [0, 1] 的区间后就是真正的采样坐标了

至于为什么要保留w分量到片元着色器中再进行除法,是因为在顶点着色器到片元着色器之间会进行线性插值,由于此时Pos为投影空间的坐标,对于投影摄像机来说,这是个非线性的空间,如果先除以w后进行线性插值的话,会得到错误结果,如果保留各个分量分别进行线性插值最后在片元着色器中进行除法,就可以抵消这个影响(具体数学原理不详,反正我乐在92页是这么说的)。

另外,为了更清晰地体现折射对于光线的影响,模拟透过玻璃看到背后物体的效果,这里还使用了一张法线贴图,通过法线的xy值对采样坐标进行了偏移。法线提供了一个偏移方向和偏移量,要得到偏移后的实际采样坐标,还需要乘以RT的纹素大小:

sampler2D _RefractTex;
float4 _RefractTex_TexelSize;

与_ST后缀的变量类似,_TexelSize 后缀的变量会为我们提供对应纹理的纹素大小信息

测试Shader如下:

Shader "MyShader/Chapter_10/Chapter_10_Glass_Shader"
{
    Properties
    {
        _Color("Color", Color) = (1, 1, 1, 1)
        _BumpTex("BumpTex", 2D) = "bump"{}
        _EvnCube("EvnCube", Cube) = "_skybox"{}
        _RefractRatio("RefractRatio", Range(0.1, 1.0)) = 0.5
        _ReflToRefr("ReflToRefr", Range(0, 1)) = 0
        _BumpScale("BumpScale", Range(0.1, 50)) = 1
        
    }
    SubShader
    {
        Tags { "Queue"="Transparent" "RenderType"="Opaque" }
        
        GrabPass {"_RefractTex"}
        GrabPass{}
        Pass
        {
            Tags{"LightMode" = "ForwardBase"}
            
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma multi_compile_fwdbase
            #include "UnityCG.cginc"
            #include "Lighting.cginc"
            #include "AutoLight.cginc"
            
            struct a2v
            {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                float4 tangent : TANGENT;
                float2 uv : TEXCOORD0;
            };
            
            struct v2f
            {
                float4 pos : SV_POSITION;
                float4 tangetToWorld0 : TEXCOORD0;
                float4 tangetToWorld1 : TEXCOORD1;
                float4 tangetToWorld2 : TEXCOORD2;
                float2 bumpUV : TEXCOORD3;
                float3 worldRefl : TEXCOORD4;
                float4 screenPos : TEXCOORD5;
                SHADOW_COORDS(6)
            };
            
            fixed4 _Color;
            sampler2D _BumpTex;
            float4 _BumpTex_ST;
            samplerCUBE _EvnCube;
            fixed _RefractRatio;
            fixed _ReflToRefr;
            sampler2D _RefractTex;
            float4 _RefractTex_TexelSize;
            float _BumpScale;
            
            v2f vert(a2v v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                
                float3 _worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
                float3 _normal = normalize(v.normal);
                float3 _biNormal = normalize(cross(v.tangent.xyz, v.normal) * v.tangent.w);
                float3 _tagent = normalize(v.tangent.xyz);
                o.tangetToWorld0 = float4(_tagent.x, _biNormal.x, _normal.x, _worldPos.x);
                o.tangetToWorld1 = float4(_tagent.y, _biNormal.y, _normal.y, _worldPos.y);
                o.tangetToWorld2 = float4(_tagent.z, _biNormal.z, _normal.z, _worldPos.z);
                o.bumpUV = TRANSFORM_TEX(v.uv, _BumpTex);
                
                float3 _objView = ObjSpaceViewDir(v.vertex);
                float3 _objRefl = reflect(-_objView, v.normal);
                o.worldRefl = UnityObjectToWorldDir(_objRefl);
                o.screenPos = ComputeGrabScreenPos(o.pos);
                TRANSFER_SHADOW(o);
                return o;
            }
            
            fixed4 frag(v2f i) : SV_Target
            {
                fixed3 _ambient = UNITY_LIGHTMODEL_AMBIENT.rgb;
                
                float3 _bump = UnpackNormal(tex2D(_BumpTex, i.bumpUV)).xyz;
                float2 _offset = _bump.xy * _BumpScale * _RefractTex_TexelSize.xy;
                i.screenPos.xy = i.screenPos.xy + _offset;
                fixed3 _refractColor = tex2D(_RefractTex, i.screenPos.xy/i.screenPos.w).rgb;
                
                fixed3 _reflectColor = texCUBE(_EvnCube, i.worldRefl).rgb;
                
                _bump.z = sqrt(1.0 - dot(_bump.xy, _bump.xy));
                float3 _worldNormal = normalize(float3(dot(i.tangetToWorld0.xyz, _bump), dot(i.tangetToWorld1.xyz, _bump), dot(i.tangetToWorld2.xyz, _bump)));
                float3 _worldLight = normalize(_WorldSpaceLightPos0.xyz);
                fixed3 _diffuse = _LightColor0.rgb * _Color.xyz * (0.5 * dot(_worldLight, _worldNormal) + 0.5);
                
                float3 _worldPos = float3(i.tangetToWorld0.w, i.tangetToWorld1.w, i.tangetToWorld2.w);
                UNITY_LIGHT_ATTENUATION(_atten, i, _worldPos);
                fixed3 _finalColor = lerp(_reflectColor, _refractColor, _ReflToRefr);
                return fixed4(_ambient + _diffuse * _finalColor * _atten, 1);
            }
            
            ENDCG
        }
    }
}

效果如下:
在这里插入图片描述

4. 程序纹理

4.1 通过脚本生成纹理

这部分比较简单,代码中创建一个Texture2D,根据需求调用 SetPixel 或 SetPixels 方法设置像素,关键是最后不要忘了调用 Apply 方法。

一个简单的测试脚本(Shader部分就是单纯的采样纹理进行显示):

using UnityEngine;

public class Chapter_10_CreateTexture : MonoBehaviour
{
    public int Width = 512;
    public int Height = 512;
    public GameObject MatObj;

    private int mDis = 64;
    private int mHalfLine = 2;
    void Start()
    {
        CreateTexture();
    }

    void CreateTexture()
    {
        Texture2D _tex = new Texture2D(Width, Height);
        int _left = 0;
        for (int _w = 0; _w < Width; _w++)
        {
            for (int _h = 0; _h < Height; _h++)
            {
                _left = _w % mDis;
                if (_left <= mHalfLine || _left > Width - mHalfLine)
                {
                    _tex.SetPixel(_w, _h, Color.white);
                }
                else
                {
                    _left = _h % mDis;
                    if (_left <= mHalfLine || _left > Height - mHalfLine)
                    {
                        _tex.SetPixel(_w, _h, Color.white);    
                    }
                    else _tex.SetPixel(_w, _h, Color.gray);
                }
            }
        }
        _tex.Apply();

        Material _material = MatObj.GetComponent<MeshRenderer>().material;
        _material.SetTexture("_MainTex", _tex);
    }

}

效果如下:
在这里插入图片描述

4.2 程序材质

Procedural Materials,一类专门使用程序纹理的特殊材质。
程序材质和它使用的纹理都不是在Unity内创建的,而是通过一些特定的工具生成,如Substance Designer。

  • 12
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Unity Shader是一种用于渲染图形的程序,它可以控制对象的表面颜色、纹理、透明度、反射等属性,从而实现特殊的视觉效果。对于游戏开发者来说,掌握Shader编写技巧是非常重要的。 以下是关于Unity Shader入门要: 1. ShaderLab语言 ShaderLab是Unity中用于编写Shader的语言,它是一种基于标记的语言,类似于HTML。ShaderLab可以用于定义Shader的属性、子着色器、渲染状态等信息。 2. CG语言 CG语言是Unity中用于编写Shader的主要语言,它是一种类似于C语言的语言,可以进行数学运算、向量计算、流程控制等操作。CG语言可以在ShaderLab中嵌入,用于实现Shader的具体逻辑。 3. Unity的渲染管线 Unity的渲染管线包括顶点着色器、片元着色器、几何着色器等组件,每个组件都有不同的作用。顶点着色器用于对对象的顶点进行变换,片元着色器用于计算每个像素的颜色,几何着色器用于处理几何图形的变形和细节等。 4. 模板和纹理Shader中,我们可以使用纹理来给对象添加图案或者贴图,也可以使用模板来控制对象的透明度、反射等属性。纹理可以通过内置函数tex2D()来获取,模板可以通过内置函数clip()来实现裁剪。 5. Shader的实现 Shader的实现需要注意以下几点: - 在ShaderLab中定义Shader的属性、子着色器、渲染状态等信息。 - 在CG语言中实现Shader的具体逻辑,包括顶点着色器、片元着色器等内容。 - 使用纹理和模板来实现特定的视觉效果。 - 在对象上应用Shader,通过调整Shader的属性来达到不同的效果。 以上是关于Unity Shader入门要,希望对你有所帮助。如果你想更深入地了解Shader的编写技巧,可以参考官方文档或者相关教程。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值