See-through compute.
基于 WebGL 的物理折射管线，将光线、厚度、色散整合到单一 shader，实现桌面级玻璃质感，移动端 60fps。
✦
实时焦散 Caustics
5 层 FBM 高度场驱动法线，计算梯度生成流动焦散。边缘 Fresnel 增强，呈现水银般高光闪烁。
◐
物理折射
动态 IOR 1.30–1.58，RGB 通道分离模拟色散。玻璃厚度随噪声起伏，产生真实透镜放大。
◈
交互厚度场
鼠标距离场驱动局部增厚 140%，低通滤波平滑跟随。触摸设备同样流畅，无需额外依赖。
技术规格
渲染器
WebGL2 / Three.js r160
单 quad
着色器
1 Vertex + 1 Fragment
~210 行 GLSL
噪声
5 层 FBM Simplex
各向异性
性能
1080p < 2.3ms
M1 / 3060
交互
指针 / 触摸
60fps 平滑
兼容
Chrome 111+, Safari 16.4+
WebGL2
为设计系统而生
封装为 <neuro-glass> Web Component，可无缝嵌入官网、仪表盘或 XR HUD。支持 prefers-reduced-motion、深色模式与无障碍对比度。
从光学到交互。
不只是视觉效果，而是可参数化的设计原语。设计师调厚度，工程师控 IOR。
⬙
设计令牌
thickness, ior, dispersion, fresnel 全部暴露为 CSS 变量，Figma Tokens 同步。
⬘
低功耗模式
自动降噪与帧率限制，低电量或后台标签页暂停渲染，节省 70% GPU。
⬗
安全沙箱
纯前端渲染，无外部纹理，无追踪脚本。可离线部署至内网环境。