Elysia Tools
导航
Design
使用 Sharp 分析 WebP/VP8 图像，生成灰度位移图，并用 Three.js 渲染可旋转的 3D 浮雕表面
详情
上传 WebP 或常见栅格图片，后端生成灰度高度图，前端通过 PlaneGeometry 和 displacementMap 展示亮度驱动的 3D 拉伸效果。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
VP8 图像分析器是一款专为设计师和开发者打造的在线工具，能够将 WebP、JPEG、PNG 等常见栅格图片转换为交互式 3D 浮雕模型。该工具在后端使用 Sharp 提取图像亮度并生成灰度位移图（高度图），随后在前端通过 Three.js 的 PlaneGeometry 和 displacementMap 技术，将二维图像渲染为可旋转的 3D 拉伸表面，帮助用户直观地检查图像的深度和纹理细节。
背景
设计师正在制作一个基于真实风景的 3D 场景，需要将一张 WebP 格式的风景照片转换为地形高度图。
问题
无法直观判断照片的亮度分布是否适合作为地形的位移贴图。
如何使用
上传 `sample-landscape.webp`，将“位移强度”设为 1.25，“平面细分”设为 192，并开启“自动旋转”。
{
"displacementScale": 1.25,
"segments": 192,
"maxTextureSize": "1024",
"autoRotate": true,
"wireframe": false
}结果
图像的明亮区域在 3D 视图中凸起，暗部凹陷，设计师成功确认了该图片的深度层次，并直接在浏览器中预览了地形效果。
背景
开发者正在优化一个 Three.js 项目，需要平衡位移贴图的视觉效果与多边形数量。
问题
需要观察不同细分数（Segments）下，顶点位移的平滑程度和网格结构。
如何使用
上传一张测试用的黑白纹理图，将“平面细分”调低至 64，并勾选“线框叠加”选项。
{
"displacementScale": 2.0,
"segments": 64,
"maxTextureSize": "512",
"autoRotate": false,
"wireframe": true
}结果
3D 浮雕表面叠加了清晰的网格线，开发者直观地看到了低细分状态下的顶点分布，从而找到了性能与画质的平衡点。
支持上传 WebP（VP8）、JPEG、PNG 和 AVIF 格式的栅格图片，文件大小限制为 20MB。
位移强度决定了 3D 浮雕的拉伸高度。数值越大，图像中亮部和暗部在 3D 空间中的高度差就越明显。
平面细分决定了 3D 模型的网格密度。细分数越高，3D 浮雕的细节越丰富、边缘越平滑，但也会消耗更多的显卡渲染性能。
开启线框叠加后，可以在 3D 表面上显示底层的网格结构，方便开发者检查 PlaneGeometry 的细分状态和顶点位移情况。
图片上传后，由后端服务器使用 Sharp 引擎生成灰度高度图，随后将数据传回前端，由浏览器的 WebGL（Three.js）完成 3D 渲染。