用Shader實(shí)現(xiàn)速度線效果

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
        }
    }
}

直接復(fù)制了https://www.shadertoy.com/view/4dSyWK以及馮樂(lè)樂(lè)妹子的模板,不得不說(shuō)這種方法真香……
我用的URP所以換成了HLSL,嘗試使用half代替float以提高效率,但在小米機(jī)器上會(huì)出現(xiàn)開(kāi)關(guān)不變的情況,猜測(cè)是_Time精度過(guò)低造成的。先發(fā)這里吧,抽空再整理到github上。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 提示 教程例子都可以到下面網(wǎng)址進(jìn)行運(yùn)行,不需要另外安裝軟件環(huán)境:官方提供在線編寫(xiě)shader工具:https://...
    Zszen閱讀 1,499評(píng)論 0 50
  • 對(duì)于普通人而言,噪聲通常是都是有害的,而在圖形學(xué)中,噪聲卻經(jīng)常被用來(lái)生成一些非常優(yōu)美的效果,比如天空的云層,地形,...
    離原春草閱讀 12,237評(píng)論 2 13
  • 提示 教程例子都可以到下面網(wǎng)址進(jìn)行運(yùn)行,不需要另外安裝軟件環(huán)境:官方提供在線編寫(xiě)shader工具:https://...
    Zszen閱讀 1,154評(píng)論 1 51
  • 要實(shí)現(xiàn)一個(gè)什么樣的效果 來(lái)自剪影app畫(huà)布模糊的效果: 思路:怎么做 先畫(huà)背景再畫(huà)原始視頻幀。高斯模糊背景怎么畫(huà)?...
    梅芳姑閱讀 4,540評(píng)論 1 0
  • 轉(zhuǎn)自:https://zhuanlan.zhihu.com/p/31618992 寫(xiě)在前面 前段時(shí)間美術(shù)提了個(gè)需求...
    樹(shù)上的cat_ee3c閱讀 2,493評(píng)論 0 0

友情鏈接更多精彩內(nèi)容