游戏蛮牛学习群(纯技术交流,不闲聊):959392658
游戏蛮牛 手机端
开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

开发者专栏

关注:2370

当前位置:游戏蛮牛 技术专区 开发者专栏

__________________________________________________________________________________
开发者干货区版块规则:

  1、文章必须是图文形式。(至少2幅图)
      2、文章字数必须保持在1500字节以上。(编辑器右下角有字数检查)
      3、本版块只支持在游戏蛮牛原创首发,不支持转载。
      4、本版块回复不得无意义,如:顶、呵呵、不错......【真的会扣分的哦】
      5、......
__________________________________________________________________________________
查看: 3721|回复: 51

[士郎] [shader]赤橙黄绿青蓝紫——动态色环

[复制链接]  [移动端链接]
排名
3
昨日变化

7054

主题

7580

帖子

2万

积分

Rank: 16

UID
1231
好友
185
蛮牛币
10925
威望
30
注册时间
2013-7-29
在线时间
3625 小时
最后登录
2018-12-10

社区QQ达人活力之星原创精华达人突出贡献奖财富之证游戏蛮牛QQ群会员蛮牛妹VIP

发表于 2018-4-16 11:25:15 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

x
最终效果
1.1.gif


思路

  • 圆周计算HSV的色相。半径计算纯度和明度。
  • 传递鼠标坐标来对对应的色块描边。



[AppleScript] 纯文本查看 复制代码
Shader "QQ/UI/Palette"
{
        Properties
        {
                _Hue("hue",float) = 16
                _Level("level",float) = 6
                _Radius0("radius0",float) = 0.05
                _Radius1("radius1",float) = 0.45
                _Span("span",Range(0,0.5)) = 0.01
                _Position("point",vector) = (0,0,0,0)
        }
                SubShader
        {
                Tags
                {
                "Queue" = "Transparent"
                "IgnoreProjector" = "True"
                "RenderType" = "Transparent"
                "PreviewType" = "Plane"
                "CanUseSpriteAtlas" = "True"
                }
                Pass
                {
                        Cull Off
                        Lighting Off
                        ZWrite Off
                        Blend SrcAlpha OneMinusSrcAlpha
                        CGPROGRAM
                        #pragma vertex vert
                        #pragma fragment frag

                        #include "UnityCG.cginc"
                        float _Hue;
                        float _Level;
                        float _Radius0;
                        float _Radius1;
                        float _Span;
                        float4 _Position;
                        struct appdata
                        {
                                float4 vertex : POSITION;
                                float4 color    : COLOR;
                                float2 uv : TEXCOORD0;
                        };

                        struct v2f
                        {
                                float4 vertex : SV_POSITION;
                                float2 uv : TEXCOORD0;
                                fixed4 color : COLOR;
                        };
                        v2f vert(appdata v)
                        {
                                v2f o;
                                o.vertex = UnityObjectToClipPos(v.vertex);
                                o.uv = v.uv;
                                o.color = v.color;
                                return o;
                        }
                        float3 HSVToRGB(float3 hsv)
                        {
                                return lerp(float3(1, 1, 1), saturate(3.0*abs(1.0 - 2.0*frac(hsv.r + float3(0.0, -1.0 / 3.0, 1.0 / 3.0))) - 1), hsv.g)*hsv.b;
                        }
                        float3 EdgeToHSV(float3 edge)
                        {
                                float hm = 1 / _Hue;
                                float sm = 1 / (_Level*0.5);
                                return float3(floor(edge.r)*hm, floor(edge.g)*sm, min(1, ceil(edge.b)*sm));
                        }
                        float3 GetEdge(float r,float2 uv)
                        {
                                float hm = 1 / _Hue;
                                float h = (atan2(uv.y, uv.x) + UNITY_PI) / UNITY_TWO_PI / hm;
                                float sm = 1 / (_Level*0.5);
                                r = r / _Radius1 * 2;
                                float s = r / sm;
                                float v = (2 - r) / sm;
                                return float3(h,s,v);
                        }
#define Delta 0.005
                        fixed4 frag(v2f i) : SV_Target
                        {
                                float2 uv = i.uv - float2(0.5,0.5);
                                float2 _uv = _Position.xy;
                                float r = length(uv);
                                float _r = length(_uv);
                                fixed4 col = fixed4(0, 0, 0, 0);
                                if (r > _Radius0 && r < _Radius1)
                                {
                                        col.a = 1 - smoothstep(_Radius1 - Delta,_Radius1,r);
                                        float3 e = GetEdge(r,uv);
                                        float3 hsv = EdgeToHSV(e);
                                        col.rgb = HSVToRGB(hsv);

                                        float3 _e = GetEdge(_r, _uv);
                                        float3 _hsv = EdgeToHSV(_e);
                                        if (hsv.r == _hsv.r&&hsv.g == _hsv.g&&hsv.b == _hsv.b)
                                        {
                                                float h = frac(e.r);
                                                r *= 5;
                                                if (h < _Span / r || h >(1 - _Span / r) || frac(e.g) < _Span || frac(e.b) < _Span)
                                                {
                                                        if (length(col.rgb) > 0.5)
                                                                col.rgb *= 0.5;
                                                        else
                                                                col.rgb *= 2;
                                                }
                                        }
                                }
                                return col;
                        }
                ENDCG
                }
        }
}




知乎@CarefreeQ



[发帖际遇]: 清风 发帖时在路边捡到 2 蛮牛币,偷偷放进了口袋. 幸运榜 / 衰神榜

跟我念“站长妹纸萌萌哒!”我说站长,你说YO!爱你们么么哒~
回复

使用道具 举报

7日久生情
3423/5000
排名
1722
昨日变化

0

主题

2127

帖子

3423

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
219676
好友
1
蛮牛币
2610
威望
0
注册时间
2017-7-12
在线时间
554 小时
最后登录
2018-12-10

活力之星

发表于 2018-4-16 11:57:11 | 显示全部楼层
谢谢分享

回复

使用道具 举报

5熟悉之中
717/1000
排名
7845
昨日变化
2

3

主题

88

帖子

717

积分

Rank: 5Rank: 5

UID
128276
好友
0
蛮牛币
3130
威望
0
注册时间
2015-11-8
在线时间
474 小时
最后登录
2018-12-10
发表于 2018-4-16 12:25:30 | 显示全部楼层
效果很酷

回复

使用道具 举报

排名
24807
昨日变化
2

0

主题

26

帖子

64

积分

Rank: 2Rank: 2

UID
249924
好友
0
蛮牛币
163
威望
0
注册时间
2017-10-20
在线时间
22 小时
最后登录
2018-11-13
发表于 2018-4-16 15:04:53 | 显示全部楼层
不错的想法,谢谢分享

回复 支持 反对

使用道具 举报

5熟悉之中
619/1000
排名
4374
昨日变化
1

0

主题

83

帖子

619

积分

Rank: 5Rank: 5

UID
246031
好友
1
蛮牛币
884
威望
0
注册时间
2017-9-26
在线时间
212 小时
最后登录
2018-12-10
发表于 2018-4-16 15:14:29 | 显示全部楼层
6666666666666666666

回复 支持 反对

使用道具 举报

5熟悉之中
542/1000
排名
4694
昨日变化

1

主题

37

帖子

542

积分

Rank: 5Rank: 5

UID
264429
好友
0
蛮牛币
882
威望
0
注册时间
2018-1-15
在线时间
207 小时
最后登录
2018-12-6
发表于 2018-4-16 15:48:31 | 显示全部楼层
好东西,赞一个

回复

使用道具 举报

排名
46919
昨日变化
108

0

主题

9

帖子

36

积分

Rank: 1

UID
244127
好友
0
蛮牛币
33
威望
0
注册时间
2017-9-17
在线时间
23 小时
最后登录
2018-9-6
发表于 2018-4-16 16:18:46 | 显示全部楼层
谢谢分享

回复

使用道具 举报

7日久生情
1767/5000
排名
2254
昨日变化

12

主题

822

帖子

1767

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
218409
好友
3
蛮牛币
5288
威望
0
注册时间
2017-4-19
在线时间
345 小时
最后登录
2018-12-7
发表于 2018-4-16 16:21:01 | 显示全部楼层

谢谢分享

回复

使用道具 举报

排名
508
昨日变化

234

主题

1万

帖子

1万

积分

Rank: 12Rank: 12Rank: 12

UID
78862
好友
16
蛮牛币
29126
威望
0
注册时间
2015-3-11
在线时间
3039 小时
最后登录
2018-12-10
QQ
发表于 2018-4-16 17:40:37 | 显示全部楼层
这个太帅了

回复

使用道具 举报

5熟悉之中
888/1000
排名
14340
昨日变化
2

70

主题

356

帖子

888

积分

Rank: 5Rank: 5

UID
15706
好友
3
蛮牛币
1266
威望
0
注册时间
2014-2-26
在线时间
404 小时
最后登录
2018-12-10
发表于 2018-4-16 18:15:20 | 显示全部楼层
这么实现图上的效果?有代码也不会用啊

回复 支持 反对

使用道具 举报

7日久生情
1694/5000
排名
19422
昨日变化
5

12

主题

781

帖子

1694

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
158776
好友
2
蛮牛币
150
威望
0
注册时间
2016-7-26
在线时间
873 小时
最后登录
2018-12-1
发表于 2018-4-16 18:51:18 | 显示全部楼层
牛B,6666666666666666

回复 支持 反对

使用道具 举报

5熟悉之中
663/1000
排名
3516
昨日变化
2

1

主题

38

帖子

663

积分

Rank: 5Rank: 5

UID
230664
好友
2
蛮牛币
1159
威望
0
注册时间
2017-7-6
在线时间
216 小时
最后登录
2018-11-30
发表于 2018-4-16 19:36:45 | 显示全部楼层
谢谢分享

回复

使用道具 举报

7日久生情
2708/5000
排名
644
昨日变化

30

主题

576

帖子

2708

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
124569
好友
25
蛮牛币
7194
威望
0
注册时间
2015-10-4
在线时间
800 小时
最后登录
2018-12-4
发表于 2018-4-17 08:26:58 | 显示全部楼层
66666666666666666

回复 支持 反对

使用道具 举报

7日久生情
1917/5000
排名
4338
昨日变化
1

0

主题

1335

帖子

1917

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
267381
好友
6
蛮牛币
3212
威望
0
注册时间
2018-2-1
在线时间
258 小时
最后登录
2018-11-6
发表于 2018-4-17 08:57:25 | 显示全部楼层
谢谢分享

回复

使用道具 举报

7日久生情
1989/5000
排名
727
昨日变化

30

主题

187

帖子

1989

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
163759
好友
0
蛮牛币
2720
威望
0
注册时间
2016-8-23
在线时间
546 小时
最后登录
2018-12-10
发表于 2018-4-17 09:07:32 | 显示全部楼层
厉害得勒

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

快速回复 返回顶部 返回列表