美文网首页
叠加网格效果

叠加网格效果

作者: LEO_青蛙 | 来源:发表于2020-06-07 12:13 被阅读0次
叠加网格效果

GitHub项目地址

叠加网格效果,其实就是简单的叠加一层网格纹理的效果,但是项目中需要把网格往视觉方向正面叠加,所以我这里就实现了两种叠加效果。


网格纹理

网格纹理的实现:

准备一张如上图的网格纹理,黑色(0,0,0,1),白色(1,1,1,1),所以当颜色叠加时,就会出现白色的网格。
注意网格纹理只有一个“十字”白色纹理,所以需要使用纹理的Tiling属性。


Tiling属性

通过属性_GridType实现了两个叠加效果

(1)按照原纹理的uv取样,实现了无规则的叠加效果
(2)按照模型世界坐标的位置取样,实现了正面叠加的效果

Shader "Custom/GridShader"
{
    Properties
    {
        _MainTex ("Main Tex", 2D) = "white" {}

        _GridTex ("Grid Tex", 2D) = "white" {}
        _GridColor ("Grid Color", COLOR) = (0,1,1,1)

        [MaterialToggle]_GridType ("Grid Type", float) = 0
        _USpeed ("USpeed", Range(0, 50)) = 0
        _VSpeed ("VSpeed", Range(0, 50)) = 20
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float2 gridUV : TEXCOORD1;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

            sampler2D _GridTex;
            float4 _GridTex_ST;

            float4 _GridColor;
            
            bool _GridType;

            float _USpeed;
            float _VSpeed;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);

                fixed4 worldPos = mul(unity_ObjectToWorld, v.vertex);

                if(_GridType)
                {
                    float2 uv = float2(worldPos.x, worldPos.y - 0.5 * worldPos.z);
                    o.gridUV = TRANSFORM_TEX(uv, _GridTex);
                }
                else
                {
                    o.gridUV = TRANSFORM_TEX(v.uv, _GridTex);
                }
                o.gridUV.x += _USpeed * _Time.x;
                o.gridUV.y += _VSpeed * _Time.x;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);
                fixed3 emissive = tex2D(_GridTex, i.gridUV) * _GridColor.rgb * _GridColor.a;
                col.rgb += emissive;
                return col;
            }
            ENDCG
        }
    }
}

相关文章

  • 叠加网格效果

    GitHub项目地址 叠加网格效果,其实就是简单的叠加一层网格纹理的效果,但是项目中需要把网格往视觉方向正面叠加,...

  • 背景与边框

    1.网格背景 通过把两幅不同线宽、不同颜色的网格图案叠加起来形成的逼真蓝图网格 代码:

  • 水模拟

    1.表面网格的几何波动 2.网格上的法线扰动 水的高度由简单的周期波叠加而成,通过正弦函数叠加后得到的连续函数,描...

  • 背景与边框

    复杂的背景图案 1.网格背景 通过把两幅不同线宽、不同颜色的网格图案叠加起来形成的逼真蓝图网格 代码: ``` b...

  • 3D绘图

    meshgrid()函数 mesh() 仅网格,网格内不填充颜色 surf() 网格内填充颜色 示例程序 效果 c...

  • 学习一下Paint、Canvas--绘制网格

    效果图 绘制网格 展示

  • 2019-11-20【Animation】动画叠加_Additi

    image.png 叠加动画放到叠加层,直接叠加可能效果较差,这个可以指定叠加时的参考姿势。 https://fo...

  • 九宫格拖拽

    效果实例 简单了解Grid布局(网格布局) 什么是网格布局 CSS网格布局(又称“网格”),是一种二维网格布局系统...

  • 九宫格拖拽

    效果实例 简单了解Grid布局(网格布局) 什么是网格布局 CSS网格布局(又称“网格”),是一种二维网格布局系统...

  • 文字背景叠加效果

    兼容性更好的svg 来源:https://www.zhangxinxu.com/wordpress/2018/02...

网友评论

      本文标题:叠加网格效果

      本文链接:https://www.haomeiwen.com/subject/igdqtktx.html