ComfyUI-VideoTransition

基于 Chromium 无头浏览器和python实现的视频转场效果插件

通过 Playwright 驱动 Chromium 浏览器在无头模式下运行，利用现代 Web 技术（HTML5/CSS3/Canvas）渲染视频转场效果。

目前实现的转场效果还不多，后续会更新，有兴趣的也可以研究

✨ 核心特点

• 🌐 浏览器引擎渲染 - Chromium 引擎驱动，充分利用 GPU 硬件加速
• 🎨 Web 技术栈 - 使用 HTML5/CSS3/JavaScript 实现复杂动画效果
• 🐍 纯 Python 控制 - 无需 Node.js，通过 Playwright 自动化框架控制浏览器
• ⚡ 高性能渲染 - 批处理优化，内存占用低，渲染速度快
• 🔧 稳定可靠 - Microsoft Playwright + Google Chromium，跨平台支持

https://github.com/user-attachments/assets/903b204f-7385-4bb1-a87e-095365724cdd

📦 安装

1. 安装依赖

cd custom_nodes/ComfyUI-VideoTransition
pip install -r requirements.txt

2. 安装 Chromium 浏览器

Windows:

playwright install chromium

Linux:

playwright install chromium

🎬 转场效果

本插件采用混合技术架构，根据效果复杂度选择最佳实现方案：

🌐 Chromium 引擎渲染（复杂 3D 效果）

1. 立方体转场 ⭐

• 技术：CSS 3D Transform + GPU 加速
• 效果：水平/垂直立方体旋转
• 优势：真实 3D 透视，硬件加速渲染
• 参数：旋转角度、立方体大小、透视强度

2. 百叶窗转场

• 技术：CSS 3D Transform + 分段动画
• 效果：水平/垂直/对角百叶窗切换
• 优势：真实百叶窗物理效果
• 参数：百叶窗数量、旋转角度、延迟时间

3. 棋盘格转场

• 技术：CSS Grid + 背景切割
• 效果：棋盘格方块逐个切换
• 优势：精确图像切割，无重复
• 参数：网格大小、动画延迟、缓动函数

4. 爆炸转场 ⭐

• 技术：CSS Transform + 物理模拟
• 效果：视频碎片四散爆炸
• 优势：多种爆炸模式，真实物理运动
• 参数：碎片数量、爆炸强度、重力效果

5. 抖动转场

• 技术：CSS Transform + 多轴震动
• 效果：随机/水平/垂直/旋转/缩放抖动
• 优势：仿剪映效果，双层抖动
• 参数：抖动强度、频率、混合模式

6. 故障艺术转场 🔥

• 技术：WebGL + 赛博朋克特效
• 效果：信号干扰/数据混合/像素排序/矩阵雨
• 优势：纯闪烁切换，密集细线矩阵
• 参数：故障强度、损坏率、噪声量

7. 故障艺术增强版 💀

• 技术：WebGL + 高级故障特效
• 效果：压缩噩梦/量子衰变/神经崩塌/数字崩溃
• 优势：极致故障美学，AI 风格特效
• 参数：视觉强度、故障类型、混沌程度

⚡ 纯 Python 实现（高性能）

8. 立方体旋转展示

• 技术：WebGL 3D 渲染
• 效果：多视频立方体旋转动画
• 优势：支持多面体、自由旋转

9. 视频叠化转场

• 技术：NumPy 数组混合 + OpenCV
• 效果：直接叠化、闪黑、闪白、叠加溶解、色散叠化
• 优势：速度快、内存占用低
• 参数：支持自定义颜色

10. 3D 翻转转场

• 技术：批处理优化 + 透视变换
• 效果：水平/垂直/斜向翻转
• 优势：纯 Python 实现真实 3D 效果

11. 扭曲转场

• 技术：OpenCV remap 像素位移
• 效果：旋涡、水平/垂直挤压、液体、波浪
• 优势：真实像素级扭曲效果
• 参数：扭曲强度、速度、缩放

12. 翻页转场

• 技术：批处理优化 + 物理模拟
• 效果：模拟真实书页翻动
• 优势：逼真物理效果，多方向翻页

13. 眨眼转场 ⭐

• 技术：NumPy 遮罩 + cv2 高斯模糊
• 效果：弧形眼睑模拟眨眼
• 优势：性能提升 50%+，内存降低 60%+
• 参数：眨眼速度、模糊强度、眼睑弧度

📊 技术选型说明

| 实现方式 | 适用场景 | 性能 | 优势 | |---------|---------|-----|-----| | WebGL + Three.js | 高级 3D/粒子效果 | 极高 | GPU 极致加速、电影级效果 | | Chromium 渲染 | 复杂 3D 效果 | 中 | GPU 加速、CSS3 能力 | | 纯 Python | 2D/简单效果 | 高 | 速度快、内存低、稳定 |

🚀 使用方法

1. 在 ComfyUI 中找到 VideoTransition 分类
2. 选择需要的转场效果节点
3. 连接输入图片/视频
4. 调整参数
5. 运行工作流

💡 技术优势

混合技术架构 - 最佳方案选择

🎯 设计理念： 根据效果复杂度和性能需求，智能选择实现方式

🌐 Chromium 引擎（用于复杂 3D 效果）

• ✅ CSS3 3D 变换 - 复杂立体效果轻松实现
• ✅ GPU 硬件加速 - 自动利用显卡渲染
• ✅ 开发效率高 - HTML/CSS 代码，所见即所得
• ✅ 跨平台一致 - 统一的 Chromium 引擎

适用场景： 立方体旋转等复杂 3D 透视效果

⚡ 纯 Python（用于高性能需求）

• ✅ 性能极致 - 速度快 50%+，内存低 60%+
• ✅ 稳定可靠 - 无浏览器依赖，兼容性好
• ✅ 精确控制 - 像素级处理，效果可控
• ✅ 资源占用低 - 适合批量处理

适用场景： 叠化、翻页、扭曲等 2D/简单效果

技术架构对比

WebGL 方案: Python → Playwright → Chromium → WebGL/Three.js → 视频帧
Chromium 方案: Python → Playwright → Chromium → CSS3 → 视频帧
纯 Python 方案: Python → NumPy/OpenCV → 视频帧

💡 优势： 三层技术栈覆盖所有效果需求，从简单到电影级

扩展潜力：

Playwright 支持驱动三大浏览器引擎：

• Chromium - 当前使用，最快最稳定 ⭐
• Firefox - Mozilla 引擎，不同渲染特性
• WebKit - Safari 引擎，苹果生态

💡 未来可能扩展：选择不同浏览器引擎以获得特定渲染效果或兼容性

✅ Playwright + Chromium 可以使用的高级技术

1. WebGL / WebGL 2.0 - GPU 加速的 3D 渲染
2. Three.js / Babylon.js - 完整的 3D 引擎库
3. GLSL Shader - 自定义着色器特效
4. WebAssembly - 高性能计算
5. 物理引擎 - 真实物理模拟

🎬 可以实现的效果

• ⭐ 粒子爆炸/飞散
• ⭐ 流体/液体模拟
• ⭐ 光线追踪/光影效果
• ⭐ 3D 场景转换
• ⭐ 电影级后处理（景深、辉光、色差）
• ⭐ 着色器特效（故障艺术、液体金属）

⚠️ 常见问题

Q: 安装失败？
A: 使用镜像：playwright install chromium --mirror=https://registry.npmmirror.com

Q: 渲染慢？
A: 降低 fps 或分辨率，减少 duration

Q: 内存占用高？
A: 确保使用 with 语句关闭渲染器

📄 许可证

MIT License

关于我 | About me

Bilibili：我的B站主页 QQ号：3260561522 wechat微信: DLONG189one