@pixi/core

@pixi/core

Version 7.4.2
Published 5 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;

@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