液态玻璃球体工作室

设计玻璃球动效,并导出透明 PNG、循环 WebM 或独立 HTML。

选择预设并调整球体与高光,再导出透明 PNG 用于样机、6 秒循环视频用于动效剪辑,或导出独立 HTML 渲染器。

实时预览

WebGL2 着色器渲染器

不会发送输入或设置,所有渲染都在当前浏览器中完成。

正在准备实时预览…

WebM 透明度会因浏览器编码器而异,请在剪辑软件中核对结果。

背景
片段着色器
使用说明

为网页项目制作玻璃球体

设计玻璃球动效,并导出透明 PNG、循环 WebM 或独立 HTML。

操作步骤

  1. 通过以下入口提供原始输入:预设。
  2. 设置:玻璃色调 / 球体大小 / 折射 / 光泽 / 旋转速度 / 透明 / 背景颜色 / PNG 尺寸。对照下方参数说明,选择符合当前任务的选项。
  3. 执行:下载 PNG / 录制 6 秒 WebM / 下载独立 HTML。复制、下载或用于其他场景前,先检查结果。
  4. 选择预设并调整球体与高光,再导出透明 PNG 用于样机、6 秒循环视频用于动效剪辑,或导出独立 HTML 渲染器。

参数怎么选

选项取舍与影响
PNG 尺寸 / 透明PNG 保存静态图,WebM 录制 6 秒动画,独立 HTML 保留渲染器并需要支持 WebGL 的浏览器。静态透明素材可用 PNG;WebM 透明度需在接收浏览器或编辑应用测试。

示例与预期结果

例如选择“极光”并保留透明背景。1024 px 导出会生成 1024 × 640 PNG,球体周围透明。WebM 是否保留透明度取决于浏览器编码器和剪辑软件。

失败后怎么办

  • 渲染器无法启动时,检查浏览器是否支持 WebGL。视频编码不支持或其他应用丢失透明度时,静态用途改用 PNG;使用 WebM 前先在接收应用验证。