Abstract Class: AbstractRenderer<PIPES, OPTIONS, CANVAS>

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:149

The base class for a PixiJS Renderer. It contains the shared logic for all renderers.

You should not use this class directly, but instead use WebGLRenderer or WebGPURenderer. Alternatively, you can also use autoDetectRenderer if you want us to determine the best renderer for you.

The renderer is composed of systems that manage specific tasks. The following systems are added by default whenever you create a renderer:

| Generic Systems | Systems that manage functionality that all renderer types share | | ------------------------------------ | ----------------------------------------------------------------------------- | | ViewSystem | This manages the main view of the renderer usually a Canvas | | BackgroundSystem | This manages the main views background color and alpha | | EventSystem | This manages UI events. | | AccessibilitySystem | This manages accessibility features. Requires import 'pixi.js/accessibility'|

| Core Systems | Provide an optimised, easy to use API to work with WebGL/WebGPU | | ------------------------------------ | ----------------------------------------------------------------------------- | | GlobalUniformSystem | This manages shaders, programs that run on the GPU to calculate 'em pixels. | | TextureGCSystem | This will automatically remove textures from the GPU if they are not used. |

| PixiJS High-Level Systems | Set of specific systems designed to work with PixiJS objects | | ------------------------------------ | ----------------------------------------------------------------------------- | | HelloSystem | Says hello, buy printing out the pixi version into the console log (along with the renderer type) | | GenerateTextureSystem | This adds the ability to generate textures from any Container | | FilterSystem | This manages the filtering pipeline for post-processing effects. | | PrepareSystem | This manages uploading assets to the GPU. Requires import 'pixi.js/prepare'| | ExtractSystem | This extracts image data from display objects. |

The breadth of the API surface provided by the renderer is contained within these systems.

Advanced

Extends

• EventEmitter<{ resize: [number, number, number]; }>

Extended by

• CanvasRenderer
• WebGLRenderer
• WebGPURenderer

Type Parameters

PIPES

PIPES

OPTIONS

OPTIONS extends SharedRendererOptions

CANVAS

CANVAS extends ICanvas = HTMLCanvasElement

Constructors

Constructor

> new AbstractRenderer<PIPES, OPTIONS, CANVAS>(config): AbstractRenderer<PIPES, OPTIONS, CANVAS>

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:217

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

Parameters

config

RendererConfig

the config for the system manager

Returns

AbstractRenderer<PIPES, OPTIONS, CANVAS>

Overrides

EventEmitter.constructor

Properties

_initOptions

> protected _initOptions: OPTIONS

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:208

_roundPixels

> _roundPixels: 0 | 1

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:197

Internal

background

> background: BackgroundSystem

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:205

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

config

> protected config: RendererConfig

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:209

name

> readonly name: string

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:191

The name of the renderer.

renderPipes

> readonly renderPipes: PIPES

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:201

Internal

runners

> readonly runners: Runners

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:199

Internal

textureGenerator

> textureGenerator: GenerateTextureSystem

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:207

System that manages the generation of textures from the renderer

tick

> tick: number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:193

The current tick of the renderer.

type

> readonly type: number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:189

Internal

uid

> readonly uid: number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:195

Internal

view

> view: ViewSystem

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:203

The view system manages the main canvas that is attached to the DOM

defaultOptions

> static defaultOptions: object

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:153

The default options for the renderer.

failIfMajorPerformanceCaveat

> failIfMajorPerformanceCaveat: boolean

Should the failIfMajorPerformanceCaveat flag be enabled as a context option used in the isWebGLSupported function. If set to true, a WebGL renderer can fail to be created if the browser thinks there could be performance issues when using WebGL.

In PixiJS v6 this has changed from true to false by default, to allow WebGL to work in as many scenarios as possible. However, some users may have a poor experience, for example, if a user has a gpu or driver version blacklisted by the browser.

If your application requires high performance rendering, you may wish to set this to false. We recommend one of two options if you decide to set this flag to false:

1: Use the Canvas renderer as a fallback in case high performance WebGL is not supported.

2: Call isWebGLSupported (which if found in the utils package) in your code before attempting to create a PixiJS renderer, and show an error message to the user if the function returns false, explaining that their device & browser combination does not support high performance WebGL. This is a much better strategy than trying to create a PixiJS renderer and finding it then fails.

Default

false

resolution

> resolution: number

Default resolution / device pixel ratio of the renderer.

Default

1

roundPixels

> roundPixels: boolean

Should round pixels be forced when rendering?

Default

false

prefixed

> static prefixed: string | boolean

Defined in: node_modules/eventemitter3/index.d.ts:9

Inherited from

EventEmitter.prefixed

Accessors

canvas

Get Signature

> get canvas(): CANVAS

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:269

The canvas element that everything is drawn to.

Returns

CANVAS

height

Get Signature

> get height(): number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:264

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

Default

600

Returns

number

lastObjectRendered

Get Signature

> get lastObjectRendered(): Container

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:274

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

Returns

Container

renderingToScreen

Get Signature

> get renderingToScreen(): boolean

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:280

Flag if we are rendering to the screen vs renderTexture

Default

true

Returns

boolean

resolution

Get Signature

> get resolution(): number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:251

The resolution / device pixel ratio of the renderer.

Returns

number

Set Signature

> set resolution(value): void

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:252

Parameters

value

number

Returns

void

roundPixels

Get Signature

> get roundPixels(): boolean

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:315

Whether the renderer will round coordinates to whole pixels when rendering. Can be overridden on a per scene item basis.

Returns

boolean

screen

Get Signature

> get screen(): Rectangle

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:286

Measurements of the screen. (0, 0, screenWidth, screenHeight).

Its safe to use as filterArea or hitArea for the whole stage.

Returns

Rectangle

width

Get Signature

> get width(): number

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:259

Same as view.width, actual number of pixels in the canvas by horizontal.

Default

800

Returns

number

Methods

addListener()

> addListener<T>(event, fn, context?): this

Defined in: node_modules/eventemitter3/index.d.ts:45

Type Parameters

T

T extends "resize"

Parameters

event

T

fn

(...args) => void

context?

any

Returns

this

Inherited from

EventEmitter.addListener

clear()

> clear(options?): void

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:249

Clears the render target.

Parameters

options?

ClearOptions

The options to use when clearing the render target.

Returns

void

Advanced

destroy()

> destroy(options?): void

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:304

Parameters

options?

RendererDestroyOptions

Returns

void

emit()

> emit<T>(event, ...args): boolean

Defined in: node_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

Type Parameters

T

T extends "resize"

Parameters

event

T

args

...ArgumentMap<{ resize: [number, number, number]; }>[Extract<T, "resize">]

Returns

boolean

Inherited from

EventEmitter.emit

eventNames()

> eventNames(): "resize"[]

Defined in: node_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered listeners.

Returns

"resize"[]

Inherited from

EventEmitter.eventNames

generateTexture()

> generateTexture(options): Texture

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:310

Generate a texture from a container.

Parameters

options

Container<ContainerChild> | GenerateTextureOptions

options or container target to use when generating the texture

Returns

Texture

a texture

init()

> init(options?): Promise<void>

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:222

Initialize the renderer.

Parameters

options?

Partial<OPTIONS>

The options to use to create the renderer.

Returns

Promise<void>

listenerCount()

> listenerCount(event): number

Defined in: node_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

Parameters

event

"resize"

Returns

number

Inherited from

EventEmitter.listenerCount

listeners()

> listeners<T>(event): (...args) => void[]

Defined in: node_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

Type Parameters

T

T extends "resize"

Parameters

event

T

Returns

(...args) => void[]

Inherited from

EventEmitter.listeners

off()

> off<T>(event, fn?, context?, once?): this

Defined in: node_modules/eventemitter3/index.d.ts:69

Type Parameters

T

T extends "resize"

Parameters

event

T

fn?

(...args) => void

context?

any

once?

boolean

Returns

this

Inherited from

EventEmitter.off

on()

> on<T>(event, fn, context?): this

Defined in: node_modules/eventemitter3/index.d.ts:40

Add a listener for a given event.

Type Parameters

T

T extends "resize"

Parameters

event

T

fn

(...args) => void

context?

any

Returns

this

Inherited from

EventEmitter.on

once()

> once<T>(event, fn, context?): this

Defined in: node_modules/eventemitter3/index.d.ts:54

Add a one-time listener for a given event.

Type Parameters

T

T extends "resize"

Parameters

event

T

fn

(...args) => void

context?

any

Returns

this

Inherited from

EventEmitter.once

removeAllListeners()

> removeAllListeners(event?): this

Defined in: node_modules/eventemitter3/index.d.ts:79

Remove all listeners, or those of the specified event.

Parameters

event?

"resize"

Returns

this

Inherited from

EventEmitter.removeAllListeners

removeListener()

> removeListener<T>(event, fn?, context?, once?): this

Defined in: node_modules/eventemitter3/index.d.ts:63

Remove the listeners of a given event.

Type Parameters

T

T extends "resize"

Parameters

event

T

fn?

(...args) => void

context?

any

once?

boolean

Returns

this

Inherited from

EventEmitter.removeListener

render()

Call Signature

> render(options): void

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:229

Renders the object to its view.

Parameters

options

Container<ContainerChild> | RenderOptions

The options to render with.

Container<ContainerChild>

RenderOptions

Returns

void

Call Signature

> render(container, options): void

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:231

Parameters

container

Container

options

renderTexture

any

Returns

void

Deprecated

since 8.0.0

resetState()

> resetState(): void

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:345

Resets the rendering state of the renderer. This is useful when you want to use the WebGL context directly and need to ensure PixiJS's internal state stays synchronized. When modifying the WebGL context state externally, calling this method before the next Pixi render will reset all internal caches and ensure it executes correctly.

This is particularly useful when combining PixiJS with other rendering engines like Three.js:

// Reset Three.js state
threeRenderer.resetState();

// Render a Three.js scene
threeRenderer.render(threeScene, threeCamera);

// Reset PixiJS state since Three.js modified the WebGL context
pixiRenderer.resetState();

// Now render Pixi content
pixiRenderer.render(pixiScene);

Returns

void

Advanced

resize()

> resize(desiredScreenWidth, desiredScreenHeight, resolution?): void

Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/system/AbstractRenderer.d.ts:240

Resizes the WebGL view to the specified width and height.

Parameters

desiredScreenWidth

number

The desired width of the screen.

desiredScreenHeight

number

The desired height of the screen.

resolution?

number

The resolution / device pixel ratio of the renderer.

Returns

void