添加融球文档

README.md

@@ -23,6 +23,11 @@ cocos是一款挺棒的游戏引擎，我在这个仓库实现一些游戏当中
 
 ![预览二维码](./doc/demo.png)
 
+## 融球效果（shader）
+元球也叫融球，它能够让两个球体产生“黏糊糊”的效果，是流体，融合等效果的实现基础，异名这次实现的demo是一个固定的大圆，然后手指控制一个游离态的小圆
+
+![demo](./doc/Metaball/resources/demo.gif)
+
 ## 水波扩散（shader）
 水波扩散是一个比较好看的交互效果，特别是在某些以水为故事发生场景的游戏中，扩散的水波会让场景更加栩栩如生。
 
@@ -79,6 +84,11 @@ cocos是一款挺棒的游戏引擎，我在这个仓库实现一些游戏当中
 
 ![demo](./doc/Moving_ghost/resource/demo.gif)
 
+## 颜色滤镜
+我们手机上有很多照片处理软件，图片滤镜是里面不可或缺的一部分，我们可以先尝试一些很简单的滤镜的算法，管中窥豹地去认识一下色彩的处理
+
+![demo](./doc/Filter/resources/demo.png)
+
 ## 背景无限滚动
 这是游戏里面很常用的一个功能模块，它就像你的生活，有着走不完的路程。它的实现也很简单，要么做一个很长的背景图，然后移动相机；要么就是实现一个跑马灯，像那些轮播图什么的，大家应该都有写过。
 

assets/Scene/Home/Home.ts

@@ -6,6 +6,7 @@ enum sceneList {
   'Specular_gloss' = '镜面光泽效果（shader）',
   'Dissolve_color' = '溶解效果（shader）',
   'Follow_spot' = '追光效果（shader）',
+  'Metaball' = '融球效果（shader）',
   'Circle_avatar' = '圆形头像（shader）',
   'Scratch_ticket' = '刮刮卡实现',
   'Coin_fly_to_wallet' = '金币落袋效果',

doc/Metaball/元球效果.md

@@ -0,0 +1,40 @@
+# 效果演示
+
+元球也叫融球，它能够让两个球体产生“黏糊糊”的效果，是流体，融合等效果的实现基础，异名这次实现的demo是一个固定的大圆，然后手指控制一个游离态的小圆
+
+![demo](./resources/demo.gif)
+
+# 实现思路
+
+Metaballs在数学上是一个求等势面的公式，两个球体之间的等势面为`E = R² / (△x² + △y²)`，
+
+```c++
+float energy(float r, vec2 point1, vec2 point2) {
+  return (r * r) / ((point1.x - point2.x) * (point1.x - point2.x) + (point1.y - point2.y) * (point1.y - point2.y));
+}
+```
+
+demo的实现很简单，固定的圆处于中心的位置，加大一下半径，求出它的等势面`energy(u_radius + 0.1, v_uv0.xy, vec2(0.5))`，然后我们在手指的落足点再生成一个等势面`energy(u_radius, v_uv0.xy, u_point)`，然后叠加它们，让处于等势面上的点的色值透明度为1，不在该等势面上的透明度为0就可以达到视觉中的球体融合效果：
+
+```c++
+void main(){
+  vec4 color = texture(texture, v_uv0);
+
+  float fragEnergy = energy(u_radius + 0.1, v_uv0.xy, vec2(0.5)) + energy(u_radius, v_uv0.xy, u_point);
+  color.a = smoothstep(0.95, 1.0, fragEnergy);
+  gl_FragColor = color;
+}
+```
+
+这个demo效果异名记得是在一个记账软件上看到的，然后念念不忘，如果你是有心人，你会发现cocos Creator官网的loading动画也是两个球体之间来回改变位置的metaball动画。那如果我们的页面上有更多的小球，让它们互相叠加融球效果，那就可以产生出流体的效果了，异名这两周会抽空实现喔
+
+
+## 效果预览
+
+源码获取请点击**查看原文**，长按二维码查看效果👇
+
+![ewm](./resources/preview_ewm.png)
+
+
+
+