PIXI.Renderer

class Renderer extends PIXI.AbstractRenderer

The Renderer draws the scene and all its content onto a WebGL enabled canvas.

This renderer should be used for browsers that support WebGL.

This renderer works by automatically managing WebGLBatchesm, so no need for Sprite Batches or Sprite Clouds. Don't forget to add the view to your DOM or you will not see anything!

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

System	Description
PIXI.BatchSystem	This manages object renderers that defer rendering until a flush.
PIXI.ContextSystem	This manages the WebGL context and extensions.
PIXI.EventSystem	This manages UI events.
PIXI.FilterSystem	This manages the filtering pipeline for post-processing effects.
PIXI.FramebufferSystem	This manages framebuffers, which are used for offscreen rendering.
PIXI.GeometrySystem	This manages geometries & buffers, which are used to draw object meshes.
PIXI.MaskSystem	This manages masking operations.
PIXI.ProjectionSystem	This manages the `projectionMatrix`, used by shaders to get NDC coordinates.
PIXI.RenderTextureSystem	This manages render-textures, which are an abstraction over framebuffers.
PIXI.ScissorSystem	This handles scissor masking, and is used internally by MaskSystem
PIXI.ShaderSystem	This manages shaders, programs that run on the GPU to calculate 'em pixels.
PIXI.StateSystem	This manages the WebGL state variables like blend mode, depth testing, etc.
PIXI.StencilSystem	This handles stencil masking, and is used internally by MaskSystem
PIXI.TextureSystem	This manages textures and their resources on the GPU.
PIXI.TextureGCSystem	This will automatically remove textures from the GPU if they are not used.

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

Constructor

new PIXI.Renderer(options: IRendererOptions) → {}

Parameters:
Name	Type	Attributes	Default	Description
options	IRendererOptions	<optional>		The optional renderer parameters.
options.width	number	<optional>	800	The width of the screen.
options.height	number	<optional>	600	The height of the screen.
options.view	HTMLCanvasElement	<optional>		The canvas to use as a view, optional.
options.useContextAlpha	boolean	<optional>	true	Pass-through value for canvas' context `alpha` property. If you want to set transparency, please use `backgroundAlpha`. This option is for cases where the canvas needs to be opaque, possibly for performance reasons on some older devices.
options.autoDensity	boolean	<optional>	false	Resizes renderer view in CSS pixels to allow for resolutions other than 1.
options.antialias	boolean	<optional>	false	Sets antialias. If not available natively then FXAA antialiasing is used.
options.resolution	number	<optional>	PIXI.settings.RESOLUTION	The resolution / device pixel ratio of the renderer.
options.clearBeforeRender	boolean	<optional>	true	This sets if the renderer will clear the canvas or not before the new render pass. If you wish to set this to false, you must set preserveDrawingBuffer to `true`.
options.preserveDrawingBuffer	boolean	<optional>	false	Enables drawing buffer preservation, enable this if you need to call toDataUrl on the WebGL context.
options.backgroundColor	number	<optional>	0x000000	The background color of the rendered area (shown if not transparent).
options.backgroundAlpha	number	<optional>	1	Value from 0 (fully transparent) to 1 (fully opaque).
options.powerPreference	string	<optional>		Parameter passed to WebGL context, set to "high-performance" for devices with dual graphics card.
options.context	object	<optional>		If WebGL context already exists, all parameters must be taken from it.

Summary

Properties from Renderer

IRendererPlugins	static __plugins
PIXI.BatchSystem	batch
PIXI.BufferSystem	buffer
PIXI.ContextSystem	context
number	CONTEXT_UID Unique UID assigned to the renderer's WebGL context.
PIXI.Extract	extract
PIXI.FilterSystem	filter
PIXI.FramebufferSystem	framebuffer
PIXI.GeometrySystem	geometry
WebGLRenderingContext	gl
PIXI.UniformGroup	globalUniforms Global uniforms
PIXI.MaskSystem	mask
PIXI.MSAA_QUALITY	multisample
PIXI.ProjectionSystem	projection
boolean	renderingToScreen = true
PIXI.RenderTextureSystem	renderTexture
PIXI.ScissorSystem	scissor
PIXI.ShaderSystem	shader
PIXI.StateSystem	state
PIXI.StencilSystem	stencil
PIXI.TextureSystem	texture
PIXI.TextureGCSystem	textureGC

Methods from Renderer

void	static registerPlugin(pluginName: string, ctor: IRendererPluginConstructor)
this	addSystem(ClassRef: ISystemConstructor, name: string)
void	clear() Clear the frame buffer.
void	destroy(removeView: boolean)
void	render(displayObject: PIXI.IRenderableObject, options: object)
void	render(displayObject: PIXI.IRenderableObject, renderTexture: PIXI.RenderTexture, clear: boolean, transform: PIXI.Matrix, skipUpdateTransform: boolean)
this	reset()
void	resize(desiredScreenWidth: number, desiredScreenHeight: number)

Events from Renderer

	context
	postrender
	prerender
	resize

Properties inherited from AbstractRenderer

boolean	autoDensity = --
number	backgroundAlpha
number	backgroundColor
boolean	clearBeforeRender
number	height = 600
object	options
object	plugins
boolean	preserveDrawingBuffer
number	resolution = PIXI.settings.RESOLUTION
PIXI.Rectangle	screen Measurements of the screen. (0, 0, screenWidth, screenHeight).
number	type = PIXI.RENDERER_TYPE.UNKNOWN
boolean	useContextAlpha
HTMLCanvasElement	view
number	width = 800
number	protected _backgroundColor = 0
Array<number>	protected _backgroundColorRgba
string	protected _backgroundColorString = "#000000"
PIXI.DisplayObject	protected _lastObjectRendered = undefined

Methods inherited from AbstractRenderer

PIXI.RenderTexture

generateTexture(displayObject: PIXI.IRenderableObject, options: object)

PIXI.RenderTexture

generateTexture(displayObject: PIXI.IRenderableObject, scaleMode: PIXI.SCALE_MODES, resolution: number, region: PIXI.Rectangle)

void

protected initPlugins(staticMap: object)

Public Properties

__plugins Renderer.ts:610

static __plugins: IRendererPlugins

Collection of installed plugins. These are included by default in PIXI, but can be excluded by creating a custom build. Consult the README for more information about creating custom builds and excluding plugins.

Properties:
Name	Type	Description
accessibility	PIXI.AccessibilityManager	Support tabbing interactive elements.
batch	PIXI.BatchRenderer	Batching of Sprite, Graphics and Mesh objects.
extract	PIXI.Extract	Extract image data from renderer.
interaction	PIXI.InteractionManager	Handles mouse, touch and pointer events.
particle	PIXI.ParticleRenderer	Renderer for ParticleContainer objects.
prepare	PIXI.Prepare	Pre-render display objects.
tilingSprite	PIXI.TilingSpriteRenderer	Renderer for TilingSprite objects.

batch Renderer.ts:188

batch: PIXI.BatchSystem

Batch system instance

buffer Renderer.ts:134

buffer: PIXI.BufferSystem

Buffer system instance

context Renderer.ts:110

context: PIXI.ContextSystem

Context system instance

CONTEXT_UID Renderer.ts:87

CONTEXT_UID: number

Unique UID assigned to the renderer's WebGL context.

extract Renderer.ts:595

extract: PIXI.Extract

Deprecated: since 6.0.0

Please use plugins.extract instead.

filter Renderer.ts:176

filter: PIXI.FilterSystem

Filter system instance

framebuffer Renderer.ts:146

framebuffer: PIXI.FramebufferSystem

Framebuffer system instance

geometry Renderer.ts:140

geometry: PIXI.GeometrySystem

Geometry system instance

gl Renderer.ts:77

gl: WebGLRenderingContext

WebGL context, set by this.context.

globalUniforms Renderer.ts:84

globalUniforms: PIXI.UniformGroup

Global uniforms

mask Renderer.ts:104

mask: PIXI.MaskSystem

Mask system instance

multisample Renderer.ts:97

multisample: PIXI.MSAA_QUALITY

The number of msaa samples of the canvas.

projection Renderer.ts:164

projection: PIXI.ProjectionSystem

Projection system instance

renderingToScreen Renderer.ts:90

renderingToScreen: boolean = true

Flag if we are rendering to the screen vs renderTexture

renderTexture Renderer.ts:182

renderTexture: PIXI.RenderTextureSystem

RenderTexture system instance

scissor Renderer.ts:152

scissor: PIXI.ScissorSystem

Scissor system instance

shader Renderer.ts:122

shader: PIXI.ShaderSystem

Shader system instance

state Renderer.ts:116

state: PIXI.StateSystem

State system instance

stencil Renderer.ts:158

stencil: PIXI.StencilSystem

Stencil system instance

texture Renderer.ts:128

texture: PIXI.TextureSystem

Texture system instance

textureGC Renderer.ts:170

textureGC: PIXI.TextureGCSystem

Texture garbage collector system instance

Public Methods

registerPlugin Renderer.ts:625

static registerPlugin(pluginName: string, ctor: IRendererPluginConstructor) → {void}

Deprecated: since 6.5.0

Use the PIXI.extensions.add API to register plugins.

Parameters:
Name	Type	Description
pluginName	string	The name of the plugin.
ctor	IRendererPluginConstructor	The constructor function or class for the plugin.

Returns:
Type	Description
void

addSystem Renderer.ts:372

addSystem(ClassRef: ISystemConstructor, name: string) → {this}

Add a new system to the renderer.

Parameters:
Name	Type	Description
ClassRef	ISystemConstructor	Class reference
name	string	Property name for system, if not specified will use a static `name` property on the class itself. This name will be assigned as s property on the Renderer so make sure it doesn't collide with properties on Renderer.

Returns:
Type	Description
this	Return instance of renderer

clear Renderer.ts:567

clear() → {void}

Clear the frame buffer.

Returns:
Type	Description
void

destroy Renderer.ts:574

destroy(removeView: boolean) → {void}

Removes everything from the renderer (event listeners, spritebatch, etc...)

Parameters:
Name	Type	Attributes	Default	Description
removeView	boolean	<optional>	false	Removes the Canvas element from the DOM. See: https://github.com/pixijs/pixi.js/issues/2233

Returns:
Type	Description
void

render Renderer.ts:416

render(displayObject: PIXI.IRenderableObject, options: object) → {void}

Renders the object to its WebGL view.

Parameters:
Name	Type	Attributes	Default	Description
displayObject	PIXI.IRenderableObject			The object to be rendered.
options	object	<optional>		Object to use for render options.
options.renderTexture	PIXI.RenderTexture	<optional>		The render texture to render to.
options.clear	boolean	<optional>	true	Should the canvas be cleared before the new render.
options.transform	PIXI.Matrix	<optional>		A transform to apply to the render texture before rendering.
options.skipUpdateTransform	boolean	<optional>	false	Should we skip the update transform pass?

Returns:
Type	Description
void

render Renderer.ts:427

render(displayObject: PIXI.IRenderableObject, renderTexture: PIXI.RenderTexture, clear: boolean, transform: PIXI.Matrix, skipUpdateTransform: boolean) → {void}

Deprecated: Since 6.0.0

Please use the option render arguments instead.

Parameters:
Name	Type	Attributes
displayObject	PIXI.IRenderableObject
renderTexture	PIXI.RenderTexture	<optional>
clear	boolean	<optional>
transform	PIXI.Matrix	<optional>
skipUpdateTransform	boolean	<optional>

Returns:
Type	Description
void

reset Renderer.ts:556

reset() → {this}

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

Returns:
Type	Description
this	Returns itself.

resize Renderer.ts:544

resize(desiredScreenWidth: number, desiredScreenHeight: number) → {void}

Resizes the WebGL view to the specified width and height.

Parameters:
Name	Type	Description
desiredScreenWidth	number	The desired width of the screen.
desiredScreenHeight	number	The desired height of the screen.

Returns:
Type	Description
void

Events

context Renderer.ts:407

Fired when the WebGL context is set.

Parameters:
Name	Type	Description
gl	WebGLRenderingContext	WebGL context.

postrender Renderer.ts:397

Fired after rendering finishes.

prerender Renderer.ts:402

Fired before rendering starts.

resize AbstractRenderer.ts:286

Fired after view has been resized.

Parameters:
Name	Type	Description
screenWidth	number	The new width of the screen.
screenHeight	number	The new height of the screen.