[muzzik教程]:SDF实战~实现圆角头像

继上篇帖子之后,为了让大家更好的了解SDF,以及如何运用在creator,特出几个小案例

# 效果

头像

# 实现

ps:不了解SDF原理的朋友请看上一篇帖子…

如果我们想让SDF图形变的圆润怎么做呢?一句代码就可以搞定,用 距离场 - 缩小半径,会得到如下的效果
头像2

代码如下:

  • rounded_f:输入变量,控制圆滑度
// 距离场
float dist_f = sdf_box(render_v2, vec2(0.5)) - rounded_f;

为什么会得到这样的效果呢?因为我们距离场的距离是到 物体表面 的距离,如果我们缩减这个距离,就不是 长 - 长,宽 - 宽 的效果了,而是从物体边缘往中心点缩减,所以才会让物体变得圆滑

  • 例(上方代码):矩形大小为 0.5,rounded_f 为 0.5,也就是在离矩形中心 1.0 距离的位置才代表在物体内,而 1.0 以外对于横竖方向都是不可见的区域,而斜方向却是可以大于 1.0,导致四个角变得圆润



既然可以变的圆滑了,那我们怎么让它在圆滑的同时不影响原本的大小呢?也很简单,直接把矩形大小减去我们 rounded_f,外层的 - rounded_f 让我们的矩形范围越来越大,所以我们只需要缩减原本的矩形大小就可以抵消外层的影响

float dist_f = sdf_box(render_v2, vec2(1.0 - rounded_f)) - rounded_f;

# 结语

福音书:

下一篇预告,SDF纹理

3赞

:cow::beer: 火钳留名

首先大佬牛逼!
然后:我在2.4.8里面试了一下 发现好像只有正方形的图可以过渡成圆形, 然后就是这个样子:

顺带请教一下

我把你的这两个代码文件放到项目里但是不能引用成功,是我的姿势不对吗?

代码文件是必须放在chunks目录下面才能引用,如果2.x不支持可以直接copy代码到effect里面,非正方形的的问题我待会儿看看

这就是 Inigo Quilez :: computer graphics, mathematics, shaders, fractals, demoscene and more 里讲的圆角函数吧

对,所有sdf图形都可以用

先对图片的 uv 进行缩放,再截取中间正方形区域,就可以处理非正方形图了。

是的 不过是放到了某个子目录里面 可能是这个原因

我现在就是直接把函数拿出来用的 :joy:

可以多加一个参数,用于控制非正方形的展示,w_ratio_f 就是图片 w / h 的值

vec2 render_v2 = (uv0 - vec2(0.5)) * 2.0 * vec2(w_ratio_f, 1.0);

请收下我的屁股~