GLSL 效果示例

SDF 等宽描边:缩放图形,线条仍保持两像素宽

左右对照固定距离阈值和屏幕空间宽度;缩放时看描边是否变粗。

在线示例

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

观察什么

左右对照固定距离阈值和屏幕空间宽度;缩放时看描边是否变粗。

实现原理

左侧用固定距离阈值,右侧用距离的屏幕导数估计像素宽度。半径变化后比较两侧的线宽。

找到控制效果的代码

float scale=.4+1.4*u_parameter;float d=(length(p/scale)-.35)*scale;float width=p.x<0.?.025:2.*fwidth(d);float outline=1.-smoothstep(width,width+aa,abs(d));c=mix(c,vec3(.3,1.,.6),outline);

动手修改

把 length(p/scale)-.35 中的半径 .35 改为 .5。圆会变大,而距离场仍乘回 scale,可比较左侧固定阈值与右侧导数阈值的表现。

调试与成本

右侧阈值为 2.*fwidth(d),左侧为固定 .025。把右侧乘数从 2. 改成 1.,只有这一半会变窄;fwidth 估算像素尺度的变化,并不保证所有方向上的整条描边宽度都完全精确。

深入理解

用到的内置函数

一步步学会这个效果