Class CompressedTextureResource

Resource for compressed texture formats, as follows: S3TC/DXTn (& their sRGB formats), ATC, ASTC, ETC 1/2, PVRTC, BPTC (BC6H, BC7).

Compressed textures improve performance when rendering is texture-bound. The texture data stays compressed in graphics memory, increasing memory locality and speeding up texture fetches. These formats can also be used to store more detail in the same amount of memory.

For most developers, container file formats are a better abstraction instead of directly handling raw texture data. PixiJS provides native support for the following texture file formats (via PIXI.loadBasis, PIXI.loadKTX, and PIXI.loadDDS):

.dds - the DirectDraw Surface file format stores DXTn (DXT-1,3,5) data. See PIXI.parseDDS .ktx - the Khronos Texture Container file format supports storing all the supported WebGL compression formats. See PIXI.parseKTX. .basis - the BASIS supercompressed file format stores texture data in an internal format that is transcoded to the compression format supported on the device at runtime. It also supports transcoding into a uncompressed format as a fallback; you must install the @pixi/basis-loader, @pixi/basis-transcoder packages separately to use these files. See PIXI.BasisParser.

The loaders for the aforementioned formats use CompressedTextureResource internally. It is strongly suggested that they be used instead.

Working directly with CompressedTextureResource

Since CompressedTextureResource inherits BlobResource, you can provide it a URL pointing to a file containing the raw texture data (with no file headers!):

Example

import { CompressedTextureResource, INTERNAL_FORMATS } from '@pixi/compressed-textures';
import { BaseTexture, Texture, ALPHA_MODES } from 'pixi.js';

// The resource backing the texture data for your textures.
// NOTE: You can also provide a ArrayBufferView instead of a URL. This is used when loading data from a container file
//   format such as KTX, DDS, or BASIS.
const compressedResource = new CompressedTextureResource('bunny.dxt5', {
    format: INTERNAL_FORMATS.COMPRESSED_RGBA_S3TC_DXT5_EXT,
    width: 256,
    height: 256,
});

// You can create a base-texture to the cache, so that future `Texture`s can be created using the `Texture.from` API.
const baseTexture = new BaseTexture(compressedResource, { pmaMode: ALPHA_MODES.NPM });

// Create a Texture to add to the TextureCache
const texture = new Texture(baseTexture);

// Add baseTexture & texture to the global texture cache
BaseTexture.addToCache(baseTexture, 'bunny.dxt5');
Texture.addToCache(texture, 'bunny.dxt5');
Copy

Memberof

PIXI