开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

开发者专栏

关注:2006

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

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

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

[东方喵] 【ShaderToy】CrystalBall水晶球Shader

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

32

主题

792

帖子

3157

积分

Rank: 9Rank: 9Rank: 9

UID
76248
好友
19
蛮牛币
17400
威望
0
注册时间
2015-2-28
在线时间
823 小时
最后登录
2017-12-13

专栏作家蛮牛译员活力之星七夕浪漫情人

发表于 2017-7-14 15:04:58 | 显示全部楼层 |阅读模式

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

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

x
本帖最后由 东方喵 于 2017-12-1 15:15 编辑

CrystalBall水晶球Shader
许久没有更新了,天气愈发的热了起来,也愈发的感到春乏、秋困、夏打盹、冬眠...zzZ
言归正传,今天给大家带来的是一个简单的UI水晶球小shader,效果如下:

GIF.gif

先简述一下想法:
1.首先总共分3个图层,主图、假高光、萦绕的烟雾;
2.然后要将主图由正常的图片变为鱼眼相机图片,即计算将球面坐标投影到平面上,两者坐标的对应关系,这属于简单立体几何,具体推导过程略过;
3.让主图按照纵向sin曲线随着时间扭动;
4.让烟雾按照横向sin曲线随时间扭动,并变成紫色;
5.将处理后的三个图层叠加在一起;
6.以(0.5,0.5)为圆心,0.5为半径,切去叠加后的图像,余下部分alpha=0,透明。

如若把主图改为使用RenderTexture,是可以实现动态水晶球效果的。

shader代码如下:
[C#] 纯文本查看 复制代码
Shader "Custom/CrystalBall" {
        Properties{
                _Tex1("MainTex", 2D) = "white" {}//主图
            _Tex2("HighLight", 2D) = "white" {}//假高光
                _Tex3("NoiseMap",2D) = "white"{}//噪音图
        }
SubShader{
        Tags{ "RenderType" = "Transparent" "Queue" = "Transparent" }
                LOD 200
                Cull off
                CGPROGRAM
#pragma surface surf Lambert alpha:blend
        sampler2D _Tex1;
        sampler2D _Tex2;
        sampler2D _Tex3;

        struct Input {
                float2 uv_Tex1;
        };

        void surf(Input IN, inout SurfaceOutput o) {
                half4 c1;
                half4 c2;
                half4 c3;
                float4 gray;

                float temp;//(x-a)^2+(y-b)^2=r^2
                const float center =0.5;//球心
                const float r = 0.51;//半径(180度广角)
                float2 uvTemp;
                float2 uvNoise;
                float t;
                float xx;
                float yy;
                float alpha;

                xx = IN.uv_Tex1.r;
                yy = center + r*(IN.uv_Tex1.g - center) / (sqrt(pow(r, 2) - pow(IN.uv_Tex1.r - center, 2)));
                t = _Time.y/10;
                xx = xx+0.01*sin(IN.uv_Tex1.g*10+t*10);
                uvNoise= float2(IN.uv_Tex1.r,IN.uv_Tex1.g + 0.08*sin(IN.uv_Tex1.g * 4 + t * 4));
                alpha=

                uvTemp = float2(xx,yy);
                c1 = tex2D(_Tex1,uvTemp);
                c2 = tex2D(_Tex2, IN.uv_Tex1);
                c3 = tex2D(_Tex3,uvNoise);

                temp = (IN.uv_Tex1.r*IN.uv_Tex1.r)+(IN.uv_Tex1.g*IN.uv_Tex1.g)-IN.uv_Tex1.r-IN.uv_Tex1.g;
                if (temp>-0.25) {
                        o.Alpha = 0;
                }
                else {
                        gray = float4((c3.r*0.3+c3.g*0.59+c3.b*0.11)*0.54,(c3.r*0.3 + c3.g*0.59 + c3.b*0.11)*0.17,(c3.r*0.3 + c3.g*0.59 + c3.b*0.11)*0.89,1);
                        o.Emission = c1.rgb*0.5 + c2.rgb*0.8 +0.5*gray.rgb;
                        o.Alpha = 1;
                }
        }
        ENDCG
        }
        FallBack off 
}


最后,奉上工程。
xxx.rar (2.23 MB, 下载次数: 209)

回复

使用道具 举报

6蛮牛粉丝
1266/1500
排名
22691
昨日变化
16

10

主题

681

帖子

1266

积分

Rank: 6Rank: 6Rank: 6

UID
158776
好友
1
蛮牛币
43
威望
0
注册时间
2016-7-26
在线时间
561 小时
最后登录
2017-12-13
发表于 2017-7-14 17:29:49 | 显示全部楼层
谢谢楼主无私的分享,学习一下。

回复 支持 反对

使用道具 举报

头像被屏蔽
排名
110
昨日变化

2

主题

2638

帖子

5871

积分

UID
47709
好友
1
蛮牛币
4003
威望
0
注册时间
2014-10-5
在线时间
1193 小时
最后登录
2017-10-12
发表于 2017-7-14 21:12:55 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽

回复 支持 反对

使用道具 举报

5熟悉之中
724/1000
排名
2781
昨日变化
3

0

主题

83

帖子

724

积分

Rank: 5Rank: 5

UID
99182
好友
0
蛮牛币
435
威望
0
注册时间
2015-5-10
在线时间
219 小时
最后登录
2017-12-13
发表于 2017-7-15 09:02:58 | 显示全部楼层
顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶

回复 支持 反对

使用道具 举报

5熟悉之中
847/1000
排名
5171
昨日变化
6

0

主题

464

帖子

847

积分

Rank: 5Rank: 5

UID
209046
好友
0
蛮牛币
1369
威望
0
注册时间
2017-3-30
在线时间
168 小时
最后登录
2017-12-6
发表于 2017-7-15 09:17:07 | 显示全部楼层
学习

回复

使用道具 举报

7日久生情
1578/5000
排名
1203
昨日变化
2

1

主题

222

帖子

1578

积分

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

UID
27754
好友
0
蛮牛币
1989
威望
0
注册时间
2014-6-2
在线时间
547 小时
最后登录
2017-12-13
发表于 2017-7-15 11:15:41 | 显示全部楼层
学习了,感谢技术分享

回复 支持 反对

使用道具 举报

排名
40323
昨日变化
31

0

主题

9

帖子

43

积分

Rank: 1

UID
168118
好友
0
蛮牛币
117
威望
0
注册时间
2016-9-12
在线时间
30 小时
最后登录
2017-11-28
发表于 2017-7-16 16:45:23 | 显示全部楼层
弱问,shadertoy上面的shader应该都是OpenGL的格式?unity是不是也是兼容的?

回复 支持 反对

使用道具 举报

3偶尔光临
187/300
排名
17379
昨日变化
7

0

主题

144

帖子

187

积分

Rank: 3Rank: 3Rank: 3

UID
210804
好友
0
蛮牛币
283
威望
0
注册时间
2017-3-8
在线时间
19 小时
最后登录
2017-9-21
发表于 2017-7-17 09:29:48 | 显示全部楼层
学习了。谢谢楼主

回复

使用道具 举报

3偶尔光临
207/300
排名
8683
昨日变化
4

0

主题

31

帖子

207

积分

Rank: 3Rank: 3Rank: 3

UID
96001
好友
0
蛮牛币
303
威望
0
注册时间
2015-4-28
在线时间
72 小时
最后登录
2017-11-30
发表于 2017-7-17 11:10:39 | 显示全部楼层
感谢楼主无私奉献

回复 支持 反对

使用道具 举报

6蛮牛粉丝
1053/1500
排名
2335
昨日变化
3

7

主题

101

帖子

1053

积分

Rank: 6Rank: 6Rank: 6

UID
148165
好友
4
蛮牛币
636
威望
0
注册时间
2016-5-10
在线时间
449 小时
最后登录
2017-12-12
QQ
发表于 2017-7-17 14:38:50 | 显示全部楼层
谢谢楼主分享
[发帖际遇]: XXHH 乐于助人,奖励 3 蛮牛币. 幸运榜 / 衰神榜

回复

使用道具 举报

排名
24303
昨日变化
18

0

主题

20

帖子

38

积分

Rank: 1

UID
147987
好友
0
蛮牛币
29
威望
0
注册时间
2016-5-9
在线时间
8 小时
最后登录
2017-10-5
发表于 2017-7-17 22:49:15 | 显示全部楼层
谢谢楼主分享

回复

使用道具 举报

5熟悉之中
733/1000
排名
3091
昨日变化
3

2

主题

97

帖子

733

积分

Rank: 5Rank: 5

UID
49681
好友
2
蛮牛币
2158
威望
0
注册时间
2014-10-18
在线时间
250 小时
最后登录
2017-12-11
QQ
发表于 2017-7-18 08:31:49 | 显示全部楼层
弱弱的问一句  为什么要打包后才能看见效果呢?

回复 支持 反对

使用道具 举报

5熟悉之中
733/1000
排名
3091
昨日变化
3

2

主题

97

帖子

733

积分

Rank: 5Rank: 5

UID
49681
好友
2
蛮牛币
2158
威望
0
注册时间
2014-10-18
在线时间
250 小时
最后登录
2017-12-11
QQ
发表于 2017-7-18 09:34:03 | 显示全部楼层
楼主 下载了你的项目后 调整了一下 已经可以直接在编辑器里查看效果了。

楼主在Canvas里 吧RenderMode设置成Screen Space-Camera模式,然后把摄像机(MainCamera)拖进去 就行了!这样不用每次查看效果都要打包了

回复 支持 反对

使用道具 举报

5熟悉之中
969/1000
排名
3762
昨日变化
2

0

主题

480

帖子

969

积分

Rank: 5Rank: 5

UID
156480
好友
0
蛮牛币
1594
威望
0
注册时间
2016-7-12
在线时间
179 小时
最后登录
2017-11-27
发表于 2017-7-18 10:21:32 | 显示全部楼层
6666666666666666
[发帖际遇]: 东方小巴黎 在论坛发帖时没有注意,被小偷偷去了 1 蛮牛币. 幸运榜 / 衰神榜

回复 支持 反对

使用道具 举报

7日久生情
2121/5000
排名
613
昨日变化
1

1

主题

271

帖子

2121

积分

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

UID
27816
好友
3
蛮牛币
6628
威望
0
注册时间
2014-6-3
在线时间
691 小时
最后登录
2017-12-13
发表于 2017-7-18 17:31:04 | 显示全部楼层
顶,效果挺炫啊,

回复

使用道具 举报

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

本版积分规则

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