GLSL 效果示例

SDF 胶囊:从两点间的线段画出圆头笔触

拉长线段或改变半径,两端始终是半圆。

在线示例

修改右侧代码,左侧预览会实时更新。

观察什么

拉长线段或改变半径,两端始终是半圆。

实现原理

线段投影先被夹紧到两端之间,当前位置到最近点的距离减去半径,得到胶囊距离场。

找到控制效果的代码

vec2 b=vec2(.15+.6*u_parameter,.3*sin(u_time*.4));float d=sdCapsule(p,vec2(-.45,-.2),b,.12);c=mix(c,vec3(.22,.9,.7),1.-smoothstep(-aa,aa,d));

动手修改

把 sdCapsule 的最后一个参数从 .12 改成 .2。线段会变粗并保持圆头,固定端点 vec2(-.45,-.2) 与运动端点 b 的位置不变。

调试与成本

sdCapsule 中的投影 clamp 会选择有限线段上最近的点,也包括两个端点。把 b 换成 vec2(.45,-.2),可停止端点运动并查看水平胶囊,距离计算本身不变。

用到的内置函数

一步步学会这个效果