写在前面

原文链接:http://blog.csdn.net/candycat1992/article/details/49389905

我在9月份的时候对博客的主页换了个模板,一些童鞋可能会发现边栏多了个小雨伞的动画,再细心的同学可能会发现如果一直开着我的博客电脑耗电更快了……当然啦,也有可能你看到的是一团黑,这说明你该换更高级的浏览器啦!
前几天有人问我这个是怎么实现的,其实我一直都想写一下的。这个例子的灵感是我暑假的时候喝了一杯奶茶(我超爱喝奶茶……),然后觉得杯子上的图案非常可爱(有点类似于吉米的那种画风)。当然啦,用我相信用PS很多人都可以画出来,后来我就想可以不可以在shadertoy上把这个图画出来?于是就有了画卡通伞的想法。
事实上,我和很多人一样,一直惊叹于shadertoy上那些宏大的场景竟然没有使用任何传统模型,而是用代码写出来的。其中一种重要的方法就是使用distance field。而雨伞其实二维的distance field的一个简单应用。
P.S. 如果你很好奇ShaderToy上那些效果都是怎么写的,可以看两个创始人在Siggraph Asia 2014上的一个课程(而且是在中国深圳讲的呦)—— Learn to Create Everything in a Fragment Shader。
我的Umbrella:

再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) * (coord.y - center.y) - a2 * b2)/(a2 * b2);

}


float sdfLine(vec2 p0, vec2 p1, float width, vec2 coord) {

    vec2 dir0 = p1 - p0;

    vec2 dir1 = coord - p0;

    float h = clamp(dot(dir0, dir1)/dot(dir0, dir0), 0.0, 1.0);

    return (length(dir1 - dir0 * h) - width * 0.5);

}
上面的代码都很简单,就是利用了圆和椭圆的公式,线段就是斜截式的变种,在之前的文章中都看过很多次。只是需要注意,distance function要保证图元内部的点返回值小于0,外部则大于0,顺序不要搞反。
有了距离,我们就可以据此来画图了。render函数就是做这个用的:
vec4 render(float d, vec3 color, float stroke) {

       //stroke = fwidth(d) * 2.0;

       float anti = fwidth(d) * 1.0;

       vec4 colorLayer = vec4(color, 1.0 - smoothstep(-anti, anti, d));

       if (stroke < 0.000001) {

           return colorLayer;

       }


       vec4 strokeLayer = vec4(vec3(0.05, 0.05, 0.05), 1.0 - smoothstep(-anti, anti, d - stroke));

       return vec4(mix(strokeLayer.rgb, colorLayer.rgb, colorLayer.a), strokeLayer.a);

   }
render接受三个参数,第一个就是距离值,第二个是需要绘制的颜色,第三个描边的宽度。我首先在render函数里绘制绘制颜色层,并进行了抗锯齿处理(原理参见之前的文章:http://blog.csdn.net/candycat1992/article/details/44673819),然后判断需不需要描边。如果需要的话在下面首先绘制一层描边层,再把颜色层混合上去。
有了这些函数,我们就可以在屏幕上画一些基本的图元了,例如:

那么,伞在哪里呢?完全看不到嘛!别着急,我们还需要把这些基本的图元组合起来,这可以依赖基本的并集、交集和差集操作:
float sdfUnion( const float a, const float b ) {

    return min(a, b);

}


float sdfDifference( const float a, const float b) {

    return max(a, -b);

}


float sdfIntersection( const float a, const float b ) {

    return max(a, b);

}
读者如果还记得初中数学的话应该对上面的概念并不陌生。交集就是取A和B共同的部分,并集就是取A和B加起来的部分,而差集就是取A-B得到的部分。应用到distance field,那么交集就是取距离值a和b中较大的一个,这样只有其中有大于0的(在区域外)结果也会大于0,并集则取两者中较小的,这样只要其只能有小于0的(在区域内)结果也会小于0。而差集首先对b取反,即取b表示区域的补集,再和a对应的区域取交集就可以了。
上面这些函数,就是我们用到的所有函数。现在,就可以在真正开始画伞啦!
等等,在动手写代码前,我们需要首先安排下伞的各个部分的绘制部分。我把整个伞分成了三个部分:伞柄,伞身,和伞上的条纹,它们的绘制顺序也是依次从前往后。我把这三个部分绘制在不同的层上面,最后再按顺序混合它们。

伞柄

那么,第一步就是画伞柄:
vec4 main(vec2 fragCoord) {

        float size = min(iResolution.x, iResolution.y);

        float pixSize = 1.0 / size;

        vec2 uv = fragCoord.xy / iResolution.x;

        float stroke = pixSize * 1.5;

        vec2 center = vec2(0.5, 0.5 * iResolution.y/iResolution.x);


        // Draw the handle

        float bottom = 0.08;

        float handleWidth = 0.01;

        float handleRadius = 0.04;

        float d = sdfCircle(vec2(0.5-handleRadius+0.5*handleWidth, bottom), handleRadius, uv);

        float c = sdfCircle(vec2(0.5-handleRadius+0.5*handleWidth, bottom), handleRadius-handleWidth, uv);

        d = sdfDifference(d, c);

        c = uv.y - bottom;

        d = sdfIntersection(d, c);

        c = sdfLine(vec2(0.5, center.y*2.0-0.05), vec2(0.5, bottom), handleWidth, uv);

        d = sdfUnion(d, c);

        c = sdfCircle(vec2(0.5, center.y*2.0-0.05), 0.01, uv);

        d = sdfUnion(c, d);

        c = sdfCircle(vec2(0.5-handleRadius*2.0+handleWidth, bottom), handleWidth*0.5, uv);

        d = sdfUnion(c, d);

        vec4 layer0 = render(d, vec3(0.404, 0.298, 0.278), stroke);
老规矩,首先要计算当前绘制的这点在屏幕上的uv值。我们以水平方向的为基准,即变换后水平方向的值域为[0, 1],而竖直方向的要取决于分辨率。同时,为了方便后面定位一些参数和位置,我提前计算了描边的宽度值stroke,和屏幕中心的位置center。
伞柄还需要进一步细化它的结构。我是从下往上画的。首先,1)画一个落空的圆圈(对两个圆去差集),2)再去掉上半部分只留下半部分(交集),3)之后画一条表示主杆的线段(取并集)。4)伞头我想用一个更大的圆表示,所以又画了一个半径更大的圆(取并集)。5)最后,手握的那里有些突兀,所以又使用了一个圆(取并集)。得到最后的距离值后,使用棕色绘制出来,伞柄部分完成。这个过程可以用下面的图展示。当然啦,里面的位置和参数都是手调的,试了很多次,还要考虑屏幕分辨率的变化。

伞身

和伞柄相比,伞身就更加简单了。只需要用两个长短轴不同的椭圆,然后对它们取交集即可:
float a = sdfEllipse(vec2(0.5, center.y * 2.0 - 0.34), 0.25, 0.25, uv);

float b = sdfEllipse(vec2(0.5, center.y * 2.0 + 0.03), 0.8, 0.35, uv);

b = sdfIntersection(a, b);

vec4 layer1 = render(b, vec3(0.32, 0.56, 0.53), fwidth(b) * 2.0);
当然,里面的参数也是手调的,凭感觉。这里描边的时候没有用之前计算的宽度定值strock,就因为椭圆函数的距离值并不是线性的,所以使用定值会使得描边得到的宽度不一致。所以改用导数了。
绘制完这一步就可以得到下面的效果了。

条纹

实际上,条纹才是整个shader里最麻烦的部分。我一开始就想到使用正弦函数来模拟波浪的效果,但是为了让这些条纹有从上到下逐渐加宽、弧度逐渐增大的效果,还是调了很一会。
// Draw strips

        vec4 layer2 = layer1;

        float t, r0, r1, r2, e, f;

        vec2 sinuv = vec2(uv.x, (sin(uv.x * 40.0) * 0.02 + 1.0) * uv.y);

        for (float i = 0.0; i < 10.0; i++) {

            t = mod(iGlobalTime + 0.3 * i, 3.0) * 0.2;

            r0 = (t - 0.15) / 0.2 * 0.9 + 0.1;

            r1 = (t - 0.15) / 0.2 * 0.1 + 0.9;

            r2 = (t - 0.15) / 0.2 * 0.15 + 0.85;

            e = sdfEllipse(vec2(0.5, center.y * 2.0+0.37 - t * r2), 0.7 * r0, 0.35 * r1, sinuv);

            f = sdfEllipse(vec2(0.5, center.y * 2.0+0.41 - t), 0.7 * r0, 0.35 * r1, sinuv);

            f = sdfDifference(e, f);

            f = sdfIntersection(f, b);

            vec4 layer = render(f, vec3(1.0, 0.81, 0.27), 0.0);

            layer2 = mix(layer2, layer, layer.a);

        }
sinuv是基础的波浪式变化的屏幕坐标,所有条纹都是由它延伸出来的。由于这些条纹是随着时间不短向下移动,所以它们的位置可以使用不同的时间点来绘制。首先,我把条纹的循环时间定义为了3秒,这个值决定了后面的许多计算,例如要安排多少个条纹、它们的间距等等。每个条纹都是由两个椭圆取差集得到的,并和之前的结果取交集来不断增加条纹。啊,这里面的椭圆参数我就不解释了,其实如果现在让我再重现之前的实现我也很难做到了……不过可以说一下基本思路。对于每个条纹,我需要确定它们的长短轴的值。由于要实现从上到下弧度逐渐增大的效果,所以长短轴应该随着时间增加而增大。这个增大的幅度是很多实验得到的结果,最后计算得到了r0和r1这两个值。两个椭圆的中心位置,x分量好说,都是0.5,y分量的比较难办,因为想要实现从上到下宽度依次增加的效果,所以也是需要和t有关,但是如果两个椭圆关于t的系数是完全相等的话就无法实现改变宽度的效果,因此最后实验得到了r2这个参数。
完成后,把这三层和背景层混合后就得到了下面这样的效果。

Gamma校正

最后,在输出前进行伽马校正,得到最终的效果。

写在最后

有没有觉得distance field很神奇?的确,数学的魅力就是这么强大,哇哈哈哈。实际上,ShaderToy上很多3D效果也是基于这样的想法。我们看到很多看似很复杂的形状,往往也是由一些非常基本的三维图元变换而来的,例如球、三角锥、圆柱、长方体等等。那些大牛的厉害之处,在于他们可以随手拈来一些数学公式,把平淡无奇的图元逐渐变化成各种不可思议的图像。当然啦,人家的基本功肯定练了很多年了。大家可以在ShaderToy上直接搜distancefield,一定有很多不错的shader可以学习!
总之,希望这篇文章可以对一些人有所帮助。以后我会写些三维的,不过最近比较忙,可能又要搁置一段时间了,没办法,感觉要学要做的好多好多好多好多……