Texture creation, management, and manipulation including texture sources, render textures, texture atlases, and texture optimization. Textures are the foundation for all visual content in PixiJS, providing efficient GPU-based image rendering.
Core texture class representing a rectangular area of a texture source.
/**
* Texture representing a rectangular area of a texture source
*/
class Texture {
constructor(options?: TextureOptions);
/** Texture source containing the actual image data */
readonly source: TextureSource;
/** Rectangle defining the area of the source to use */
frame: Rectangle;
/** Original texture frame before any transformations */
orig: Rectangle;
/** Trim rectangle for removing transparent pixels */
trim: Rectangle;
/** Rotation of texture (0, 90, 180, 270 degrees) */
rotate: number;
/** Default anchor point */
defaultAnchor: Point;
/** Default borders for 9-slice */
defaultBorders: Rectangle;
/** Texture label for debugging */
label: string;
/** Update ID for change detection */
readonly updateId: number;
/** Texture width */
readonly width: number;
/** Texture height */
readonly height: number;
/** Texture resolution */
readonly resolution: number;
/** Base texture width */
readonly baseWidth: number;
/** Base texture height */
readonly baseHeight: number;
/**
* Update texture uvs based on frame
*/
updateUvs(): void;
/**
* Destroy texture and clean up resources
* @param destroySource - Also destroy the texture source
*/
destroy(destroySource?: boolean): void;
/**
* Clone texture
* @returns New texture with same source
*/
clone(): Texture;
/**
* Create texture from various sources
* @param source - Source to create texture from
* @param options - Creation options
* @returns New texture
*/
static from(source: TextureSourceLike, options?: TextureOptions): Texture;
/**
* Create texture from URL
* @param url - Image URL
* @param options - Creation options
* @returns Promise resolving to texture
*/
static fromURL(url: string, options?: TextureOptions): Promise<Texture>;
/**
* Create texture from buffer
* @param buffer - Image buffer data
* @param width - Buffer width
* @param height - Buffer height
* @param options - Creation options
* @returns New texture
*/
static fromBuffer(buffer: TypedArray, width: number, height: number, options?: TextureOptions): Texture;
/** Empty 1x1 white texture */
static readonly EMPTY: Texture;
/** 1x1 white texture */
static readonly WHITE: Texture;
}
interface TextureOptions {
/** Texture source */
source?: TextureSource;
/** Texture label */
label?: string;
/** Source frame rectangle */
frame?: Rectangle;
/** Original frame rectangle */
orig?: Rectangle;
/** Trim rectangle */
trim?: Rectangle;
/** Default anchor */
defaultAnchor?: PointData;
/** Default borders */
defaultBorders?: Rectangle;
/** Rotation */
rotate?: number;
}
type TextureSourceLike =
| string
| HTMLImageElement
| HTMLCanvasElement
| HTMLVideoElement
| ImageBitmap
| OffscreenCanvas
| VideoFrame
| TextureSource;Various texture source types for different image data formats.
/**
* Base texture source class
*/
abstract class TextureSource {
constructor(options?: TextureSourceOptions);
/** Source label */
label: string;
/** Source resource */
resource: any;
/** Source width */
width: number;
/** Source height */
height: number;
/** Source resolution */
resolution: number;
/** Source format */
format: FORMATS;
/** Source type */
type: TYPES;
/** Alpha mode */
alphaMode: ALPHA_MODES;
/** Mipmap mode */
mipmap: MIPMAP_MODES;
/** Wrap mode */
wrapMode: WRAP_MODES;
/** Scale mode */
scaleMode: SCALE_MODES;
/** Upload ID for change tracking */
readonly uploadId: number;
/** Destroyed flag */
destroyed: boolean;
/**
* Update source
*/
update(): void;
/**
* Destroy source
*/
destroy(): void;
/**
* Resize source
* @param width - New width
* @param height - New height
* @param resolution - New resolution
*/
resize(width: number, height: number, resolution?: number): void;
}
/**
* Image-based texture source
*/
class ImageSource extends TextureSource {
constructor(options?: ImageSourceOptions);
/** Image element or data */
resource: HTMLImageElement | ImageBitmap;
/** Auto garbage collection */
autoGarbageCollect: boolean;
/**
* Create from URL
* @param url - Image URL
* @param options - Source options
* @returns Promise resolving to image source
*/
static fromUrl(url: string, options?: ImageSourceOptions): Promise<ImageSource>;
/**
* Test if source can be created from input
* @param source - Source to test
* @returns True if compatible
*/
static test(source: any): boolean;
}
/**
* Canvas-based texture source
*/
class CanvasSource extends TextureSource {
constructor(options?: CanvasSourceOptions);
/** Canvas element */
resource: HTMLCanvasElement | OffscreenCanvas;
/**
* Test if source can be created from canvas
* @param source - Source to test
* @returns True if canvas
*/
static test(source: any): boolean;
}
/**
* Video-based texture source
*/
class VideoSource extends TextureSource {
constructor(options?: VideoSourceOptions);
/** Video element */
resource: HTMLVideoElement;
/** Auto update flag */
autoUpdate: boolean;
/** Update FPS */
updateFPS: number;
/**
* Test if source can be created from video
* @param source - Source to test
* @returns True if video
*/
static test(source: any): boolean;
}
/**
* Buffer-based texture source
*/
class BufferImageSource extends TextureSource {
constructor(options?: BufferImageSourceOptions);
/** Image buffer data */
resource: TypedArray;
/**
* Test if source can be created from buffer
* @param source - Source to test
* @returns True if buffer
*/
static test(source: any): boolean;
}
/**
* Compressed texture source
*/
class CompressedSource extends TextureSource {
constructor(options?: CompressedSourceOptions);
/** Compressed data */
resource: CompressedTextureResource;
/** Number of levels */
levels: number;
/** Internal format */
internalFormat: number;
}Textures that can be rendered to, useful for dynamic content and post-processing.
/**
* Texture that can be rendered to
*/
class RenderTexture extends Texture {
constructor(options?: RenderTextureOptions);
/** Base render texture */
baseTexture: RenderTexture;
/** Framebuffer for rendering */
framebuffer: Framebuffer;
/** Multisample level */
multisample: MSAA_QUALITY;
/**
* Resize render texture
* @param width - New width
* @param height - New height
* @param resolution - New resolution
*/
resize(width: number, height: number, resolution?: number): void;
/**
* Set real size
* @param realWidth - Real width
* @param realHeight - Real height
* @param resolution - Resolution
*/
setRealSize(realWidth: number, realHeight: number, resolution?: number): void;
/**
* Create render texture
* @param options - Creation options
* @returns New render texture
*/
static create(options?: RenderTextureOptions): RenderTexture;
}
interface RenderTextureOptions {
/** Texture width */
width?: number;
/** Texture height */
height?: number;
/** Texture resolution */
resolution?: number;
/** Scale mode */
scaleMode?: SCALE_MODES;
/** Multisample quality */
multisample?: MSAA_QUALITY;
}Style configuration for texture sampling and filtering.
/**
* Texture style for sampling configuration
*/
class TextureStyle {
constructor(options?: TextureStyleOptions);
/** Scale mode for magnification */
scaleMode: SCALE_MODES;
/** Address mode for U coordinate */
addressModeU: ADDRESS_MODES;
/** Address mode for V coordinate */
addressModeV: ADDRESS_MODES;
/** Address mode for W coordinate */
addressModeW: ADDRESS_MODES;
/** Magnification filter */
magFilter: SCALE_MODES;
/** Minification filter */
minFilter: SCALE_MODES;
/** Mipmap filter */
mipmapFilter: MIPMAP_MODES;
/** Anisotropic filtering level */
maxAnisotropy: number;
/**
* Clone style
* @returns New texture style
*/
clone(): TextureStyle;
}
interface TextureStyleOptions {
scaleMode?: SCALE_MODES;
addressModeU?: ADDRESS_MODES;
addressModeV?: ADDRESS_MODES;
addressModeW?: ADDRESS_MODES;
magFilter?: SCALE_MODES;
minFilter?: SCALE_MODES;
mipmapFilter?: MIPMAP_MODES;
maxAnisotropy?: number;
}Matrix for texture coordinate transformations.
/**
* Matrix for texture coordinate transformations
*/
class TextureMatrix {
constructor(texture?: Texture, clampMargin?: number);
/** Transformation matrix */
matrix: Matrix;
/** UV matrix */
uClampFrame: Float32Array;
/** UV clamping */
uClampOffset: Float32Array;
/** Associated texture */
texture: Texture;
/** Clamp margin */
clampMargin: number;
/** Offset for clamping */
clampOffset: number;
/**
* Update matrix based on texture
* @param forceUpdate - Force update even if not changed
*/
update(forceUpdate?: boolean): boolean;
/**
* Multiply with another matrix
* @param matrix - Matrix to multiply
* @param out - Output texture matrix
* @returns Result matrix
*/
multiplyUvs(matrix: Matrix, out?: Float32Array): Float32Array;
}Texture pooling system for efficient memory management.
/**
* Texture pool for memory management
*/
class TexturePool {
constructor();
/** Pool of textures by key */
texturePool: Record<string, Texture[]>;
/** Pool options by key */
textureOptions: Record<string, any>;
/**
* Get pooled texture
* @param key - Pool key
* @param ...args - Creation arguments
* @returns Pooled texture
*/
getOptimalTexture(key: string, ...args: any[]): Texture;
/**
* Return texture to pool
* @param key - Pool key
* @param texture - Texture to return
*/
returnTexture(key: string, texture: Texture): void;
/**
* Clear pool
* @param destroyTextures - Destroy textures
*/
clear(destroyTextures?: boolean): void;
}Texture-related constants and enumerations.
/**
* Scale modes for texture filtering
*/
enum SCALE_MODES {
NEAREST = 0,
LINEAR = 1
}
/**
* Wrap modes for texture addressing
*/
enum WRAP_MODES {
CLAMP = 0,
REPEAT = 1,
MIRRORED_REPEAT = 2
}
/**
* Mipmap modes
*/
enum MIPMAP_MODES {
OFF = 0,
POW2 = 1,
ON = 2,
ON_MANUAL = 3
}
/**
* Alpha modes
*/
enum ALPHA_MODES {
NPM = 0, // Non-premultiplied
UNPACK = 1, // Unpack
PMA = 2, // Premultiplied alpha
NO_PREMULTIPLIED_ALPHA = 0,
PREMULTIPLY_ON_UPLOAD = 1,
PREMULTIPLIED_ALPHA = 2
}
/**
* Texture formats
*/
enum FORMATS {
RGBA = 6408,
RGB = 6407,
RG = 33319,
RED = 6403,
RGBA_INTEGER = 36249,
RGB_INTEGER = 36248,
RG_INTEGER = 33320,
RED_INTEGER = 36244,
ALPHA = 6406,
LUMINANCE = 6409,
LUMINANCE_ALPHA = 6410,
DEPTH_COMPONENT = 6402,
DEPTH_STENCIL = 34041
}
/**
* Texture types
*/
enum TYPES {
UNSIGNED_BYTE = 5121,
UNSIGNED_SHORT = 5123,
UNSIGNED_SHORT_5_6_5 = 33635,
UNSIGNED_SHORT_4_4_4_4 = 32819,
UNSIGNED_SHORT_5_5_5_1 = 32820,
UNSIGNED_INT = 5125,
UNSIGNED_INT_10F_11F_11F_REV = 35899,
UNSIGNED_INT_2_10_10_10_REV = 33640,
UNSIGNED_INT_24_8 = 34042,
UNSIGNED_INT_5_9_9_9_REV = 35902,
BYTE = 5120,
SHORT = 5122,
INT = 5124,
HALF_FLOAT = 5131,
FLOAT = 5126,
FLOAT_32_UNSIGNED_INT_24_8_REV = 36269
}Usage Examples:
import { Texture, RenderTexture, TextureStyle, Assets, Sprite, Graphics } from 'pixi.js';
// Load texture from URL
const texture = await Assets.load('character.png');
const sprite = new Sprite(texture);
// Create texture from canvas
const canvas = document.createElement('canvas');
canvas.width = 256;
canvas.height = 256;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#ff0000';
ctx.fillRect(0, 0, 256, 256);
const canvasTexture = Texture.from(canvas);
// Create texture from video
const video = document.createElement('video');
video.src = 'video.mp4';
video.autoplay = true;
video.loop = true;
const videoTexture = Texture.from(video, {
scaleMode: SCALE_MODES.LINEAR,
resolution: 1
});
// Render texture for dynamic content
const renderTexture = RenderTexture.create({
width: 512,
height: 512,
resolution: 2
});
// Render graphics to texture
const graphics = new Graphics();
graphics.rect(0, 0, 100, 100).fill(0x00ff00);
app.renderer.render({
container: graphics,
target: renderTexture
});
// Use render texture
const renderSprite = new Sprite(renderTexture);
// Texture style configuration
const pixelArtStyle = new TextureStyle({
scaleMode: SCALE_MODES.NEAREST, // Pixel-perfect scaling
addressModeU: WRAP_MODES.CLAMP,
addressModeV: WRAP_MODES.CLAMP
});
texture.source.style = pixelArtStyle;
// Texture frame manipulation (sprite sheets)
const spriteSheetTexture = await Assets.load('spritesheet.png');
// Create sub-textures from sprite sheet
const frame1 = new Texture({
source: spriteSheetTexture.source,
frame: new Rectangle(0, 0, 64, 64) // First frame
});
const frame2 = new Texture({
source: spriteSheetTexture.source,
frame: new Rectangle(64, 0, 64, 64) // Second frame
});
// Animated sprite using frames
const animatedSprite = new AnimatedSprite([frame1, frame2]);
animatedSprite.play();
// Texture trimming for optimization
const trimmedTexture = new Texture({
source: spriteSheetTexture.source,
frame: new Rectangle(10, 10, 44, 44), // Actual image area
trim: new Rectangle(10, 10, 44, 44), // Trim area
orig: new Rectangle(0, 0, 64, 64) // Original size
});
// High-DPI texture support
const hiDpiTexture = Texture.from('image@2x.png', {
resolution: 2 // 2x resolution
});
// Texture rotation (for sprite atlases)
const rotatedTexture = new Texture({
source: spriteSheetTexture.source,
frame: new Rectangle(0, 64, 64, 64),
rotate: 6 // 90 degrees clockwise
});
// Compressed texture (requires extension)
const compressedTexture = await Assets.load('texture.ktx');
// Custom texture from typed array
const width = 256;
const height = 256;
const buffer = new Uint8Array(width * height * 4);
// Fill with gradient
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const i = (y * width + x) * 4;
buffer[i] = x; // Red
buffer[i + 1] = y; // Green
buffer[i + 2] = 0; // Blue
buffer[i + 3] = 255; // Alpha
}
}
const bufferTexture = Texture.fromBuffer(buffer, width, height, {
format: FORMATS.RGBA,
type: TYPES.UNSIGNED_BYTE
});
// Texture memory management
texture.destroy(); // Clean up texture
renderTexture.destroy(true); // Destroy including base texture
// Texture update detection
const originalUpdateId = texture.updateId;
texture.source.update(); // Trigger update
if (texture.updateId !== originalUpdateId) {
console.log('Texture updated');
}
// Creating seamless patterns
const patternTexture = Texture.from('pattern.png', {
wrapMode: WRAP_MODES.REPEAT
});
const tilingSprite = new TilingSprite(patternTexture, 800, 600);