在 WebGL 和 Three.js 项目中贴图资源往往比模型更早成为性能瓶颈。一张 2048x2048 的 PNG 在 PC 上可能只是加载速度问题但在手机浏览器上会让显存上涨、解码卡顿、页面白屏。普通图片格式 PNG/JPG 的解码由 CPU 完成上传到 GPU 后仍按未压缩 RGBA 数据保存显存占用高也没有为 GPU 生成完整的 mipmap 链。KTXKhronos Texture是 Khronos Group 定义的 GPU 纹理容器格式KTX2 在第二代中引入了 Basis Universal 通用压缩使同一份纹理文件可以在不同 GPU 平台上转码为对应的硬件压缩格式。这篇文章围绕 KTX 图片转换、WebGL/GPU 加载和 Three.js 集成这条主线从格式原理讲到命令行转换再讲到加载器集成、运行验证和常见错误排查。适合正在优化 Three.js 项目加载体积与渲染性能的开发者也适合刚接触 GPU 压缩纹理、想弄清楚 KTX2 和普通图片区别的读者。1. 先理解 KTX 解决了什么问题1.1 普通图片格式为什么不适合 GPUPNG 和 JPG 是给人眼设计的图片格式不是给 GPU 设计的。浏览器加载 PNG 后先由 CPU 解压成原始像素再通过texImage2D上传到显存。PNG 是无损压缩解压后的数据量很大JPG 虽然体积小但解码同样发生在 CPU 上而且解码结果通常按 RGB 或 RGBA 存放。也就是说在 GPU 这一侧纹理数据基本是裸的。由此产生两个问题。第一显存占用高。一张 2048x2048 的 RGBA 纹理在显存中大约需要 16MB。如果场景里有 50 张贴图就是 800MB这对移动端是灾难。GPU 本身有压缩纹理格式例如桌面端的 S3TC/DXT、移动端的 ETC2/ASTC/PVRTC但 PNG/JPG 完全没利用它们。第二mipmap 缺失。纹理缩小时如果没有 mipmap画面上会出现闪烁噪点。Three.js 可以在运行时调用generateMipmap但这需要 GPU 额外计算而且对压缩纹理来说运行时生成 mipmap 并不总是可用。还有一个容易被忽略的问题同样的 PNG在用户每次打开页面时都要重新走一遍下载、解码、上传流程。虽然浏览器有缓存但解码和上传开销仍然存在。1.2 KTX 与 KTX2 的差别KTX1 是一个容器格式它把已经压缩好的 GPU 纹理数据打包到一起可以包含 mipmap 层级、数组纹理、立方体贴图等附加信息。但 KTX1 本身不负责跨平台。一个存了 S3TC 数据的 KTX 文件在 PVRTC 设备上没法直接用。想在 PC 和手机上同时工作就得分别准备 DXT 版本和 ETC2/ASTC 版本体积和构建流程都会膨胀。KTX2 解决了这个问题。KTX2 内部使用 Basis Universal 编码典型工作模式有两种ETC1S 和 UASTC。运行时不直接把这些数据扔给 GPU而是先经 CPU 端转码器transcoder转成当前设备原生支持的 GPU 压缩格式再上传。桌面浏览器通常转成 BCnAndroid 转成 ETC2/ASTCiOS 转成 ASTC/PVRTC。因此 KTX2 能做到一份文件多端使用。这里要区分两个概念解码和解码转码。PNG/JPG 是 CPU 解压成原始像素KTX2 是 CPU 把 Basis Universal 数据转成另一种 GPU 压缩格式数据仍然是压缩的只是换成了当前设备认识的格式。所以 KTX2 的上传开销比 PNG 小得多显存占用也低于未压缩 RGBA。1.3 在 WebGL 和 Three.js 中的适用场景KTX2 适合这几类场景大纹理多纹理场景环境贴图、地形贴图、天空盒、角色贴图数量越多收益越明显。跨端 H5 项目同一套贴图资源要覆盖 PC 和手机浏览器KTX2 可以避免按平台分发多套纹理。glTF/GLB 管线KTX2 已经成为 glTF 扩展中常见的纹理压缩方案建模导出的资源经过转换后体积显著下降。加载体积敏感页面ETC1S 模式可以压缩到很小的体积对首屏加载很有帮助。不建议用的场景也明确一下项目里只有一两张小尺寸 UI 图标或者纹理绘制非常密集、对质量极其敏感再或者目标用户浏览器版本很老、WebGL 支持不完整此时引入 KTX2 会增加转码器文件和解码复杂度收益不明显。普通图标继续用 PNG重要展示纹理再用 KTX2这是更稳妥的组合。2. 环境准备工具链、浏览器与 Three.js 依赖2.1 工具链总览要把一张普通图片变成 KTX2需要先准备转换工具。常见工具有四类。工具作用适用场景toktxKTX-Software 官方命令行转换器单张图片或批量图片转 KTX2参数控制最细basisuBasis Universal 官方编码器需要精细调整 ETC1S/UASTC 编码参数时gltf-transformglTF/GLB 资源优化工具优化模型贴图把 GLB 内嵌纹理转成 KTX2在线转换站点浏览器里上传图片生成 KTX2少量资源、快速验证格式是否可行本文以 toktx 为主。它是 KTX-Software 项目的一部分支持 KTX2 的 ETC1S 和 UASTC 编码也能生成 mipmap功能足够覆盖日常开发。2.2 安装 KTX-SoftwareKTX-Software 在 GitHub 的 Releases 页面提供各平台预编译二进制包。也可以尝试用系统包管理器安装但包管理器里的版本可能偏旧建议以官方发布为准。# macOS brew install ktx # Ubuntu/Debian部分仓库版本较旧名称也可能不同 sudo apt install ktx-tools # 也可以直接下载 KTX-Software Release 压缩包解压后把 toktx 加入 PATH安装完成后先验证版本toktx --version能正常输出版本号说明工具可用。如果执行时报找不到动态库通常是二进制包与系统 glibc 版本不匹配优先尝试更新版本或源码编译。2.3 检查浏览器 WebGL 与压缩纹理支持转换前先确认目标浏览器环境。WebGL2 是 KTX2 高效工作的基础虽然某些旧设备也能通过扩展兼容但开发调试时强烈建议用 Chrome 或 Edge 最新版。在浏览器控制台执行下面的脚本能看到当前环境是否支持 WebGL以及支持哪些压缩纹理扩展function checkWebGL() { const canvas document.createElement(canvas); const gl canvas.getContext(webgl2) || canvas.getContext(webgl); if (!gl) { console.error(当前浏览器不支持 WebGL 或 WebGL 已被禁用); return; } console.log(WebGL 版本:, gl instanceof WebGL2RenderingContext ? WebGL2 : WebGL1); console.log(渲染器:, gl.getParameter(gl.RENDERER)); const debugInfo gl.getExtension(WEBGL_debug_renderer_info); if (debugInfo) { console.log(GPU 名称:, gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL)); } const formats [ WEBGL_compressed_texture_s3tc, WEBGL_compressed_texture_etc, WEBGL_compressed_texture_etc1, WEBGL_compressed_texture_astc, WEBGL_compressed_texture_pvrtc ]; const supported formats.filter((name) gl.getExtension(name)); console.log(支持的压缩纹理扩展:, supported); } checkWebGL();这一步不是走形式。KTX2 转码后需要落到某个具体的 GPU 压缩格式上如果设备什么都不支持加载器会退回到软件纹理路径甚至报错。提前检查能帮你判断问题是出在转换环节还是运行环境。3. 图片转 KTX2命令行完整流程3.1 最简单的转换命令假设已经有一张texture.png包含透明通道。执行toktx --encode uastc --genmipmap texture.ktx2 texture.png这条命令的含义是把图片编码为 UASTC 模式的 KTX2 文件并在编码阶段生成完整 mipmap 链。编码完成后用文件管理器或ls -lh对比原图和 KTX2 的大小。正常情况下KTX2 会比 PNG 小比 JPG 可能大也可能小取决于图片内容和参数。不要只看体积还要验证加载效果。如果图片没有透明通道源文件是 JPG也可以直接转换toktx --encode uastc --genmipmap texture.ktx2 texture.jpg3.2 ETC1S 与 UASTC 怎么选KTX2 的两种编码模式对应完全不同的使用策略。模式文件体积纹理质量转码开销适用场景ETC1S很小中等适合色彩变化平缓的贴图低大场景、移动端、加载体积优先UASTC较大高接近原始图片质量中高质量展示、角色贴图、近距离观察ETC1S 的压缩率很激进细节丰富的法线贴图或文字贴图会出现明显色块。UASTC 质量好很多但体积也大。一个常见做法是大体积环境贴图用 ETC1S角色和关键道具用 UASTC。选择命令# ETC1S 模式quality 范围 1-255默认 128 toktx --encode etc1s --q 128 --genmipmap texture_etc1s.ktx2 texture.png # UASTC 模式 toktx --encode uastc --genmipmap texture_uastc.ktx2 texture.png--q只对 ETC1S 有意义。调高会让 ETC1S 保留更多细节但文件变大调低会减小体积但可能出现块状噪点。落地前应该在目标设备上做一轮目测不能只看压缩率。3.3 mipmap、质量与关键参数toktx 的关键参数不多但每个都可能影响最终效果。参数作用说明--encode etc1s / uastc指定编码模式决定 KTX2 内部压缩方式--genmipmap编码时生成 mipmap 链推荐开启避免运行时生成--qETC1S 质量1-255默认 128--verbose输出详细转换日志排错时使用--2d声明为 2D 纹理默认行为可省略--cubemap声明为立方体贴图天空盒等场景使用mipmap 是最容易踩坑的地方。如果转换时没有加--genmipmapThree.js 的 KTX2Loader 可能拿到只有一级数据的纹理缩小观察时会闪烁或发糊。反过来如果纹理本身就带 mipmap就不要让 Three.js 再执行一次generateMipmap避免重复计算。立方体贴图转换时需要按顺序传入六张图toktx --encode uastc --cubemap skybox.ktx2 px.png nx.png py.png ny.png pz.png nz.png不同版本的 toktx 对参数名称可能略有差异。拿到新版本后先执行toktx --help确认参数再写进构建脚本避免升级后脚本失效。3.4 批量转换与项目集成项目里贴图通常不会只有一张。在 CI 或本地构建脚本里批量转换更实际#!/usr/bin/env bash set -euo pipefail INPUT_DIRassets/textures OUTPUT_DIRdist/ktx2 mkdir -p $OUTPUT_DIR for file in $INPUT_DIR/*.png; do name$(basename $file .png) echo convert $name ... toktx --encode uastc --genmipmap --verbose $OUTPUT_DIR/$name.ktx2 $file done批量脚本要处理两件事一是目录存在判断二是失败自动退出。set -euo pipefail能保证某张图转换失败时脚本立即停止而不是带着半成品资源继续发布。如果项目流程依赖 Node.js也可以直接调用命令行工具或者使用封装好的库。这里不展开原则是转换过程放在构建阶段不要在运行时让用户浏览器做压缩编码。4. 在 Three.js 中使用 KTX2 纹理4.1 引入 KTX2Loader 与 transcoder 文件Three.js 官方提供了 KTX2Loader路径在examples/jsm/loaders/KTX2Loader.js。它依赖一份 Basis Universal 转码器文件通常是basis_transcoder.js和basis_transcoder.wasm。在 Three.js 仓库中转码器文件位于examples/jsm/libs/basis/目录。使用 npm 安装 three 时可以在node_modules/three/examples/jsm/libs/basis/找到。把整个目录拷贝到静态资源路径或者直接放到 CDN再用setTranscoderPath指向它。使用 importmap 的完整入口示例script typeimportmap { imports: { three: https://unpkg.com/three0.160.0/build/three.module.js, three/addons/: https://unpkg.com/three0.160.0/examples/jsm/ } } /script上面固定了一个示例版本实际项目里要按自己锁定的 Three.js 版本替换 CDN 地址。下面所有导入语句都依赖这个映射。4.2 基础加载与材质应用下面的 HTML 演示了最小闭环创建渲染器、加载 KTX2 纹理、贴到立方体上、用轨道控制器查看。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / titleKTX2 Texture Demo/title style body { margin: 0; overflow: hidden; } canvas { display: block; } #info { position: absolute; top: 10px; left: 10px; color: #fff; background: rgba(0, 0, 0, 0.5); padding: 6px 10px; font: 14px monospace; } /style /head body div idinfoKTX2 texture loading.../div script typeimportmap { imports: { three: https://unpkg.com/three0.160.0/build/three.module.js, three/addons/: https://unpkg.com/three0.160.0/examples/jsm/ } } /script script typemodule import * as THREE from three; import { OrbitControls } from three/addons/controls/OrbitControls.js; import { KTX2Loader } from three/addons/loaders/KTX2Loader.js; const renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const scene new THREE.Scene(); const camera new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 ); camera.position.set(2, 2, 2); const controls new OrbitControls(camera, renderer.domElement); const ktx2Loader new KTX2Loader() .setTranscoderPath(https://example.com/basis/) .detectSupport(renderer); ktx2Loader.load( texture.ktx2, (texture) { const material new THREE.MeshStandardMaterial({ map: texture, roughness: 0.8, metalness: 0.1 }); const mesh new THREE.Mesh( new THREE.BoxGeometry(1, 1, 1), material ); scene.add(mesh); document.getElementById(info).textContent KTX2 texture loaded; }, undefined, (err) { console.error(KTX2 load error:, err); document.getElementById(info).textContent KTX2 load failed; } ); renderer.setAnimationLoop(() { controls.update(); renderer.render(scene, camera); }); /script /body /html这段代码有三个关键点。第一detectSupport(renderer)必须在renderer创建之后调用它会读取当前 WebGL 上下文支持的压缩格式并决定转码目标。如果漏掉这一步加载器不知道设备支持什么格式后续上传会失败或退回错误路径。第二setTranscoderPath指向的目录必须能通过 URL 访问到basis_transcoder.wasm。本地开发时要注意路径不能只写相对路径而忘了把目录放到静态资源根目录。第三加载回调里拿到的texture是已经转码后的 GPU 压缩纹理可以直接赋给材质。不要再对它执行texture.needsUpdate true这类多余操作加载器内部已经处理了上传状态。4.3 颜色空间、mipmap 与纹理参数KTX2 纹理加载成功只是第一步显示效果还取决于颜色空间、各向异性和翻转参数。颜色贴图必须设置为 sRGBtexture.colorSpace THREE.SRGBColorSpace;法线贴图、粗糙度贴图和金属度贴图通常保持