用途:在 HyperFrames 中通过 typegpu 运行时适配器使用 TypeGPU 或原生 WebGPU 创建 GPU 渲染合成,支持 WGSL 片元着色器与计算等。适配器不拥有你的管线,只发布 HyperFrames 时间并派发 seek 事件,由你的合成渲染精确帧。
主要能力与契约:异步初始化 WebGPU(await navigator.gpu.requestAdapter()),但所有 GSAP 补间必须同步注册——在任何 await 之前,因为播放器在页面加载时立即读取时间线。渲染应基于 HyperFrames 时间而非 performance.now()。监听 hf-seek 事件并在该时间重新渲染。需自行处理 WebGPU 不可用的环境,适配器不检查。视频渲染时,提交 GPU 工作后调用 await device.queue.onSubmittedWorkDone() 以确保帧捕获前画布已刷新。适配器设置 window.__hfTypegpuTime 并在每次 seek 时派发 new CustomEvent("hf-seek", { detail: { time } })。
用法要点:用 canvas 获取 webgpu 上下文并 configure;创建 uniform 缓冲写入时间;在 render(t) 中编码渲染通道并提交;初始 render(0),并监听 hf-seek 调用 render(e.detail.time)。GSAP 时间线同步注册并挂到 window.__timelines,GPU 相关补间可放在异步 IIFE 内。视频纹理需等待 loadedmetadata,按原生分辨率创建纹理,用 copyExternalImageToTexture 更新;无头 Chrome 可能失败,生产渲染建议用 FFmpeg 预抽关键帧为 PNG 再作为图像纹理加载。磨砂模糊用两遍法:先降采样到 1/6 分辨率,再做玻璃合成。alphaMode 可选 opaque(GPU 渲染整帧)或 premultiplied(透明处透出下层 HTML,用于叠加层)。全屏三角形顶点着色器无需顶点缓冲,pass.draw(3) 即可。圆角矩形 SDF 用于玻璃药丸效果。确定性渲染要求:不用 Math.random(),用带种子的 PRNG;不用 requestAnimationFrame 渲染循环,只响应 hf-seek;不用 performance.now(),读 window.__hfTypegpuTime 或 e.detail.time。
限制:适配器不检查 WebGPU 可用性;无头 Chrome 对视频 copyExternalImageToTexture 可能失败;单遍高斯核不足以实现玻璃磨砂,需两遍降采样。其余平台、收费与效果信息暂未提供。