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高度压缩格式，可转码为多种 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';
信息

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

¥You only need to import the loaders for the formats you're using. These imports must run before any call to 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 支持在构建步骤中自动生成压缩纹理变体。你可以：

¥AssetPack supports automatic generation of compressed texture variants during the build step. You can:

  • 将 .png 或 .jpg 文件转换为 .basis、.ktx2 或 .dds 格式。

    ¥Convert .png or .jpg files into .basis, .ktx2, or .dds formats.

  • 在清单文件中使用相同的别名或通配符模式引用压缩文件。

    ¥Reference compressed files in your manifest using the same aliases or wildcard patterns.

  • 使用相同的清单和加载工作流程 - PixiJS 将根据设备解析并加载最佳可用变体。

    ¥Use the same manifest and loading workflow — PixiJS will resolve and load the best available variant based on the device.

示例​

¥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.