从一个 3D 空间的想法开始
刚接触 vibe coding 时，我曾反复思考：网页是否也能呈现出具有真实纵深感的 3D 空间？Maxime Heckel 网站中的玻璃效果给了我最直接的启发。光线穿过透明材质，并随着视角产生变化，那种细腻的空间感让我很想亲手实现。
看起来像玻璃，还不够
真正开始复刻后，我尝试了多种方案，始终无法准确还原其中的材质与光影。早期结果虽然具备透明、模糊和高光，却缺少真实的空间关系，更像一层覆盖在界面上的视觉滤镜。
我逐渐发现，问题并不只在某个 Shader 参数。背景采样、表面法线、屏幕空间折射、RGB 色散与边缘高光需要共同工作，玻璃才会产生可信的体积感。仅凭观察成品，很难反推出这条完整的渲染路径。
沿着前人的路径重新拆解
经过一段时间的探索后，我参考了 web-shader-extractor 和 claude-skill-web-clone 的实现方法，重新梳理了观察、提取、实现与验证的顺序。它们帮助我把模糊的“玻璃感”拆成可以逐项调整的渲染线索。
最终的实现被整理成两条路径：圆形透镜通过采样背景建立折射和放大，适合玻璃球或可拖拽的放大镜；文字、图标与不规则轮廓则由遮罩生成表面法线，再完成折射、色散与高光。类似的材质效果后来也被应用在了我的 Hero 区。
把一次实验整理成可复用的 Skill
完成效果后，我把生成脚本、两种材质路径、默认参数和三轮视觉检查整理成 glass-web-material-skill。其中既保留了最终代码，也记录了何时该使用圆形透镜，何时更适合文字或轮廓遮罩，以及如何判断折射是否真正可见。
这段经历也改变了我解决问题的方式。面对一个新想法，先研究前人如何拆解和验证，再结合自己的需求继续改进，往往比独自摸索更有效，也能把时间留给真正值得深入理解的部分。