shader学习记录——Shadertoy Melt

最新推荐文章于 2026-01-07 08:55:54 发布

原创最新推荐文章于 2026-01-07 08:55:54 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #unity

Shader学习记录专栏收录该内容

21 篇文章

订阅专栏

本文详细记录了临摹Shadertoy上的MeltShader代码的过程，涉及OpenGL着色器的编写，包括纹理应用、坐标变换、时间变量以及动态动画效果的创建。代码中使用了sin和cos函数来生成色彩变化，并通过控制scaleValue调整缩放效果。此外，还实现了基于时间和坐标的位置偏移，以创造出独特的熔化效果。

临摹的Shadertoy代码，记录一下期间遇到问题。

Shader "Unlit/MeltShader"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _ScaleValue("scaleValue",float) = 1
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100
        Blend SrcAlpha OneMinusSrcAlpha
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"



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

            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            float _ScaleValue;


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

            #define RADIANS 0.017453292519943295
            //shaderToy代码，在此定义，在片元着色器中使用，返回值为0
            //const int zoom = 40;
            //const float brightness = 0.975;
            //float fScale = 1.25
            

            float cosRange(float degrees, float range, float minimum) {
                return (((1.0 + cos(degrees * RADIANS)) * 0.5) * range) + minimum;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                //shaderToy代码，在此定义，在片元着色器中使用才有值
                const int zoom =40;//猜测是颜色变化速率
                const float brightness = 0.975;//亮度
                float time = _Time.x * 10;//1.25;//取时间值作为变化周期

                //取纹理贴图color
                fixed4 col = tex2D(_MainTex, i.uv);
                
                //shaderToy代码目的是转换坐标为（-，+）
                //float2 uv = float2(i.uv.x * (_ScreenParams.x / _ScreenParams.y), i.uv.y);//i.uv.xy / _ScreenParams.xy; 
                //float2 p = (2.0 * i.uv.xy - _ScreenParams.xy) / max(_ScreenParams.x, _ScreenParams.y);
                
                //Unity shader代码转换坐标为（-，+）
                float2 p = (2.0 * i.uv - 1) * _ScaleValue;//转换坐标为（-1，+1）*scale
                float2 uv = float2(p.x * (_ScreenParams.x / _ScreenParams.y), p.y);//等比缩放

                float ct = cosRange(time * 5.0, 3.0, 1.1);
                float xBoost = cosRange(time * 0.2, 5.0, 5.0);
                float yBoost = cosRange(time * 0.1, 10.0, 5.0);

                float fScale = cosRange(time * 15.5, 1.25, 0.5);

                for (int i = 1; i < zoom; i++) {
                    float _i = float(i);
                    float2 newp = p;
                    newp.x += 0.25 / _i * sin(_i * p.y + time * cos(ct) * 0.5 / 20.0 + 0.005 * _i) * fScale + xBoost;
                    newp.y += 0.25 / _i * sin(_i * p.x + time * ct * 0.3 / 40.0 + 0.03 * float(i + 15)) * fScale + yBoost;
                    p = newp;
                 }
                //上边看不懂的算法返回了颜色值
                col *= float4(0.5 * sin(3.0 * p.x) + 0.5, 0.5 * sin(3.0 * p.y) + 0.5, sin(p.x + p.y),1);
                col *= brightness;//设置亮度

                //利用透明度设置边界
                // Add border
                float vigAmt = 5.0;
                float vignette = (1. - vigAmt * (uv.y - .5) * (uv.y - .5)) * (1. - vigAmt * (uv.x - .5) * (uv.x - .5));
                float extrusion = (col.x + col.y + col.z) / 4.0;
                extrusion *= 1.5;
                extrusion *= vignette;
                //我这里取了纹理贴图的color，可以直接用png图作为遮罩
                return col;//float4(col,extrusion);
            }
            ENDCG
        }
    }
}