ShaderJoy —— “圆点消散” 的实现 【GLSL】

- 日理万妓 2023-07-03 04:38 124阅读 0赞

视频预览

圆点消散特效

设计思路

首先我们需要把图像分成 N*N 的网格(N 即代码中的 dots),每个网格中的坐标 pos 的取值范围都是 [0.0, 1.0] 的,且每个网格内的中心坐标都是 (0.5, 0.5)。那么我们就可以在网格内部依据像素到中心的距离 distance(pos, grid_center) < r 来绘制出一个圆。

接下来的问题是——如何设计网格中的圆的半径 r ?这里的设计是让 uv 离变化中心 (center) 越近的半径越大,越远的半径越小。如图所示,由于本例的变化中心就是屏幕中心,所以中间的圆半径最大,而屏幕四角的圆半径较小。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9wYW5kYTEyMzRsZWUuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70

最后,我们通过乘上 progress 来让网格中圆的半径随着时间变化,以控制圆的缩放。

发表评论

表情:
评论列表 (有 0 条评论,124人围观)

还没有评论,来说两句吧...

相关阅读