用Shader实现速度线效果

speedlines.gif
Shader "Custom/SpeedLines"
{
    Properties{
        Radius("Radius", Range(0, 5)) = 1.45
        Edge("Edge", Range(0, 1)) = 0.55
        NoiseBigNess("NoiseBigNess", Range(1, 100)) = 20
        Speed("Speed", Range(0, 10)) = 1.25
        LineColor("Color", Color) = (1, 1, 1, 1)
        iChannel0("iChannel0", 2D) = "black" {}  
    }
    HLSLINCLUDE

    #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"
    #pragma target 3.0
    #define iTime _Time.y
    #define vec2 float2
    #define vec3 float3
    #define vec4 float4
    #define mat2 float2x2
    #define mat3 float3x3
    #define mat4 float4x4
    #define mod fmod
    #define mix lerp
    #define fract frac
    #define texture2D tex2D
    #define iResolution _ScreenParams
    #define gl_FragCoord ((_iParam.scrPos.xy/_iParam.scrPos.w) * _ScreenParams.xy)
    
    float Speed;
    float NoiseBigNess;
    float Radius;
    float Edge;
    float4 LineColor;
    float4 iChannel0_ST;
    TEXTURE2D(iChannel0);
    SAMPLER(sampler_iChannel0);

    struct Attributes
    {
        float4 positionOS   : POSITION;
        float2 uv           : TEXCOORD0;
        UNITY_VERTEX_INPUT_INSTANCE_ID
    };

    struct Varyings
    {
        float2 uv                       : TEXCOORD0;
        float4 positionCS               : SV_POSITION;
        float4 screenPos                : TEXCOORD1;
    };

    Varyings LitPassVertex(Attributes input)
    {
        Varyings output;
        VertexPositionInputs vertexInput = GetVertexPositionInputs(input.positionOS.xyz);
        output.uv = TRANSFORM_TEX(input.uv, iChannel0);
        output.positionCS = vertexInput.positionCS;
        output.screenPos = ComputeScreenPos(vertexInput.positionCS);
        return output;
    }

    void mainImage( out vec4 fragColor, in vec2 fragCoord );
    
    float4 LitPassFragment(Varyings input) : SV_Target  
    {
        float2 fragCoord = ((input.screenPos.xy) / (input.screenPos.w + FLT_MIN)) *_ScreenParams.xy;
        float4 fragColor = SAMPLE_TEXTURE2D(iChannel0, sampler_iChannel0, fragCoord);
        mainImage(fragColor, fragCoord);
        return fragColor;
    }

    /* discontinuous pseudorandom uniformly distributed in [-0.5, +0.5]^3 */
    vec3 random3(vec3 c) {
        float j = 4096.0*sin(dot(c,vec3(17.0, 59.4, 15.0)));
        vec3 r;
        r.z = fract(512.0*j);
        j *= .125;
        r.x = fract(512.0*j);
        j *= .125;
        r.y = fract(512.0*j);
        return r-0.5;
    }

    /* skew constants for 3d simplex functions */
    const float F3 =  0.3333333;
    const float G3 =  0.1666667;

    /* 3d simplex noise */
    float simplex3d(vec3 p) {
         /* 1. find current tetrahedron T and it's four vertices */
         /* s, s+i1, s+i2, s+1.0 - absolute skewed (integer) coordinates of T vertices */
         /* x, x1, x2, x3 - unskewed coordinates of p relative to each of T vertices*/
         
         /* calculate s and x */
         vec3 s = floor(p + dot(p, vec3(F3, F3, F3)));
         vec3 x = p - s + dot(s, vec3(G3, G3, G3));
         
         /* calculate i1 and i2 */
         vec3 e = step(vec3(0,0,0), x - x.yzx);
         vec3 i1 = e*(1.0 - e.zxy);
         vec3 i2 = 1.0 - e.zxy*(1.0 - e);
            
         /* x1, x2, x3 */
         vec3 x1 = x - i1 + G3;
         vec3 x2 = x - i2 + 2.0*G3;
         vec3 x3 = x - 1.0 + 3.0*G3;
         
         /* 2. find four surflets and store them in d */
         vec4 w, d;
         
         /* calculate surflet weights */
         w.x = dot(x, x);
         w.y = dot(x1, x1);
         w.z = dot(x2, x2);
         w.w = dot(x3, x3);
         
         /* w fades from 0.6 at the center of the surflet to 0.0 at the margin */
         w = max(0.6 - w, 0.0);
         
         /* calculate surflet components */
         d.x = dot(random3(s), x);
         d.y = dot(random3(s + i1), x1);
         d.z = dot(random3(s + i2), x2);
         d.w = dot(random3(s + 1.0), x3);
         
         /* multiply d by w^4 */
         w *= w;
         w *= w;
         d *= w;
         
         /* 3. return the sum of the four surflets */
         return dot(d, vec4(52.0, 52.0, 52.0, 52.0));
    }

    void mainImage( out vec4 fragColor, in vec2 fragCoord )
    {
        float time = Speed * iTime;
        vec2 p = fragCoord.xy / iResolution.y;
        float aspect = iResolution.x/iResolution.y;
        vec2 positionFromCenter = p-vec2(0.5*aspect, 0.5);
        
        p = vec2(0.5*aspect, 0.5)+normalize(positionFromCenter)*min(length(positionFromCenter), 0.05);

        // Noise:
        vec3 p3 = NoiseBigNess*0.25*vec3(p.x, p.y, 0.0) + vec3(0.0, 0.0, time*0.025);
        float noise = simplex3d(p3*32.0);
        noise = 0.5 + 0.5*noise;
        
        float distanceFromCenter = clamp(length(positionFromCenter)/Radius, 0.0, 1.0)*(noise);    
        
        float falloffMask = 2.0*distanceFromCenter-1.0;
        falloffMask = 1.0-pow(falloffMask, 4.0);
        
        float finalValue = falloffMask;
        finalValue = smoothstep(Edge,Edge+0.1, noise*finalValue);
        fragColor = LineColor * finalValue;
    }
    ENDHLSL
    
    SubShader
    {
        Tags{
            "Queue"="Overlay"
            "IgnoreProjector"="True"
            "RenderType"="Overlay"
            "RenderPipeline" = "UniversalRenderPipeline"
            "PreviewType"="Plane"
        }
//        LOD 100
        Lighting Off
        ZWrite Off
        Fog {Mode Off}
        Blend One One
        Pass
        {
            HLSLPROGRAM
            #pragma vertex LitPassVertex
            #pragma fragment LitPassFragment
            #pragma fragmentoption ARB_precision_hint_fastest  

            ENDHLSL
        }
    }
}

直接复制了https://www.shadertoy.com/view/4dSyWK以及冯乐乐妹子的模板,不得不说这种方法真香……
我用的URP所以换成了HLSL,尝试使用half代替float以提高效率,但在小米机器上会出现开关不变的情况,猜测是_Time精度过低造成的。先发这里吧,抽空再整理到github上。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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工具:https://...
    Zszen阅读 1,397评论 0 50
  • 对于普通人而言,噪声通常是都是有害的,而在图形学中,噪声却经常被用来生成一些非常优美的效果,比如天空的云层,地形,...
    离原春草阅读 10,909评论 2 13
  • 提示 教程例子都可以到下面网址进行运行,不需要另外安装软件环境:官方提供在线编写shader工具:https://...
    Zszen阅读 1,104评论 1 51
  • 要实现一个什么样的效果 来自剪影app画布模糊的效果: 思路:怎么做 先画背景再画原始视频帧。高斯模糊背景怎么画?...
    梅芳姑阅读 3,972评论 1 0
  • 转自:https://zhuanlan.zhihu.com/p/31618992 写在前面 前段时间美术提了个需求...
    树上的cat_ee3c阅读 2,146评论 0 0