再说fragshader特效_膨胀效果的数学推导

本文链接：https://blog.csdn.net/cjzjolly/article/details/129571230

文章介绍了如何在OpenGLES中运用smoothstep函数和normalizing技巧来创建图像的液化效果。通过设置采样圈和调整采样坐标，实现了以特定点为中心的膨胀效果。作者详细解释了从计算距离到应用变换的过程，展示了一个将内圈像素推向外圈的图像处理技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

前提知识：

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

2、normalizing技巧，通过向量分量除以总向量得到分量的归一值（比例值）。在图像处理中有保留该向量的方向属性特征的作用，任何大小的标量乘以normalize之后得到的向量因为x,y比例一直，会和原向量的位置一致

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

推导过程：

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

2、得到采样圈：

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