DepthFlow
目录
工具简介
DepthFlow 是一款基于 WebGL 和 Three.js 的深度图像处理工具，能够：
- 将普通2D图片转换为具有3D深度感的动态效果
- 提供多种可视化效果选择
- 实时调节深度参数和视觉效果
- 支持导出处理结果
界面布局
界面分为左右两个主要区域：
左侧控制面板
- 顶部：工具标题和作者信息
- 上传区域：“Upload Image”按钮
- 效果选择：Dot/Scanline/Cross三种效果
- 参数调节：5个可调节参数滑块
右侧展示区
- 中央空白区域：图片处理效果展示
- 加载状态提示
- 示例图片快捷入口
基础操作
1. 图片上传
点击”Upload Image”按钮后：
- 从本地选择图片文件（支持格式：JPG/PNG/WEBP）
- 系统会自动上传并处理图片
- 处理完成后自动显示效果（处理时间取决于图片大小）
2. 使用示例图片
点击展示区中的”example”文字：
- 自动加载预置的示例图片
- 立即展示处理效果
- 适合快速体验工具功能
3. 效果切换
在”Effect”区域点击不同效果名称：
- 实时切换显示效果
- 每种效果有独特视觉表现
- 可随时切换比较不同效果
效果参数详解
1. Direction (方向)
- 控制效果元素的移动方向
- 开关状态：水平/垂直方向
- 适合不同构图需求的图片
2. Duration (持续时间)
- 调节动画速度
- 数值范围：0.1-2.0
- 较小值=快速移动，较大值=缓慢移动
3. Distance (距离)
- 控制深度感知强度
- 数值范围：0-100
- 较大值=更强的3D景深效果
4. Bloom Intensity (泛光强度)
- 调节光晕效果强度
- 数值范围：0-1
- 适合营造发光/霓虹效果
5. Color (颜色)
- 点击色块打开调色板
- 可自定义效果主色调
- 支持HEX颜色代码输入
高级技巧
-
人像照片优化
- 推荐使用”Dot”效果
- Distance设置在40-60区间
- 适当增加Bloom(0.3-0.5)
-
风景照片优化
- 推荐使用”Scanline”效果
- 尝试垂直Direction
- Duration设为1.0左右
-
创意效果
- 使用”Cross”效果+高Bloom值
- 搭配鲜艳的Color设置
- 创造科技感视觉效果
-
性能优化
- 超大图片(>2000px)建议先裁剪
- 复杂效果可降低Distance值
- 关闭其他浏览器标签提升性能
常见问题
图片处理类
Q: 为什么我的图片处理很慢？ A: 大尺寸图片需要更多计算资源，建议：
- 上传前将图片缩小到1500px宽度以内
- 关闭浏览器其他标签页
- 检查网络连接状况
Q: 支持透明背景PNG吗？ A: 当前版本会忽略透明通道，未来更新将支持
效果调节类
Q: 为什么调节参数没反应？ A: 请检查：
- 是否已成功加载图片
- 参数滑块是否已拖动
- 尝试刷新页面后重新上传
Q: 如何重置所有参数？ A: 目前需要手动将每个滑块调回默认位置：
- Duration: 0.5
- Distance: 50
- Bloom: 0
- Color: 默认白色
其他问题
Q: 会添加视频支持吗？ A: 视频处理功能正在开发中，预计下个版本推出
Q: 如何保存处理结果？ A: 当前版本建议使用截图工具保存，导出功能开发中
由 Deadrabbit 开发 | 反馈问题
Last updated on