用途:在 FrameVideo 中用 TypeGPU / 原生 WebGPU 创建 GPU 渲染合成,适合 GPU 计算着色器(粒子系统、物理模拟)、自定义 WGSL 着色器(液体玻璃、metaball、光线步进)、高性能效果(复杂片元着色器、后期处理)、噪声场、反应扩散、流体模拟等;简单 3D 用 three,2D 动画用 gsap,常规效果用 WebGL 替代,文本/UI 动画用 HTML + GSAP。
主要能力与用法:初始化需 await navigator.gpu.requestAdapter() 与 requestDevice(),并自行判断 WebGPU 是否可用(适配器不代劳);用 canvas.getContext("webgpu") 后 ctx.configure。渲染时间必须来自 FrameVideo 而非 performance.now():监听 fv-seek 事件,用 event.detail.time 更新 uniform 并重绘,也可读 window.__fvTypegpuTime。视频渲染时须在提交 GPU 工作后 await device.queue.onSubmittedWorkDone() 以冲刷画布再捕获帧。GSAP 中驱动文字、字幕或 HTML 元素的补间必须在任何 await 之前同步注册,GPU 相关补间可放入异步 IIFE;window.__timelines 存时间轴。全屏效果用无顶点缓冲的三角形顶点着色器 pass.draw(3)。视频作为输入纹理时先等 loadedmetadata,按原生分辨率建纹理,每帧 copyExternalImageToTexture;无头 Chrome 可能失败,生产渲染建议用 FFmpeg 预抽关键帧为 PNG 作图像纹理。磨砂模糊用先降采样到 1/6 分辨率、再做玻璃合成的两趟方案。alphaMode 选 opaque 表示 GPU 画布渲染整帧,选 premultiplied 表示透明处露出下层 HTML,适合叠加粒子或路径动画。玻璃效果可用圆角矩形 SDF 划分内部、环带与外部区域。
限制与契约:需保证渲染确定性——不用 Math.random(),改用带种子 PRNG;不用 requestAnimationFrame 渲染循环,仅响应 fv-seek;不用 performance.now() 计时。WebGPU 浏览器支持有限。更多细节(安装命令、完整管线代码)原始资料暂未提供。