使用 WebP 优化 GPU 纹理占用

WebP 格式相比 JPEG / PNG 文件更小 ，可以 减少 GPU 纹理内存占用 ，提高 WebGL / Three.js / 3D 渲染 的性能。

---

🔹 为什么 WebP 能减少 GPU 内存占用？

1. 文件更小 → WebP 比 JPG/PNG 压缩率更高 ，减少 纹理上传 带宽，提高渲染速度。
2. 支持透明度（RGBA） → 比 PNG 更小，适用于 UI 贴图 / 透明纹理。
3. 减少 Mipmaps 体积 → WebP 生成的 mipmap 纹理占用的 GPU 内存更少。

⚠️ 但 WebP 仍然是 8-bit 纹理（RGBA 4字节/像素），如果要进一步优化 GPU 内存占用，可以考虑 KTX2（Basis 纹理压缩格式）。

🔥 如何正确使用 WebP 优化 GPU 纹理？

---

🔥 方法 1：使用 Photoshop（GUI 方法）

如果你有 Adobe Photoshop：

1. 打开 JPG 图片
2. 文件 → 导出 → 导出为（Export As）
3. 选择 WebP 格式，调整质量，点击 导出 即可。

---

🔥 方法 2：使用命令行工具（ffmpeg / cwebp）

1️⃣ 使用 cwebp（Google 官方工具）

安装 cwebp：

• Windows ：下载 cwebp

• Mac / Linux （推荐 Homebrew）：

  brew install webp

转换 JPG → WebP：

cwebp input.jpg -q 80 -o output.webp

• -q 80 代表质量（0-100），80 是常用值，画质较好，文件体积小
• -o output.webp 指定输出文件

---

2️⃣ 使用 ffmpeg

如果你已经安装了 ffmpeg，也可以转换：

ffmpeg -i input.jpg output.webp

你可以指定质量：

ffmpeg -i input.jpg -q:v 80 output.webp

---

🔥 方法 3：使用 JavaScript（适用于 Web 项目）

如果你想在浏览器或 Node.js 里转换，可以使用 sharp：

npm install sharp

然后使用以下代码：

const sharp = require('sharp');

sharp('input.jpg')
  .toFormat('webp', { quality: 80 })
  .toFile('output.webp')
  .then(() => console.log('转换完成！'))
  .catch(err => console.error('转换失败', err));

---

🔥 方法 4：在线转换工具

如果你不想安装软件，可以使用在线工具：

• Squoosh（推荐，谷歌官方）
• convertio.co
• cloudconvert.com

---

📌 结论

✅ 批量转换 / 自动化 → 推荐 cwebp 或 sharp（Node.js）

✅ 简单转换 → 推荐 Photoshop 或 Squoosh（在线工具）

✅ 命令行方式 → 推荐 cwebp（质量可控，效率高）

你更倾向于哪种方法？ 🚀