1. 程式人生 > >水面波紋.shader

水面波紋.shader

這裡寫圖片描述
1、上面的水面波紋效果是從一個大神程式碼裡面扣出來的。
為了看演算法,儘量減少變數,只實現效果,減去了 Alpha 值隨 Y 值變化效果
裡面有很多資料可以寫成變數,便於調整效果,為了方便檢視關鍵程式碼,儘量減少可變屬性。關鍵程式碼已有片段編輯中的一行,已經寫了很長的註釋

Shader "Custom/RippleShaderMy"
{
    Properties
    {
        _Color("Base Color", Color) = (1,1,1,1)
        _MainTex("Base(RGB)", 2D) = "white" {}
        _DecorativeTex("DecorativeTex (RGB)"
, 2D) = "white"{} } SubShader { tags{"Queue" = "Transparent" "RenderType" = "Transparent" "IgnoreProjector" = "True"} Blend SrcAlpha OneMinusSrcAlpha Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc"
float4 _Color; sampler2D _MainTex; sampler2D _DecorativeTex; struct v2f { float4 pos:POSITION; float4 uv:TEXCOORD0; }; struct appdata{ float4 vertex : POSITION; float4 texcoord : TEXCOORD;
}; v2f vert(appdata v) { v2f o; o.pos = mul(UNITY_MATRIX_MVP, v.vertex); o.uv = v.texcoord; return o; } half4 frag(v2f i):COLOR { /*因為需要一種扭曲效果,因此圖片的邊緣肯定不能是順滑的, 但是也不能用隨機數來決定邊緣的偏移左邊,因為可能不是連續的,可能會出現鋸齒, 因此需要從圖片中找出一個屬性是平滑的改變的,圖片的rgb值就是這樣的,因此這裡使用gb值。 至於為什麼要獲得噪波貼圖的x座標軸的下一個畫素和y軸座標的下一個畫素的gb值,然後減去1,可能是因為比較接近漸變值。。 其實只取x或者y軸座標的下一個也可以 例如這樣:float2 c = tex2D(_DecorativeTex, i.uv.xy + float2(0, _Time.x)).gb;*/ float2 c = (tex2D(_DecorativeTex, i.uv.xy + float2(0, _Time.x )).gb + tex2D(_DecorativeTex, i.uv.xy + float2(_Time.x , 0)).gb ) - 1 ; /*後面x的0.1其實可以做成變數控制扭曲效果的程度*/ float2 ruv = float2(i.uv.x, i.uv.y) + c.xy * 0.1; half4 h = tex2D(_MainTex, ruv); return h; } ENDCG } } }

2、大神的水面波紋程式碼

Shader "Custom/RippleShader"
{
    Properties
    {
//      _Color("Base Color", Color) = (1,1,1,1)
        _MainTex("Base(RGB)", 2D) = "white" {}

        _NoiseTex ("Wave Noise", 2D) = "white" {}//噪波貼圖

        _Color ("Tint", Color) = (1,1,1,1)

        _Indentity ("Indentity", float) = 0.1//表示水波的扭曲強度

        _SpeedX ("WaveSpeedX", float) = 0.08//噪波貼圖延X方向的移動速度
        _SpeedY ("WaveSpeedY", float) = 0.04//噪波貼圖延Y方向的移動速度

        _AlphaFadeIn ("AlphaFadeIn", float) = 0.0//水波的淡入位置
        _AlphaFadeOut ("AlphaFadeOut", float) = 1.0//水波的淡出位置
        _TwistFadeIn ("TwistFadeIn", float) = 1.0//扭曲的淡入位置
        _TwistFadeOut ("TwistFadeOut", float) = 1.01//扭曲的淡出位置
        _TwistFadeInIndentity ("TwistFadeInIndentity", float) = 1.0//扭曲的淡入強度
        _TwistFadeOutIndentity ("TwistFadeOutIndentity", float) = 1.0//扭曲的淡出強度
    }

    SubShader
    {
        tags{"Queue" = "Transparent" "RenderType" = "Transparent" "IgnoreProjector" = "True"}
        Blend SrcAlpha OneMinusSrcAlpha

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

//          float4 _Color;
            sampler2D _MainTex;

            sampler2D _NoiseTex;

            fixed4 _Color;

            half _Indentity;

            half _SpeedX;
            half _SpeedY;

            float _AlphaFadeIn;
            float _AlphaFadeOut;
            half _TwistFadeIn;
            half _TwistFadeOut;
            fixed _TwistFadeInIndentity;
            fixed _TwistFadeOutIndentity;

            struct v2f
            {
                float4 pos:POSITION;
                float4 uv:TEXCOORD0;
                float4 color:COLOR;
            };

            struct appdata{
                float4 vertex : POSITION;
                float4 texcoord : TEXCOORD;
                float4 color : COLOR;
            };

            v2f vert(appdata v)
            {
                v2f o;
                o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
                o.uv = v.texcoord;
                o.color = v.color;
                return o;
            }

            half4 frag(v2f i):COLOR
            {
                //對淡入強度和淡出強度的插值  
                fixed fadeT = saturate((_TwistFadeOut - i.uv.y) / (_TwistFadeOut - _TwistFadeIn));
                float2 tuv = (i.uv - float2(0.5, 0)) * fixed2(lerp(_TwistFadeOutIndentity, _TwistFadeInIndentity, fadeT), 1) + float2(0.5, 0);

                //計算噪波貼圖的RG值,得到扭曲UV,
                float2 waveOffset = (tex2D(_NoiseTex, i.uv.xy + float2(0, _Time.y * _SpeedY)).rg + tex2D(_NoiseTex, i.uv.xy + float2(_Time.y * _SpeedX, 0)).rg) - 1;
                float2 ruv = float2(i.uv.x, 1 - i.uv.y) + waveOffset * _Indentity;

                //使用扭曲UV對紋理取樣
                float4 c = tex2D (_MainTex, ruv);

                //對淡入Alpha和淡出Alpha的插值
                fixed fadeA = saturate((_AlphaFadeOut - ruv.y) / (_AlphaFadeOut - _AlphaFadeIn));
                c = c * _Color * i.color * fadeA;
                clip (c.a - 0.01);
                return c;
            }

            ENDCG
        }
    }
}

相關推薦

水面波紋.shader

1、上面的水面波紋效果是從一個大神程式碼裡面扣出來的。 為了看演算法,儘量減少變數,只實現效果,減去了 Alpha 值隨 Y 值變化效果 裡面有很多資料可以寫成變數,便於調整效果,為了方便檢視關鍵程式碼,儘量減少可變屬性。關鍵程式碼已有片段編輯中

Unity3D Shader水面波紋

Shader "Unlit/Test" { Properties { _MainTex("MainTex",2D)="white"{} _MainColor("MainColor",COLOR)=(1,1,1,1) _AddTex("AddTex",2D)="white"{}

Unity 水波紋Shader

今天來個炫酷的點選螢幕實現水波紋的特效,先上兩張效果圖。 放大下看下細節, 當然還有好多效果,自己發揮了。。。 直接上程式碼,註釋已經寫了哦 Shader "Custom/ClickStyle" { Properties

jQuery UI炫酷雨滴落在水面上的波紋漣漪特效

下載 能夠 效果 pos ref html dem 技術 div raindrops是一款效果很炫酷的jQuery UI雨滴落在水面上的特效。該特效模擬水滴從空中落入平靜的水面上的效果。通過參數能夠設置水面波紋的大小,強度,波紋擴散的速度等等屬性。 效果演示:htt

Android Shader渲染以及實現水波紋霓虹文字雷達等效果

Shader概述 Shader是繪圖過程中的著色器,實現繪製各種不同的效果,比如映象,水波紋,雷達等等,Shader有以下五個子類: - BitmapShader用於Bitmap圖片的渲染 - ComposeShader用於混合渲染 - LinearGradient用於線性渲染

Shader波紋效果

使用噪聲紋理模擬波紋 參考 《unity shader 入門精要》 // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)' Shader "Boo

shader利用噪聲實現2D螢幕水波紋

    在這之前試著通過計算輸出正弦(sin)相關的uv座標來實現波動效果,結果比較失望,那種方法大概適合使用在3D的波浪效果上。     shader使用噪聲效果+螢幕捕獲實現 Shader "Custom/wave" { Properties{

Shader學習筆記(17) 頂點偏移水面動畫

Shader"wx/water"{ Properties{ _MainTex("Main Tex",2D)="white"{} _Color("Color Tint",Col

UE4遊戲場景開發 --基於UV動畫實現帶波紋水面材質

說起水面材質,不得不先提一下神奇的法線貼圖,通過改變材質表面的法線,來改變光的反射方向,從而使得2D的平面在我們的眼中達到3D的效果。自從知道了法線貼圖,小編開始回憶自己玩過的很多遊戲,似乎大多數遊戲的地面以及牆體都是採用了法線貼圖來實現,想想一些遊戲中的效果是不是打在看起來

Unity相機潛入水面下的螢幕特效shader

由於最近找相關程式碼或者三維裡兩個平面交線的演算法都沒找到合理的,便自己花了兩個小時想了想,下邊先上演算法,再上程式碼下邊上演算法:主要問題是需要計算當相機半潛入水面時,即相機的近平面一部分在水面上,一部分在水面下,因此需要計算相機近平面和水面的交線。下面說說兩個平面的交線計

Shader-水波紋效果

效果: Shader程式碼: Shader "Custom/shuibowen"{ Properties{ _MainTex("Base (RGB)",2D)="white"{} _distanceFact

cocos2dx中用shader實現折射效果

eight endif cocos 計算模型 for fragment ade ima 2dx 目的:給定任意法線貼圖,實現折射效果 主要技術:RenderTarget,glsl 提取出一個可供使用的Sprite派生類 計算模型如下: 黑色部分為玻璃切線,紅色部分為場景。

【OpenGL】Shader實例分析(七)- 雪花飄落效果

mouse llb cto 接下來 pix lan details effect art 轉發請保持地址:http://blog.csdn.net/stalendp/article/details/40624603 研究了一個雪花飄落效果。感覺挺不錯的。分享給大家,效

Unity-Shader-鏡面高光Phong&BlinnPhong-油膩的師姐在哪裏

http erl range 反射光 all 諸多 實戰 常常 blog 【舊博客轉移 - 2016年4月4日 13:13 】 油膩的師姐: 以前玩過一款很火熱的端遊《劍靈》,劍靈剛出來的時候,某網頁遊戲廣告視頻中有句臺詞:“我不斷的在尋找,有你的世界在哪裏”,該廣告中的人

Unity5 Shader Stripping 導致 LightMap 全部丟失的解決方法

nbsp 打包 com 功能 -1 class il2cpp cnblogs offset 當使用 SceneManager.LoadScene 的時候,會自動載入LightMap 和 NavMesh的數據。然後再對MeshRender 進行指定 LightMapIndex

流光shader 和 流光+扭曲shader

針對 targe for 分享 posit stream ans dir sky 我認為這種shader能通過簡單的方式呈現出不錯的效果。 1.流光shader: Shader "Unlit/StreamShader" { //流光shader Prope

Unity Shader 紋理映射的實現

縮放 bsh cati ret 函數傳遞 mali all main code 1 // 紋理映射的編寫 2 Shader "TMoon/04-Texture" { 3 Properties{ 4 _Color("Color",Color)

Unity Shader 法線貼圖的實現

計算 變換 float minus include 的確 dal 反射 mode 這裏有一個細節,關於法線貼圖是有兩個不同的空間的,如下:   切線空間:法線貼圖顏色為偏藍色   模型空間:法線貼圖顏色為五顏六色 因此根據不同的空間變換位置方便一致計算。 1 // 法

Unity Shader 漫反射的實現

pos 獲取 函數實現 vertex 傳值 模型 dot ima unity 模型的漫反射可以在兩個函數中實現,一個是頂點函數,另外一個就是片元函數。而這兩個函數的區別又決定了漫反射實現出來的效果,那就是精細度。 因為頂點函數是逐頂點調用,漫反射在頂點函數實現時,對於在一個

Unity Shader 基本類型和結構

pla prop 文章 ack 遊戲 end 轉換 效果 black 最近看了siki老師的shader教程,感謝siki老師,講課真好。之前看了一些Shader的書,因為沒有圖形學的基礎,所以看的挺痛苦的。然後看了siki老師的視頻後,結合以前看的書一下子明了了。 在這裏