@pixi/core

@pixi/core

Version 7.4.2
Published 9 months ago
2.47 MB
8 dependencies
MIT license

Install

npm i @pixi/core

yarn add @pixi/core

pnpm add @pixi/core

Overview

Core PixiJS

Index

Variables

variable defaultFilterVertex

const defaultFilterVertex: string;

variable defaultVertex

const defaultVertex: string;

Default filter vertex shader PIXI {string} defaultFilterVertex

variable INSTALLED

const INSTALLED: IResourcePlugin<any, any>[];

Collection of installed resource types, class must extend PIXI.Resource.
Example 1
class CustomResource extends PIXI.Resource { // MUST have source, options constructor signature // for auto-detected resources to be created. constructor(source, options) { super(); } upload(renderer, baseTexture, glTexture) { // Upload with GL return true; } // Used to auto-detect resource static test(source, extension) { return extension === 'xyz' || source instanceof SomeClass; } } // Install the new resource type PIXI.INSTALLED.push(CustomResource); PIXI {Array<PIXI.IResourcePlugin>}
Modifiers
- @readonly

variable uniformParsers

const uniformParsers: IUniformParser[];

variable VERSION

const VERSION: string;

String of the current PIXI version. PIXI

Functions

function autoDetectRenderer

autoDetectRenderer: <VIEW extends ICanvas = ICanvas>(
    options?: Partial<IRendererOptionsAuto>
) => IRenderer<VIEW>;

This helper function will automatically detect which renderer you should be using. WebGL is the preferred renderer as it is a lot faster. If WebGL is not supported by the browser then this function will return a canvas renderer. PIXI autoDetectRenderer
Parameter options
Options to use.

function autoDetectResource

autoDetectResource: <R extends Resource, RO>(source: unknown, options?: RO) => R;

Create a resource element from a single source element. This auto-detects which type of resource to create. All resources that are auto-detectable must have a static test method and a constructor with the arguments (source, options?). Currently, the supported resources for auto-detection include: - PIXI.ImageResource - PIXI.CanvasResource - PIXI.VideoResource - PIXI.SVGResource - PIXI.BufferResource PIXI autoDetectResource
Parameter source
Resource source, this can be the URL to the resource, a typed-array (for BufferResource), HTMLVideoElement, SVG data-uri or any other resource that can be auto-detected. If not resource is detected, it's assumed to be an ImageResource.
Parameter options
Pass-through options to use for Resource
Parameter
{number} [options.width] - Width of BufferResource or SVG rasterization
Parameter
{number} [options.height] - Height of BufferResource or SVG rasterization
Parameter
{boolean} [options.autoLoad=true] - Image, SVG and Video flag to start loading
Parameter
{number} [options.scale=1] - SVG source scale. Overridden by width, height
Parameter
{boolean} [options.createBitmap=PIXI.settings.CREATE_IMAGE_BITMAP] - Image option to create Bitmap object
Parameter
{boolean} [options.crossorigin=true] - Image and Video option to set crossOrigin
Parameter
{boolean} [options.autoPlay=true] - Video option to start playing video immediately
Parameter
{number} [options.updateFPS=0] - Video option to update how many times a second the texture should be updated from the video. Leave at 0 to update at every render
Returns
{PIXI.Resource} The created resource.

function checkMaxIfStatementsInShader

checkMaxIfStatementsInShader: (maxIfs: number, gl: IRenderingContext) => number;

function createUBOElements

createUBOElements: (uniformData: IUniformData[]) => {
    uboElements: UBOElement[];
    size: number;
};

logic originally from here: https://github.com/sketchpunk/FunWithWebGL2/blob/master/lesson_022/Shaders.js rewrote it, but this was a great starting point to get a solid understanding of whats going on :)
Parameter uniformData

function generateProgram

generateProgram: (gl: IRenderingContext, program: Program) => GLProgram;

generates a WebGL Program object from a high level Pixi Program.
Parameter gl
a rendering context on which to generate the program
Parameter program
the high level Pixi Program.

function generateUniformBufferSync

generateUniformBufferSync: (
    group: UniformGroup,
    uniformData: Dict<any>
) => { size: number; syncFunc: UniformsSyncCallback };

function getTestContext

getTestContext: () => WebGLRenderingContext | WebGL2RenderingContext;

returns a little WebGL context to use for program inspection.
Returns
{WebGLRenderingContext} a gl context to test with

function getUBOData

getUBOData: (uniforms: Dict<any>, uniformData: Dict<any>) => any[];

function unsafeEvalSupported

unsafeEvalSupported: () => boolean;

Not all platforms allow to generate function code (e.g., new Function). this provides the platform-level detection.
Returns
{boolean} true if new Function is supported.

Classes

class AbstractMultiResource

abstract class AbstractMultiResource extends Resource {}

Resource that can manage several resource (items) inside. All resources need to have the same pixel size. Parent class for CubeResource and ArrayResource PIXI

constructor

constructor(length: number, options?: ISize);

Parameter length
Parameter options
Options to for Resource constructor
Parameter
{number} [options.width] - Width of the resource
Parameter
{number} [options.height] - Height of the resource

property baseTexture

baseTexture: BaseTexture<Resource, any>;

Bound baseTexture, there can only be one.

property itemDirtyIds

itemDirtyIds: number[];

Dirty IDs for each part.
Modifiers
- @readonly

property items

items: BaseTexture<Resource, any>[];

Collection of partial baseTextures that correspond to resources.
Modifiers
- @readonly

property length

readonly length: number;

Number of elements in array.

method addBaseTextureAt

abstract addBaseTextureAt: (baseTexture: BaseTexture, index: number) => this;

Set a baseTexture by ID
Parameter baseTexture
Parameter index
Zero-based index of resource to set
Returns
- Instance for chaining

method addResourceAt

addResourceAt: (resource: Resource, index: number) => this;

Set a resource by ID
Parameter resource
Parameter index
Zero-based index of resource to set
Returns
- Instance for chaining

method bind

bind: (baseTexture: BaseTexture) => void;

Set the parent base texture.
Parameter baseTexture

method dispose

dispose: () => void;

Destroy this BaseImageResource.

method initFromArray

protected initFromArray: (
    resources: Array<any>,
    options?: IAutoDetectOptions
) => void;

Used from ArrayResource and CubeResource constructors.
Parameter resources
Can be resources, image elements, canvas, etc. , length should be same as constructor length
Parameter options
Detect options for resources

method load

load: () => Promise<this>;

Load all the resources simultaneously
Returns
- When load is resolved

method unbind

unbind: (baseTexture: BaseTexture) => void;

Unset the parent base texture.
Parameter baseTexture

class ArrayResource

class ArrayResource extends AbstractMultiResource {}

A resource that contains a number of sources. PIXI

constructor

constructor(source: number | any[], options?: ISize);

Parameter source
Number of items in array or the collection of image URLs to use. Can also be resources, image elements, canvas, etc.
Parameter options
Options to apply to PIXI.autoDetectResource
Parameter
{number} [options.width] - Width of the resource
Parameter
{number} [options.height] - Height of the resource

method addBaseTextureAt

addBaseTextureAt: (baseTexture: BaseTexture, index: number) => this;

Set a baseTexture by ID, ArrayResource just takes resource from it, nothing more
Parameter baseTexture
Parameter index
Zero-based index of resource to set
Returns
- Instance for chaining

method bind

bind: (baseTexture: BaseTexture) => void;

Add binding
Parameter baseTexture

method upload

upload: (
    renderer: Renderer,
    texture: BaseTexture,
    glTexture: GLTexture
) => boolean;

Upload the resources to the GPU.
Parameter renderer
Parameter texture
Parameter glTexture
Returns
- whether texture was uploaded

class Attribute

class Attribute {}

Holds the information for a single attribute structure required to render geometry.
This does not contain the actual data, but instead has a buffer id that maps to a PIXI.Buffer This can include anything from positions, uvs, normals, colors etc. PIXI

constructor

constructor(
    buffer: number,
    size?: number,
    normalized?: boolean,
    type?: TYPES,
    stride?: number,
    start?: number,
    instance?: boolean,
    divisor?: number
);

Parameter buffer
the id of the buffer that this attribute will look for
Parameter size
the size of the attribute. If you have 2 floats per vertex (eg position x and y) this would be 2.
Parameter normalized
should the data be normalized.
Parameter type
what type of number is the attribute. Check PIXI.TYPES to see the ones available
Parameter stride
How far apart, in bytes, the start of each value is. (used for interleaving data)
Parameter start
How far into the array to start reading values (used for interleaving data)
Parameter instance
Whether the geometry is instanced.
Parameter divisor
Divisor to use when doing instanced rendering

property buffer

buffer: number;

property divisor

divisor: number;

property instance

instance: boolean;

property normalized

normalized: boolean;

property size

size: number;

property start

start: number;

property stride

stride: number;

property type

type: TYPES;

method destroy

destroy: () => void;

Destroys the Attribute.

method from

static from: (
    buffer: number,
    size?: number,
    normalized?: boolean,
    type?: TYPES,
    stride?: number
) => Attribute;

Helper function that creates an Attribute based on the information provided
Parameter buffer
the id of the buffer that this attribute will look for
Parameter size
the size of the attribute. If you have 2 floats per vertex (eg position x and y) this would be 2
Parameter normalized
should the data be normalized.
Parameter type
what type of number is the attribute. Check PIXI.TYPES to see the ones available
Parameter stride
How far apart, in bytes, the start of each value is. (used for interleaving data)
Returns
- A new PIXI.Attribute based on the information provided

class BackgroundSystem

class BackgroundSystem implements ISystem<BackgroundSystemOptions> {}

The background system manages the background color and alpha of the main view. PIXI

constructor

constructor();

property alpha

alpha: number;

The background color alpha. Setting this to 0 will make the canvas transparent. {number}

property backgroundColor

readonly backgroundColor: Color;

The background color object.

property clearBeforeRender

clearBeforeRender: boolean;

This sets if the CanvasRenderer will clear the canvas or not before the new render pass. If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect to clear the canvas every frame. Disable this by setting this to false. For example, if your game has a canvas filling background image you often don't need this set. {boolean}

property color

color: ColorSource;

The background color to fill if not transparent. {PIXI.ColorSource}

property defaultOptions

static defaultOptions: BackgroundSystemOptions;

property extension

static extension: ExtensionMetadata;

method destroy

destroy: () => void;

method init

init: (options: BackgroundSystemOptions) => void;

initiates the background system
Parameter options
the options for the background colors

class BaseImageResource

class BaseImageResource extends Resource {}

Base for all the image/canvas resources. PIXI

constructor

constructor(source: any);

Parameter source

property noSubImage

noSubImage: boolean;

If set to true, will force texImage2D over texSubImage2D for uploading. Certain types of media (e.g. video) using texImage2D is more performant. false

property source

source: any;

The source element. {PIXI.ImageSourcee}
Modifiers
- @readonly

method crossOrigin

static crossOrigin: (
    element: HTMLImageElement | HTMLVideoElement,
    url: string,
    crossorigin?: boolean | string
) => void;

Set cross origin based detecting the url and the crossorigin
Parameter element
Element to apply crossOrigin
Parameter url
URL to check
Parameter crossorigin
Cross origin value to use

method dispose

dispose: () => void;

Destroy this PIXI.BaseImageResource

method update

update: () => void;

Checks if source width/height was changed, resize can cause extra baseTexture update. Triggers one update in any case.

method upload

upload: (
    renderer: Renderer,
    baseTexture: BaseTexture,
    glTexture: GLTexture,
    source?: ImageSource
) => boolean;

Upload the texture to the GPU.
Parameter renderer
Upload to the renderer
Parameter baseTexture
Reference to parent texture
Parameter glTexture
Parameter source
(optional)
Returns
- true is success

class BaseRenderTexture

class BaseRenderTexture extends BaseTexture {}

A BaseRenderTexture is a special texture that allows any PixiJS display object to be rendered to it.
__Hint__: All DisplayObjects (i.e. Sprites) that render to a BaseRenderTexture should be preloaded otherwise black rectangles will be drawn instead.
A BaseRenderTexture takes a snapshot of any Display Object given to its render method. The position and rotation of the given Display Objects is ignored. For example:
Example 1
import { autoDetectRenderer, BaseRenderTexture, RenderTexture, Sprite } from 'pixi.js';
const renderer = autoDetectRenderer(); const baseRenderTexture = new BaseRenderTexture({ width: 800, height: 600 }); const renderTexture = new RenderTexture(baseRenderTexture); const sprite = Sprite.from('spinObj_01.png');
sprite.position.x = 800 / 2; sprite.position.y = 600 / 2; sprite.anchor.x = 0.5; sprite.anchor.y = 0.5;
renderer.render(sprite, { renderTexture });
// The Sprite in this case will be rendered using its local transform. // To render this sprite at 0,0 you can clear the transform sprite.setTransform();
const baseRenderTexture = new BaseRenderTexture({ width: 100, height: 100 }); const renderTexture = new RenderTexture(baseRenderTexture);
renderer.render(sprite, { renderTexture }); // Renders to center of RenderTexture PIXI

constructor

constructor(options?: IBaseTextureOptions<any>);

Parameter options
Parameter
{number} [options.width=100] - The width of the base render texture.
Parameter
{number} [options.height=100] - The height of the base render texture.
Parameter
{PIXI.SCALE_MODES} [options.scaleMode=PIXI.BaseTexture.defaultOptions.scaleMode] - See PIXI.SCALE_MODES for possible values.
Parameter
{number} [options.resolution=PIXI.settings.RESOLUTION] - The resolution / device pixel ratio of the texture being generated.
Parameter
{PIXI.MSAA_QUALITY} [options.multisample=PIXI.MSAA_QUALITY.NONE] - The number of samples of the frame buffer.

property clear

readonly clear: Color;

Color object when clearning the texture.
7.2.0
Modifiers
- @readonly

property clearColor

clearColor: ColorSource;

property filterStack

filterStack: any[];

The data structure for the filters.

property framebuffer

framebuffer: Framebuffer;

The framebuffer of this base texture.
Modifiers
- @readonly

property maskStack

maskStack: MaskData[];

The data structure for the stencil masks.

property multisample

multisample: MSAA_QUALITY;

Shortcut to this.framebuffer.multisample. PIXI.MSAA_QUALITY.NONE

method destroy

destroy: () => void;

Destroys this texture.

method dispose

dispose: () => void;

Frees the texture and framebuffer from WebGL memory without destroying this texture object. This means you can still use the texture later which will upload it to GPU memory again. PIXI.BaseTexture#dispose

method resize

resize: (desiredWidth: number, desiredHeight: number) => void;

Resizes the BaseRenderTexture.
Parameter desiredWidth
The desired width to resize to.
Parameter desiredHeight
The desired height to resize to.

class BaseTexture

class BaseTexture<
    R extends Resource = Resource,
    RO = IAutoDetectOptions
> extends EventEmitter {}

A Texture stores the information that represents an image. All textures have a base texture, which contains information about the source. Therefore you can have many textures all using a single BaseTexture PIXI

constructor

constructor(resource?: any, options?: IBaseTextureOptions<RO>);

Parameter resource
The current resource to use, for things that aren't Resource objects, will be converted into a Resource.
Parameter options
Collection of options, default options inherited from PIXI.BaseTexture.defaultOptions.
Parameter
{PIXI.MIPMAP_MODES} [options.mipmap] - If mipmapping is enabled for texture
Parameter
{number} [options.anisotropicLevel] - Anisotropic filtering level of texture
Parameter
{PIXI.WRAP_MODES} [options.wrapMode] - Wrap mode for textures
Parameter
{PIXI.SCALE_MODES} [options.scaleMode] - Default scale mode, linear, nearest
Parameter
{PIXI.FORMATS} [options.format] - GL format type
Parameter
{PIXI.TYPES} [options.type] - GL data type
Parameter
{PIXI.TARGETS} [options.target] - GL texture target
Parameter
{PIXI.ALPHA_MODES} [options.alphaMode] - Pre multiply the image alpha
Parameter
{number} [options.width=0] - Width of the texture
Parameter
{number} [options.height=0] - Height of the texture
Parameter
{number} [options.resolution=PIXI.settings.RESOLUTION] - Resolution of the base texture
Parameter
{object} [options.resourceOptions] - Optional resource options, see

property alphaMode

alphaMode: ALPHA_MODES;

How to treat premultiplied alpha, see PIXI.ALPHA_MODES. {PIXI.ALPHA_MODES} PIXI.ALPHA_MODES.UNPACK

property anisotropicLevel

anisotropicLevel: number;

Anisotropic filtering level of texture {number} 0

property cacheId

cacheId: string;

Currently default cache ID. {string}

property defaultOptions

static defaultOptions: IBaseTextureOptions<any>;

Default options used when creating BaseTexture objects. PIXI.BaseTexture {PIXI.IBaseTextureOptions}

property destroyed

destroyed: boolean;

Flag if BaseTexture has been destroyed. {boolean}
Modifiers
- @readonly

property dirtyId

dirtyId: number;

Used by TextureSystem to only update texture to the GPU when needed. Please call update() to increment it.
Modifiers
- @readonly

property dirtyStyleId

dirtyStyleId: number;

Used by TextureSystem to only update texture style when needed.

property format

format: FORMATS;

The pixel format of the texture PIXI.FORMATS.RGBA

property height

height: number;

The height of the base texture set when the image has loaded
Modifiers
- @readonly

property isPowerOfTwo

isPowerOfTwo: boolean;

Whether or not the texture is a power of two, try to use power of two textures as much as you can
false
Modifiers
- @readonly

property mipmap

mipmap: MIPMAP_MODES;

Mipmap mode of the texture, affects downscaled images PIXI.MIPMAP_MODES.POW2

property parentTextureArray

parentTextureArray: BaseTexture<Resource, any>;

Whether its a part of another texture, handled by ArrayResource or CubeResource {PIXI.BaseTexture}

property realHeight

readonly realHeight: number;

Pixel height of the source of this texture
Modifiers
- @readonly

property realWidth

readonly realWidth: number;

Pixel width of the source of this texture
Modifiers
- @readonly

property resolution

resolution: number;

The resolution / device pixel ratio of the texture
PIXI.settings.RESOLUTION
Modifiers
- @readonly

property resource

resource: Resource;

The resource used by this BaseTexture, there can only be one resource per BaseTexture, but textures can share resources. {PIXI.Resource}
Modifiers
- @readonly

property scaleMode

scaleMode: SCALE_MODES;

The scale mode to apply when scaling this texture PIXI.SCALE_MODES.LINEAR

property target

target: TARGETS;

The target type PIXI.TARGETS.TEXTURE_2D

property textureCacheIds

textureCacheIds: string[];

The collection of alternative cache ids, since some BaseTextures can have more than one ID, short name and longer full URL {Array}
Modifiers
- @readonly

property touched

touched: number;

Used by automatic texture Garbage Collection, stores last GC tick when it was bound

property type

type: TYPES;

The type of resource data PIXI.TYPES.UNSIGNED_BYTE

property uid

readonly uid: number;

Global unique identifier for this BaseTexture

property valid

valid: boolean;

Generally speaking means when resource is loaded.
{boolean}
Modifiers
- @readonly

property width

width: number;

The width of the base texture set when the image has loaded
Modifiers
- @readonly

property wrapMode

wrapMode: WRAP_MODES;

How the texture wraps PIXI.WRAP_MODES.CLAMP

method addToCache

static addToCache: (baseTexture: BaseTexture, id: string) => void;

Adds a BaseTexture to the global BaseTextureCache. This cache is shared across the whole PIXI object.
Parameter baseTexture
The BaseTexture to add to the cache.
Parameter id
The id that the BaseTexture will be stored against.

method castToBaseTexture

castToBaseTexture: () => BaseTexture;

Utility function for BaseTexture|Texture cast.

method destroy

destroy: () => void;

Destroys this base texture. The method stops if resource doesn't want this texture to be destroyed. Removes texture from all caches. PIXI.BaseTexture#destroyed

method dispose

dispose: () => void;

Frees the texture from WebGL memory without destroying this texture object. This means you can still use the texture later which will upload it to GPU memory again. PIXI.BaseTexture#dispose

method from

static from: <R extends Resource = Resource, RO = any>(
    source: ImageSource | string | string[],
    options?: IBaseTextureOptions<RO>,
    strict?: boolean
) => BaseTexture<R>;

Helper function that creates a base texture based on the source you provide. The source can be - image url, image element, canvas element. If the source is an image url or an image element and not in the base texture cache, it will be created and loaded.
Parameter source
The source to create base texture from.
Parameter options
See PIXI.BaseTexture's constructor for options.
Parameter
{string} [options.pixiIdPrefix=pixiid] - If a source has no id, this is the prefix of the generated id
Parameter strict
Enforce strict-mode, see PIXI.settings.STRICT_TEXTURE_CACHE.
Returns
{PIXI.BaseTexture} The new base texture.

method fromBuffer

static fromBuffer: (
    buffer: BufferType,
    width: number,
    height: number,
    options?: IBaseTextureOptions<IBufferResourceOptions>
) => BaseTexture<BufferResource>;

Create a new Texture with a BufferResource from a typed array.
Parameter buffer
The optional array to use. If no data is provided, a new Float32Array is created.
Parameter width
Width of the resource
Parameter height
Height of the resource
Parameter options
See PIXI.BaseTexture's constructor for options. Default properties are different from the constructor's defaults.
Parameter
{PIXI.FORMATS} [options.format] - The format is not given, the type is inferred from the type of the buffer: RGBA if Float32Array, Int8Array, Uint8Array, or Uint8ClampedArray, otherwise RGBA_INTEGER.
Parameter
{PIXI.TYPES} [options.type] - The type is not given, the type is inferred from the type of the buffer. Maps Float32Array to FLOAT, Int32Array to INT, Uint32Array to UNSIGNED_INT, Int16Array to SHORT, Uint16Array to UNSIGNED_SHORT, Int8Array to BYTE, Uint8Array/Uint8ClampedArray to UNSIGNED_BYTE.
Parameter
{PIXI.ALPHA_MODES} [options.alphaMode=PIXI.ALPHA_MODES.NPM]
Parameter
{PIXI.SCALE_MODES} [options.scaleMode=PIXI.SCALE_MODES.NEAREST]
Returns
- The resulting new BaseTexture

method onError

onError: (event: ErrorEvent) => void;

Handle errors with resources.
Parameter event
Error event emitted.

method removeFromCache

static removeFromCache: (
    baseTexture: string | BaseTexture
) => BaseTexture | null;

Remove a BaseTexture from the global BaseTextureCache.
Parameter baseTexture
id of a BaseTexture to be removed, or a BaseTexture instance itself.
Returns
{PIXI.BaseTexture|null} The BaseTexture that was removed.

method setRealSize

setRealSize: (
    realWidth: number,
    realHeight: number,
    resolution?: number
) => this;

Sets real size of baseTexture, preserves current resolution.
Parameter realWidth
Full rendered width
Parameter realHeight
Full rendered height
Parameter resolution
Optionally set resolution
Returns
- this

method setResolution

setResolution: (resolution: number) => this;

Changes resolution
Parameter resolution
res
Returns
- this

method setResource

setResource: (resource: R) => this;

Sets the resource if it wasn't set. Throws error if resource already present
Parameter resource
that is managing this BaseTexture
Returns
- this

method setSize

setSize: (
    desiredWidth: number,
    desiredHeight: number,
    resolution?: number
) => this;

Changes w/h/resolution. Texture becomes valid if width and height are greater than zero.
Parameter desiredWidth
Desired visual width
Parameter desiredHeight
Desired visual height
Parameter resolution
Optionally set resolution
Returns
- this

method setStyle

setStyle: (scaleMode?: SCALE_MODES, mipmap?: MIPMAP_MODES) => this;

Changes style options of BaseTexture
Parameter scaleMode
Pixi scalemode
Parameter mipmap
enable mipmaps
Returns
- this

method update

update: () => void;

Invalidates the object. Texture becomes valid if width and height are greater than zero.

class BatchDrawCall

class BatchDrawCall {}

Used by the batcher to draw batches. Each one of these contains all information required to draw a bound geometry. PIXI

constructor

constructor();

property blend

blend: BLEND_MODES;

property data

data: any;

Data for uniforms or custom webgl state.

property size

size: number;

property start

start: number;

property texArray

texArray: BatchTextureArray;

property type

type: DRAW_MODES;

class BatchGeometry

class BatchGeometry extends Geometry {}

Geometry used to batch standard PIXI content (e.g. Mesh, Sprite, Graphics objects). PIXI

constructor

constructor(_static?: boolean);

Parameter _static
Optimization flag, where false is updated every frame, true doesn't change frame-to-frame.

class BatchRenderer

class BatchRenderer extends ObjectRenderer {}

Renderer dedicated to drawing and batching sprites.
This is the default batch renderer. It buffers objects with texture-based geometries and renders them in batches. It uploads multiple textures to the GPU to reduce to the number of draw calls. PIXI

constructor

constructor(renderer: Renderer);

This will hook onto the renderer's contextChange and prerender signals.
Parameter renderer
The renderer this works for.

property canUploadSameBuffer

static canUploadSameBuffer: boolean;

Can we upload the same buffer in a single frame?

property defaultBatchSize

static defaultBatchSize: number;

The default sprite batch size.
The default aims to balance desktop and mobile devices.

property defaultFragmentTemplate

static readonly defaultFragmentTemplate: string;

The default fragment shader source
Modifiers
- @readonly

property defaultMaxTextures

static defaultMaxTextures: number;

The maximum textures that this device supports. 32

property defaultVertexSrc

static readonly defaultVertexSrc: string;

The default vertex shader source
Modifiers
- @readonly

property extension

static extension: ExtensionMetadata;

property geometryClass

protected geometryClass: typeof BatchGeometry;

The class that represents the geometry of objects that are going to be batched with this. {object} PIXI.BatchGeometry

property MAX_TEXTURES

readonly MAX_TEXTURES: number;

See Also
- PIXI.BatchRenderer#maxTextures
Modifiers
- @readonly
Deprecated
since 7.1.0

property maxTextures

maxTextures: number;

Maximum number of textures that can be uploaded to the GPU under the current context. It is initialized properly in this.contextChange.
See Also
- PIXI.BatchRenderer#contextChange
Modifiers
- @readonly

property shaderGenerator

protected shaderGenerator: BatchShaderGenerator;

This is used to generate a shader that can color each vertex based on a aTextureId attribute that points to an texture in uSampler.
This enables the objects with different textures to be drawn in the same draw call.
You can customize your shader by creating your custom shader generator.

property size

size: number;

The number of bufferable objects before a flush occurs automatically. PIXI.BatchRenderer.defaultBatchSize * 4

property state

readonly state: State;

The WebGL state in which this renderer will work.

property vertexSize

protected vertexSize: number;

Size of data being buffered per vertex in the attribute buffers (in floats). By default, the batch-renderer plugin uses 6:
| aVertexPosition | 2 | |-----------------|---| | aTextureCoords | 2 | | aColor | 1 | | aTextureId | 1 | 6

method bindAndClearTexArray

bindAndClearTexArray: (texArray: BatchTextureArray) => void;

Bind textures for current rendering
Parameter texArray

method buildDrawCalls

buildDrawCalls: (
    texArray: BatchTextureArray,
    start: number,
    finish: number
) => void;

Populating drawcalls for rendering
Parameter texArray
Parameter start
Parameter finish

method buildTexturesAndDrawCalls

buildTexturesAndDrawCalls: () => void;

method contextChange

contextChange: () => void;

Handles the contextChange signal.
It calculates this.maxTextures and allocating the packed-geometry object pool.

method destroy

destroy: () => void;

Destroys this BatchRenderer. It cannot be used again.

method drawBatches

drawBatches: () => void;

method flush

flush: () => void;

Renders the content _now_ and empties the current batch.

method getAttributeBuffer

getAttributeBuffer: (size: number) => ViewableBuffer;

Fetches an attribute buffer from this._aBuffers that can hold atleast size floats.
Parameter size
minimum capacity required
Returns
- buffer than can hold atleast size floats

method getIndexBuffer

getIndexBuffer: (size: number) => Uint16Array;

Fetches an index buffer from this._iBuffers that can have at least size capacity.
Parameter size
minimum required capacity
Returns
- buffer that can fit size indices.

method initFlushBuffers

initFlushBuffers: () => void;

Makes sure that static and dynamic flush pooled objects have correct dimensions.

method onPrerender

onPrerender: () => void;

Handles the prerender signal. It ensures that flushes start from the first geometry object again.

method packInterleavedGeometry

packInterleavedGeometry: (
    element: IBatchableElement,
    attributeBuffer: ViewableBuffer,
    indexBuffer: Uint16Array,
    aIndex: number,
    iIndex: number
) => void;

Takes the four batching parameters of element, interleaves and pushes them into the batching attribute/index buffers given.
It uses these properties: vertexData uvs, textureId and indicies. It also uses the "tint" of the base-texture, if present.
Parameter element
element being rendered
Parameter attributeBuffer
attribute buffer.
Parameter indexBuffer
index buffer
Parameter aIndex
number of floats already in the attribute buffer
Parameter iIndex
number of indices already in indexBuffer

method render

render: (element: IBatchableElement) => void;

Buffers the "batchable" object. It need not be rendered immediately.
Parameter element
the element to render when using this renderer

method setShaderGenerator

setShaderGenerator: ({
    vertex,
    fragment,
}?: {
    vertex?: string;
    fragment?: string;
}) => void;

Set the shader generator.
Parameter options
Parameter
{string} [options.vertex=PIXI.BatchRenderer.defaultVertexSrc] - Vertex shader source
Parameter
{string} [options.fragment=PIXI.BatchRenderer.defaultFragmentTemplate] - Fragment shader template

method start

start: () => void;

Starts a new sprite batch.

method stop

stop: () => void;

Stops and flushes the current batch.

method updateGeometry

updateGeometry: () => void;

class BatchShaderGenerator

class BatchShaderGenerator {}

Helper that generates batching multi-texture shader. Use it with your new BatchRenderer PIXI

constructor

constructor(vertexSrc: string, fragTemplate: string);

Parameter vertexSrc
Vertex shader
Parameter fragTemplate
Fragment shader template

property defaultGroupCache

defaultGroupCache: { [key: number]: UniformGroup<Dict<any>> };

property fragTemplate

fragTemplate: string;

Reference to the fragment shader template. Must contain "%count%" and "%forloop%".

property programCache

programCache: { [key: number]: Program };

property vertexSrc

vertexSrc: string;

Reference to the vertex shader source.

method generateSampleSrc

generateSampleSrc: (maxTextures: number) => string;

method generateShader

generateShader: (maxTextures: number) => Shader;

class BatchSystem

class BatchSystem implements ISystem {}

System plugin to the renderer to manage batching. PIXI

constructor

constructor(renderer: Renderer);

Parameter renderer
The renderer this System works for.

property currentRenderer

currentRenderer: ObjectRenderer;

The currently active ObjectRenderer.

property emptyRenderer

readonly emptyRenderer: ObjectRenderer;

An empty renderer.

property extension

static extension: ExtensionMetadata;

method boundArray

boundArray: (
    texArray: BatchTextureArray,
    boundTextures: Array<BaseTexture>,
    batchId: number,
    maxTextures: number
) => void;

Assigns batch locations to textures in array based on boundTextures state. All textures in texArray should have _batchEnabled = _batchId, and their count should be less than maxTextures.
Parameter texArray
textures to bound
Parameter boundTextures
current state of bound textures
Parameter batchId
marker for _batchEnabled param of textures in texArray
Parameter maxTextures
number of texture locations to manipulate

method copyBoundTextures

copyBoundTextures: (arr: BaseTexture[], maxTextures: number) => void;

Handy function for batch renderers: copies bound textures in first maxTextures locations to array sets actual _batchLocation for them
Parameter arr
arr copy destination
Parameter maxTextures
number of copied elements

method destroy

destroy: () => void;

method flush

flush: () => void;

This should be called if you wish to do some custom rendering It will basically render anything that may be batched up such as sprites

method reset

reset: () => void;

Reset the system to an empty renderer

method setObjectRenderer

setObjectRenderer: (objectRenderer: ObjectRenderer) => void;

Changes the current renderer to the one given in parameter
Parameter objectRenderer
The object renderer to use.

class BatchTextureArray

class BatchTextureArray {}

Used by the batcher to build texture batches. Holds list of textures and their respective locations. PIXI

constructor

constructor();

property count

count: number;

Number of filled elements.

property elements

elements: BaseTexture<Resource, any>[];

Inside textures array.

property ids

ids: number[];

Respective locations for textures.

method clear

clear: () => void;

class Buffer

class Buffer {}

A wrapper for data so that it can be used and uploaded by WebGL PIXI

constructor

constructor(data?: IArrayBuffer, _static?: boolean, index?: boolean);

Parameter data
the data to store in the buffer.
Parameter _static
true for static buffer
Parameter index
true for index buffer

property data

data: ITypedArray;

The data in the buffer, as a typed array {PIXI.IArrayBuffer}

property disposeRunner

disposeRunner: Runner;

property id

id: number;

property index

index: boolean;

property static

static: boolean;

property type

type: BUFFER_TYPE;

The type of buffer this is, one of: + ELEMENT_ARRAY_BUFFER - used as an index buffer + ARRAY_BUFFER - used as an attribute buffer + UNIFORM_BUFFER - used as a uniform buffer (if available)

method destroy

destroy: () => void;

Destroys the buffer.

method dispose

dispose: () => void;

Disposes WebGL resources that are connected to this geometry.

method from

static from: (data: IArrayBuffer | number[]) => Buffer;

Helper function that creates a buffer based on an array or TypedArray
Parameter data
the TypedArray that the buffer will store. If this is a regular Array it will be converted to a Float32Array.
Returns
- A new Buffer based on the data provided.

method update

update: (data?: IArrayBuffer | Array<number>) => void;

Flags this buffer as requiring an upload to the GPU.
Parameter data
the data to update in the buffer.

class BufferResource

class BufferResource extends Resource {}

Buffer resource with data of typed array. PIXI

constructor

constructor(source: BufferType, options: IBufferResourceOptions);

Parameter source
Source buffer
Parameter options
Options
Parameter
{number} options.width - Width of the texture
Parameter
{number} options.height - Height of the texture
Parameter
{1|2|4|8} [options.unpackAlignment=4] - The alignment of the pixel rows.

property data

data: BufferType;

The data of this resource.

property unpackAlignment

unpackAlignment: 1 | 2 | 4 | 8;

The alignment of the rows in the data.

method dispose

dispose: () => void;

Destroy and don't use after this.

method test

static test: (source: unknown) => source is BufferType;

Used to auto-detect the type of resource.
Parameter source
The source object
Returns
{boolean} true if buffer source

method upload

upload: (
    renderer: Renderer,
    baseTexture: BaseTexture,
    glTexture: GLTexture
) => boolean;

Upload the texture to the GPU.
Parameter renderer
Upload to the renderer
Parameter baseTexture
Reference to parent texture
Parameter glTexture
glTexture
Returns
- true is success

class BufferSystem

class BufferSystem implements ISystem {}

System plugin to the renderer to manage buffers.
WebGL uses Buffers as a way to store objects to the GPU. This system makes working with them a lot easier.
Buffers are used in three main places in WebGL - geometry information - Uniform information (via uniform buffer objects - a WebGL 2 only feature) - Transform feedback information. (WebGL 2 only feature)
This system will handle the binding of buffers to the GPU as well as uploading them. With this system, you never need to work directly with GPU buffers, but instead work with the PIXI.Buffer class. PIXI

constructor

constructor(renderer: Renderer);

Parameter renderer
The renderer this System works for.

property boundBufferBases

readonly boundBufferBases: { [key: number]: Buffer };

Cache keeping track of the base bound buffer bases

property CONTEXT_UID

CONTEXT_UID: number;

property extension

static extension: ExtensionMetadata;

property gl

gl: IRenderingContext;

property managedBuffers

readonly managedBuffers: { [key: number]: Buffer };

Cache for all buffers by id, used in case renderer gets destroyed or for profiling

method bind

bind: (buffer: Buffer) => void;

This binds specified buffer. On first run, it will create the webGL buffers for the context too
Parameter buffer
the buffer to bind to the renderer

method bindBufferBase

bindBufferBase: (buffer: Buffer, index: number) => void;

Binds an uniform buffer to at the given index.
A cache is used so a buffer will not be bound again if already bound.
Parameter buffer
the buffer to bind
Parameter index
the base index to bind it to.

method bindBufferRange

bindBufferRange: (buffer: Buffer, index?: number, offset?: number) => void;

Binds a buffer whilst also binding its range. This will make the buffer start from the offset supplied rather than 0 when it is read.
Parameter buffer
the buffer to bind
Parameter index
the base index to bind at, defaults to 0
Parameter offset
the offset to bind at (this is blocks of 256). 0 = 0, 1 = 256, 2 = 512 etc

method contextChange

protected contextChange: () => void;

Sets up the renderer context and necessary buffers.

method createGLBuffer

protected createGLBuffer: (buffer: Buffer) => GLBuffer;

creates and attaches a GLBuffer object tied to the current context.
Parameter buffer

method destroy

destroy: () => void;

method dispose

dispose: (buffer: Buffer, contextLost?: boolean) => void;

Disposes buffer
Parameter buffer
buffer with data
Parameter contextLost
If context was lost, we suppress deleteVertexArray

method disposeAll

disposeAll: (contextLost?: boolean) => void;

dispose all WebGL resources of all managed buffers
Parameter contextLost
If context was lost, we suppress gl.delete calls

method unbind

unbind: (type: BUFFER_TYPE) => void;

method update

update: (buffer: Buffer) => void;

Will ensure the data in the buffer is uploaded to the GPU.
Parameter buffer
the buffer to update

class CanvasResource

class CanvasResource extends BaseImageResource {}

Resource type for HTMLCanvasElement and OffscreenCanvas. PIXI

constructor

constructor(source: ICanvas);

Parameter source
Canvas element to use

method test

static test: (source: unknown) => source is any;

Used to auto-detect the type of resource.
Parameter source
The source object
Returns
{boolean} true if source is HTMLCanvasElement or OffscreenCanvas

class ContextSystem

class ContextSystem implements ISystem<ContextSystemOptions> {}

System plugin to the renderer to manage the context. PIXI

constructor

constructor(renderer: Renderer);

Parameter renderer
The renderer this System works for.

property CONTEXT_UID

protected CONTEXT_UID: number;

property defaultOptions

static defaultOptions: ContextSystemOptions;

property extension

static extension: ExtensionMetadata;

property extensions

extensions: WebGLExtensions;

Extensions available. {object}
{WEBGL_draw_buffers} drawBuffers - WebGL v1 extension {WEBGL_depth_texture} depthTexture - WebGL v1 extension {OES_texture_float} floatTexture - WebGL v1 extension {WEBGL_lose_context} loseContext - WebGL v1 extension {OES_vertex_array_object} vertexArrayObject - WebGL v1 extension {EXT_texture_filter_anisotropic} anisotropicFiltering - WebGL v1 and v2 extension
Modifiers
- @readonly

property gl

protected gl: IRenderingContext;

property isLost

readonly isLost: boolean;

true if the context is lost
Modifiers
- @readonly

property powerPreference

powerPreference: WebGLPowerPreference;

property preserveDrawingBuffer

preserveDrawingBuffer: boolean;

property supports

readonly supports: ISupportDict;

Features supported by current context. {object}
{boolean} uint32Indices - Support for 32-bit indices buffer.
Modifiers
- @readonly

property useContextAlpha

useContextAlpha: boolean | 'notMultiplied';

Pass-thru setting for the canvas' context alpha property. This is typically not something you need to fiddle with. If you want transparency, use backgroundAlpha. {boolean}
Deprecated
since 7.0.0

property webGLVersion

webGLVersion: number;

Either 1 or 2 to reflect the WebGL version being used.
Modifiers
- @readonly

method contextChange

protected contextChange: (gl: IRenderingContext) => void;

Handles the context change event.
Parameter gl
New WebGL context.

method createContext

createContext: (
    canvas: ICanvas,
    options: WebGLContextAttributes
) => IRenderingContext;

Helper class to create a WebGL Context
Parameter canvas
the canvas element that we will get the context from
Parameter options
An options object that gets passed in to the canvas element containing the context attributes
Returns
{WebGLRenderingContext} the WebGL context
See Also
- https://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement/getContext

method destroy

destroy: () => void;

method getExtensions

protected getExtensions: () => void;

Auto-populate the .

method handleContextLost

protected handleContextLost: (event: WebGLContextEvent) => void;

Handles a lost webgl context
Parameter event
The context lost event.

method handleContextRestored

protected handleContextRestored: () => void;

Handles a restored webgl context.

method init

init: (options: ContextSystemOptions) => void;

method initFromContext

initFromContext: (gl: IRenderingContext) => void;

Initializes the context.
Parameter gl
WebGL context

method initFromOptions

initFromOptions: (options: WebGLContextAttributes) => void;

Initialize from context options
Parameter options
context attributes
See Also
- https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext

method postrender

protected postrender: () => void;

Handle the post-render runner event.

method validateContext

protected validateContext: (gl: IRenderingContext) => void;

Validate context.
Parameter gl
Render context.

class CubeResource

class CubeResource extends AbstractMultiResource {}

Resource for a CubeTexture which contains six resources. PIXI

constructor

constructor(
    source?: ArrayFixed<string | Resource, 6>,
    options?: ICubeResourceOptions
);

Parameter source
Collection of URLs or resources to use as the sides of the cube.
Parameter options
ImageResource options
Parameter
{number} [options.width] - Width of resource
Parameter
{number} [options.height] - Height of resource
Parameter
{number} [options.autoLoad=true] - Whether to auto-load resources
Parameter
{number} [options.linkBaseTexture=true] - In case BaseTextures are supplied, whether to copy them or use

property items

items: ArrayFixed<BaseTexture<Resource, any>, 6>;

property linkBaseTexture

linkBaseTexture: boolean;

In case BaseTextures are supplied, whether to use same resource or bind baseTexture itself.

property SIDES

static SIDES: number;

Number of texture sides to store for CubeResources.

method addBaseTextureAt

addBaseTextureAt: (
    baseTexture: BaseTexture,
    index: number,
    linkBaseTexture?: boolean
) => this;

method bind

bind: (baseTexture: BaseTexture) => void;

Add binding.
Parameter baseTexture
parent base texture

method test

static test: (source: unknown) => source is ArrayFixed<string | Resource, 6>;

Used to auto-detect the type of resource.
Parameter source
The source object
Returns
{boolean} true if source is an array of 6 elements

method upload

upload: (
    renderer: Renderer,
    _baseTexture: BaseTexture,
    glTexture: GLTexture
) => boolean;

Upload the resource
Parameter renderer
Parameter _baseTexture
Parameter glTexture
Returns
{boolean} true is success

class Filter

class Filter extends Shader {}

A filter is a special shader that applies post-processing effects to an input texture and writes into an output render-target.
of the .
### Usage Filters can be applied to any DisplayObject or Container. PixiJS' FilterSystem renders the container into temporary Framebuffer, then filter renders it to the screen. Multiple filters can be added to the filters array property and stacked on each other.
import { Container, Filter } from 'pixi.js'; const filter = new Filter(myShaderVert, myShaderFrag, { myUniform: 0.5 }); const container = new Container(); container.filters = [filter];
### Previous Version Differences
In PixiJS **v3**, a filter was always applied to _whole screen_.
In PixiJS **v4**, a filter can be applied _only part of the screen_. Developers had to create a set of uniforms to deal with coordinates.
In PixiJS **v5** combines _both approaches_. Developers can use normal coordinates of v3 and then allow filter to use partial Framebuffers, bringing those extra uniforms into account.
Also be aware that we have changed default vertex shader, please consult .
### Frames
The following table summarizes the coordinate spaces used in the filtering pipeline:
Coordinate Space Description Texture Coordinates The texture (or UV) coordinates in the input base-texture's space. These are normalized into the (0,1) range along both axes. World Space A point in the same space as the world bounds of any display-object (i.e. in the scene graph's space). Physical Pixels This is base-texture's space with the origin on the top-left. You can calculate these by multiplying the texture coordinates by the dimensions of the texture.
### Built-in Uniforms
PixiJS viewport uses screen (CSS) coordinates, (0, 0, renderer.screen.width, renderer.screen.height), and projectionMatrix uniform maps it to the gl viewport.
**uSampler**
The most important uniform is the input texture that container was rendered into. _Important note: as with all Framebuffers in PixiJS, both input and output are premultiplied by alpha._
By default, input normalized coordinates are passed to fragment shader with vTextureCoord. Use it to sample the input.
import { Filter } from 'pixi.js'; const fragment = ` varying vec2 vTextureCoord; uniform sampler2D uSampler; void main(void) { gl_FragColor = texture2D(uSampler, vTextureCoord); } `; const myFilter = new Filter(null, fragment);
This filter is just one uniform less than .
**outputFrame**
The outputFrame holds the rectangle where filter is applied in screen (CSS) coordinates. It's the same as renderer.screen for a fullscreen filter. Only a part of outputFrame.zw size of temporary Framebuffer is used, (0, 0, outputFrame.width, outputFrame.height),
Filters uses this quad to normalized (0-1) space, its passed into aVertexPosition attribute. To calculate vertex position in screen space using normalized (0-1) space:
vec4 filterVertexPosition( void ) { vec2 position = aVertexPosition * max(outputFrame.zw, vec2(0.)) + outputFrame.xy; return vec4((projectionMatrix * vec3(position, 1.0)).xy, 0.0, 1.0); }
**inputSize**
Temporary framebuffer is different, it can be either the size of screen, either power-of-two. The inputSize.xy are size of temporary framebuffer that holds input. The inputSize.zw is inverted, it's a shortcut to evade division inside the shader.
Set inputSize.xy = outputFrame.zw for a fullscreen filter.
To calculate input normalized coordinate, you have to map it to filter normalized space. Multiply by outputFrame.zw to get input coordinate. Divide by inputSize.xy to get input normalized coordinate.
vec2 filterTextureCoord( void ) { return aVertexPosition * (outputFrame.zw * inputSize.zw); // same as /inputSize.xy }
**resolution**
The resolution is the ratio of screen (CSS) pixels to real pixels.
**inputPixel**
inputPixel.xy is the size of framebuffer in real pixels, same as inputSize.xy * resolution inputPixel.zw is inverted inputPixel.xy.
It's handy for filters that use neighbour pixels, like .
**inputClamp**
If you try to get info from outside of used part of Framebuffer - you'll get undefined behaviour. For displacements, coordinates has to be clamped.
The inputClamp.xy is left-top pixel center, you may ignore it, because we use left-top part of Framebuffer inputClamp.zw is bottom-right pixel center.
vec4 color = texture2D(uSampler, clamp(modifiedTextureCoord, inputClamp.xy, inputClamp.zw));
Or:
vec4 color = texture2D(uSampler, min(modifigedTextureCoord, inputClamp.zw));
### Additional Information
Complete documentation on Filter usage is located in the .
Since PixiJS only had a handful of built-in filters, additional filters can be downloaded from the PixiJS Filters repository. PIXI

constructor

constructor(vertexSrc?: string, fragmentSrc?: string, uniforms?: Dict<any>);

Parameter vertexSrc
The source of the vertex shader.
Parameter fragmentSrc
The source of the fragment shader.
Parameter uniforms
Custom uniforms to use to augment the built-in ones.

property autoFit

autoFit: boolean;

If enabled, PixiJS will fit the filter area into boundaries for better performance. Switch it off if it does not work for specific shader. true

property blendMode

blendMode: BLEND_MODES;

Sets the blend mode of the filter. PIXI.BLEND_MODES.NORMAL

property defaultFragmentSrc

static readonly defaultFragmentSrc: string;

The default fragment shader source
Modifiers
- @readonly

property defaultMultisample

static defaultMultisample: any;

Default filter samples for any filter. {PIXI.MSAA_QUALITY|null} PIXI.MSAA_QUALITY.NONE

property defaultResolution

static defaultResolution: number;

Default filter resolution for any filter.

property defaultVertexSrc

static readonly defaultVertexSrc: string;

The default vertex shader source
Modifiers
- @readonly

property enabled

enabled: boolean;

If enabled is true the filter is applied, if false it will not.

property legacy

legacy: boolean;

Legacy filters use position and uvs from attributes (set by filter system)
Modifiers
- @readonly

property multisample

multisample: any;

The samples override of the filter instance. If set to null, the sample count of the current render target is used. PIXI.Filter.defaultMultisample

property padding

padding: number;

The padding of the filter. Some filters require extra space to breath such as a blur. Increasing this will add extra width and height to the bounds of the object that the filter is applied to.

property resolution

resolution: number;

The resolution of the filter. Setting this to be lower will lower the quality but increase the performance of the filter. If set to null or 0, the resolution of the current render target is used. PIXI.Filter.defaultResolution

property SOURCE_KEY_MAP

static SOURCE_KEY_MAP: Dict<string>;

Used for caching shader IDs.

property state

state: State;

The WebGL state the filter requires to render.

method apply

apply: (
    filterManager: FilterSystem,
    input: RenderTexture,
    output: RenderTexture,
    clearMode?: CLEAR_MODES,
    _currentState?: FilterState
) => void;

Applies the filter
Parameter filterManager
The renderer to retrieve the filter from
Parameter input
The input render target.
Parameter output
The target to output to.
Parameter clearMode
Should the output be cleared before rendering to it.
Parameter _currentState
It's current state of filter. There are some useful properties in the currentState : target, filters, sourceFrame, destinationFrame, renderTarget, resolution

class FilterState

class FilterState {}

System plugin to the renderer to manage filter states.

constructor

constructor();

property bindingDestinationFrame

bindingDestinationFrame: Rectangle;

Original render-target destination frame.

property bindingSourceFrame

bindingSourceFrame: Rectangle;

Original render-target source frame.

property destinationFrame

destinationFrame: Rectangle;

Destination frame.

property filters

filters: Filter[];

Collection of filters.

property legacy

legacy: boolean;

Compatibility with PixiJS v4 filters false

property multisample

multisample: MSAA_QUALITY;

Number of samples MSAA_QUALITY.NONE

property renderTexture

renderTexture: RenderTexture;

property resolution

resolution: number;

Resolution of filters 1

property sourceFrame

sourceFrame: Rectangle;

Source frame.

property target

target: IFilterTarget;

Target of the filters We store for case when custom filter wants to know the element it was applied on {PIXI.DisplayObject}

property transform

transform: Matrix;

Projection system transform saved by link.

method clear

clear: () => void;

Clears the state

class FilterSystem

class FilterSystem implements ISystem {}

System plugin to the renderer to manage filters.
## Pipeline
The FilterSystem executes the filtering pipeline by rendering the display-object into a texture, applying its [filters]PIXI.Filter in series, and the last filter outputs into the final render-target.
The filter-frame is the rectangle in world space being filtered, and those contents are mapped into (0, 0, filterFrame.width, filterFrame.height) into the filter render-texture. The filter-frame is also called the source-frame, as it is used to bind the filter render-textures. The last filter outputs to the filterFrame in the final render-target.
## Usage
PIXI.Container#renderAdvanced is an example of how to use the filter system. It is a 3 step process:
**push**: Use PIXI.FilterSystem#push to push the set of filters to be applied on a filter-target. **render**: Render the contents to be filtered using the renderer. The filter-system will only capture the contents inside the bounds of the filter-target. NOTE: Using PIXI.Renderer#render is illegal during an existing render cycle, and it may reset the filter system. **pop**: Use PIXI.FilterSystem#pop to pop & execute the filters you initially pushed. It will apply them serially and output to the bounds of the filter-target. PIXI

constructor

constructor(renderer: Renderer);

Parameter renderer
The renderer this System works for.

property activeState

protected activeState: FilterState;

Active state {object}

property defaultFilterStack

readonly defaultFilterStack: FilterState[];

List of filters for the FilterSystem {object[]}

property extension

static extension: ExtensionMetadata;

property forceClear

forceClear: boolean;

Whether to clear output renderTexture in AUTO/BLIT mode. See PIXI.CLEAR_MODES.

property globalUniforms

protected globalUniforms: UniformGroup<Dict<any>>;

This uniform group is attached to filter uniforms when used. {PIXI.Rectangle} outputFrame - {Float32Array} inputSize - {Float32Array} inputPixel - {Float32Array} inputClamp - {number} resolution - {Float32Array} filterArea - {Float32Array} filterClamp -

property quad

protected quad: Quad;

A very simple geometry used when drawing a filter effect to the screen.

property quadUv

protected quadUv: QuadUv;

Quad UVs

property renderer

renderer: Renderer;

property statePool

statePool: FilterState[];

A pool for storing filter states, save us creating new ones each tick.

property texturePool

texturePool: RenderTexturePool;

Stores a bunch of POT textures used for filtering.

property useMaxPadding

useMaxPadding: boolean;

Old padding behavior is to use the max amount instead of sum padding. Use this flag if you need the old behavior. false

method applyFilter

applyFilter: (
    filter: Filter,
    input: RenderTexture,
    output: RenderTexture,
    clearMode?: CLEAR_MODES
) => void;

Draws a filter using the default rendering process.
This should be called only by PIXI.Filter#apply.
Parameter filter
The filter to draw.
Parameter input
The input render target.
Parameter output
The target to output to.
Parameter clearMode
Should the output be cleared before rendering to it

method bindAndClear

bindAndClear: (filterTexture: RenderTexture, clearMode?: CLEAR_MODES) => void;

Binds a renderTexture with corresponding filterFrame, clears it if mode corresponds.
Parameter filterTexture
renderTexture to bind, should belong to filter pool or filter stack
Parameter clearMode
clearMode, by default its CLEAR/YES. See PIXI.CLEAR_MODES

method calculateSpriteMatrix

calculateSpriteMatrix: (
    outputMatrix: Matrix,
    sprite: ISpriteMaskTarget
) => Matrix;

Multiply _input normalized coordinates_ to this matrix to get _sprite texture normalized coordinates_.
Use outputMatrix * vTextureCoord in the shader.
Parameter outputMatrix
The matrix to output to.
Parameter sprite
The sprite to map to.
Returns
The mapped matrix.

method destroy

destroy: () => void;

Destroys this Filter System.

method emptyPool

emptyPool: () => void;

Empties the texture pool.

method getFilterTexture

getFilterTexture: (
    input?: RenderTexture,
    resolution?: number,
    multisample?: MSAA_QUALITY
) => RenderTexture;

Gets extra render texture to use inside current filter To be compliant with older filters, you can use params in any order
Parameter input
renderTexture from which size and resolution will be copied
Parameter resolution
override resolution of the renderTexture
Parameter multisample
number of samples of the renderTexture

method getOptimalFilterTexture

protected getOptimalFilterTexture: (
    minWidth: number,
    minHeight: number,
    resolution?: number,
    multisample?: MSAA_QUALITY
) => RenderTexture;

Gets a Power-of-Two render texture or fullScreen texture
Parameter minWidth
The minimum width of the render texture in real pixels.
Parameter minHeight
The minimum height of the render texture in real pixels.
Parameter resolution
The resolution of the render texture.
Parameter multisample
Number of samples of the render texture.
Returns
- The new render texture.

method init

init: () => void;

method pop

pop: () => void;

Pops off the filter and applies it.

method push

push: (target: IFilterTarget, filters: Array<Filter>) => void;

Pushes a set of filters to be applied later to the system. This will redirect further rendering into an input render-texture for the rest of the filtering pipeline.
Parameter target
The target of the filter to render.
Parameter filters
The filters to apply.

method resize

resize: () => void;

Calls texturePool.resize(), affects fullScreen renderTextures.

method returnFilterTexture

returnFilterTexture: (renderTexture: RenderTexture) => void;

Frees a render texture back into the pool.
Parameter renderTexture
The renderTarget to free

class Framebuffer

class Framebuffer {}

A framebuffer can be used to render contents off of the screen. PIXI.BaseRenderTexture uses one internally to render into itself. You can attach a depth or stencil buffer to a framebuffer.
On WebGL 2 machines, shaders can output to multiple textures simultaneously with GLSL 300 ES. PIXI

constructor

constructor(width: number, height: number);

Parameter width
Width of the frame buffer
Parameter height
Height of the frame buffer

property colorTexture

readonly colorTexture: BaseTexture<Resource, any>;

Reference to the colorTexture.
Modifiers
- @readonly

property colorTextures

colorTextures: BaseTexture<Resource, any>[];

property depth

depth: boolean;

property depthTexture

depthTexture: BaseTexture<Resource, any>;

property dirtyFormat

dirtyFormat: number;

property dirtyId

dirtyId: number;

property dirtySize

dirtySize: number;

property disposeRunner

disposeRunner: Runner;

property glFramebuffers

glFramebuffers: { [key: string]: GLFramebuffer };

property height

height: number;

Height of framebuffer in pixels.

property multisample

multisample: MSAA_QUALITY;

Desired number of samples for antialiasing. 0 means AA should not be used.
Experimental WebGL2 feature, allows to use antialiasing in individual renderTextures. Antialiasing is the same as for main buffer with renderer antialias: true options. Seriously affects GPU memory consumption and GPU performance.
Example 1
import { MSAA_QUALITY } from 'pixi.js';
renderTexture.framebuffer.multisample = MSAA_QUALITY.HIGH; // ... renderer.render(myContainer, { renderTexture }); renderer.framebuffer.blit(); // Copies data from MSAA framebuffer to texture PIXI.MSAA_QUALITY.NONE

property stencil

stencil: boolean;

property width

width: number;

Width of framebuffer in pixels.

method addColorTexture

addColorTexture: (index?: number, texture?: BaseTexture) => this;

Add texture to the colorTexture array.
Parameter index
Index of the array to add the texture to
Parameter texture
Texture to add to the array

method addDepthTexture

addDepthTexture: (texture?: BaseTexture) => this;

Add a depth texture to the frame buffer.
Parameter texture
Texture to add.

method destroyDepthTexture

destroyDepthTexture: () => void;

Destroys and removes the depth texture added to this framebuffer.

method dispose

dispose: () => void;

Disposes WebGL resources that are connected to this geometry.

method enableDepth

enableDepth: () => this;

Enable depth on the frame buffer.

method enableStencil

enableStencil: () => this;

Enable stencil on the frame buffer.

method resize

resize: (width: number, height: number) => void;

Resize the frame buffer
Parameter width
Width of the frame buffer to resize to
Parameter height
Height of the frame buffer to resize to

class FramebufferSystem

class FramebufferSystem implements ISystem {}

System plugin to the renderer to manage framebuffers. PIXI

constructor

constructor(renderer: Renderer);

Parameter renderer
The renderer this System works for.

property CONTEXT_UID

protected CONTEXT_UID: number;

property current

current: Framebuffer;

property extension

static extension: ExtensionMetadata;

property gl

protected gl: IRenderingContext;

property hasMRT

hasMRT: boolean;

property managedFramebuffers

readonly managedFramebuffers: Framebuffer[];

A list of managed framebuffers.

property msaaSamples

protected msaaSamples: number[];

property renderer

renderer: Renderer;

property size

readonly size: { x: number; y: number; width: number; height: number };

Get the size of the current width and height. Returns object with width and height values.
Modifiers
- @readonly

property unknownFramebuffer

protected unknownFramebuffer: Framebuffer;

Framebuffer value that shows that we don't know what is bound.

property viewport

viewport: Rectangle;

property writeDepthTexture

writeDepthTexture: boolean;

method bind

bind: (framebuffer?: Framebuffer, frame?: Rectangle, mipLevel?: number) => void;

Bind a framebuffer.
Parameter framebuffer
Parameter frame
frame, default is framebuffer size
Parameter mipLevel
optional mip level to set on the framebuffer - defaults to 0

method blit

blit: (
    framebuffer?: Framebuffer,
    sourcePixels?: Rectangle,
    destPixels?: Rectangle
) => void;

Only works with WebGL2
blits framebuffer to another of the same or bigger size after that target framebuffer is bound
Fails with WebGL warning if blits multisample framebuffer to different size
Parameter framebuffer
by default it blits "into itself", from renderBuffer to texture.
Parameter sourcePixels
source rectangle in pixels
Parameter destPixels
dest rectangle in pixels, assumed to be the same as sourcePixels

method canMultisampleFramebuffer

protected canMultisampleFramebuffer: (framebuffer: Framebuffer) => boolean;

Returns true if the frame buffer can be multisampled.
Parameter framebuffer

method clear

clear: (r: number, g: number, b: number, a: number, mask?: BUFFER_BITS) => void;

Clear the color of the context
Parameter r
Red value from 0 to 1
Parameter g
Green value from 0 to 1
Parameter b
Blue value from 0 to 1
Parameter a
Alpha value from 0 to 1
Parameter mask
Bitwise OR of masks that indicate the buffers to be cleared, by default COLOR and DEPTH buffers.

method contextChange

protected contextChange: () => void;

Sets up the renderer context and necessary buffers.

method destroy

destroy: () => void;

method detectSamples

protected detectSamples: (samples: MSAA_QUALITY) => MSAA_QUALITY;

Detects number of samples that is not more than a param but as close to it as possible
Parameter samples
number of samples
Returns
- recommended number of samples

method disposeAll

disposeAll: (contextLost?: boolean) => void;

Disposes all framebuffers, but not textures bound to them.
Parameter contextLost
If context was lost, we suppress all delete function calls

method disposeFramebuffer

disposeFramebuffer: (framebuffer: Framebuffer, contextLost?: boolean) => void;

Disposes framebuffer.
Parameter framebuffer
framebuffer that has to be disposed of
Parameter contextLost
If context was lost, we suppress all delete function calls

method forceStencil

forceStencil: () => void;

Forcing creation of stencil buffer for current framebuffer, if it wasn't done before. Used by MaskSystem, when its time to use stencil mask for Graphics element.
Its an alternative for public lazy framebuffer.enableStencil, in case we need stencil without rebind.

method initFramebuffer

initFramebuffer: (framebuffer: Framebuffer) => GLFramebuffer;

Initialize framebuffer for this context
Parameter framebuffer
Returns
- created GLFramebuffer

method reset

reset: () => void;

Resets framebuffer stored state, binds screen framebuffer. Should be called before renderTexture reset().

method resizeFramebuffer

resizeFramebuffer: (framebuffer: Framebuffer) => void;

Resize the framebuffer
Parameter framebuffer

method setViewport

setViewport: (x: number, y: number, width: number, height: number) => void;

Set the WebGLRenderingContext's viewport.
Parameter x
X position of viewport
Parameter y
Y position of viewport
Parameter width
Width of viewport
Parameter height
Height of viewport

method updateFramebuffer

updateFramebuffer: (framebuffer: Framebuffer, mipLevel: number) => void;

Update the framebuffer
Parameter framebuffer
Parameter mipLevel

class GenerateTextureSystem

class GenerateTextureSystem implements ISystem {}

System that manages the generation of textures from the renderer. PIXI

constructor

constructor(renderer: IRenderer<ICanvas>);

property extension

static extension: ExtensionMetadata;

property renderer

renderer: IRenderer<ICanvas>;

method destroy

destroy: () => void;

method generateTexture

generateTexture: (
    displayObject: IRenderableObject,
    options?: IGenerateTextureOptions
) => RenderTexture;

A Useful function that returns a texture of the display object that can then be used to create sprites This can be quite useful if your displayObject is complicated and needs to be reused multiple times.
Parameter displayObject
The displayObject the object will be generated from.
Parameter options
Generate texture options.
Parameter
{PIXI.Rectangle} options.region - The region of the displayObject, that shall be rendered, if no region is specified, defaults to the local bounds of the displayObject.
Parameter
{number} [options.resolution] - If not given, the renderer's resolution is used.
Parameter
{PIXI.MSAA_QUALITY} [options.multisample] - If not given, the renderer's multisample is used.
Returns
a shiny new texture of the display object passed in

class Geometry

class Geometry {}

The Geometry represents a model. It consists of two components: - GeometryStyle - The structure of the model such as the attributes layout - GeometryData - the data of the model - this consists of buffers. This can include anything from positions, uvs, normals, colors etc.
Geometry can be defined without passing in a style or data if required (thats how I prefer!)
Example 1
import { Geometry } from 'pixi.js';
const geometry = new Geometry();
geometry.addAttribute('positions', [0, 0, 100, 0, 0, 100, 100, 100], 2); geometry.addAttribute('uvs', [0, 0, 1, 0, 0, 1, 1, 1], 2); geometry.addIndex([0, 1, 2, 1, 3, 2]); PIXI

constructor

constructor(buffers?: Buffer[], attributes?: { [key: string]: Attribute });

Parameter buffers
An array of buffers. optional.
Parameter attributes
Of the geometry, optional structure of the attributes layout

property attributes

attributes: { [key: string]: Attribute };

property buffers

buffers: Buffer[];

property disposeRunner

disposeRunner: Runner;

property glVertexArrayObjects

glVertexArrayObjects: {
    [key: number]: { [key: string]: WebGLVertexArrayObject };
};

A map of renderer IDs to webgl VAOs {object}

property id

id: number;

property indexBuffer

indexBuffer: Buffer;

property instanceCount

instanceCount: number;

Number of instances in this geometry, pass it to GeometrySystem.draw(). 1

property instanced

instanced: boolean;

Whether the geometry is instanced.

property refCount

refCount: number;

Count of existing (not destroyed) meshes that reference this geometry.

method addAttribute

addAttribute: (
    id: string,
    buffer: Buffer | Float32Array | Uint32Array | Array<number>,
    size?: number,
    normalized?: boolean,
    type?: TYPES,
    stride?: number,
    start?: number,
    instance?: boolean
) => this;

Adds an attribute to the geometry Note: stride and start should be undefined if you dont know them, not 0!
Parameter id
the name of the attribute (matching up to a shader)
Parameter buffer
the buffer that holds the data of the attribute . You can also provide an Array and a buffer will be created from it.
Parameter size
the size of the attribute. If you have 2 floats per vertex (eg position x and y) this would be 2
Parameter normalized
should the data be normalized.
Parameter type
what type of number is the attribute. Check PIXI.TYPES to see the ones available
Parameter stride
How far apart, in bytes, the start of each value is. (used for interleaving data)
Parameter start
How far into the array to start reading values (used for interleaving data)
Parameter instance
Instancing flag
Returns
- Returns self, useful for chaining.

method addIndex

addIndex: (buffer?: Buffer | IArrayBuffer | number[]) => Geometry;

Adds an index buffer to the geometry The index buffer contains integers, three for each triangle in the geometry, which reference the various attribute buffers (position, colour, UV coordinates, other UV coordinates, normal, …). There is only ONE index buffer.
Parameter buffer
The buffer that holds the data of the index buffer. You can also provide an Array and a buffer will be created from it.
Returns
- Returns self, useful for chaining.

method clone

clone: () => Geometry;

Returns a clone of the geometry.
Returns
- A new clone of this geometry.

method destroy

destroy: () => void;

Destroys the geometry.

method dispose

dispose: () => void;

Disposes WebGL resources that are connected to this geometry.

method getAttribute

getAttribute: (id: string) => Attribute;

Returns the requested attribute.
Parameter id
The name of the attribute required
Returns
- The attribute requested.

method getBuffer

getBuffer: (id: string) => Buffer;

Returns the requested buffer.
Parameter id
The name of the buffer required.
Returns
- The buffer requested.

method getIndex

getIndex: () => Buffer;

Returns the index buffer
Returns
- The index buffer.

method getSize

getSize: () => number;

Get the size of the geometries, in vertices.

method interleave

interleave: () => Geometry;

This function modifies the structure so that all current attributes become interleaved into a single buffer This can be useful if your model remains static as it offers a little performance boost
Returns
- Returns self, useful for chaining.

method merge

static merge: (geometries: Array<Geometry>) => Geometry;

Merges an array of geometries into a new single one.
Geometry attribute styles must match for this operation to work.
Parameter geometries
array of geometries to merge
Returns
- Shiny new geometry!

class GeometrySystem

class GeometrySystem implements ISystem {}

System plugin to the renderer to manage geometry. PIXI

constructor

constructor(renderer: Renderer);

Parameter renderer
The renderer this System works for.

property canUseUInt32ElementIndex

canUseUInt32ElementIndex: boolean;

true if support gl.UNSIGNED_INT in gl.drawElements or gl.drawElementsInstanced.
Modifiers
- @readonly

property CONTEXT_UID

protected CONTEXT_UID: number;

property extension

static extension: ExtensionMetadata;

property gl

protected gl: IRenderingContext;

property hasInstance

hasInstance: boolean;

true if has ANGLE_instanced_arrays extension.
Modifiers
- @readonly

property hasVao

hasVao: boolean;

true if we has *_vertex_array_object extension.
Modifiers
- @readonly

property managedGeometries

readonly managedGeometries: { [key: number]: Geometry };

Cache for all geometries by id, used in case renderer gets destroyed or for profiling.

method activateVao

protected activateVao: (geometry: Geometry, program: Program) => void;

Activate vertex array object.
Parameter geometry
Geometry instance.
Parameter program
Shader program instance.

method bind

bind: (geometry?: Geometry, shader?: Shader) => void;

Binds geometry so that is can be drawn. Creating a Vao if required
Parameter geometry
Instance of geometry to bind.
Parameter shader
Instance of shader to use vao for.

method checkCompatibility

protected checkCompatibility: (geometry: Geometry, program: Program) => void;

Check compatibility between a geometry and a program
Parameter geometry
Geometry instance.
Parameter program
Program instance.

method contextChange

protected contextChange: () => void;

Sets up the renderer context and necessary buffers.

method destroy

destroy: () => void;

method disposeAll

disposeAll: (contextLost?: boolean) => void;

Dispose all WebGL resources of all managed geometries.
Parameter contextLost
If context was lost, we suppress gl.delete calls

method disposeGeometry

disposeGeometry: (geometry: Geometry, contextLost?: boolean) => void;

Disposes geometry.
Parameter geometry
Geometry with buffers. Only VAO will be disposed
Parameter contextLost
If context was lost, we suppress deleteVertexArray

method draw

draw: (
    type: DRAW_MODES,
    size?: number,
    start?: number,
    instanceCount?: number
) => this;

Draws the currently bound geometry.
Parameter type
The type primitive to render.
Parameter size
The number of elements to be rendered. If not specified, all vertices after the starting vertex will be drawn.
Parameter start
The starting vertex in the geometry to start drawing from. If not specified, drawing will start from the first vertex.
Parameter instanceCount
The number of instances of the set of elements to execute. If not specified, all instances will be drawn.

method getSignature

protected getSignature: (geometry: Geometry, program: Program) => string;

Takes a geometry and program and generates a unique signature for them.
Parameter geometry
To get signature from.
Parameter program
To test geometry against.
Returns
- Unique signature of the geometry and program

method initGeometryVao

protected initGeometryVao: (
    geometry: Geometry,
    shader: Shader,
    incRefCount?: boolean
) => WebGLVertexArrayObject;

Creates or gets Vao with the same structure as the geometry and stores it on the geometry. If vao is created, it is bound automatically. We use a shader to infer what and how to set up the attribute locations.
Parameter geometry
Instance of geometry to to generate Vao for.
Parameter shader
Instance of the shader.
Parameter incRefCount
Increment refCount of all geometry buffers.

method reset

reset: () => void;

Reset and unbind any active VAO and geometry.

method unbind

protected unbind: () => void;

Unbind/reset everything.

method updateBuffers

updateBuffers: () => void;

Update buffers of the currently bound geometry.

class GLFramebuffer

class GLFramebuffer {}

Internal framebuffer for WebGL context. PIXI

constructor

constructor(framebuffer: WebGLTexture);

property blitFramebuffer

blitFramebuffer: Framebuffer;

In case we use MSAA, this is actual framebuffer that has colorTextures[0] The contents of that framebuffer are read when we use that renderTexture in sprites

property dirtyFormat

dirtyFormat: number;

Latest known version of framebuffer format.

property dirtyId

dirtyId: number;

Latest known version of framebuffer.

property dirtySize

dirtySize: number;

Latest known version of framebuffer size.

property framebuffer

framebuffer: WebGLFramebuffer;

The WebGL framebuffer.

property mipLevel

mipLevel: number;

Store the current mipmap of the textures the framebuffer will write too.

property msaaBuffer

msaaBuffer: WebGLRenderbuffer;

In case MSAA, we use this Renderbuffer instead of colorTextures[0] when we write info.

property multisample

multisample: MSAA_QUALITY;

Detected AA samples number.

property stencil

stencil: WebGLRenderbuffer;

The renderbuffer for depth and/or stencil (DEPTH24_STENCIL8, DEPTH_COMPONENT24, or STENCIL_INDEX8)

class GLProgram

class GLProgram {}

Helper class to create a WebGL Program PIXI

constructor

constructor(
    program: WebGLProgram,
    uniformData: { [key: string]: IGLUniformData }
);

Makes a new Pixi program.
Parameter program
webgl program
Parameter uniformData
uniforms

property program

program: WebGLProgram;

The shader program.

property uniformBufferBindings

uniformBufferBindings: Dict<any>;

A hash that stores where UBOs are bound to on the program.

property uniformData

uniformData: Dict<any>;

Holds the uniform data which contains uniform locations and current uniform values used for caching and preventing unneeded GPU commands.

property uniformDirtyGroups

uniformDirtyGroups: Dict<any>;

A place where dirty ticks are stored for groups If a tick here does not match with the Higher level Programs tick, it means we should re upload the data.

property uniformGroups

uniformGroups: Dict<any>;

UniformGroups holds the various upload functions for the shader. Each uniform group and program have a unique upload function generated.

property uniformSync

uniformSync: Dict<any>;

A hash for lazily-generated uniform uploading functions.

method destroy

destroy: () => void;

Destroys this program.

class GLTexture

class GLTexture {}

Internal texture for WebGL context. PIXI

constructor

constructor(texture: WebGLTexture);

property dirtyId

dirtyId: number;

Texture contents dirty flag.

property dirtyStyleId

dirtyStyleId: number;

Texture style dirty flag.

property height

height: number;

Height of texture that was used in texImage2D.

property internalFormat

internalFormat: number;

Type copied from baseTexture.

property mipmap

mipmap: boolean;

Whether mip levels has to be generated.

property samplerType

samplerType: number;

Type of sampler corresponding to this texture. See PIXI.SAMPLER_TYPES

property texture

texture: WebGLTexture;

The WebGL texture.

property type

type: number;

Type copied from baseTexture.

property width

width: number;

Width of texture that was used in texImage2D.

property wrapMode

wrapMode: number;

WrapMode copied from baseTexture.

class IGLUniformData

class IGLUniformData {}

property location

location: WebGLUniformLocation;

property value

value: number | boolean | Float32Array | Uint32Array | Int32Array | boolean[];

class ImageBitmapResource

class ImageBitmapResource extends BaseImageResource {}

Resource type for ImageBitmap. PIXI

constructor

constructor(source: string | ImageBitmap, options?: IImageBitmapResourceOptions);

Parameter source
ImageBitmap or URL to use.
Parameter options
Options to use.

property alphaMode

alphaMode: any;

Controls texture alphaMode field Copies from options Default is null, copies option from baseTexture
Modifiers
- @readonly

property crossOrigin

crossOrigin: boolean;

Load image using cross origin. false

property url

url: string;

URL of the image source.

method dispose

dispose: () => void;

Destroys this resource.

method load

load: () => Promise<this>;

method test

static test: (source: unknown) => source is string | ImageBitmap;

Used to auto-detect the type of resource.
Parameter source
The source object
Returns
{boolean} true if current environment support ImageBitmap, and source is string or ImageBitmap

method upload

upload: (
    renderer: Renderer,
    baseTexture: BaseTexture,
    glTexture: GLTexture
) => boolean;

Upload the image bitmap resource to GPU.
Parameter renderer
Renderer to upload to
Parameter baseTexture
BaseTexture for this resource
Parameter glTexture
GLTexture to use
Returns
{boolean} true is success

class ImageResource

class ImageResource extends BaseImageResource {}

Resource type for HTMLImageElement. PIXI

constructor

constructor(source: string | HTMLImageElement, options?: IImageResourceOptions);

Parameter source
image source or URL
Parameter options
Parameter
{boolean} [options.autoLoad=true] - start loading process
Parameter
{boolean} [options.createBitmap=PIXI.settings.CREATE_IMAGE_BITMAP] - whether its required to create a bitmap before upload
Parameter
{boolean} [options.crossorigin=true] - Load image using cross origin
Parameter
{PIXI.ALPHA_MODES} [options.alphaMode=PIXI.ALPHA_MODES.UNPACK] - Premultiply image alpha in bitmap

property alphaMode

alphaMode: ALPHA_MODES;

Controls texture alphaMode field Copies from options Default is null, copies option from baseTexture
Modifiers
- @readonly

property bitmap

bitmap: ImageBitmap;

The ImageBitmap element created for a HTMLImageElement. null

property createBitmap

createBitmap: boolean;

If capable, convert the image using createImageBitmap API. PIXI.settings.CREATE_IMAGE_BITMAP

property preserveBitmap

preserveBitmap: boolean;

If the image should be disposed after upload false

property url

url: string;

URL of the image source

method dispose

dispose: () => void;

Destroys this resource.

method load

load: (createBitmap?: boolean) => Promise<this>;

Returns a promise when image will be loaded and processed.
Parameter createBitmap
whether process image into bitmap

method process

process: () => Promise<this>;

Called when we need to convert image into BitmapImage. Can be called multiple times, real promise is cached inside.
Returns
- Cached promise to fill that bitmap

method test

static test: (source: unknown) => source is string | HTMLImageElement;

Used to auto-detect the type of resource.
Parameter source
The source object
Returns
{boolean} true if current environment support HTMLImageElement, and source is string or HTMLImageElement

method upload

upload: (
    renderer: Renderer,
    baseTexture: BaseTexture,
    glTexture: GLTexture
) => boolean;

Upload the image resource to GPU.
Parameter renderer
Renderer to upload to
Parameter baseTexture
BaseTexture for this resource
Parameter glTexture
GLTexture to use
Returns
{boolean} true is success

class MaskData

class MaskData {}

Component for masked elements.
Holds mask mode and temporary data about current mask. PIXI

constructor

constructor(maskObject?: IMaskTarget);

Create MaskData
Parameter maskObject
object that describes the mask

property autoDetect

autoDetect: boolean;

Whether we know the mask type beforehand true

property colorMask

colorMask: number;

Color mask.
See Also
- PIXI.COLOR_MASK_BITS

property enabled

enabled: boolean;

If enabled is true the mask is applied, if false it will not.

property filter

filter: ISpriteMaskFilter;

The sprite mask filter. If set to null, the default sprite mask filter is used. null

property isMaskData

isMaskData: boolean;

Indicator of the type (always true for PIXI.MaskData objects)

property maskObject

maskObject: IMaskTarget;

Which element we use to mask {PIXI.DisplayObject}

property multisample

multisample: any;

Number of samples of the sprite mask filter. If set to null, the sample count of the current render target is used. PIXI.Filter.defaultMultisample

property pooled

pooled: boolean;

Whether it belongs to MaskSystem pool

property resolution

resolution: number;

Resolution of the sprite mask filter. If set to null or 0, the resolution of the current render target is used. null

property type

type: MASK_TYPES;

Mask type

method copyCountersOrReset

copyCountersOrReset: (maskAbove?: MaskData) => void;

Copies counters from maskData above, called from pushMask().
Parameter maskAbove

method reset

reset: () => void;

Resets the mask data after popMask().

class MaskSystem

class MaskSystem implements ISystem {}

System plugin to the renderer to manage masks.
There are three built-in types of masking: **Scissor Masking**: Scissor masking discards pixels that are outside of a rectangle called the scissor box. It is the most performant as the scissor test is inexpensive. However, it can only be used when the mask is rectangular. **Stencil Masking**: Stencil masking discards pixels that don't overlap with the pixels rendered into the stencil buffer. It is the next fastest option as it does not require rendering into a separate framebuffer. However, it does cause the mask to be rendered **twice** for each masking operation; hence, minimize the rendering cost of your masks. **Sprite Mask Filtering**: Sprite mask filtering discards pixels based on the red channel of the sprite-mask's texture. (Generally, the masking texture is grayscale). Using advanced techniques, you might be able to embed this type of masking in a custom shader - and hence, bypassing the masking system fully for performance wins.
The best type of masking is auto-detected when you push one. To use scissor masking, you must pass in a Graphics object with just a rectangle drawn.
## Mask Stacks
In the scene graph, masks can be applied recursively, i.e. a mask can be applied during a masking operation. The mask stack stores the currently applied masks in order. Each PIXI.BaseRenderTexture holds its own mask stack, i.e. when you switch render-textures, the old masks only applied when you switch back to rendering to the old render-target. PIXI

constructor

constructor(renderer: Renderer);

Parameter renderer
The renderer this System works for.

property alphaMaskIndex

protected alphaMaskIndex: number;

Current index of alpha mask pool. 0
Modifiers
- @readonly

property alphaMaskPool

protected readonly alphaMaskPool: SpriteMaskFilter[][];

Pool of used sprite mask filters.

property enableScissor

enableScissor: boolean;

Flag to enable scissor masking. true

property extension

static extension: ExtensionMetadata;

method destroy

destroy: () => void;

method detect

detect: (maskData: MaskData) => void;

Sets type of MaskData based on its maskObject.
Parameter maskData

method pop

pop: (target: IMaskTarget) => void;

Removes the last mask from the mask stack and doesn't return it.
NOTE: The batch renderer should be flushed beforehand to render the masked contents before the mask is removed.
Parameter target
Display Object to pop the mask from

method popColorMask

popColorMask: (maskData: MaskData) => void;

Pops the color mask.
Parameter maskData
The mask data

method popSpriteMask

popSpriteMask: (maskData: MaskData) => void;

Removes the last filter from the filter stack and doesn't return it.
Parameter maskData
Sprite to be used as the mask.

method push

push: (target: IMaskTarget, maskDataOrTarget: MaskData | IMaskTarget) => void;

Enables the mask and appends it to the current mask stack.
NOTE: The batch renderer should be flushed beforehand to prevent pending renders from being masked.
Parameter target
Display Object to push the mask to
Parameter maskDataOrTarget
The masking data.

method pushColorMask

pushColorMask: (maskData: MaskData) => void;

Pushes the color mask.
Parameter maskData
The mask data

method pushSpriteMask

pushSpriteMask: (maskData: MaskData) => void;

Applies the Mask and adds it to the current filter stack.
Parameter maskData
Sprite to be used as the mask.

method setMaskStack

setMaskStack: (maskStack: Array<MaskData>) => void;

Changes the mask stack that is used by this System.
Parameter maskStack
The mask stack

class MultisampleSystem

class MultisampleSystem implements ISystem {}

System that manages the multisample property on the WebGL renderer PIXI

constructor

constructor(renderer: Renderer);

property extension

static extension: ExtensionMetadata;

property multisample

multisample: MSAA_QUALITY;

The number of msaa samples of the canvas.
Modifiers
- @readonly

method contextChange

protected contextChange: (gl: IRenderingContext) => void;

method destroy

destroy: () => void;

class ObjectRenderer

class ObjectRenderer implements ISystem {}

Base for a common object renderer that can be used as a system renderer plugin. PIXI

constructor

constructor(renderer: Renderer);

Parameter renderer
The renderer this manager works for.

property renderer

protected renderer: Renderer;

The renderer this manager works for.

method destroy

destroy: () => void;

Generic destruction method that frees all resources. This should be called by subclasses.

method flush

flush: () => void;

Stub method that should be used to empty the current batch by rendering objects now.

method render

render: (_object: any) => void;

Keeps the object to render. It doesn't have to be rendered immediately.
Parameter _object
The object to render.

method start

start: () => void;

Stub method that initializes any state required before rendering starts. It is different from the prerender signal, which occurs every frame, in that it is called whenever an object requests _this_ renderer specifically.

method stop

stop: () => void;

Stops the renderer. It should free up any state and become dormant.

class ObjectRendererSystem

class ObjectRendererSystem implements ISystem {}

system that provides a render function that focussing on rendering Pixi Scene Graph objects to either the main view or to a renderTexture. Used for Canvas WebGL contexts PIXI

constructor

constructor(renderer: Renderer);

property extension

static extension: ExtensionMetadata;

property lastObjectRendered

lastObjectRendered: IRenderableObject;

the last object rendered by the renderer. Useful for other plugins like interaction managers
Modifiers
- @readonly

property renderer

renderer: Renderer;

property renderingToScreen

renderingToScreen: boolean;

Flag if we are rendering to the screen vs renderTexture
true
Modifiers
- @readonly

method destroy

destroy: () => void;

method render

render: (
    displayObject: IRenderableObject,
    options?: IRendererRenderOptions
) => void;

Renders the object to its WebGL view.
Parameter displayObject
The object to be rendered.
Parameter options
the options to be passed to the renderer

class PluginSystem

class PluginSystem implements ISystem {}

Manages the functionality that allows users to extend pixi functionality via additional plugins. PIXI

constructor

constructor(renderer: IRenderer<ICanvas>);

property extension

static extension: ExtensionMetadata;

property plugins

readonly plugins: IRendererPlugins;

Collection of plugins.
{object}
Modifiers
- @readonly

property rendererPlugins

rendererPlugins: IRendererPlugins;

method destroy

destroy: () => void;

method init

init: () => void;

Initialize the plugins.

class Program

class Program {}

Helper class to create a shader program. PIXI

constructor

constructor(
    vertexSrc?: string,
    fragmentSrc?: string,
    name?: string,
    extra?: IProgramExtraData
);

Parameter vertexSrc
The source of the vertex shader.
Parameter fragmentSrc
The source of the fragment shader.
Parameter name
Name for shader
Parameter extra
Extra data for shader

property attributeData

attributeData: { [key: string]: IAttributeData };

Assigned when a program is first bound to the shader system.

property defaultFragmentPrecision

static defaultFragmentPrecision: PRECISION;

Default specify float precision in fragment shader. iOS is best set at highp due to https://github.com/pixijs/pixijs/issues/3742 {PIXI.PRECISION} PIXI.PRECISION.MEDIUM

property defaultFragmentSrc

static readonly defaultFragmentSrc: string;

The default fragment shader source.
Modifiers
- @readonly

property defaultVertexPrecision

static defaultVertexPrecision: PRECISION;

Default specify float precision in vertex shader. {PIXI.PRECISION} PIXI.PRECISION.HIGH

property defaultVertexSrc

static readonly defaultVertexSrc: string;

The default vertex shader source.
Modifiers
- @readonly

property extra

extra: IProgramExtraData;

property fragmentSrc

fragmentSrc: string;

Source code for the fragment shader.

property glPrograms

glPrograms: { [key: number]: GLProgram };

property id

id: number;

property nameCache

nameCache: any;

property syncUniforms

syncUniforms: any;

property uniformData

uniformData: { [key: string]: IUniformData };

Assigned when a program is first bound to the shader system.

property vertexSrc

vertexSrc: string;

Source code for the vertex shader.

method from

static from: (
    vertexSrc?: string,
    fragmentSrc?: string,
    name?: string
) => Program;

A short hand function to create a program based of a vertex and fragment shader.
This method will also check to see if there is a cached program.
Parameter vertexSrc
The source of the vertex shader.
Parameter fragmentSrc
The source of the fragment shader.
Parameter name
Name for shader
Returns
A shiny new PixiJS shader program!

class ProjectionSystem

class ProjectionSystem implements ISystem {}

System plugin to the renderer to manage the projection matrix.
The projectionMatrix is a global uniform provided to all shaders. It is used to transform points in world space to normalized device coordinates. PIXI

constructor

constructor(renderer: Renderer);

Parameter renderer
The renderer this System works for.

property defaultFrame

defaultFrame: Rectangle;

Default destination frame
This is not used internally. It is not advised to use this feature specifically unless you know what you're doing. The update method will default to this frame if you do not pass the destination frame.
Modifiers
- @readonly

property destinationFrame

destinationFrame: Rectangle;

The destination frame used to calculate the current projection matrix.
The destination frame is the rectangle in the render-target into which contents are rendered. If rendering to the screen, the origin is on the top-left. If rendering to a framebuffer, the origin is on the bottom-left. This "flipping" phenomenon is because of WebGL convention for (shader) texture coordinates, where the bottom-left corner is (0,0). It allows display-objects to map their (0,0) position in local-space (top-left) to (0,0) in texture space (bottom-left). In other words, a sprite's top-left corner actually renders the texture's bottom-left corner. You will also notice this when using a tool like SpectorJS to view your textures at runtime.
The destination frame's dimensions (width,height) should be equal to the source frame. This is because, otherwise, the contents will be scaled to fill the destination frame. Similarly, the destination frame's (x,y) coordinates are (0,0) unless you know what you're doing.
Modifiers
- @readonly

property extension

static extension: ExtensionMetadata;

property projectionMatrix

projectionMatrix: Matrix;

Projection matrix
This matrix can be used to transform points from world space to normalized device coordinates, and is calculated from the sourceFrame → destinationFrame mapping provided.
The renderer's globalUniforms keeps a reference to this, and so it is available for all shaders to use as a uniform.
Modifiers
- @readonly

property sourceFrame

sourceFrame: Rectangle;

The source frame used to calculate the current projection matrix.
The source frame is the rectangle in world space containing the contents to be rendered.
Modifiers
- @readonly

property transform

transform: Matrix;

A transform to be appended to the projection matrix.
This can be used to transform points in world-space one last time before they are outputted by the shader. You can use to rotate the whole scene, for example. Remember to clear it once you've rendered everything. {PIXI.Matrix}

method calculateProjection

calculateProjection: (
    _destinationFrame: Rectangle,
    sourceFrame: Rectangle,
    _resolution: number,
    root: boolean
) => void;

Calculates the projectionMatrix to map points inside sourceFrame to inside destinationFrame.
Parameter _destinationFrame
The destination frame in the render-target.
Parameter sourceFrame
The source frame in world space.
Parameter _resolution
The render-target's resolution, i.e. ratio of CSS to physical pixels.
Parameter root
Whether rendering into the screen. Otherwise, if rendering to a framebuffer, the projection is y-flipped.

method destroy

destroy: () => void;

method setTransform

setTransform: (_matrix: Matrix) => void;

Sets the transform of the active render target to the given matrix.
Parameter _matrix
The transformation matrix

method update

update: (
    destinationFrame: Rectangle,
    sourceFrame: Rectangle,
    resolution: number,
    root: boolean
) => void;

Updates the projection-matrix based on the sourceFrame → destinationFrame mapping provided.
NOTE: It is expected you call renderer.framebuffer.setViewport(destinationFrame) after this. This is because the framebuffer viewport converts shader vertex output in normalized device coordinates to window coordinates.
NOTE-2: PIXI.RenderTextureSystem#bind updates the projection-matrix when you bind a render-texture. It is expected that you dirty the current bindings when calling this manually.
Parameter destinationFrame
The rectangle in the render-target to render the contents into. If rendering to the canvas, the origin is on the top-left; if rendering to a render-texture, the origin is on the bottom-left.
Parameter sourceFrame
The rectangle in world space that contains the contents being rendered.
Parameter resolution
The resolution of the render-target, which is the ratio of world-space (or CSS) pixels to physical pixels.
Parameter root
Whether the render-target is the screen. This is required because rendering to textures is y-flipped (i.e. upside down relative to the screen).

class Quad

class Quad extends Geometry {}

Helper class to create a quad PIXI

constructor

constructor();

class QuadUv

class QuadUv extends Geometry {}

Helper class to create a quad with uvs like in v4 PIXI

constructor

constructor();

property uvBuffer

uvBuffer: Buffer;

property uvs

uvs: Float32Array;

The Uvs of the quad.

property vertexBuffer

vertexBuffer: Buffer;

property vertices

vertices: Float32Array;

An array of vertices.

method invalidate

invalidate: () => this;

Legacy upload method, just marks buffers dirty.
Returns
- Returns itself.

method map

map: (targetTextureFrame: Rectangle, destinationFrame: Rectangle) => this;

Maps two Rectangle to the quad.
Parameter targetTextureFrame
The first rectangle
Parameter destinationFrame
The second rectangle
Returns
- Returns itself.

class Renderer

class Renderer extends SystemManager<Renderer> implements IRenderer {}

The Renderer draws the scene and all its content onto a WebGL enabled canvas.
This renderer should be used for browsers that support WebGL.
This renderer works by automatically managing WebGLBatches, so no need for Sprite Batches or Sprite Clouds. Don't forget to add the view to your DOM or you will not see anything!
Renderer is composed of systems that manage specific tasks. The following systems are added by default whenever you create a renderer:
| System | Description | | ------------------------------------ | ----------------------------------------------------------------------------- |
| Generic Systems | Systems that manage functionality that all renderer types share | | ------------------------------------ | ----------------------------------------------------------------------------- | | PIXI.ViewSystem | This manages the main view of the renderer usually a Canvas | | PIXI.PluginSystem | This manages plugins for the renderer | | PIXI.BackgroundSystem | This manages the main views background color and alpha | | PIXI.StartupSystem | Boots up a renderer and initiatives all the systems | | PIXI.EventSystem | This manages UI events. |
| WebGL Core Systems | Provide an optimised, easy to use API to work with WebGL | | ------------------------------------ | ----------------------------------------------------------------------------- | | PIXI.ContextSystem | This manages the WebGL context and extensions. | | PIXI.FramebufferSystem | This manages framebuffers, which are used for offscreen rendering. | | PIXI.GeometrySystem | This manages geometries & buffers, which are used to draw object meshes. | | PIXI.ShaderSystem | This manages shaders, programs that run on the GPU to calculate 'em pixels. | | PIXI.StateSystem | This manages the WebGL state variables like blend mode, depth testing, etc. | | PIXI.TextureSystem | This manages textures and their resources on the GPU. | | PIXI.TextureGCSystem | This will automatically remove textures from the GPU if they are not used. | | PIXI.MultisampleSystem | This manages the multisample const on the WEbGL Renderer |
| PixiJS High-Level Systems | Set of specific systems designed to work with PixiJS objects | | ------------------------------------ | ----------------------------------------------------------------------------- | | PIXI.GenerateTextureSystem | This adds the ability to generate textures from any PIXI.DisplayObject | | PIXI.ProjectionSystem | This manages the projectionMatrix, used by shaders to get NDC coordinates. | | PIXI.RenderTextureSystem | This manages render-textures, which are an abstraction over framebuffers. | | PIXI.MaskSystem | This manages masking operations. | | PIXI.ScissorSystem | This handles scissor masking, and is used internally by PIXI.MaskSystem | | PIXI.StencilSystem | This handles stencil masking, and is used internally by PIXI.MaskSystem | | PIXI.FilterSystem | This manages the filtering pipeline for post-processing effects. | | PIXI.BatchSystem | This manages object renderers that defer rendering until a flush. | | PIXI.Prepare | This manages uploading assets to the GPU. | | PIXI.Extract | This extracts image data from display objects. |
The breadth of the API surface provided by the renderer is contained within these systems. PIXI

constructor

constructor(options?: Partial<IRendererOptions>);

Parameter options
See PIXI.settings.RENDER_OPTIONS for defaults.

property autoDensity

readonly autoDensity: boolean;

Whether CSS dimensions of canvas view should be resized to screen dimensions automatically.

property background

readonly background: BackgroundSystem;

background system instance
Modifiers
- @readonly

property backgroundAlpha

backgroundAlpha: number;

The background color alpha. Setting this to 0 will make the canvas transparent. {number}
Deprecated
since 7.0.0

property backgroundColor

backgroundColor: ColorSource;

The background color to fill if not transparent {number}
Deprecated
since 7.0.0

property batch

readonly batch: BatchSystem;

Batch system instance
Modifiers
- @readonly

property buffer

readonly buffer: BufferSystem;

Buffer system instance
Modifiers
- @readonly

property clearBeforeRender

readonly clearBeforeRender: boolean;

This sets weather the screen is totally cleared between each frame withthe background color and alpha
Deprecated
since 7.0.0

property context

readonly context: ContextSystem;

Context system instance
Modifiers
- @readonly

property CONTEXT_UID

CONTEXT_UID: number;

Unique UID assigned to the renderer's WebGL context.

property extension

static extension: ExtensionMetadata;

property filter

readonly filter: FilterSystem;

Filter system instance
Modifiers
- @readonly

property framebuffer

readonly framebuffer: FramebufferSystem;

Framebuffer system instance
Modifiers
- @readonly

property geometry

readonly geometry: GeometrySystem;

Geometry system instance
Modifiers
- @readonly

property gl

gl: IRenderingContext;

WebGL context, set by .
{WebGLRenderingContext}
Modifiers
- @readonly

property globalUniforms

globalUniforms: UniformGroup<Dict<any>>;

Global uniforms Add any uniforms you want shared across your shaders. the must be added before the scene is rendered for the first time as we dynamically buildcode to handle all global var per shader

property height

readonly height: number;

Same as view.height, actual number of pixels in the canvas by vertical. 600

property lastObjectRendered

readonly lastObjectRendered: IRenderableObject;

the last object rendered by the renderer. Useful for other plugins like interaction managers

property mask

readonly mask: MaskSystem;

Mask system instance
Modifiers
- @readonly

property multisample

readonly multisample: MSAA_QUALITY;

The number of msaa samples of the canvas.

property objectRenderer

readonly objectRenderer: ObjectRendererSystem;

_render system instance
Modifiers
- @readonly

property options

readonly options: IRendererOptions;

Options passed to the constructor. {PIXI.IRendererOptions}

property plugins

readonly plugins: IRendererPlugins;

Collection of plugins

property powerPreference

readonly powerPreference: WebGLPowerPreference;

Deprecated
since 7.0.0

property preserveDrawingBuffer

readonly preserveDrawingBuffer: boolean;

readonly drawing buffer preservation we can only know this if Pixi created the context
Deprecated
since 7.0.0

property projection

readonly projection: ProjectionSystem;

Projection system instance
Modifiers
- @readonly

property rendererLogId

readonly rendererLogId: string;

When logging Pixi to the console, this is the name we will show

property renderingToScreen

readonly renderingToScreen: boolean;

Flag if we are rendering to the screen vs renderTexture

property renderTexture

readonly renderTexture: RenderTextureSystem;

RenderTexture system instance
Modifiers
- @readonly

property resolution

resolution: number;

The resolution / device pixel ratio of the renderer.

property scissor

readonly scissor: ScissorSystem;

Scissor system instance
Modifiers
- @readonly

property screen

readonly screen: Rectangle;

Measurements of the screen. (0, 0, screenWidth, screenHeight).
Its safe to use as filterArea or hitArea for the whole stage. {PIXI.Rectangle}

property shader

readonly shader: ShaderSystem;

Shader system instance
Modifiers
- @readonly

property startup

readonly startup: StartupSystem;

startup system instance
Modifiers
- @readonly

property state

readonly state: StateSystem;

State system instance
Modifiers
- @readonly

property stencil

readonly stencil: StencilSystem;

Stencil system instance
Modifiers
- @readonly

property texture

readonly texture: TextureSystem;

Texture system instance
Modifiers
- @readonly

property textureGC

readonly textureGC: TextureGCSystem;

Texture garbage collector system instance
Modifiers
- @readonly

property textureGenerator

readonly textureGenerator: GenerateTextureSystem;

textureGenerator system instance
Modifiers
- @readonly

property transformFeedback

transformFeedback: TransformFeedbackSystem;

TransformFeedback system instance
Modifiers
- @readonly

property type

readonly type: any;

The type of the renderer. will be PIXI.RENDERER_TYPE.CANVAS {number}
See Also
- PIXI.RENDERER_TYPE

property useContextAlpha

readonly useContextAlpha: boolean | 'notMultiplied';

Pass-thru setting for the canvas' context alpha property. This is typically not something you need to fiddle with. If you want transparency, use backgroundAlpha.
Deprecated
since 7.0.0 {boolean}

property view

readonly view: ICanvas;

The canvas element that everything is drawn to.

property width

readonly width: number;

Same as view.width, actual number of pixels in the canvas by horizontal. {number}
800
Modifiers
- @readonly

method clear

clear: () => void;

Clear the frame buffer.

method destroy

destroy: (removeView?: boolean) => void;

Removes everything from the renderer (event listeners, spritebatch, etc...)
Parameter removeView
Removes the Canvas element from the DOM. See: https://github.com/pixijs/pixijs/issues/2233

method generateTexture

generateTexture: (
    displayObject: IRenderableObject,
    options?: IGenerateTextureOptions
) => RenderTexture;

Useful function that returns a texture of the display object that can then be used to create sprites This can be quite useful if your displayObject is complicated and needs to be reused multiple times.
Parameter displayObject
The displayObject the object will be generated from.
Parameter options
Generate texture options.
Parameter
{PIXI.Rectangle} options.region - The region of the displayObject, that shall be rendered, if no region is specified, defaults to the local bounds of the displayObject.
Parameter
{number} [options.resolution] - If not given, the renderer's resolution is used.
Parameter
{PIXI.MSAA_QUALITY} [options.multisample] - If not given, the renderer's multisample is used.
Returns
A texture of the graphics object.

method render

render: (
    displayObject: IRenderableObject,
    options?: IRendererRenderOptions
) => void;

Renders the object to its WebGL view.
Parameter displayObject
The object to be rendered.
Parameter options
Object to use for render options.
Parameter
{PIXI.RenderTexture} [options.renderTexture] - The render texture to render to.
Parameter
{boolean} [options.clear=true] - Should the canvas be cleared before the new render.
Parameter
{PIXI.Matrix} [options.transform] - A transform to apply to the render texture before rendering.
Parameter
{boolean} [options.skipUpdateTransform=false] - Should we skip the update transform pass?

method reset

reset: () => this;

Resets the WebGL state so you can render things however you fancy!
Returns
Returns itself.

method resize

resize: (desiredScreenWidth: number, desiredScreenHeight: number) => void;

Resizes the WebGL view to the specified width and height.
Parameter desiredScreenWidth
The desired width of the screen.
Parameter desiredScreenHeight
The desired height of the screen.

method test

static test: (options?: Partial<IRendererOptions>) => boolean;

Create renderer if WebGL is available. Overrideable by the **@pixi/canvas-renderer** package to allow fallback. throws error if WebGL is not available.
Parameter options

class RenderTexture

class RenderTexture extends Texture {}

A RenderTexture is a special texture that allows any PixiJS display object to be rendered to it.
__Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded otherwise black rectangles will be drawn instead.
__Hint-2__: The actual memory allocation will happen on first render. You shouldn't create renderTextures each frame just to delete them after, try to reuse them.
A RenderTexture takes a snapshot of any Display Object given to its render method. For example:
Example 1
import { autoDetectRenderer, RenderTexture, Sprite } from 'pixi.js';
const renderer = autoDetectRenderer(); const renderTexture = RenderTexture.create({ width: 800, height: 600 }); const sprite = Sprite.from('spinObj_01.png');
sprite.position.x = 800 / 2; sprite.position.y = 600 / 2; sprite.anchor.x = 0.5; sprite.anchor.y = 0.5;
renderer.render(sprite, { renderTexture });
// Note that you should not create a new renderer, but reuse the same one as the rest of the application. // The Sprite in this case will be rendered using its local transform. To render this sprite at 0,0 // you can clear the transform
sprite.setTransform();
const renderTexture = new RenderTexture.create({ width: 100, height: 100 });
renderer.render(sprite, { renderTexture }); // Renders to center of RenderTexture PIXI

constructor

constructor(baseRenderTexture: BaseRenderTexture, frame?: Rectangle);

Parameter baseRenderTexture
The base texture object that this texture uses.
Parameter frame
The rectangle frame of the texture to show.

property baseTexture

baseTexture: BaseRenderTexture;

property filterFrame

filterFrame: any;

Stores sourceFrame when this texture is inside current filter stack.
You can read it inside filters.
Modifiers
- @readonly

property filterPoolKey

filterPoolKey: string | number;

The key for pooled texture of FilterSystem.
See Also
- PIXI.RenderTexturePool

property framebuffer

readonly framebuffer: Framebuffer;

Shortcut to this.baseTexture.framebuffer, saves baseTexture cast.
Modifiers
- @readonly

property multisample

multisample: MSAA_QUALITY;

Shortcut to this.framebuffer.multisample. PIXI.MSAA_QUALITY.NONE

method create

static create: (options?: IBaseTextureOptions) => RenderTexture;

A short hand way of creating a render texture.
Parameter options
Options
Parameter
{number} [options.width=100] - The width of the render texture
Parameter
{number} [options.height=100] - The height of the render texture
Parameter
{PIXI.SCALE_MODES} [options.scaleMode=PIXI.BaseTexture.defaultOptions.scaleMode] - See PIXI.SCALE_MODES for possible values
Parameter
{number} [options.resolution=PIXI.settings.RESOLUTION] - The resolution / device pixel ratio of the texture being generated
Parameter
{PIXI.MSAA_QUALITY} [options.multisample=PIXI.MSAA_QUALITY.NONE] - The number of samples of the frame buffer
Returns
The new render texture

method resize

resize: (
    desiredWidth: number,
    desiredHeight: number,
    resizeBaseTexture?: boolean
) => void;

Resizes the RenderTexture.
Parameter desiredWidth
The desired width to resize to.
Parameter desiredHeight
The desired height to resize to.
Parameter resizeBaseTexture
Should the baseTexture.width and height values be resized as well?

method setResolution

setResolution: (resolution: number) => void;

Changes the resolution of baseTexture, but does not change framebuffer size.
Parameter resolution
The new resolution to apply to RenderTexture

class RenderTexturePool

class RenderTexturePool {}

Texture pool, used by FilterSystem and plugins.
Stores collection of temporary pow2 or screen-sized renderTextures
If you use custom RenderTexturePool for your filters, you can use methods getFilterTexture and returnFilterTexture same as in PIXI

constructor

constructor(textureOptions?: IBaseTextureOptions<any>);

Parameter textureOptions
options that will be passed to BaseRenderTexture constructor
Parameter
{PIXI.SCALE_MODES} [textureOptions.scaleMode] - See PIXI.SCALE_MODES for possible values.

property enableFullScreen

enableFullScreen: boolean;

Allow renderTextures of the same size as screen, not just pow2
Automatically sets to true after setScreenSize false

property SCREEN_KEY

static SCREEN_KEY: number;

Key that is used to store fullscreen renderTextures in a pool
Modifiers
- @readonly

property textureOptions

textureOptions: IBaseTextureOptions<any>;

property texturePool

texturePool: { [x: string]: RenderTexture[]; [x: number]: RenderTexture[] };

method clear

clear: (destroyTextures?: boolean) => void;

Clears the pool.
Parameter destroyTextures
Destroy all stored textures.

method createTexture

createTexture: (
    realWidth: number,
    realHeight: number,
    multisample?: MSAA_QUALITY
) => RenderTexture;

Creates texture with params that were specified in pool constructor.
Parameter realWidth
Width of texture in pixels.
Parameter realHeight
Height of texture in pixels.
Parameter multisample
Number of samples of the framebuffer.

method getFilterTexture

getFilterTexture: (
    input: RenderTexture,
    resolution?: number,
    multisample?: MSAA_QUALITY
) => RenderTexture;

Gets extra texture of the same size as input renderTexture
getFilterTexture(input, 0.5) or getFilterTexture(0.5, input)
Parameter input
renderTexture from which size and resolution will be copied
Parameter resolution
override resolution of the renderTexture It overrides, it does not multiply
Parameter multisample
number of samples of the renderTexture

method getOptimalTexture

getOptimalTexture: (
    minWidth: number,
    minHeight: number,
    resolution?: number,
    multisample?: MSAA_QUALITY
) => RenderTexture;

Gets a Power-of-Two render texture or fullScreen texture
Parameter minWidth
The minimum width of the render texture.
Parameter minHeight
The minimum height of the render texture.
Parameter resolution
The resolution of the render texture.
Parameter multisample
Number of samples of the render texture.
Returns
The new render texture.

method returnFilterTexture

returnFilterTexture: (renderTexture: RenderTexture) => void;

Alias for returnTexture, to be compliant with FilterSystem interface.
Parameter renderTexture
The renderTexture to free

method returnTexture

returnTexture: (renderTexture: RenderTexture) => void;

Place a render texture back into the pool.
Parameter renderTexture
The renderTexture to free

method setScreenSize

setScreenSize: (size: ISize) => void;

If screen size was changed, drops all screen-sized textures, sets new screen size, sets enableFullScreen to true
Size is measured in pixels, renderer.view can be passed here, not renderer.screen
Parameter size
Initial size of screen.

class RenderTextureSystem

class RenderTextureSystem implements ISystem {}

System plugin to the renderer to manage render textures.
Should be added after FramebufferSystem
### Frames
The RenderTextureSystem holds a sourceFrame → destinationFrame projection. The following table explains the different coordinate spaces used:
| Frame | Description | Coordinate System | | ---------------------- | ---------------------------------------------------------------- | ------------------------------------------------------- | | sourceFrame | The rectangle inside of which display-objects are being rendered | **World Space**: The origin on the top-left | | destinationFrame | The rectangle in the render-target (canvas or texture) into which contents should be rendered | If rendering to the canvas, this is in screen space and the origin is on the top-left. If rendering to a render-texture, this is in its base-texture's space with the origin on the bottom-left. | | viewportFrame | The framebuffer viewport corresponding to the destination-frame | **Window Coordinates**: The origin is always on the bottom-left. | PIXI

constructor

constructor(renderer: Renderer);

Parameter renderer
The renderer this System works for.

property current

current: RenderTexture;

Render texture currently bound. if rendering to the canvas.
Modifiers
- @readonly

property defaultMaskStack

defaultMaskStack: MaskData[];

List of masks for the PIXI.StencilSystem.
Modifiers
- @readonly

property destinationFrame

readonly destinationFrame: Rectangle;

The destination frame for the render-target's projection mapping.
See PIXI.ProjectionSystem#destinationFrame for more details.

property extension

static extension: ExtensionMetadata;

property sourceFrame

readonly sourceFrame: Rectangle;

The source frame for the render-target's projection mapping.
See PIXI.ProjectionSystem#sourceFrame for more details

property viewportFrame

readonly viewportFrame: Rectangle;

The viewport frame for the render-target's viewport binding. This is equal to the destination-frame for render-textures, while it is y-flipped when rendering to the screen (i.e. its origin is always on the bottom-left).

method bind

bind: (
    renderTexture?: RenderTexture,
    sourceFrame?: Rectangle,
    destinationFrame?: Rectangle
) => void;

Bind the current render texture.
Parameter renderTexture
RenderTexture to bind, by default its null - the screen.
Parameter sourceFrame
Part of world that is mapped to the renderTexture.
Parameter destinationFrame
Part of renderTexture, by default it has the same size as sourceFrame.

method clear

clear: (clearColor?: ColorSource, mask?: BUFFER_BITS) => void;

Erases the render texture and fills the drawing area with a colour.
Parameter clearColor
The color as rgba, default to use the renderer backgroundColor
Parameter mask
Bitwise OR of masks that indicate the buffers to be cleared, by default COLOR and DEPTH buffers.

method contextChange

protected contextChange: () => void;

method destroy

destroy: () => void;

method reset

reset: () => void;

Resets render-texture state.

method resize

resize: () => void;

class Resource

abstract class Resource {}

Base resource class for textures that manages validation and uploading, depending on its type.
Uploading of a base texture to the GPU is required. PIXI

constructor

constructor(width?: number, height?: number);

Parameter width
Width of the resource
Parameter height
Height of the resource

property destroyed

destroyed: boolean;

If resource has been destroyed.
false
Modifiers
- @readonly

property height

readonly height: number;

The height of the resource.
Modifiers
- @readonly

property internal

internal: boolean;

true if resource is created by BaseTexture useful for doing cleanup with BaseTexture destroy and not cleaning up resources that were created externally.

property onError

protected onError: Runner;

Handle internal errors, such as loading errors accepts 1 param: error {Runner}

property onResize

protected onResize: Runner;

Mini-runner for handling resize events accepts 2 parameters: width, height {Runner}

property onUpdate

protected onUpdate: Runner;

Mini-runner for handling update events {Runner}

property src

src: string;

The url of the resource

property valid

readonly valid: boolean;

Has been validated
Modifiers
- @readonly

property width

readonly width: number;

The width of the resource.
Modifiers
- @readonly

method bind

bind: (baseTexture: BaseTexture) => void;

Bind to a parent BaseTexture
Parameter baseTexture
Parent texture

method destroy

destroy: () => void;

Call when destroying resource, unbind any BaseTexture object before calling this method, as reference counts are maintained internally.

method dispose

dispose: () => void;

Clean up anything, this happens when destroying is ready.

method load

load: () => Promise<this>;

This can be overridden to start preloading a resource or do any other prepare step.
Returns
Handle the validate event

method resize

resize: (width: number, height: number) => void;

Trigger a resize event
Parameter width
X dimension
Parameter height
Y dimension

method style

style: (
    _renderer: Renderer,
    _baseTexture: BaseTexture,
    _glTexture: GLTexture
) => boolean;

Set the style, optional to override
Parameter _renderer
yeah, renderer!
Parameter _baseTexture
the texture
Parameter _glTexture
texture instance for this webgl context
Returns
- true is success

method test

static test: (_source: unknown, _extension?: string) => boolean;

Abstract, used to auto-detect resource type.
Parameter _source
The source object
Parameter _extension
The extension of source, if set

method unbind

unbind: (baseTexture: BaseTexture) => void;

Unbind to a parent BaseTexture
Parameter baseTexture
Parent texture

method update

update: () => void;

Has been updated trigger event.

method upload

abstract upload: (
    renderer: Renderer,
    baseTexture: BaseTexture,
    glTexture: GLTexture
) => boolean;

Uploads the texture or returns false if it cant for some reason. Override this.
Parameter renderer
yeah, renderer!
Parameter baseTexture
the texture
Parameter glTexture
texture instance for this webgl context
Returns
- true is success

class ScissorSystem

class ScissorSystem extends AbstractMaskSystem {}

System plugin to the renderer to manage scissor masking.
Scissor masking discards pixels outside of a rectangle called the scissor box. The scissor box is in the framebuffer viewport's space; however, the mask's rectangle is projected from world-space to viewport space automatically by this system. PIXI

constructor

constructor(renderer: Renderer);

Parameter renderer
The renderer this System works for.

property extension

static extension: ExtensionMetadata;

method calcScissorRect

calcScissorRect: (maskData: MaskData) => void;

evaluates _boundsTransformed, _scissorRect for MaskData
Parameter maskData

method getStackLength

getStackLength: () => number;

method pop

pop: (maskData?: MaskData) => void;

This should be called after a mask is popped off the mask stack. It will rebind the scissor box to be latest with the last mask in the stack.
This can also be called when you directly modify the scissor box and want to restore PixiJS state.
Parameter maskData
The mask data.

method push

push: (maskData: MaskData) => void;

Applies the Mask and adds it to the current stencil stack. alvin
Parameter maskData
The mask data.

method testScissor

testScissor: (maskData: MaskData) => boolean;

Test, whether the object can be scissor mask with current renderer projection. Calls "calcScissorRect()" if its true.
Parameter maskData
mask data
Returns
whether Whether the object can be scissor mask

class Shader

class Shader {}

A helper class for shaders. PIXI

constructor

constructor(program: Program, uniforms?: Dict<any>);

Parameter program
The program the shader will use.
Parameter uniforms
Custom uniforms to use to augment the built-in ones.

property disposeRunner

disposeRunner: Runner;

property program

program: Program;

Program that the shader uses.

property uniformBindCount

uniformBindCount: number;

Used internally to bind uniform buffer objects.

property uniformGroup

uniformGroup: UniformGroup<Dict<any>>;

property uniforms

readonly uniforms: Dict<any>;

Shader uniform values, shortcut for uniformGroup.uniforms.
Modifiers
- @readonly

method checkUniformExists

checkUniformExists: (name: string, group: UniformGroup) => boolean;

method destroy

destroy: () => void;

method from

static from: (
    vertexSrc?: string,
    fragmentSrc?: string,
    uniforms?: Dict<any>
) => Shader;

A short hand function to create a shader based of a vertex and fragment shader.
Parameter vertexSrc
The source of the vertex shader.
Parameter fragmentSrc
The source of the fragment shader.
Parameter uniforms
Custom uniforms to use to augment the built-in ones.
Returns
A shiny new PixiJS shader!

class ShaderSystem

class ShaderSystem implements ISystem {}

System plugin to the renderer to manage shaders. PIXI

constructor

constructor(renderer: Renderer);

Parameter renderer
The renderer this System works for.

property destroyed

destroyed: boolean;

property extension

static extension: ExtensionMetadata;

property gl

protected gl: IRenderingContext;

The current WebGL rendering context. {WebGLRenderingContext}

property id

id: number;

property program

program: Program;

property shader

shader: Shader;

method bind

bind: (shader: Shader, dontSync?: boolean) => GLProgram;

Changes the current shader to the one given in parameter.
Parameter shader
the new shader
Parameter dontSync
false if the shader should automatically sync its uniforms.
Returns
the glProgram that belongs to the shader.

method contextChange

protected contextChange: (gl: IRenderingContext) => void;

method createSyncBufferGroup

protected createSyncBufferGroup: (
    group: UniformGroup,
    glProgram: GLProgram,
    name: string
) => UniformsSyncCallback;

Will create a function that uploads a uniform buffer using the STD140 standard. The upload function will then be cached for future calls If a group is manually managed, then a simple upload function is generated
Parameter group
the uniform buffer group to sync
Parameter glProgram
the gl program to attach the uniform bindings to
Parameter name
the name of the uniform buffer (must exist on the shader)

method createSyncGroups

createSyncGroups: (group: UniformGroup) => UniformsSyncCallback;

method destroy

destroy: () => void;

Destroys this System and removes all its textures.

method disposeShader

disposeShader: (shader: Shader) => void;

Disposes shader. If disposing one equals with current shader, set current as null.
Parameter shader
Shader object

method generateProgram

generateProgram: (shader: Shader) => GLProgram;

Generates a glProgram version of the Shader provided.
Parameter shader
The shader that the glProgram will be based on.
Returns
A shiny new glProgram!

method getGlProgram

getGlProgram: () => GLProgram;

Returns the underlying GLShade rof the currently bound shader.
This can be handy for when you to have a little more control over the setting of your uniforms.
Returns
The glProgram for the currently bound Shader for this context

method reset

reset: () => void;

Resets ShaderSystem state, does not affect WebGL state.

method setUniforms

setUniforms: (uniforms: Dict<any>) => void;

Uploads the uniforms values to the currently bound shader.
Parameter uniforms
the uniforms values that be applied to the current shader

method syncUniformBufferGroup

syncUniformBufferGroup: (group: UniformGroup, name?: string) => void;

Syncs uniform buffers
Parameter group
the uniform buffer group to sync
Parameter name
the name of the uniform buffer

method syncUniformGroup

syncUniformGroup: (group: UniformGroup, syncData?: any) => void;

Syncs uniforms on the group
Parameter group
the uniform group to sync
Parameter syncData
this is data that is passed to the sync function and any nested sync functions

method syncUniforms

syncUniforms: (group: UniformGroup, glProgram: GLProgram, syncData: any) => void;

Overrideable by the @pixi/unsafe-eval package to use static syncUniforms instead.
Parameter group
Parameter glProgram
Parameter syncData

class SpriteMaskFilter

class SpriteMaskFilter extends Filter {}

This handles a Sprite acting as a mask, as opposed to a Graphic.
WebGL only. PIXI

constructor

constructor(sprite: IMaskTarget);

Parameter sprite
The target sprite.

constructor

constructor(vertexSrc?: string, fragmentSrc?: string, uniforms?: Dict<any>);

Parameter vertexSrc
The source of the vertex shader.
Parameter fragmentSrc
The source of the fragment shader.
Parameter uniforms
Custom uniforms to use to augment the built-in ones.

property maskMatrix

maskMatrix: Matrix;

Mask matrix

property maskSprite

maskSprite: IMaskTarget;

Sprite mask {PIXI.DisplayObject}

method apply

apply: (
    filterManager: FilterSystem,
    input: RenderTexture,
    output: RenderTexture,
    clearMode: CLEAR_MODES
) => void;

Applies the filter
Parameter filterManager
The renderer to retrieve the filter from
Parameter input
The input render target.
Parameter output
The target to output to.
Parameter clearMode
Should the output be cleared before rendering to it.

class StartupSystem

class StartupSystem implements ISystem<StartupSystemOptions> {}

A simple system responsible for initiating the renderer. PIXI

constructor

constructor(renderer: IRenderer<ICanvas>);

property defaultOptions

static defaultOptions: StartupSystemOptions;

property extension

static extension: ExtensionMetadata;

property renderer

readonly renderer: IRenderer<ICanvas>;

method destroy

destroy: () => void;

method run

run: (options: StartupSystemOptions) => void;

It all starts here! This initiates every system, passing in the options for any system by name.
Parameter options
the config for the renderer and all its systems

class State

class State {}

This is a WebGL state, and is is passed to PIXI.StateSystem.
Each mesh rendered may require WebGL to be in a different state. For example you may want different blend mode or to enable polygon offsets PIXI

constructor

constructor();

property blend

blend: boolean;

Activates blending of the computed fragment color values. true

property blendMode

blendMode: BLEND_MODES;

The blend mode to be applied when this state is set. Apply a value of PIXI.BLEND_MODES.NORMAL to reset the blend mode. Setting this mode to anything other than NO_BLEND will automatically switch blending on. PIXI.BLEND_MODES.NORMAL

property clockwiseFrontFace

clockwiseFrontFace: boolean;

Specifies whether or not front or back-facing polygons can be culled. false

property culling

culling: boolean;

Activates culling of polygons. false

property data

data: number;

property depthMask

depthMask: boolean;

Enables or disables writing to the depth buffer. true

property depthTest

depthTest: boolean;

Activates depth comparisons and updates to the depth buffer. false

property offsets

offsets: boolean;

Activates adding an offset to depth values of polygon's fragments false

property polygonOffset

polygonOffset: number;

The polygon offset. Setting this property to anything other than 0 will automatically enable polygon offset fill. 0

method for2d

static for2d: () => State;

class StateSystem

class StateSystem implements ISystem {}

System plugin to the renderer to manage WebGL state machines. PIXI

constructor

constructor();

property blendMode

blendMode: any;

Blend mode PIXI.BLEND_MODES.NONE
Modifiers
- @readonly

property blendModes

protected blendModes: number[][];

property checks

protected readonly checks: ((system: this, state: State) => void)[];

Collection of check calls {Function[]}

property defaultState

protected defaultState: State;

Default WebGL State
Modifiers
- @readonly

property extension

static extension: ExtensionMetadata;

property gl

protected gl: IRenderingContext;

GL context {WebGLRenderingContext}
Modifiers
- @readonly

property map

protected readonly map: ((value: boolean) => void)[];

Collection of calls {Function[]}

property polygonOffset

polygonOffset: number;

Polygon offset
Modifiers
- @readonly

property stateId

stateId: number;

State ID
Modifiers
- @readonly

method contextChange

contextChange: (gl: IRenderingContext) => void;

method destroy

destroy: () => void;

method forceState

forceState: (state: State) => void;

Sets the state, when previous state is unknown.
Parameter state
The state to set

method reset

reset: () => void;

Resets all the logic and disables the VAOs.

method set

set: (state: State) => void;

Sets the current state
Parameter state
The state to set.

method setBlend

setBlend: (value: boolean) => void;

Sets whether to enable or disable blending.
Parameter value
Turn on or off WebGl blending.

method setBlendMode

setBlendMode: (value: number) => void;

Sets the blend mode.
Parameter value
The blend mode to set to.

method setCullFace

setCullFace: (value: boolean) => void;

Sets whether to enable or disable cull face.
Parameter value
Turn on or off webgl cull face.

method setDepthMask

setDepthMask: (value: boolean) => void;

Sets whether to enable or disable depth mask.
Parameter value
Turn on or off webgl depth mask.

method setDepthTest

setDepthTest: (value: boolean) => void;

Sets whether to enable or disable depth test.
Parameter value
Turn on or off webgl depth testing.

method setFrontFace

setFrontFace: (value: boolean) => void;

Sets the gl front face.
Parameter value
true is clockwise and false is counter-clockwise

method setOffset

setOffset: (value: boolean) => void;

Sets whether to enable or disable polygon offset fill.
Parameter value
Turn on or off webgl polygon offset testing.

method setPolygonOffset

setPolygonOffset: (value: number, scale: number) => void;

Sets the polygon offset.
Parameter value
the polygon offset
Parameter scale
the polygon offset scale

method updateCheck

updateCheck: (
    func: (system: this, state: State) => void,
    value: boolean
) => void;

Checks to see which updates should be checked based on which settings have been activated.
For example, if blend is enabled then we should check the blend modes each time the state is changed or if polygon fill is activated then we need to check if the polygon offset changes. The idea is that we only check what we have too.
Parameter func
the checking function to add or remove
Parameter value
should the check function be added or removed.

class StencilSystem

class StencilSystem extends AbstractMaskSystem {}

System plugin to the renderer to manage stencils (used for masks). PIXI

constructor

constructor(renderer: Renderer);

Parameter renderer
The renderer this System works for.

property extension

static extension: ExtensionMetadata;

method getStackLength

getStackLength: () => number;

method pop

pop: (maskObject: IMaskTarget) => void;

Pops stencil mask. MaskData is already removed from stack
Parameter maskObject
object of popped mask data

method push

push: (maskData: MaskData) => void;

Applies the Mask and adds it to the current stencil stack.
Parameter maskData
The mask data

class SVGResource

class SVGResource extends BaseImageResource {}

Resource type for SVG elements and graphics. PIXI

constructor

constructor(sourceBase64: string, options?: ISVGResourceOptions);

Parameter sourceBase64
Base64 encoded SVG element or URL for SVG file.
Parameter options
Options to use
Parameter
{number} [options.scale=1] - Scale to apply to SVG. Overridden by...
Parameter
{number} [options.width] - Rasterize SVG this wide. Aspect ratio preserved if height not specified.
Parameter
{number} [options.height] - Rasterize SVG this high. Aspect ratio preserved if width not specified.
Parameter
{boolean} [options.autoLoad=true] - Start loading right away.

property scale

readonly scale: number;

The source scale to apply when rasterizing on load.

property svg

readonly svg: string;

Base64 encoded SVG element or URL for SVG file.

property SVG_SIZE

static SVG_SIZE: RegExp;

Regular expression for SVG size.
Example 1
<svg width="100" height="100"></svg>
Modifiers
- @readonly

property SVG_XML

static SVG_XML: RegExp;

Regular expression for SVG XML document.
Example 1
<?xml version="1.0" encoding="utf-8" ?><svg
Modifiers
- @readonly

method dispose

dispose: () => void;

Destroys this texture.

method getSize

static getSize: (svgString?: string) => ISize;

Get size from an svg string using a regular expression.
Parameter svgString
a serialized svg element
Returns
- image extension

method load

load: () => Promise<this>;

method test

static test: (source: unknown, extension?: string) => boolean;

Used to auto-detect the type of resource.
Parameter source
The source object
Parameter extension
The extension of source, if set
Returns
{boolean} - If the source is a SVG source or data file

class SystemManager

class SystemManager<R = IRenderer> extends EventEmitter {}

The SystemManager is a class that provides functions for managing a set of systems This is a base class, that is generic (no render code or knowledge at all) PIXI

property runners

readonly runners: { [key: string]: Runner };

a collection of runners defined by the user

method addRunners

addRunners: (...runnerIds: string[]) => void;

Create a bunch of runners based of a collection of ids
Parameter runnerIds
the runner ids to add

method addSystem

addSystem: (ClassRef: ISystemConstructor<R>, name: string) => this;

Add a new system to the renderer.
Parameter ClassRef
Class reference
Parameter name
Property name for system, if not specified will use a static name property on the class itself. This name will be assigned as s property on the Renderer so make sure it doesn't collide with properties on Renderer.
Returns
Return instance of renderer

method destroy

destroy: () => void;

destroy the all runners and systems. Its apps job to

method emitWithCustomOptions

emitWithCustomOptions: (
    runner: Runner,
    options: Record<string, unknown>
) => void;

A function that will run a runner and call the runners function but pass in different options to each system based on there name.
E.g. If you have two systems added called systemA and systemB you could call do the following:
system.emitWithCustomOptions(init, { systemA: {...optionsForA}, systemB: {...optionsForB}, });
init would be called on system A passing optionsForA and on system B passing optionsForB.
Parameter runner
the runner to target
Parameter options
key value options for each system

method setup

setup: (config: ISystemConfig<R>) => void;

Set up a system with a collection of SystemClasses and runners. Systems are attached dynamically to this class when added.
Parameter config
the config for the system manager

class Texture

class Texture<R extends Resource = Resource> extends EventEmitter {}

A texture stores the information that represents an image or part of an image.
It cannot be added to the display list directly; instead use it as the texture for a Sprite. If no frame is provided for a texture, then the whole image is used.
You can directly create a texture from an image and then reuse it multiple times like this :
import { Sprite, Texture } from 'pixi.js'; const texture = Texture.from('assets/image.png'); const sprite1 = new Sprite(texture); const sprite2 = new Sprite(texture);
If you didnt pass the texture frame to constructor, it enables noFrame mode: it subscribes on baseTexture events, it automatically resizes at the same time as baseTexture.
Textures made from SVGs, loaded or not, cannot be used before the file finishes processing. You can check for this by checking the sprite's _textureID property.
import { Sprite, Texture } from 'pixi.js'; const texture = Texture.from('assets/image.svg'); const sprite1 = new Sprite(texture); // sprite1._textureID should not be undefined if the texture has finished processing the SVG file
You can use a ticker or rAF to ensure your sprites load the finished textures after processing. See issue [#3085]https://github.com/pixijs/pixijs/issues/3085. PIXI

constructor

constructor(
    baseTexture: BaseTexture<R, any>,
    frame?: Rectangle,
    orig?: Rectangle,
    trim?: Rectangle,
    rotate?: number,
    anchor?: IPointData,
    borders?: ITextureBorders
);

Parameter baseTexture
The base texture source to create the texture from
Parameter frame
The rectangle frame of the texture to show
Parameter orig
The area of original texture
Parameter trim
Trimmed rectangle of original texture
Parameter rotate
indicates how the texture was rotated by texture packer. See PIXI.groupD8
Parameter anchor
Default anchor point used for sprite placement / rotation
Parameter borders
Default borders used for 9-slice scaling. See PIXI.NineSlicePlane

property baseTexture

baseTexture: BaseTexture<R, any>;

The base texture that this texture uses.

property defaultAnchor

defaultAnchor: Point;

Anchor point that is used as default if sprite is created with this texture. Changing the defaultAnchor at a later point of time will not update Sprite's anchor point. {0,0}

property defaultBorders

defaultBorders?: ITextureBorders;

Default width of the non-scalable border that is used if 9-slice plane is created with this texture. 7.2.0
See Also
- PIXI.NineSlicePlane

property destroyed

destroyed: boolean;

Has the texture been destroyed?
Modifiers
- @readonly

property EMPTY

static readonly EMPTY: Texture<Resource>;

An empty texture, used often to not have to create multiple empty textures. Can not be destroyed.

property frame

frame: Rectangle;

The frame specifies the region of the base texture that this texture uses. Please call updateUvs() after you change coordinates of frame manually.

property height

readonly height: number;

The height of the Texture in pixels.

property noFrame

noFrame: boolean;

Does this Texture have any frame data assigned to it?
This mode is enabled automatically if no frame was passed inside constructor.
In this mode texture is subscribed to baseTexture events, and fires update on any change.
Beware, after loading or resize of baseTexture event can fired two times! If you want more control, subscribe on baseTexture itself.
Any assignment of frame switches off noFrame mode.
Example 1
texture.on('update', () => {});

property orig

orig: Rectangle;

This is the area of original texture, before it was put in atlas.

property resolution

readonly resolution: number;

Returns resolution of baseTexture
Modifiers
- @readonly

property rotate

rotate: number;

Indicates whether the texture is rotated inside the atlas set to 2 to compensate for texture packer rotation set to 6 to compensate for spine packer rotation can be used to rotate or mirror sprites See PIXI.groupD8 for explanation

property textureCacheIds

textureCacheIds: string[];

The ids under which this Texture has been added to the texture cache. This is automatically set as long as Texture.addToCache is used, but may not be set if a Texture is added directly to the TextureCache array.

property trim

trim: Rectangle;

This is the trimmed area of original texture, before it was put in atlas Please call updateUvs() after you change coordinates of trim manually.

property uvMatrix

uvMatrix: TextureMatrix;

Default TextureMatrix instance for this texture. By default, that object is not created because its heavy.

property valid

valid: boolean;

This will let the renderer know if the texture is valid. If it's not then it cannot be rendered.

property WHITE

static readonly WHITE: Texture<CanvasResource>;

A white texture of 16x16 size, used for graphics and other things Can not be destroyed.

property width

readonly width: number;

The width of the Texture in pixels.

method addToCache

static addToCache: (texture: Texture, id: string) => void;

Adds a Texture to the global TextureCache. This cache is shared across the whole PIXI object.
Parameter texture
The Texture to add to the cache.
Parameter id
The id that the Texture will be stored against.

method castToBaseTexture

castToBaseTexture: () => BaseTexture;

Utility function for BaseTexture|Texture cast.

method clone

clone: () => Texture;

Creates a new texture object that acts the same as this one.
Returns
- The new texture

method destroy

destroy: (destroyBase?: boolean) => void;

Destroys this texture
Parameter destroyBase
Whether to destroy the base texture as well PIXI.Texture#destroyed

method from

static from: <R extends Resource = Resource, RO = any>(
    source: TextureSource | TextureSource[],
    options?: IBaseTextureOptions<RO>,
    strict?: boolean
) => Texture<R>;

Helper function that creates a new Texture based on the source you provide. The source can be - frame id, image url, video url, canvas element, video element, base texture
Parameter source
Source or array of sources to create texture from
Parameter options
See PIXI.BaseTexture's constructor for options.
Parameter
{string} [options.pixiIdPrefix=pixiid] - If a source has no id, this is the prefix of the generated id
Parameter strict
Enforce strict-mode, see PIXI.settings.STRICT_TEXTURE_CACHE.
Returns
{PIXI.Texture} The newly created texture

method fromBuffer

static fromBuffer: (
    buffer: BufferType,
    width: number,
    height: number,
    options?: IBaseTextureOptions<IBufferResourceOptions>
) => Texture<BufferResource>;

Create a new Texture with a BufferResource from a typed array.
Parameter buffer
The optional array to use. If no data is provided, a new Float32Array is created.
Parameter width
Width of the resource
Parameter height
Height of the resource
Parameter options
See PIXI.BaseTexture's constructor for options. Default properties are different from the constructor's defaults.
Parameter
{PIXI.FORMATS} [options.format] - The format is not given, the type is inferred from the type of the buffer: RGBA if Float32Array, Int8Array, Uint8Array, or Uint8ClampedArray, otherwise RGBA_INTEGER.
Parameter
{PIXI.TYPES} [options.type] - The type is not given, the type is inferred from the type of the buffer. Maps Float32Array to FLOAT, Int32Array to INT, Uint32Array to UNSIGNED_INT, Int16Array to SHORT, Uint16Array to UNSIGNED_SHORT, Int8Array to BYTE, Uint8Array/Uint8ClampedArray to UNSIGNED_BYTE.
Parameter
{PIXI.ALPHA_MODES} [options.alphaMode=PIXI.ALPHA_MODES.NPM]
Parameter
{PIXI.SCALE_MODES} [options.scaleMode=PIXI.SCALE_MODES.NEAREST]
Returns
- The resulting new BaseTexture

method fromLoader

static fromLoader: <R extends Resource = Resource>(
    source: ImageSource | string,
    imageUrl: string,
    name?: string,
    options?: IBaseTextureOptions
) => Promise<Texture<R>>;

Create a texture from a source and add to the cache.
Parameter source
The input source.
Parameter imageUrl
File name of texture, for cache and resolving resolution.
Parameter name
Human readable name for the texture cache. If no name is specified, only imageUrl will be used as the cache ID.
Parameter options
Returns
- Output texture

method fromURL

static fromURL: <R extends Resource = Resource, RO = any>(
    url: string | string[],
    options?: IBaseTextureOptions<RO>
) => Promise<Texture<R>>;

Useful for loading textures via URLs. Use instead of Texture.from because it does a better job of handling failed URLs more effectively. This also ignores PIXI.settings.STRICT_TEXTURE_CACHE. Works for Videos, SVGs, Images.
Parameter url
The remote URL or array of URLs to load.
Parameter options
Optional options to include
Returns
- A Promise that resolves to a Texture.

method onBaseTextureUpdated

onBaseTextureUpdated: (baseTexture: BaseTexture) => void;

Called when the base texture is updated
Parameter baseTexture
The base texture.

method removeFromCache

static removeFromCache: (texture: string | Texture) => Texture | null;

Remove a Texture from the global TextureCache.
Parameter texture
id of a Texture to be removed, or a Texture instance itself
Returns
- The Texture that was removed

method update

update: () => void;

Updates this texture on the gpu.
Calls the TextureResource update.
If you adjusted frame manually, please call updateUvs() instead.

method updateUvs

updateUvs: () => void;

Updates the internal WebGL UV cache. Use it after you change frame or trim of the texture. Call it after changing the frame

class TextureGCSystem

class TextureGCSystem implements ISystem {}

System plugin to the renderer to manage texture garbage collection on the GPU, ensuring that it does not get clogged up with textures that are no longer being used. PIXI

constructor

constructor(renderer: Renderer);

Parameter renderer
The renderer this System works for.

property checkCount

checkCount: number;

Frame count since last garbage collection.
Modifiers
- @readonly

property checkCountMax

checkCountMax: number;

Frames between two garbage collections.
See Also
- PIXI.TextureGCSystem.defaultCheckCountMax

property count

count: number;

Frame count since started.
Modifiers
- @readonly

property defaultCheckCountMax

static defaultCheckCountMax: number;

Default frames between two garbage collections. 600
See Also
- PIXI.TextureGCSystem#checkCountMax

property defaultMaxIdle

static defaultMaxIdle: number;

Default maximum idle frames before a texture is destroyed by garbage collection. 3600
See Also
- PIXI.TextureGCSystem#maxIdle

property defaultMode

static defaultMode: GC_MODES;

Default garbage collection mode. {PIXI.GC_MODES} PIXI.GC_MODES.AUTO
See Also
- PIXI.TextureGCSystem#mode

property extension

static extension: ExtensionMetadata;

property maxIdle

maxIdle: number;

Maximum idle frames before a texture is destroyed by garbage collection.
See Also
- PIXI.TextureGCSystem.defaultMaxIdle

property mode

mode: GC_MODES;

Current garbage collection mode.
See Also
- PIXI.TextureGCSystem.defaultMode

method destroy

destroy: () => void;

method postrender

protected postrender: () => void;

Checks to see when the last time a texture was used. If the texture has not been used for a specified amount of time, it will be removed from the GPU.

method run

run: () => void;

Checks to see when the last time a texture was used. If the texture has not been used for a specified amount of time, it will be removed from the GPU.

method unload

unload: (displayObject: IUnloadableTexture) => void;

Removes all the textures within the specified displayObject and its children from the GPU.
Parameter displayObject
the displayObject to remove the textures from.

class TextureMatrix

class TextureMatrix {}

Class controls uv mapping from Texture normal space to BaseTexture normal space.
Takes trim and rotate into account. May contain clamp settings for Meshes and TilingSprite.
Can be used in Texture uvMatrix field, or separately, you can use different clamp settings on the same texture. If you want to add support for texture region of certain feature or filter, that's what you're looking for.
Takes track of Texture changes through _lastTextureID private field. Use update() method call to track it from outside.
See Also
- PIXI.Texture
- PIXI.Mesh
- PIXI.TilingSprite PIXI

constructor

constructor(texture: Texture<Resource>, clampMargin?: number);

Parameter texture
observed texture
Parameter clampMargin
Changes frame clamping, 0.5 by default. Use -0.5 for extra border.

property clampMargin

clampMargin: number;

Changes frame clamping Works with TilingSprite and Mesh Change to -0.5 to add a pixel to the edge, recommended for transparent trimmed textures in atlas 0.5

property clampOffset

clampOffset: number;

Changes frame clamping Works with TilingSprite and Mesh Change to 1.5 if you texture has repeated right and bottom lines, that leads to smoother borders 0

property isSimple

isSimple: boolean;

If texture size is the same as baseTexture. false
Modifiers
- @readonly

property mapCoord

mapCoord: Matrix;

Matrix operation that converts texture region coords to texture coords
Modifiers
- @readonly

property texture

texture: Texture<Resource>;

Texture property.

property uClampFrame

readonly uClampFrame: Float32Array;

Clamp region for normalized coords, left-top pixel center in xy , bottom-right in zw. Calculated based on clampOffset.

property uClampOffset

readonly uClampOffset: Float32Array;

Normalized clamp offset. Calculated based on clampOffset.

method multiplyUvs

multiplyUvs: (uvs: Float32Array, out?: Float32Array) => Float32Array;

Multiplies uvs array to transform
Parameter uvs
mesh uvs
Parameter out
output
Returns
- output

method update

update: (forceUpdate?: boolean) => boolean;

Updates matrices if texture was changed.
Parameter forceUpdate
if true, matrices will be updated any case
Returns
- Whether or not it was updated

class TextureSystem

class TextureSystem implements ISystem {}

System plugin to the renderer to manage textures. PIXI

constructor

constructor(renderer: Renderer);

Parameter renderer
The renderer this system works for.

property boundTextures

boundTextures: BaseTexture<Resource, any>[];

Bound textures.
Modifiers
- @readonly

property CONTEXT_UID

protected CONTEXT_UID: number;

property currentLocation

currentLocation: number;

Current location.
Modifiers
- @readonly

property emptyTextures

emptyTextures: { [key: number]: GLTexture };

property extension

static extension: ExtensionMetadata;

property gl

protected gl: IRenderingContext;

property hasIntegerTextures

protected hasIntegerTextures: boolean;

Whether glTexture with int/uint sampler type was uploaded.

property internalFormats

protected internalFormats: { [type: number]: { [format: number]: number } };

property managedTextures

managedTextures: BaseTexture<Resource, any>[];

List of managed textures.
Modifiers
- @readonly

property samplerTypes

protected samplerTypes: Record<number, SAMPLER_TYPES>;

property unknownTexture

protected unknownTexture: BaseTexture<Resource, any>;

BaseTexture value that shows that we don't know what is bound.
Modifiers
- @readonly

property webGLVersion

protected webGLVersion: number;

method bind

bind: (texture: Texture | BaseTexture, location?: number) => void;

Bind a texture to a specific location
If you want to unbind something, please use unbind(texture) instead of bind(null, textureLocation)
Parameter texture
Texture to bind
Parameter location
Location to bind at

method contextChange

contextChange: () => void;

Sets up the renderer context and necessary buffers.

method destroy

destroy: () => void;

method destroyTexture

destroyTexture: (texture: BaseTexture | Texture, skipRemove?: boolean) => void;

Deletes the texture from WebGL
Parameter texture
the texture to destroy
Parameter skipRemove
Whether to skip removing the texture from the TextureManager.

method ensureSamplerType

ensureSamplerType: (maxTextures: number) => void;

Ensures that current boundTextures all have FLOAT sampler type, see PIXI.SAMPLER_TYPES for explanation.
Parameter maxTextures
number of locations to check

method initTexture

initTexture: (texture: BaseTexture) => GLTexture;

Initialize a texture
Parameter texture
Texture to initialize

method initTextureType

initTextureType: (texture: BaseTexture, glTexture: GLTexture) => void;

method reset

reset: () => void;

Resets texture location and bound textures Actual bind(null, i) calls will be performed at next unbind() call

method setStyle

setStyle: (texture: BaseTexture, glTexture: GLTexture) => void;

Set style for texture
Parameter texture
Texture to update
Parameter glTexture

method unbind

unbind: (texture?: BaseTexture) => void;

Unbind a texture.
Parameter texture
Texture to bind

method updateTexture

updateTexture: (texture: BaseTexture) => void;

Update a texture
Parameter texture
Texture to initialize

method updateTextureStyle

updateTextureStyle: (texture: BaseTexture) => void;

Update texture style such as mipmap flag
Parameter texture
Texture to update

class TextureUvs

class TextureUvs {}

Stores a texture's frame in UV coordinates, in which everything lies in the rectangle `[(0,0), (1,0), (1,1), (0,1)]`.
| Corner | Coordinates | |--------------|-------------| | Top-Left | (x0,y0) | | Top-Right | (x1,y1) | | Bottom-Right | (x2,y2) | | Bottom-Left | (x3,y3) | PIXI

constructor

constructor();

property uvsFloat32

uvsFloat32: Float32Array;

property x0

x0: number;

X-component of top-left corner (x0,y0).

property x1

x1: number;

X-component of top-right corner (x1,y1).

property x2

x2: number;

X-component of bottom-right corner (x2,y2).

property x3

x3: number;

X-component of bottom-left corner (x3,y3).

property y0

y0: number;

Y-component of top-left corner (x0,y0).

property y1

y1: number;

Y-component of top-right corner (x1,y1).

property y2

y2: number;

Y-component of bottom-right corner (x2,y2).

property y3

y3: number;

Y-component of bottom-right corner (x3,y3).

method set

set: (frame: Rectangle, baseFrame: ISize, rotate: number) => void;

Sets the texture Uvs based on the given frame information.
Parameter frame
The frame of the texture
Parameter baseFrame
The base frame of the texture
Parameter rotate
Rotation of frame, see PIXI.groupD8

class TransformFeedback

class TransformFeedback {}

A TransformFeedback object wrapping GLTransformFeedback object.
For example you can use TransformFeedback object to feed-back buffer data from Shader having TransformFeedbackVaryings. PIXI

constructor

constructor();

property buffers

buffers: Buffer[];

property disposeRunner

disposeRunner: Runner;

method bindBuffer

bindBuffer: (index: number, buffer: Buffer) => void;

Bind buffer to TransformFeedback
Parameter index
index to bind
Parameter buffer
buffer to bind

method destroy

destroy: () => void;

Destroy WebGL resources that are connected to this TransformFeedback.

class TransformFeedbackSystem

class TransformFeedbackSystem implements ISystem {}

TransformFeedbackSystem provides TransformFeedback of WebGL2 https://developer.mozilla.org/en-US/docs/Web/API/WebGLTransformFeedback
For example, you can use TransformFeedbackSystem to implement GPU Particle or general purpose computing on GPU (aka GPGPU).
It also manages a lifetime of GLTransformFeedback object PIXI

constructor

constructor(renderer: Renderer);

Parameter renderer
The renderer this System works for.

property CONTEXT_UID

CONTEXT_UID: number;

property extension

static extension: ExtensionMetadata;

property gl

gl: IRenderingContext;

method beginTransformFeedback

beginTransformFeedback: (drawMode: DRAW_MODES, shader?: Shader) => void;

Begin TransformFeedback
Parameter drawMode
DrawMode for TransformFeedback
Parameter shader
A Shader used by TransformFeedback. Current bound shader will be used if not provided.

method bind

bind: (transformFeedback: TransformFeedback) => void;

Bind TransformFeedback and buffers
Parameter transformFeedback
TransformFeedback to bind

method contextChange

protected contextChange: () => void;

Sets up the renderer context and necessary buffers.

method createGLTransformFeedback

protected createGLTransformFeedback: (
    tf: TransformFeedback
) => WebGLTransformFeedback;

Create TransformFeedback and bind buffers
Parameter tf
TransformFeedback
Returns
WebGLTransformFeedback

method destroy

destroy: () => void;

method disposeTransformFeedback

disposeTransformFeedback: (tf: TransformFeedback, contextLost?: boolean) => void;

Disposes TransfromFeedback
Parameter tf
TransformFeedback
Parameter contextLost
If context was lost, we suppress delete TransformFeedback

method endTransformFeedback

endTransformFeedback: () => void;

End TransformFeedback

method unbind

unbind: () => void;

Unbind TransformFeedback

class UniformGroup

class UniformGroup<LAYOUT = Dict<any>> {}

Uniform group holds uniform map and some ID's for work
UniformGroup has two modes:
1: Normal mode Normal mode will upload the uniforms with individual function calls as required
2: Uniform buffer mode This mode will treat the uniforms as a uniform buffer. You can pass in either a buffer that you manually handle, or or a generic object that PixiJS will automatically map to a buffer for you. For maximum benefits, make Ubo UniformGroups static, and only update them each frame.
Rules of UBOs: - UBOs only work with WebGL2, so make sure you have a fallback! - Only floats are supported (including vec[2,3,4], mat[2,3,4]) - Samplers cannot be used in ubo's (a GPU limitation) - You must ensure that the object you pass in exactly matches in the shader ubo structure. Otherwise, weirdness will ensue! - The name of the ubo object added to the group must match exactly the name of the ubo in the shader.
// UBO in shader: uniform myCoolData { // Declaring a UBO... mat4 uCoolMatrix; float uFloatyMcFloatFace; };
// A new Uniform Buffer Object... const myCoolData = new UniformBufferGroup({ uCoolMatrix: new Matrix(), uFloatyMcFloatFace: 23, }} // Build a shader... const shader = Shader.from(srcVert, srcFrag, { myCoolData // Name matches the UBO name in the shader. Will be processed accordingly. })
PIXI

constructor

constructor(uniforms: LAYOUT | Buffer, isStatic?: boolean, isUbo?: boolean);

Parameter uniforms
Custom uniforms to use to augment the built-in ones. Or a pixi buffer.
Parameter isStatic
Uniforms wont be changed after creation.
Parameter isUbo
If true, will treat this uniform group as a uniform buffer object.

property autoManage

autoManage: boolean;

property buffer

buffer?: Buffer;

property dirtyId

dirtyId: number;

Dirty version

property group

readonly group: boolean;

Its a group and not a single uniforms. true

property id

id: number;

unique id

property static

static: boolean;

Flag for if uniforms wont be changed after creation.

property syncUniforms

syncUniforms: Dict<UniformsSyncCallback>;

property ubo

ubo: boolean;

Flags whether this group is treated like a uniform buffer object.

property uniforms

readonly uniforms: {};

Uniform values {object}

method add

add: (name: string, uniforms: Dict<any>, _static?: boolean) => void;

method from

static from: (
    uniforms: Dict<any> | Buffer,
    _static?: boolean,
    _ubo?: boolean
) => UniformGroup;

method uboFrom

static uboFrom: (
    uniforms: Dict<any> | Buffer,
    _static?: boolean
) => UniformGroup;

A short hand function for creating a static UBO UniformGroup.
Parameter uniforms
the ubo item
Parameter _static
should this be updated each time it is used? defaults to true here!

method update

update: () => void;

class VideoResource

class VideoResource extends BaseImageResource {}

Resource type for HTMLVideoElement. PIXI

constructor

constructor(
    source?:
        | string
        | HTMLVideoElement
        | (string | IVideoResourceOptionsElement)[],
    options?: IVideoResourceOptions
);

Parameter source
Video element to use.
Parameter options
Options to use
Parameter
{boolean} [options.autoLoad=true] - Start loading the video immediately
Parameter
{boolean} [options.autoPlay=true] - Start playing video immediately
Parameter
{number} [options.updateFPS=0] - How many times a second to update the texture from the video. If 0, requestVideoFrameCallback is used to update the texture. If requestVideoFrameCallback is not available, the texture is updated every render.
Parameter
{boolean} [options.crossorigin=true] - Load image using cross origin
Parameter
{boolean} [options.loop=false] - Loops the video
Parameter
{boolean} [options.muted=false] - Mutes the video audio, useful for autoplay
Parameter
{boolean} [options.playsinline=true] - Prevents opening the video on mobile devices

property autoPlay

protected autoPlay: boolean;

When set to true will automatically play videos used by this texture once they are loaded. If false, it will not modify the playing state. true

property autoUpdate

autoUpdate: boolean;

Should the base texture automatically update itself, set to true by default.

property MIME_TYPES

static MIME_TYPES: Dict<string>;

Map of video MIME types that can't be directly derived from file extensions.
Modifiers
- @readonly

property source

source: HTMLVideoElement;

Override the source to be the video element.

property TYPES

static TYPES: string[];

List of common video file extensions supported by VideoResource.
Modifiers
- @readonly

property updateFPS

updateFPS: number;

How many times a second to update the texture from the video. If 0, requestVideoFrameCallback is used to update the texture. If requestVideoFrameCallback is not available, the texture is updated every render. A lower fps can help performance, as updating the texture at 60fps on a 30ps video may not be efficient.

method dispose

dispose: () => void;

Destroys this texture.

method load

load: () => Promise<this>;

Start preloading the video resource.
Returns
{Promise} Handle the validate event

method test

static test: (source: unknown, extension?: string) => source is HTMLVideoElement;

Used to auto-detect the type of resource.
Parameter source
The source object
Parameter extension
The extension of source, if set
Returns
{boolean} true if video source

method update

update: (_deltaTime?: number) => void;

Trigger updating of the texture.
Parameter _deltaTime
time delta since last tick

class ViewableBuffer

class ViewableBuffer {}

Flexible wrapper around ArrayBuffer that also provides typed array views on demand. PIXI

constructor

constructor(length: number);

Parameter length
The size of the buffer in bytes.

constructor

constructor(arrayBuffer: ArrayBuffer);

Parameter arrayBuffer
The source array buffer.

property float32View

float32View: Float32Array;

View on the raw binary data as a Float32Array.

property int16View

readonly int16View: Int16Array;

View on the raw binary data as a Int16Array.

property int32View

readonly int32View: Int32Array;

View on the raw binary data as a Int32Array.

property int8View

readonly int8View: Int8Array;

View on the raw binary data as a Int8Array.

property rawBinaryData

rawBinaryData: ArrayBuffer;

Underlying ArrayBuffer that holds all the data and is of capacity this.size.

property size

size: number;

property uint16View

readonly uint16View: Uint16Array;

View on the raw binary data as a Uint16Array.

property uint32View

uint32View: Uint32Array;

View on the raw binary data as a Uint32Array.

property uint8View

readonly uint8View: Uint8Array;

View on the raw binary data as a Uint8Array.

method destroy

destroy: () => void;

Destroys all buffer references. Do not use after calling this.

method sizeOf

static sizeOf: (type: string) => number;

method view

view: (type: string) => ITypedArray;

Returns the view of the given type.
Parameter type
One of int8, uint8, int16, uint16, int32, uint32, and float32.
Returns
- typed array of given type

class ViewSystem

class ViewSystem implements ISystem<ViewSystemOptions, boolean> {}

The view system manages the main canvas that is attached to the DOM. This main role is to deal with how the holding the view reference and dealing with how it is resized. PIXI

constructor

constructor(renderer: IRenderer<ICanvas>);

property autoDensity

autoDensity: boolean;

Whether CSS dimensions of canvas view should be resized to screen dimensions automatically. {boolean}

property defaultOptions

static defaultOptions: ViewSystemOptions;

property element

element: ICanvas;

The canvas element that everything is drawn to. {PIXI.ICanvas}

property extension

static extension: ExtensionMetadata;

property resolution

resolution: number;

The resolution / device pixel ratio of the renderer. {number} PIXI.settings.RESOLUTION

property screen

screen: Rectangle;

Measurements of the screen. (0, 0, screenWidth, screenHeight).
Its safe to use as filterArea or hitArea for the whole stage. {PIXI.Rectangle}

method destroy

destroy: (removeView: boolean) => void;

Destroys this System and optionally removes the canvas from the dom.
Parameter removeView
Whether to remove the canvas from the DOM.

method init

init: (options: ViewSystemOptions) => void;

initiates the view system
Parameter options
the options for the view

method resizeView

resizeView: (desiredScreenWidth: number, desiredScreenHeight: number) => void;

Resizes the screen and canvas to the specified dimensions.
Parameter desiredScreenWidth
The new width of the screen.
Parameter desiredScreenHeight
The new height of the screen.

Interfaces

interface BackgroundSystemOptions

interface BackgroundSystemOptions {}

Options for the background system. PIXI

property background

background?: ColorSource;

Alias for PIXI.IRendererOptions.backgroundColor PIXI.IRendererOptions

property backgroundAlpha

backgroundAlpha: number;

Transparency of the background color, value from 0 (fully transparent) to 1 (fully opaque). PIXI.IRendererOptions

property backgroundColor

backgroundColor: ColorSource;

The background color used to clear the canvas. See PIXI.ColorSource for accepted color values. PIXI.IRendererOptions

property clearBeforeRender

clearBeforeRender: boolean;

Whether to clear the canvas before new render passes. PIXI.IRendererOptions

interface BaseRenderTexture

interface BaseRenderTexture extends GlobalMixins.BaseRenderTexture, BaseTexture {}

interface BaseTexture

interface BaseTexture extends GlobalMixins.BaseTexture, EventEmitter {}

interface ContextSystemOptions

interface ContextSystemOptions {}

Options for the context system. PIXI

property antialias

antialias: boolean;

**WebGL Only.** Whether to enable anti-aliasing. This may affect performance. PIXI.IRendererOptions

property context

context: IRenderingContext | null;

**WebGL Only.** User-provided WebGL rendering context object. PIXI.IRendererOptions

property powerPreference

powerPreference: WebGLPowerPreference;

**WebGL Only.** A hint indicating what configuration of GPU is suitable for the WebGL context, can be 'default', 'high-performance' or 'low-power'. Setting to 'high-performance' will prioritize rendering performance over power consumption, while setting to 'low-power' will prioritize power saving over rendering performance. PIXI.IRendererOptions

property premultipliedAlpha

premultipliedAlpha: boolean;

**WebGL Only.** Whether the compositor will assume the drawing buffer contains colors with premultiplied alpha. PIXI.IRendererOptions

property preserveDrawingBuffer

preserveDrawingBuffer: boolean;

**WebGL Only.** Whether to enable drawing buffer preservation. If enabled, the drawing buffer will preserve its value until cleared or overwritten. Enable this if you need to call toDataUrl on the WebGL context. PIXI.IRendererOptions

property useContextAlpha

useContextAlpha?: boolean | 'notMultiplied';

**Deprecated since 7.0.0, use premultipliedAlpha and backgroundAlpha instead.**
Pass-through value for canvas' context attribute alpha. This option is for cases where the canvas needs to be opaque, possibly for performance reasons on some older devices. If you want to set transparency, please use backgroundAlpha.
**WebGL Only:** When set to 'notMultiplied', the canvas' context attribute alpha will be set to true and premultipliedAlpha will be to false.
Deprecated
since 7.0.0 PIXI.IRendererOptions

interface IArrayBuffer

interface IArrayBuffer extends ArrayBuffer {}

Marks places in PixiJS where you can pass Float32Array, UInt32Array, any typed arrays, and ArrayBuffer.
Same as ArrayBuffer in typescript lib, defined here just for documentation. PIXI

interface IAttributeData

interface IAttributeData {}

property location

location: number;

property name

name: string;

property size

size: number;

property type

type: string;

interface IBaseTextureOptions

interface IBaseTextureOptions<RO = any> {}

property alphaMode

alphaMode?: ALPHA_MODES;

property anisotropicLevel

anisotropicLevel?: number;

property format

format?: FORMATS;

property height

height?: number;

property mipmap

mipmap?: MIPMAP_MODES;

property multisample

multisample?: MSAA_QUALITY;

property pixiIdPrefix

pixiIdPrefix?: string;

property resolution

resolution?: number;

property resourceOptions

resourceOptions?: RO;

property scaleMode

scaleMode?: SCALE_MODES;

property target

target?: TARGETS;

property type

type?: TYPES;

property width

width?: number;

property wrapMode

wrapMode?: WRAP_MODES;

interface IBatchableElement

interface IBatchableElement {}

Interface for elements like Sprite, Mesh etc. for batching. PIXI

property blendMode

blendMode: BLEND_MODES;

property indices

indices: Uint16Array | Uint32Array | Array<number>;

property uvs

uvs: Float32Array;

property vertexData

vertexData: Float32Array;

property worldAlpha

worldAlpha: number;

interface IBufferResourceOptions

interface IBufferResourceOptions extends ISize {}

Constructor options for BufferResource. PIXI

property unpackAlignment

unpackAlignment?: 1 | 2 | 4 | 8;

interface ICubeResourceOptions

interface ICubeResourceOptions extends ISize {}

Constructor options for CubeResource. PIXI

property autoLoad

autoLoad?: boolean;

Whether to auto-load resources

property linkBaseTexture

linkBaseTexture?: boolean;

In case BaseTextures are supplied, whether to copy them or use.

interface IFilterTarget

interface IFilterTarget {}

property filterArea

filterArea: Rectangle;

method getBounds

getBounds: (skipUpdate?: boolean) => Rectangle;

interface IGenerateTextureOptions

interface IGenerateTextureOptions extends IBaseTextureOptions {}

property multisample

multisample?: MSAA_QUALITY;

The number of samples of the frame buffer. The default is the renderer's multisample.

property region

region?: Rectangle;

The region of the displayObject, that shall be rendered, if no region is specified, defaults to the local bounds of the displayObject.

property resolution

resolution?: number;

The resolution / device pixel ratio of the texture being generated. The default is the renderer's resolution.

interface IImageBitmapResourceOptions

interface IImageBitmapResourceOptions {}

Options for ImageBitmapResource. PIXI

property alphaMode

alphaMode?: ALPHA_MODES;

Alpha mode used when creating the ImageBitmap.

property autoLoad

autoLoad?: boolean;

Start loading process automatically when constructed.

property crossOrigin

crossOrigin?: boolean;

Load image using cross origin.

property ownsImageBitmap

ownsImageBitmap?: boolean;

Whether the underlying ImageBitmap is owned by the PIXI.ImageBitmapResource. When set to true, the underlying ImageBitmap will be disposed automatically when disposing PIXI.ImageBitmapResource. If this option is not set, whether it owns the underlying ImageBitmap is determained by the type of source used when constructing PIXI.ImageBitmapResource: - When source is ImageBitmap, the underlying ImageBitmap is not owned by default. - When source is string (a URL), the underlying ImageBitmap is owned by default.
See Also
- PIXI.ImageBitmapResource.ownsImageBitmap

interface IImageResourceOptions

interface IImageResourceOptions {}

property alphaMode

alphaMode?: ALPHA_MODES;

Premultiply image alpha in bitmap.

property autoLoad

autoLoad?: boolean;

Start loading process automatically when constructed.

property createBitmap

createBitmap?: boolean;

Whether its required to create a bitmap before upload.

property crossorigin

crossorigin?: boolean | string;

Load image using cross origin.

interface IMaskTarget

interface IMaskTarget extends IFilterTarget {}

property isSprite

isSprite?: boolean;

property renderable

renderable: boolean;

property worldTransform

worldTransform: Matrix;

method getBounds

getBounds: (skipUpdate?: boolean, rect?: Rectangle) => Rectangle;

method isFastRect

isFastRect: () => boolean;

method render

render: (renderer: Renderer) => void;

interface IProgramExtraData

interface IProgramExtraData {}

property transformFeedbackVaryings

transformFeedbackVaryings?: {
    names: string[];
    bufferMode: 'separate' | 'interleaved';
};

interface IRenderableContainer

interface IRenderableContainer extends IRenderableObject {}

Interface for Container to interface with Renderer. PIXI

method getLocalBounds

getLocalBounds: (rect?: Rectangle, skipChildrenUpdate?: boolean) => Rectangle;

Get Local bounds for container

interface IRenderableObject

interface IRenderableObject extends GlobalMixins.IRenderableObject {}

Interface for DisplayObject to interface with Renderer. The minimum APIs needed to implement a renderable object. PIXI

property parent

parent: IRenderableContainer;

Object must have a parent container

property transform

transform: Transform;

Object must have a transform

method disableTempParent

disableTempParent: (parent: IRenderableContainer) => void;

After method for transform updates

method enableTempParent

enableTempParent: () => IRenderableContainer;

Before method for transform updates

method render

render: (renderer: IRenderer) => void;

Render object directly

method updateTransform

updateTransform: () => void;

Update the transforms

interface IRenderer

interface IRenderer<VIEW extends ICanvas = ICanvas>
    extends SystemManager,
        GlobalMixins.IRenderer {}

Standard Interface for a Pixi renderer. PIXI

property autoDensity

readonly autoDensity: boolean;

Whether CSS dimensions of canvas view should be resized to screen dimensions automatically.

property background

readonly background: BackgroundSystem;

Background color, alpha and clear behavior

property height

readonly height: number;

the height of the screen

property lastObjectRendered

readonly lastObjectRendered: IRenderableObject;

the last object rendered by the renderer. Useful for other plugins like interaction managers

property multisample

multisample?: MSAA_QUALITY;

The number of MSAA samples of the renderer.

property options

readonly options: IRendererOptions;

The options passed in to create a new instance of the renderer. {PIXI.IRendererOptions}

property plugins

readonly plugins: IRendererPlugins;

Collection of plugins

property rendererLogId

readonly rendererLogId: string;

When logging Pixi to the console, this is the name we will show

property renderingToScreen

readonly renderingToScreen: boolean;

Flag if we are rendering to the screen vs renderTexture

property resolution

resolution: number;

The resolution / device pixel ratio of the renderer.

property screen

readonly screen: Rectangle;

Measurements of the screen. (0, 0, screenWidth, screenHeight). Its safe to use as filterArea or hitArea for the whole stage.

property type

readonly type: RENDERER_TYPE;

The type of the renderer.
See Also
- PIXI.RENDERER_TYPE

property view

readonly view: VIEW;

The canvas element that everything is drawn to.

property width

readonly width: number;

the width of the screen

method clear

clear: () => void;

method destroy

destroy: (removeView?: boolean) => void;

method generateTexture

generateTexture: (
    displayObject: IRenderableObject,
    options?: IGenerateTextureOptions
) => RenderTexture;

method render

render: (
    displayObject: IRenderableObject,
    options?: IRendererRenderOptions
) => void;

method reset

reset: () => void;

method resize

resize: (width: number, height: number) => void;

interface IRendererConstructor

interface IRendererConstructor<VIEW extends ICanvas = ICanvas> {}

method test

test: (options?: Partial<IRendererOptionsAuto>) => boolean;

construct signature

new (options?: Partial<IRendererOptionsAuto>): IRenderer<VIEW>;

interface IRendererOptions

interface IRendererOptions
    extends GlobalMixins.IRendererOptions,
        BackgroundSystemOptions,
        ContextSystemOptions,
        ViewSystemOptions,
        StartupSystemOptions {}

Renderer options supplied to constructor. PIXI
See Also
- PIXI.settings.RENDER_OPTIONS

interface IRendererOptionsAuto

interface IRendererOptionsAuto extends IRendererOptions {}

Renderer options supplied to autoDetectRenderer. PIXI

property forceCanvas

forceCanvas?: boolean;

Force CanvasRenderer even if WebGL is supported. Only available with **pixi.js-legacy**. false

interface IRendererPlugins

interface IRendererPlugins extends GlobalMixins.IRendererPlugins {}

index signature

[key: string]: any;

interface IRendererRenderOptions

interface IRendererRenderOptions {}

property blit

blit?: boolean;

property clear

clear?: boolean;

property renderTexture

renderTexture?: RenderTexture;

property skipUpdateTransform

skipUpdateTransform?: boolean;

property transform

transform?: Matrix;

interface IRenderingContext

interface IRenderingContext extends WebGL2RenderingContext {}

Mixed WebGL1 / WebGL2 rendering context. Either it's WebGL2, either it's WebGL1 with PixiJS polyfills on it. PIXI

method texImage2D

texImage2D: {
    (
        target: GLenum,
        level: GLint,
        internalformat: GLint,
        width: GLsizei,
        height: GLsizei,
        border: GLint,
        format: GLenum,
        type: GLenum,
        pixels: ArrayBufferView | null
    ): void;
    (
        target: number,
        level: number,
        internalformat: number,
        format: number,
        type: number,
        source: any
    ): void;
    (
        target: number,
        level: number,
        internalformat: number,
        width: number,
        height: number,
        border: number,
        format: number,
        type: number,
        pboOffset: number
    ): void;
    (
        target: number,
        level: number,
        internalformat: number,
        width: number,
        height: number,
        border: number,
        format: number,
        type: number,
        source: any
    ): void;
    (
        target: number,
        level: number,
        internalformat: number,
        width: number,
        height: number,
        border: number,
        format: number,
        type: number,
        srcData: ArrayBufferView,
        srcOffset: number
    ): void;
};

method texSubImage2D

texSubImage2D: {
    (
        target: GLenum,
        level: GLint,
        xoffset: GLint,
        yoffset: GLint,
        width: GLsizei,
        height: GLsizei,
        format: GLenum,
        type: GLenum,
        pixels: ArrayBufferView | null
    ): void;
    (
        target: number,
        level: number,
        xoffset: number,
        yoffset: number,
        format: number,
        type: number,
        source: any
    ): void;
    (
        target: number,
        level: number,
        xoffset: number,
        yoffset: number,
        width: number,
        height: number,
        format: number,
        type: number,
        pboOffset: number
    ): void;
    (
        target: number,
        level: number,
        xoffset: number,
        yoffset: number,
        width: number,
        height: number,
        format: number,
        type: number,
        source: any
    ): void;
    (
        target: number,
        level: number,
        xoffset: number,
        yoffset: number,
        width: number,
        height: number,
        format: number,
        type: number,
        srcData: ArrayBufferView,
        srcOffset: number
    ): void;
};

method texSubImage3D

texSubImage3D: {
    (
        target: GLenum,
        level: GLint,
        xoffset: GLint,
        yoffset: GLint,
        zoffset: GLint,
        width: GLsizei,
        height: GLsizei,
        depth: GLsizei,
        format: GLenum,
        type: GLenum,
        pboOffset: GLintptr
    ): void;
    (
        target: number,
        level: number,
        xoffset: number,
        yoffset: number,
        zoffset: number,
        width: number,
        height: number,
        depth: number,
        format: number,
        type: number,
        source: any
    ): void;
    (
        target: number,
        level: number,
        xoffset: number,
        yoffset: number,
        zoffset: number,
        width: number,
        height: number,
        depth: number,
        format: number,
        type: number,
        srcData: ArrayBufferView,
        srcOffset?: number
    ): void;
};

interface IResourcePlugin

interface IResourcePlugin<R, RO> {}

Shape of supported resource plugins PIXI

method test

test: (source: unknown, extension: string) => boolean;

construct signature

new (source: any, options?: RO): R;

interface ISpriteMaskFilter

interface ISpriteMaskFilter extends Filter {}

property maskSprite

maskSprite: IMaskTarget;

interface ISpriteMaskTarget

interface ISpriteMaskTarget extends IMaskTarget {}

property anchor

anchor: Point;

property worldAlpha

worldAlpha: number;

interface ISupportDict

interface ISupportDict {}

property uint32Indices

uint32Indices: boolean;

interface ISVGResourceOptions

interface ISVGResourceOptions {}

property autoLoad

autoLoad?: boolean;

property crossorigin

crossorigin?: boolean | string;

property height

height?: number;

property scale

scale?: number;

property source

source?: string;

property width

width?: number;

interface ISystem

interface ISystem<InitOptions = null, DestroyOptions = null> {}

Interface for systems used by the PIXI.Renderer. PIXI

method destroy

destroy: (options?: DestroyOptions) => void;

Generic destroy methods to be overridden by the subclass

method init

init: (options?: InitOptions) => void;

interface ISystemConstructor

interface ISystemConstructor<R = Renderer> {}

Types for system and pipe classes.

construct signature

new (renderer: R): ISystem;

interface ITextureBorders

interface ITextureBorders {}

Stores the width of the non-scalable borders, for example when used with PIXI.NineSlicePlane texture. PIXI 7.2.0

property bottom

bottom: number;

bottom border in pixels

property left

left: number;

left border in pixels

property right

right: number;

right border in pixels

property top

top: number;

top border in pixels

interface ITypedArray

interface ITypedArray extends IArrayBuffer {}

PixiJS classes use this type instead of ArrayBuffer and typed arrays to support expressions like geometry.buffers[0].data[0] = position.x.
Gives access to indexing and length field. - @popelyshev: If data is actually ArrayBuffer and throws Exception on indexing - its user problem :) PIXI

property BYTES_PER_ELEMENT

readonly BYTES_PER_ELEMENT: number;

property length

readonly length: number;

index signature

[index: number]: number;

interface IUniformData

interface IUniformData {}

property index

index: number;

property isArray

isArray: boolean;

property name

name: string;

property size

size: number;

property type

type: string;

property value

value: any;

interface IUniformParser

interface IUniformParser {}

method code

code: (name: string, uniform: any) => string;

method codeUbo

codeUbo: (name: string, uniform: any) => string;

method test

test: (data: unknown, uniform: any) => boolean;

interface IUnloadableTexture

interface IUnloadableTexture {}

property children

children: IUnloadableTexture[];

interface IVideoResourceOptions

interface IVideoResourceOptions {}

property autoLoad

autoLoad?: boolean;

property autoPlay

autoPlay?: boolean;

property crossorigin

crossorigin?: boolean | string;

property loop

loop?: boolean;

property muted

muted?: boolean;

property playsinline

playsinline?: boolean;

property updateFPS

updateFPS?: number;

interface IVideoResourceOptionsElement

interface IVideoResourceOptionsElement {}

property mime

mime: string;

property src

src: string;

interface Renderer

interface Renderer extends GlobalMixins.Renderer {}

interface StartupSystemOptions

interface StartupSystemOptions {}

Options for the startup system. PIXI

property hello

hello: boolean;

Whether to log the version and type information of renderer to console. PIXI.IRendererOptions

interface Texture

interface Texture extends GlobalMixins.Texture, EventEmitter {}

interface ViewSystemOptions

interface ViewSystemOptions {}

Options for the view system. PIXI

property autoDensity

autoDensity?: boolean;

Whether the CSS dimensions of the renderer's view should be resized automatically. PIXI.IRendererOptions

property height

height?: number;

The height of the renderer's view. PIXI.IRendererOptions

property resolution

resolution?: number;

The resolution / device pixel ratio of the renderer. PIXI.IRendererOptions

property view

view?: ICanvas;

The canvas to use as the view. If omitted, a new canvas will be created. PIXI.IRendererOptions

property width

width?: number;

The width of the renderer's view. PIXI.IRendererOptions

Type Aliases

type BackgroundSytemOptions

type BackgroundSytemOptions = BackgroundSystemOptions;

Options for the background system. PIXI
See Also
- PIXI.BackgroundSystemOptions
Deprecated
since 7.2.3

type BufferType

type BufferType =
    | null
    | Int8Array
    | Uint8Array
    | Uint8ClampedArray
    | Int16Array
    | Uint16Array
    | Int32Array
    | Uint32Array
    | Float32Array;

type IAutoDetectOptions

type IAutoDetectOptions =
    | ISize
    | ICubeResourceOptions
    | IImageResourceOptions
    | ISVGResourceOptions
    | IVideoResourceOptions
    | IResourcePluginOptions;

type ImageSource

type ImageSource =
    | HTMLImageElement
    | HTMLVideoElement
    | ImageBitmap
    | ICanvas
    | VideoFrame;

Value types for the constructor of PIXI.BaseTexture, including: - HTMLImageElement - HTMLVideoElement - ImageBitmap - PIXI.ICanvas - VideoFrame PIXI

type IRenderOptions

type IRenderOptions = IRendererOptions;

See Also
- PIXI.IRendererOptions
Deprecated
since 7.2.0

type IResourcePluginOptions

type IResourcePluginOptions = {
    [key: string]: any;
};

type TextureSource

type TextureSource = string | BaseTexture | ImageSource;

type UniformsSyncCallback

type UniformsSyncCallback = (...args: any[]) => void;

Package Files (81)

Dependencies (8)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@pixi/core.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@pixi/core)

HTML

<a href="https://www.jsdocs.io/package/@pixi/core"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 9 months ago.
Package analyzed in 12999 ms.
Missing or incorrect documentation? Open an issue for this package.

@pixi/core

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Variables

variable defaultFilterVertex

variable defaultVertex

variable INSTALLED

Example 1

Modifiers

variable uniformParsers

variable VERSION

Functions

function autoDetectRenderer

Parameter options

function autoDetectResource

Parameter source

Parameter options

Parameter

Parameter

Parameter

Parameter

Parameter

Parameter

Parameter

Parameter

Returns

function checkMaxIfStatementsInShader

function createUBOElements

Parameter uniformData

function generateProgram

Parameter gl

Parameter program

function generateUniformBufferSync

function getTestContext

Returns

function getUBOData

function unsafeEvalSupported

Returns

Classes

class AbstractMultiResource

constructor

Parameter length

Parameter options

Parameter

Parameter

property baseTexture

property itemDirtyIds

Modifiers

property items

Modifiers

property length

method addBaseTextureAt

Parameter baseTexture

Parameter index

Returns

method addResourceAt

Parameter resource

Parameter index

Returns

method bind

Parameter baseTexture

method dispose

method initFromArray

Parameter resources

Parameter options

method load

Returns

method unbind

Parameter baseTexture

class ArrayResource

constructor

Parameter source

Parameter options

Parameter