Шейдер ProgressBar + Анимация

Шейдеры и все-все-все.

Шейдер ProgressBar + Анимация

Сообщение Sality 09 июл 2014, 13:55

Всем привет, сразу скажу, в шейдерах не силен, поэтому вроде простую задачу но решить не могу.
Вот шейдер прогресс бара, мну нужно по X сделать плавное смещение текстуры, только не просто смещение (просто сдвинуть текстуру я могу) а именно чтоб она автоматически заполняла собой пустое место, которое сдвинулось.
В результате должен получится еффект движения текстуры в одну сторону.

Кто знает помогите, что вставить в код vert шейда, чтоб получился такой еффект?

Синтаксис:
Используется csharp
// Upgrade NOTE: replaced 'glstate.matrix.projection' with 'UNITY_MATRIX_P'

Shader "Custom/ProgressBar" {

Properties {
        _Color ("Color", Color) = (1,1,1,1)
        _ForegroundTex ("Foreground (RGBA)", 2D) = "white" {}
        _PositionAndScale ("Position and Scale", Vector) = (0,0,1,1)
        _Progress ("Progress", Range(0.0,1.0)) = 0.0
}

SubShader {
                //Tags { "Queue"="Transparent" }
                Tags { "Queue"="Overlay+1" }
                ZTest Always
                Blend SrcAlpha OneMinusSrcAlpha
        Pass {
 
CGPROGRAM
// Upgrade NOTE: excluded shader from OpenGL ES 2.0 because it does not contain both vertex and fragment programs.
#pragma exclude_renderers gles
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"

uniform sampler2D _ForegroundTex;

uniform float4 _Color;
uniform float _Progress;
uniform float4 _PositionAndScale;

struct v2f {
        float4 pos : POSITION;
        float2 uv : TEXCOORD0;
};

v2f vert (appdata_base v)
{
    v2f o;
        // if this matrix is used, parent the progress bar to the camera:
                o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
        // else if this transformation is used, you can have the progress bar anywhere:
//      o.pos.xy = v.vertex.xy * _PositionAndScale.zw + _PositionAndScale.xy;
//      o.pos.z = -0.5;
//      o.pos.w = 1;
//      o.pos = mul (UNITY_MATRIX_P, o.pos);
        // endif
   
    o.uv = TRANSFORM_UV(0);
               
    return o;
}


half4 frag( v2f i ) : COLOR
{
        half4 f = tex2D( _ForegroundTex, i.uv);
       
        half4 color = (1,1,1,0);
        if( i.uv.x < _Progress ){
                color = f;
        }
       
    return color *_Color;
}



ENDCG

    }
}

}


заранее спасибо
Последний раз редактировалось Sality 12 июл 2014, 02:27, всего редактировалось 1 раз.
Аватара пользователя
Sality
Старожил
 
Сообщения: 771
Зарегистрирован: 26 ноя 2011, 15:31
Откуда: Украина

Re: анимированная тайловая текстура

Сообщение waruiyume 09 июл 2014, 14:10

Лично я не понял, чего Вы хотите.
Аватара пользователя
waruiyume
Адепт
 
Сообщения: 6143
Зарегистрирован: 30 окт 2010, 05:03
Откуда: Ростов на Дону

Re: анимированная тайловая текстура

Сообщение Sality 09 июл 2014, 14:39

ну... вот если представить что течет река... вот такой же еффект, чтоб сдвигать текстуру через шейдер, создавая еффект постоянно движущейся текстуры в одну сторону. Или может это можно назвать анимированная текстура
Аватара пользователя
Sality
Старожил
 
Сообщения: 771
Зарегистрирован: 26 ноя 2011, 15:31
Откуда: Украина

Re: анимированная тайловая текстура

Сообщение Woolf 09 июл 2014, 14:59

Sality писал(а):ну... вот если представить что течет река... вот такой же еффект, чтоб сдвигать текстуру через шейдер, создавая еффект постоянно движущейся текстуры в одну сторону. Или может это можно назвать анимированная текстура


Ну так это можно сделать классическим скроллом UV

http://wiki.unity3d.com/index.php?title=Scrolling_UVs

Собственно, так и делают для течения реки, водопадов и подобного. И не нужно никакой шейдер. Хотя, можно и шейдером, только зачем..
Разработчик theFisherOnline - там, где клюёт
Разработчик Atom Fishing II - Первая 3D MMO про рыбалку
Разработчик Atom Fishing - Рыбалка на поплавок, донку, нахлыст, блесну в постъядерный период.
Аватара пользователя
Woolf
Адепт
 
Сообщения: 7179
Зарегистрирован: 02 мар 2009, 16:59

Re: анимированная тайловая текстура

Сообщение waruiyume 09 июл 2014, 15:06

Синтаксис:
Используется glsl
// Upgrade NOTE: replaced 'glstate.matrix.projection' with 'UNITY_MATRIX_P'

Shader "Custom/ProgressBar" {

Properties {
        _Color ("Color", Color) = (1,1,1,1)
        _ForegroundTex ("Foreground (RGBA)", 2D) = "white" {}
        _PositionAndScale ("Position and Scale", Vector) = (0,0,1,1)
        _Progress ("Progress", Range(0.0,1.0)) = 0.0
}

SubShader {
                //Tags { "Queue"="Transparent" }
                Tags { "Queue"="Overlay+1" }
                ZTest Always
                Blend SrcAlpha OneMinusSrcAlpha
        Pass {
 
CGPROGRAM
// Upgrade NOTE: excluded shader from OpenGL ES 2.0 because it does not contain both vertex and fragment programs.
#pragma exclude_renderers gles
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"

uniform sampler2D _ForegroundTex;

uniform float4 _Color;
uniform float _Progress;
uniform float4 _PositionAndScale;

struct v2f {
        float4 pos : POSITION;
        float2 uv : TEXCOORD0;
        float2 uv1 : TEXCOORD1;//<--------------------------------here
};

v2f vert (appdata_base v)
{
    v2f o;
        // if this matrix is used, parent the progress bar to the camera:
                o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
        // else if this transformation is used, you can have the progress bar anywhere:
//      o.pos.xy = v.vertex.xy * _PositionAndScale.zw + _PositionAndScale.xy;
//      o.pos.z = -0.5;
//      o.pos.w = 1;
//      o.pos = mul (UNITY_MATRIX_P, o.pos);
        // endif
    o.uv = TRANSFORM_UV(0);
        o.uv1 = o.uv;
        o.uv1.x += _Time.x;//<--------------------------------here
               
    return o;
}


half4 frag( v2f i ) : COLOR
{
        half4 f = tex2D( _ForegroundTex, i.uv1);//<--------------------------------here
       
        half4 color = (1,1,1,0);
        if( i.uv.x < _Progress ){
                color = f;
        }
       
    return color *_Color;
}



ENDCG

    }
}

}
Аватара пользователя
waruiyume
Адепт
 
Сообщения: 6143
Зарегистрирован: 30 окт 2010, 05:03
Откуда: Ростов на Дону

Re: анимированная тайловая текстура

Сообщение Sality 09 июл 2014, 15:32

работает, только текстура по кругу не идет, уплывает в одном направлении. Но это уже прогресс для моего шейда )
Аватара пользователя
Sality
Старожил
 
Сообщения: 771
Зарегистрирован: 26 ноя 2011, 15:31
Откуда: Украина

Re: анимированная тайловая текстура

Сообщение Sality 09 июл 2014, 15:35

Woolf писал(а):
Sality писал(а):ну... вот если представить что течет река... вот такой же еффект, чтоб сдвигать текстуру через шейдер, создавая еффект постоянно движущейся текстуры в одну сторону. Или может это можно назвать анимированная текстура


Ну так это можно сделать классическим скроллом UV

http://wiki.unity3d.com/index.php?title=Scrolling_UVs

Собственно, так и делают для течения реки, водопадов и подобного. И не нужно никакой шейдер. Хотя, можно и шейдером, только зачем..


Сейчас попробуем. Возможно не получится, так как у меня испольщуется текстура из мапы. Проверим.

А шейдер хочу сделать универсальный для прогресс баров, чтоб не тулить кучу всего. И можно оставить в капилку, прогресс бары я уверен делают многие.

хм.. както оно странно сдвигает, запоняя чемто непонятным
http://puu.sh/a3z1O/815df859ac.jpg
Аватара пользователя
Sality
Старожил
 
Сообщения: 771
Зарегистрирован: 26 ноя 2011, 15:31
Откуда: Украина

Re: анимированная тайловая текстура

Сообщение Sality 09 июл 2014, 22:21

Хлопцы хелп, уже почти то что нужно, шейдер нормально анимирует еткстуру, но она почему то не тайлится, тоесть уплывает и все с концами, что добавить, чтоб она по кругу плыла?

заранее спс.
Аватара пользователя
Sality
Старожил
 
Сообщения: 771
Зарегистрирован: 26 ноя 2011, 15:31
Откуда: Украина

Re: анимированная тайловая текстура

Сообщение Sality 12 июл 2014, 02:02

Собствеено как и обещал, шейдер горизонтального прогресс бара, с возможностью анимации (движения) текстуры в любую сторону и с любой скоростью. Поддержка альфы. Шаманя с этими цифрами выходят неплохие эффекты. Ну и естественно его прямая задача - кроп текстуры.

1) Работает под ПК и Веб и Android (iOS не проверено)
2) Потеря производительности тоже не измерялась пока что.

Было бы неплохо если у кого понимающего есть идеи оптимизации или улучшения.
Думаю шейдер может кому то понадобится, как и мне.

Синтаксис:
Используется csharp
Shader "Custom/ProgressBar" {

Properties {
        _Color ("Color", Color) = (1,1,1,1)
        _MainTex ("Maine Texture (RGBA)", 2D) = "white" {}
        _PositionAndScale ("Position and Scale", Vector) = (0,0,1,1)
        _DirectionMoveX ("TextureMoveX (1/-1)", int) = 0
        _DirectionMoveY ("TextureMoveY (1/-1)", int) = 0
        _SpeedMove ("SpeedMove", float) = 0.0
        _Progress ("Crop (0.0 - 1.0)", Range(0.0,1.0)) = 0.0
}

SubShader {
                //Tags { "Queue"="Transparent" }
                Tags { "Queue"="Overlay+1" }
                ZTest Always
                Blend SrcAlpha OneMinusSrcAlpha
        Pass {
 
CGPROGRAM
// Upgrade NOTE: excluded shader from OpenGL ES 2.0 because it does not contain both vertex and fragment programs.
//#pragma exclude_renderers gles
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"

uniform sampler2D _MainTex;

uniform float4 _Color;
uniform float _Progress;
uniform float4 _PositionAndScale;
uniform int _DirectionMoveX;
uniform int _DirectionMoveY;
uniform float _SpeedMove;

struct v2f {
        float4 pos : POSITION;
        float2 uv : TEXCOORD0;
        float2 uv1 : TEXCOORD1;
};

v2f vert (appdata_base v)
{
    v2f o;
        // if this matrix is used, parent the progress bar to the camera:
                o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
        // else if this transformation is used, you can have the progress bar anywhere:
//      o.pos.xy = v.vertex.xy * _PositionAndScale.zw + _PositionAndScale.xy;
//      o.pos.z = -0.5;
//      o.pos.w = 1;
//      o.pos = mul (UNITY_MATRIX_P, o.pos);
        // endif
    o.uv = TRANSFORM_UV(0);
        o.uv1 = o.uv;
        o.uv1.x -= _Time.x * _SpeedMove * _DirectionMoveX;
        o.uv1.y -= _Time.x * _SpeedMove * _DirectionMoveY;
               
    return o;
}


half4 frag( v2f i ) : COLOR
{
        half4 f = tex2D( _MainTex, i.uv1);
       
        half4 color = (1,1,1,0);
        if( i.uv.x < _Progress ){
                color = f;
        }
       
    return color *_Color;
}



ENDCG

    }
}

}
Аватара пользователя
Sality
Старожил
 
Сообщения: 771
Зарегистрирован: 26 ноя 2011, 15:31
Откуда: Украина

Re: Шейдер ProgressBar + Анимация

Сообщение AngryGrey 13 дек 2015, 16:06

Пытаюсь освоить шейдеры. Как раз решил, что задачей "минимум" будет шейдер зацикливающий несколько текстур с разными скоростями. Шейдер из данной темы вроде подходит, но у меня вопрос: Насколько это лучше в плане производительности, чем движение текстуры через скрипт C#, используя offset?
AngryGrey
UNIт
 
Сообщения: 102
Зарегистрирован: 04 фев 2013, 02:58

Re: Шейдер ProgressBar + Анимация

Сообщение Cr0c 14 дек 2015, 00:37

AngryGrey писал(а):Пытаюсь освоить шейдеры. Как раз решил, что задачей "минимум" будет шейдер зацикливающий несколько текстур с разными скоростями. Шейдер из данной темы вроде подходит, но у меня вопрос: Насколько это лучше в плане производительности, чем движение текстуры через скрипт C#, используя offset?

Шейдер выполняется на видеокарте, а с#-скрипт на процессоре.
Аватара пользователя
Cr0c
Адепт
 
Сообщения: 3035
Зарегистрирован: 19 июн 2015, 13:50
Skype: cr0c81

Re: Шейдер ProgressBar + Анимация

Сообщение AngryGrey 14 дек 2015, 01:49

Cr0c писал(а):
AngryGrey писал(а):Пытаюсь освоить шейдеры. Как раз решил, что задачей "минимум" будет шейдер зацикливающий несколько текстур с разными скоростями. Шейдер из данной темы вроде подходит, но у меня вопрос: Насколько это лучше в плане производительности, чем движение текстуры через скрипт C#, используя offset?

Шейдер выполняется на видеокарте, а с#-скрипт на процессоре.


Если объяснять на конкретном примере, то например: Есть проект под мобильные платформы. В игре есть задний фон состоящий из "бутерброда" нескольких объектов. На каждом объекте висит текстура и скрипт C#, которые двигает текстуру по объекту. Так вот, целесообразно ли данную конструкцию переносить на шейдер? т.е. создать один объект с шейдером под несколько текстур, двигающихся с разной скоростью?
AngryGrey
UNIт
 
Сообщения: 102
Зарегистрирован: 04 фев 2013, 02:58


Вернуться в Shader Lab

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2