使用 WebP 优化 GPU 纹理占用

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

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

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

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

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

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

如果你有 Adobe Photoshop：

打开 JPG 图片
文件 → 导出 → 导出为（Export As）
选择 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（质量可控，效率高）

你更倾向于哪种方法？ 🚀

使用 WebP 优化 GPU 纹理占用

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

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

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

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

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

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

2️⃣ 使用 ffmpeg

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

🔥 方法 4：在线转换工具

📌 结论

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