分形的奥秘！分形着色器！shader 编程入门实战 ！ Cocos Creator！

极致的数学之美！

什么是分形？

“一个粗糙或零碎的几何形状，能够分红数个部分，且每一部分都（至少近似地）是总体缩小后的形状”

简单来讲，分形（fractal）就像这个doge表情包同样，放大一部分后和原来的图近似。

用分形着色器实现的效果以下，在编辑器内放大其中的一部分，会发现与总体很是类似！

如何实现这么优雅的图片？一切起源于简单的公式（julia set） 。

f(n) = f(n-1) * f(n-1) + c

经过迭代 n 次后能够实现分形效果。

起始值 f(0) 如何肯定？ 能够经过纹理坐标来肯定。

固然这个起始值是个复数，有实数部分和虚数部分。咱们用纹理u坐标表示实数，v表示虚数部分。

纹理坐标的取值是0-1，能够加一些偏移和缩放处理。

float real = (v_uv0.x-0.5)/zoom + offset.x;
float image = (v_uv0.y-0.5)/zoom + offset.y;

c 也是复数，对于不一样的值，效果也不同。

一次迭代如何计算？记得虚数部分 i*i = -1 就能够根据公式计算了，参考代码以下：

float tmp_real = real;
// 计算新的复数-实数部分
// f(n+1) = f(n)*f(n) + c
// (a+bi)*(a+bi) + c = a*a - b*b + (2*a*b)i + c_real + (c_image)i
real = (tmp_real*tmp_real) - (image*image) + c_real;
// 虚数部分
image = 2.0*tmp_real*image + c_image;

如何显示不一样的颜色？当迭代到必定次数后，这个迭代函数会发散。当这个复数的模大于2时，中止迭代，并根据次数显示不一样的颜色。

for(float i = 0.0; i < 9999.0; i++){
  // 计算新的复数... 省略部分代码

  // 复数大小的平方
  r2 = real*real + image*image;
  conut = i;
  if(r2 >= 4.0){
    break;
  }
}
if(r2 < 4.0){
  o = v_color;
}else{
  o = vec4(mix(outColor1.rgb, outColor2.rgb, fract(conut*0.07)), 1);
}

这里用到了一些内置函数，不清楚的话能够看下图。

若是咱们对公式中的 c 修改一下，让它与起始值相同，就变成了 mandelbrot set 。

float real = (v_uv0.x-0.5)/zoom + offset.x;
float image = (v_uv0.y-0.5)/zoom + offset.y;
float c_real = real;
float c_image = image;

这幅图被称做上帝的指纹。

以上为白玉无冰使用 Cocos Creator v2.2.2 开发"分形着色器"的技术分享。更多精彩内容在公众号【白玉无冰】。有什么想法欢迎留言交流！若是这篇对你有点帮助，欢迎分享给身边的朋友。