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 估算像素尺度的变化,并不保证所有方向上的整条描边宽度都完全精确。