本站通过浏览器 Web Bluetooth 直连支持标准 BLE 心率服务
(0x180D)的设备,实时绘制滚动心电图。每次心搏都会在指定位置
迸发一大片星空粒子,并点亮信号指示灯。
液态玻璃通过 WebGL 片元着色器渲染:SDF 高度场、双界面折射、Face/Inner/Outer
三路采样、边缘色散与 GGX 高光,形成真正的光路折射,而非 RGB 假扭曲。
只要设备支持标准 BLE 心率服务(0x180D)即可连接。部分手表/手环需先在设备端 手动开启「心率广播」或「心率推送」功能,浏览器才能搜索到。
· 建议使用 Chrome 或 Edge 等 Chromium 内核浏览器
· 页面必须运行在 HTTPS 或 localhost 下,蓝牙才可用
· 搜索时请确保设备处于配对模式且未被其他 App 占用
· 若设备未广播标准服务,可尝试在代码中改用 acceptAllDevices 兜底
Background:ECG 波形与粒子渲染到离屏画布,上传为 paintComposeRT 纹理,并生成 5 级模糊金字塔。
Glass:WebGL 片元着色器读取 paintComposeRT,通过 SDF 高度场、双界面折射、Face/Inner/Outer 三路采样与边缘色散,得到最终透明材质。
Content:本面板、按钮、文字、图标都在 DOM 层,始终清晰且可交互,不参与折射与模糊。
玻璃厚度:影响高度场幅度,越厚折射位移越大。
折射率 IOR:1.46 为标准光学玻璃,越大折射越强。
色散:RGB 三路 IOR 差值,越大边缘彩虹越明显。
玻璃位置 / 玻璃高度:控制玻璃带在屏幕上的垂直位置与厚度。
1. 用 Chrome / Edge 打开页面(HTTPS 或 localhost)
2. 点击底部「连接心率设备」,选择你的设备
3. 未连接设备时,拖动「速度」滑块即可模拟 68–180 BPM
Chrome / Edge 等 Chromium 内核浏览器,页面运行在 HTTPS 或 localhost 下。 Safari、Firefox 暂不支持 Web Bluetooth。