最近在准备技术分享，想分享一下一些关于OpenGL ES的学习与技巧经验，之前我在博文：使用两个FBO互相绑定实现PS液化效果 中实现了多个类似于PS液化的效果，但没有说明采样圈在其中的逻辑关系和利用方法。于是打算通过数形结合的方式描述一下。

前提知识：

1. smoothstep函数，根据输入值平滑地输出最小和最大两个限制值以及其中间值，在AI激活函数、图像处理中均很常用。

2、normalizing技巧，通过向量份量除以总向量得到份量的归一值。在图像处理中有保留该向量的方向属性特征的作用

3、纹理采样坐标原点在左上角。

推导过程：

1、前提说明。我们已经输入了采样圈坐标center，假设当前系统发起调用，希望采样(3,4)坐标的像素，但我希望采样后的图像呈现一种膨胀效果，于是我打算让它实际采样的位置向内缩一些。现在我先使用normalize记录了(u,v)关于center的方向特征，并测量(u,v)到center距离（经典勾股，不过依靠shader内建函数distance即可求得），留待后面的步骤使用。

2、得到采样圈：

按照代码中的关系代数计算方式strength * smoothstep(0., 1. ,dist / range)，得到关于(u,v)距离center的距离dist，采样圈设定半径range，以及strength之间的关系，通过该代数式，带入假定数据到具体场景假设中，可以得出具体的采样圈如图所示。但我们现在无法得知

3、确定最终要映射到哪个坐标去：

把newDist标量=5/2乘以刚刚留下的(u,v)关于center的方向特征向量，即可把newDist变量赋予方向属性成为指向采样圈要被采样走的点。

(u,v)在采样遍历的过程中，经过多次这样的变换，将会使用内圈的像素往外推，从而实际膨胀的效果。像这样：

处理前：

处理后：