Skip to main content

压缩纹理

🌐 Compressed Textures

压缩纹理显著减少了内存使用和 GPU 上传时间，尤其是在移动设备或低端硬件上。PixiJS 支持多种压缩纹理格式，但在使用它们之前，你必须配置相应的加载器。

🌐 Compressed textures significantly reduce memory usage and GPU upload time, especially on mobile devices or lower-end hardware. PixiJS supports multiple compressed texture formats, but you must configure the appropriate loaders before using them.

支持的压缩纹理格式​

🌐 Supported Compressed Texture Formats

PixiJS 内置支持多种广泛使用的压缩纹理格式：

🌐 PixiJS provides built-in support for several widely-used compressed texture formats:

格式文件扩展名描述
DDS.ddsDirectDraw Surface 格式，支持 DXT 变体（S3TC）
KTX.ktxKhronos 格式，支持 ETC 及其他方案
KTX2.ktx2现代容器，支持 Basis Universal 和超压缩格式
Basis.basis高度压缩格式，可转码为多种 GPU 格式

注册加载器​

🌐 Registering Loaders

PixiJS 不会自动包含压缩纹理支持。要使用这些格式，你必须在加载任何资源之前明确导入必要的加载器：

🌐 PixiJS does not automatically include compressed texture support. To use these formats, you must explicitly import the necessary loaders before loading any assets:

import 'pixi.js/dds';
import 'pixi.js/ktx';
import 'pixi.js/ktx2';
import 'pixi.js/basis';
info

你只需要导入你正在使用的格式的加载器。这些导入必须在任何对 Assets.load 的调用之前运行。

在资源中使用压缩纹理​

🌐 Using Compressed Textures in Assets

注册加载器后，你可以像加载其他资源一样加载压缩纹理：

🌐 Once loaders are registered, you can load compressed textures just like any other asset:

import 'pixi.js/ktx2'; // Import the KTX2 loader
import { Assets } from 'pixi.js';

await Assets.load('textures/background.ktx2');

PixiJS 将根据用户设备，使用正确的加载器和 GPU 兼容的转码路径解析并上传纹理。

🌐 PixiJS will parse and upload the texture using the correct loader and GPU-compatible transcoding path based on the user's device.

与 AssetPack 集成​

🌐 Integration with AssetPack

AssetPack 支持在构建步骤中自动生成压缩纹理变体。你可以：

  • 将 .png 或 .jpg 文件转换为 .basis、.ktx2 或 .dds 格式。
  • 在清单文件中使用相同的别名或通配符模式引用压缩文件。
  • 使用相同的清单和加载工作流程 — PixiJS 将根据设备解析并加载最佳可用版本。

示例​

🌐 Example

你的清单可能包含：

🌐 Your manifest might include:

{
  "bundles": [
    {
      "name": "scene",
      "assets": [
        {
          "alias": "bg",
          "src": ["assets/bg.ktx2", "assets/bg.basis", "assets/bg.png"]
        }
      ]
    }
  ]
}

如果设备支持，PixiJS 会首先尝试加载 bg.ktx2 或 bg.basis，在需要时回退到 bg.png。

🌐 PixiJS will try to load bg.ktx2 or bg.basis first if the device supports it, falling back to bg.png as needed.