WebGL progressive blur

Fine Progressive Blur

局部纹理、连续半径、原生交互。

大面积模糊 Dashboard ↗
CSS 分层模糊
实时视口 · 原生交互

September survey · Hengduan range

山脊之上的缓慢天气

27°48′N3,840 m6 min read
观测剖面 B–07等高距 40 m

云并不是突然抵达的。它先把远处岩层的对比度轻轻压低,再沿着林线移动,像一层极薄、连续变化的玻璃。

逐时观测

UTC +08
北坡

云层沿山脊抬升,能见度 12 km。

林线

风速稳定在 4.8 m/s,针叶表面开始干燥。

溪谷

水温 7.2°C,石面反射出现清晰高光。

西脊

低饱和蓝灰进入阴影,轮廓保持完整。

“边缘真正消失时,人不会注意到效果本身,只会自然地继续阅读。”

午后风向转西,湿润空气被推向更高的坡面。近处细节仍然锋利,远处的树冠则逐渐合并为安静的灰绿色层次。

记录的意义不在于冻结景象,而在于保留变化的速度:哪些边界先软化,哪些纹理最后才从视野里退去。

遮罩不接管输入;可以直接滚动、选中文字或操作正文按钮。

BackendCSS
Layers8 / edge
Texture capturenone
实现细节与边界

分层合成

Rᵢ = Rmax / 2^(7 − i)

每个边缘最多 8 层,半径逐层翻倍。相邻 mask 重叠,从正文内缘的清晰区域过渡到外缘的最大模糊。

浏览器直接绘制

默认使用 CSS 保底,WebGL 管线完成首帧后关闭 CSS; 管线不可用时继续由浏览器绘制。各层均穿透指针事件,滚动和正文交互保持原样。

蒙版控制模糊

黑色保持清晰,白色达到最大半径。灰度控制两者之间的模糊强度。

September survey · Hengduan range

山脊之上的缓慢天气

27°48′N3,840 m6 min read
观测剖面 B–07等高距 40 m

云并不是突然抵达的。它先把远处岩层的对比度轻轻压低,再沿着林线移动,像一层极薄、连续变化的玻璃。

逐时观测

UTC +08
北坡

云层沿山脊抬升,能见度 12 km。

林线

风速稳定在 4.8 m/s,针叶表面开始干燥。

溪谷

水温 7.2°C,石面反射出现清晰高光。

西脊

低饱和蓝灰进入阴影,轮廓保持完整。

“边缘真正消失时,人不会注意到效果本身,只会自然地继续阅读。”

午后风向转西,湿润空气被推向更高的坡面。近处细节仍然锋利,远处的树冠则逐渐合并为安静的灰绿色层次。

记录的意义不在于冻结景象,而在于保留变化的速度:哪些边界先软化,哪些纹理最后才从视野里退去。

采样详情

等待纹理后端就绪。

图片模糊对照

同一张图片,整幅固定半径。

当前算法高斯 9 · 12px

正在加载图片…

普通 CSSblur(12px)

正在加载图片…