VIBECODING SUBMISSION · 2026 · BROWSER-NATIVE AUDIOVISUAL INSTRUMENT
A room that
listens back.
SIGNAL//VOID 是一个全部在浏览器里实时生成的听觉房间。没有音频文件、没有视频、没有贴图、没有第三方动画库——你看到的 88,000 个点和听到的每一个音，都是当场算出来的。
它更像一件可以演奏的乐器，而不是一个播放器：拖动漫游，点击落下一枚音，三根滑杆分别改变音高、速度与亮度、空间远近，四个章节对应四种完全不同的音乐性格。
提交信息
上传到作品平台或交付评审时，这一段可以直接引用。
预览
以下截图由 scripts/capture-previews.cjs 在本机生成，不是手绘概念图。手机截图取自 390 × 844、3× 像素密度。
作品简介
给不看代码的人看的版本。
这是一间可以进入的房间。进去之后，画面会随着你调的音慢慢变形：调高中心音，整个空间会往上升；加大脉冲，它会变快变亮；把距离拉远，声音会退到走廊尽头，画面也会散开。你可以把这些状态存下来，也可以带走——一张 4K 海报，或一段 60 秒的声音。
它刻意不做三件事：不假装成宇宙模拟器，不播放现成的背景音乐，也不在你不注意的时候把数据送走。
实现要点
- 声音：原生 Web Audio 实时合成四层结构——有起音与衰减的拨奏和弦块、缓慢呼吸的低频、稀疏的 FM 钟声、带阻尼的空间回声。四个章节使用不同的和弦族与动机，不是同一个音色换滤波。
- 画面：自写 GLSL 顶点着色器驱动 88,000 个点（手机 38,000）；没有 GPU 时降级到批量绘制的 Canvas 11,000 点，形态语言保持一致。
- 联动：声音的能量实时回灌画面，点场的亮度与呼吸跟着响度走；拖拽与点击同时改变视角与音乐。
- 导出：60 秒 WAV 与 4K 无品牌条海报都在本机渲染，不上传、不排队、不需要账号。
- 十二声景：十二个参数组合被当作作品集策展，每个都能试听、深入与下载。
现场可试
工程结构
| 文件 | 作用 |
|---|---|
index.html · styles.css | 乐器界面、语义结构与可访问性、响应式与减动效 |
app.js | 状态、交互、档案、导出、分享、渲染循环 |
renderer.js | WebGL 着色器点场 + 批量 Canvas 兜底 + GPU 生命周期 |
audio.js | 实时合成引擎与离线 WAV 渲染（同一套乐理） |
soundscapes.js · curator.html · curator.js | 十二声景数据契约、索引页与就地试听 |
scripts/validate.cjs | 主验收：45 条断言 |
scripts/render-suite.cjs | 离线渲染声景音频（--all 渲染全部 12 个） |
work/ | 专项回归：声音特征、移动端、导出、无障碍、渲染器生命周期 |
design/ · MONETIZATION-PLAN.md · release-manifest.json | 设计契约、变现假设、交付哈希清单 |
验证与复现
下列命令都可重跑；结论来自退出码与产物，不是自述。
cd signal-void node scripts/validate.cjs # 主验收 45 条断言 node work/verify-sound-character.cjs # 声音不是嗡鸣 + 三滑杆真的改变声音 node work/verify-long-exports.cjs # 4K 海报 3840×2160 与 60 秒 WAV node work/verify-curator.cjs # 十二声景页面：渲染 / 试听 / 下载 node work/measure-mobile.cjs # 三档机型渲染与音频 node work/measure-mobile-canvas.cjs # 强制无 GPU 的 Canvas 兜底 node work/verify-renderer-lifecycle.cjs node work/a11y.cjs node scripts/render-suite.cjs --all # 重新生成全部 12 个声景音频
- 主验收 45 / 45 通过
- 声音特征：波峰因数 4.75（持续嗡鸣接近 1.4）、安静窗与强窗同时存在
- 三根滑杆实测生效：中心音把音高从 37–150 Hz 推到 440–825 Hz
- 移动端三档机型：LIVE WEBGL、38,000 点、舞台占竖屏 70%、音频出声
- 无 GPU 兜底：11,000 点、约 61 FPS、画面有实际内容
- 导出：60 秒 WAV（峰值 0.50）与 3840×2160 PNG 均验证通过
- 十二声景页面：12 卡片 / 12 试听 / 12 深入 / 12 生成下载 + 3 个成品文件
- 安全门禁未对当前版本运行（按用户指定跳过），清单中如实标注
诚实边界
没有服务端：因此没有账号、支付、云端同步或跨设备档案。作品是纯静态的，可以离线打开。
本地存储不是保险箱：file:// 模式下同一浏览器的其他本地页面理论上可以读到本机档案。我们不建议把敏感内容存进档案，并提供双击清除本机数据。
手机性能是估算区间：仓库中的帧率来自桌面无头浏览器，不能代表真机；渲染路径与点数已按移动端重新配置，但中低端安卓的实际表现仍可能更低。
不是独立视觉验收：像素与结构证据齐全，但没有经过体系外的审美评审。
一句话总结
用原生 WebGL、Canvas 与 Web Audio 手写了一个可以演奏的房间，把十二种状态做成作品集，并且把「带走它」这件事真的做完了——而不是留一个支付按钮。