Skip to content

导出 ​

GradLab 提供三种导出格式。所有导出均捕获完整的合成输出 — 渐变、半调、ASCII 矩阵与颗粒 — 以原生渲染分辨率(最低 2× 设备像素比)输出。

PNG 截图 ​

导出倍率 ​

下载按钮上方可选 1×、2×、3×,旁边显示实际图片/视频输出像素。1× 保留现有渲染分辨率(包括最低 2× 设备像素比),2× 和 3× 分别增加宽、高的像素数。例如 DPR 为 2 时,640×360 的画布对应 1280×720、2560×1440、3840×2160。

倍率不改变画布布局,也不影响 HTML 和参数码导出。高倍率会重新渲染更多像素,不是将已生成的图片拉大。设备不支持的尺寸会显示提示。

视频会以固定 30 fps 离线逐帧渲染,并编码为高画质 H.264 MP4。2× 和 3× 编码可能比录制时长更久,但导出文件会保留每一帧,不会因实时负载而掉帧。

下载帧捕获当前画布状态为 PNG。

  • 输出像素 = 画布尺寸 × Math.max(2, devicePixelRatio) × 导出倍率
  • 包含所有激活的图层:渐变、半调、ASCII 矩阵与胶片颗粒
  • 即时导出,无处理延迟

适合: 设计稿、社交媒体、UI 原型图或印刷素材。

视频录制 ​

录制 MP4 用来确定动画时长;停止后,GradLab 会逐帧渲染并编码。

  1. 点击录制 MP4开始 — 按钮显示已录制时长
  2. 录制完成后点击停止
  3. GradLab 以 30 fps 渲染时间轴、显示编码进度并自动下载 MP4
设置选项
格式MP4(H.264),以 30 fps 离线编码
乒乓循环启用后,录制内容正放后倒放,形成无缝无限循环

INFO

如果要将视频用作循环背景,请在开始录制前启用乒乓循环。生成的文件在循环点处无可见的跳切。

录制技巧:

  • 录制 3–8 秒并使用乒乓循环 — 文件更小,效果更好
  • 录制前降低速度,获得更舒缓的氛围感循环
  • PNG/MP4 不包含预览倾斜,也无需关闭倾斜开关

HTML 代码导出 ​

导出代码生成一个完全独立的 .html 文件,包含:

  • 完整的 WebGL 着色器源代码
  • 所有当前参数值,以 uniform 形式内嵌
  • 画布渲染循环
  • 无任何外部依赖 — 可在任意浏览器离线运行

生成的 HTML 可以:

  • 通过 <iframe> 嵌入任意 Web 项目
  • 作为独立全屏背景使用
  • 直接以文件形式在任意浏览器中打开
  • 作为包含完整视觉状态的单文件进行分享

TIP

导出的 HTML 是当前参数设置的快照。调整渐变后需重新导出 — HTML 文件与应用之间没有实时链接。

分辨率说明 ​

GradLab 以 Math.max(2, devicePixelRatio) 渲染,确保所有平台的基础像素密度至少为 2:

  • Mac(Retina): 根据显示器为 2× 或 3×
  • Windows(标准 DPI): 至少以 2× 渲染;更高设备像素比仍然生效

保存范围 ​

独立 HTML 会嵌入用于图片弥散的背景图片;参数码只保存设置,不包含原图,恢复图片弥散时需重新上传背景图片。参数码也不保存画布 W/H、导出倍率、当前动画时刻或鼠标热力轨迹。HTML 随嵌入容器尺寸渲染,不是编辑器完整会话备份。