【ShaderToy】边栏的小雨伞

写在前面

我在9月份的时候对博客的主页换了个模板，一些童鞋可能会发现边栏多了个小雨伞的动画，再细心的同学可能会发现如果一直开着我的博客电脑耗电更快了……当然啦，也有可能你看到的是一团黑，这说明你该换更高级的浏览器啦！

前几天有人问我这个是怎么实现的，其实我一直都想写一下的。这个例子的灵感是我暑假的时候喝了一杯奶茶（我超爱喝奶茶……），然后觉得杯子上的图案非常可爱（有点类似于吉米的那种画风）。当然啦，用我相信用PS很多人都可以画出来，后来我就想可以不可以在shadertoy上把这个图画出来？于是就有了画卡通伞的想法。

事实上，我和很多人一样，一直惊叹于shadertoy上那些宏大的场景竟然没有使用任何传统模型，而是用代码写出来的。其中一种重要的方法就是使用distance field。而雨伞其实二维的distance field的一个简单应用。

P.S. 如果你很好奇ShaderToy上那些效果都是怎么写的，可以看两个创始人在Siggraph Asia 2014上的一个课程（而且是在中国深圳讲的呦）—— Learn to Create Everything in a Fragment Shader。

我的Umbrella：

width="600" height="350" src="https://www.shadertoy.com/embed/4t2SRh?gui=false&t=10&paused=false" allowfullscreen="">

再P.S. 很兴奋的是，Iq给这个作品留言啦，被偶像说cute好开心呀，哇哈哈哈

再再P.S.小雨伞现已加入我的Github项目Shadertoy_Lab（https://github.com/candycat1992/Shadertoy_Lab）。

什么是Distance Field

Distance Field（中文翻译为距离场？）的含义很好理解，我们可以用它来判断一个点是否在一个区域内。我们往往用一个函数来表示某个需要绘制图形的distance function，然后把屏幕上某点的位置代入计算，如果得到的值为负，那么该点就在该图形内部，如果为正，就在图形外部。这种思想看似很简单，但实际上当使用一些复杂的distance function后，就可以得到非常复杂的场景，再配合使用一些光照、图形处理的技术，就可以得到非常出色的画面效果。Iq（Inigo Quilez，Shadertoy的创始人之一）在他的博客里概述过distance field的技术。感兴趣的一定要去拜读一下。

在Umbrellar的例子里，我实际上只是非常简单地应用了一下二维空间里的distance field。这些效果都是由简单的圆、椭圆、有宽度的线段变化而来的，配合使用了并集（Union）、交集（Intersection）、差集（Difference）的操作。这些变化大部分是使用了正弦函数和一些简单的线性方程（例如伞上的条纹），只是为了得到比较好的效果需要不断尝试各种参数。

我是怎么实现的

我一开始就计划伞大概可以用一些基本图元来表示，例如伞的主题可以用两个椭圆的交集画，伞柄可以用线段+圆的并集+差集，至于伞上面的条纹其实也是很多椭圆的交集+差集画出来的。看到这里有些人可能会觉得有些混乱，实际上你在脑海里想象一下这些图元的组合关系就可以明白了。

所以，我只需要对三个图元——圆、椭圆和线段定义它们的distance function就可以了（实际上椭圆是圆的超集，但为了方便我还是把圆和椭圆分开了）：

float sdfCircle(vec2 center, float radius, vec2 coord) {
    vec2 offset = coord - center;

    return sqrt((offset.x * offset.x) + (offset.y * offset.y)) - radius;
}

float sdfEllipse(vec2 center, float a, float b, vec2 coord) {
    float a2 = a * a;
    float b2 = b * b;
    return (b2 * (coord.x - center.x) * (coord.x - center.x) + a2 * (coord.y - center.y) *