如何在PixiJS 5版本中使用压缩纹理（如.dds格式）？

阿华AIGC实验室

2026-5-14

在PixiJS 5中使用DDS（DXT-1）压缩纹理的解决方案

确实，旧的pixi-compressed-textures插件只适配PixiJS 4，在v5版本里因为纹理加载架构的更新没法直接用。不过有几种可行的方法来实现你的需求：

使用适配PixiJS 5的社区维护插件
不少开发者已经fork了原插件并更新到支持v5版本，你可以找到这类适配包安装（比如部分npm包或GitHub分支）。安装完成后，只需注册对应的加载器就能像v4那样便捷使用：

import { Loader } from 'pixi.js';
import { DDSLoader } from 'pixi-compressed-textures-v5'; // 替换为实际适配的包名

// 注册DDS加载器
Loader.registerPlugin(DDSLoader);

// 加载并使用纹理
Loader.shared.add('myTexture', 'assets/texture.dds').load((loader, resources) => {
  const sprite = new PIXI.Sprite(resources.myTexture.texture);
  app.stage.addChild(sprite);
});

手动解析DDS文件并创建压缩纹理
如果找不到合适的插件，你可以手动解析DDS文件的二进制数据，利用PixiJS 5的CompressedTexture类来创建纹理。步骤如下：

先检查浏览器是否支持DXT1压缩纹理扩展：

const gl = app.renderer.gl;
const supportsDXT1 = !!gl.getExtension('WEBGL_compressed_texture_s3tc');
if (!supportsDXT1) {
  console.warn('当前浏览器不支持DXT1压缩纹理，建议提供 fallback 普通纹理');
  return;
}

加载DDS文件并解析创建纹理：

fetch('assets/texture.dds')
  .then(res => res.arrayBuffer())
  .then(buffer => {
    // 解析DDS文件头（此处为简化示例，实际需严格遵循DDS格式规范解析）
    const header = new Uint32Array(buffer);
    const width = header[12];
    const height = header[13];
    // 指定DXT1对应的PixiJS格式常量
    const format = PIXI.FORMATS.COMPRESSED_RGB_S3TC_DXT1_EXT;

    // 创建压缩纹理实例
    const texture = PIXI.CompressedTexture.fromBuffer(
      buffer,
      width,
      height,
      format,
      1 // mipmap层级，根据你的DDS文件实际情况调整
    );

    // 创建精灵并添加到舞台
    const sprite = new PIXI.Sprite(texture);
    app.stage.addChild(sprite);
  });

注意：DDS文件头的解析需要严格遵循官方格式规范，上面的代码是简化示例，实际项目中可能需要完善解析逻辑（比如处理多mipmap层级、不同DDS变体等）。