PixiJS

Class: Renderer

PIXI.Renderer

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

This renderer should be used for browsers that support WebGL.

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

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

System Description
Generic Systems Systems that manage functionality that all renderer types share
PIXI.ViewSystem This manages the main view of the renderer usually a Canvas
PIXI.PluginSystem This manages plugins for the renderer
PIXI.BackgroundSystem This manages the main views background color and alpha
PIXI.StartupSystem Boots up a renderer and initiatives all the systems
PIXI.EventSystem This manages UI events.
WebGL Core Systems Provide an optimised, easy to use API to work with WebGL
PIXI.ContextSystem This manages the WebGL context and extensions.
PIXI.FramebufferSystem This manages framebuffers, which are used for offscreen rendering.
PIXI.GeometrySystem This manages geometries & buffers, which are used to draw object meshes.
PIXI.ShaderSystem This manages shaders, programs that run on the GPU to calculate 'em pixels.
PIXI.StateSystem This manages the WebGL state variables like blend mode, depth testing, etc.
PIXI.TextureSystem This manages textures and their resources on the GPU.
PIXI.TextureGCSystem This will automatically remove textures from the GPU if they are not used.
PIXI.MultisampleSystem This manages the multisample const on the WEbGL Renderer
PixiJS High-Level Systems Set of specific systems designed to work with PixiJS objects
PIXI.RenderSystem This adds the ability to render a PIXI.DisplayObject
PIXI.GenerateTextureSystem This adds the ability to generate textures from any PIXI.DisplayObject
PIXI.ProjectionSystem This manages the projectionMatrix, used by shaders to get NDC coordinates.
PIXI.RenderTextureSystem This manages render-textures, which are an abstraction over framebuffers.
PIXI.MaskSystem This manages masking operations.
PIXI.ScissorSystem This handles scissor masking, and is used internally by MaskSystem
PIXI.StencilSystem This handles stencil masking, and is used internally by MaskSystem
PIXI.FilterSystem This manages the filtering pipeline for post-processing effects.
PIXI.BatchSystem This manages object renderers that defer rendering until a flush.
PIXI.Prepare This manages uploading assets to the GPU.
PIXI.Extract This extracts image data from display objects.

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

new PIXI.Renderer (options) overrides

Renderer.ts:284
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 PIXI.ICanvas <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 | string <optional>
 0x000000

The background color of the rendered area (shown if not transparent). Also, accepts hex strings or color names (e.g., 'white').
options.background number | string <optional>

Alias for options.backgroundColor.
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.
options.blit object <optional>

if rendering to a renderTexture, set to true if you want to run blit after the render. defaults to false.
options.hello boolean <optional>
 false

Logs renderer type and version.

Extends

Implements

Members

_multisample PIXI.MultisampleSystem readonly

_multisample system instance

_plugin PIXI.PluginSystem readonly

plugin system instance

_view PIXI.ViewSystem readonly

_view system instance

autoDensity boolean

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

background PIXI.BackgroundSystem readonly

background system instance

backgroundAlpha number Deprecated : since 7.0.0

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

backgroundAlpha Deprecated : since 7.0.0

backgroundColor number Deprecated : since 7.0.0

The background color to fill if not transparent

batch PIXI.BatchSystem readonly

Batch system instance

buffer PIXI.BufferSystem readonly

Buffer system instance

clearBeforeRender boolean Deprecated : since 7.0.0

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

context PIXI.ContextSystem readonly

Context system instance

CONTEXT_UID number

Unique UID assigned to the renderer's WebGL context.

filter PIXI.FilterSystem readonly

Filter system instance

framebuffer PIXI.FramebufferSystem readonly

Framebuffer system instance

geometry PIXI.GeometrySystem readonly

Geometry system instance

gl WebGLRenderingContext readonly

WebGL context, set by this.context.

globalUniforms PIXI.UniformGroup

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

height number

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

Default Value:
  • 600

lastObjectRendered PIXI.IRenderableObject

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

mask PIXI.MaskSystem readonly

Mask system instance

multisample PIXI.MSAA_QUALITY

The number of msaa samples of the canvas.

objectRenderer PIXI.ObjectRendererSystem readonly

_render system instance

plugins IRendererPlugins

Collection of plugins

powerPreference WebGLPowerPreference Deprecated : since 7.0.0

preserveDrawingBuffer boolean Deprecated : since 7.0.0

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

projection PIXI.ProjectionSystem readonly

Projection system instance

rendererLogId string

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

renderingToScreen boolean

Flag if we are rendering to the screen vs renderTexture

renderTexture PIXI.RenderTextureSystem readonly

RenderTexture system instance

resolution number

The resolution / device pixel ratio of the renderer.

scissor PIXI.ScissorSystem readonly

Scissor system instance

screen PIXI.Rectangle

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

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

shader PIXI.ShaderSystem readonly

Shader system instance

startup PIXI.StartupSystem readonly

startup system instance

state PIXI.StateSystem readonly

State system instance

stencil PIXI.StencilSystem readonly

Stencil system instance

texture PIXI.TextureSystem readonly

Texture system instance

textureGC PIXI.TextureGCSystem readonly

Texture garbage collector system instance

textureGenerator PIXI.GenerateTextureSystem readonly

textureGenerator system instance

transformFeedback PIXI.TransformFeedbackSystem readonly

TransformFeedback system instance

type number readonly

The type of the renderer. will be PIXI.RENDERER_TYPE.CANVAS

See:

useContextAlpha boolean Deprecated : since 7.0.0

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.

view PIXI.ICanvas

The canvas element that everything is drawn to.

width number readonly

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

Default Value:
  • 800

Methods

clear () void

Renderer.ts:425

Clear the frame buffer.

destroy (removeView) void overrides

Renderer.ts:432

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

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

generateTexture (displayObject, options) PIXI.RenderTexture

Renderer.ts:637

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.

Name Type Attributes Description
displayObject PIXI.IRenderableObject

The displayObject the object will be generated from.
options object <optional>

Generate texture options.
options.scaleMode PIXI.SCALE_MODES

The scale mode of the texture.
options.resolution number

The resolution / device pixel ratio of the texture being generated.
options.region PIXI.Rectangle

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

The number of samples of the frame buffer.
Returns:
Type Description
PIXI.RenderTexture A texture of the graphics object.

render (displayObject, options) void

Renderer.ts:390

Renders the object to its WebGL view.

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?

reset () this

Renderer.ts:414

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

Returns:
Type Description
this Returns itself.

resize (desiredScreenWidth, desiredScreenHeight) void

Renderer.ts:404

Resizes the WebGL view to the specified width and height.

Name Type Description
desiredScreenWidth number

The desired width of the screen.
desiredScreenHeight number

The desired height of the screen.

Events

context

SystemManager.ts:98

Fired when the WebGL context is set.

Name Type Description
gl WebGLRenderingContext

WebGL context.

postrender

SystemManager.ts:88

Fired after rendering finishes.

prerender

SystemManager.ts:93

Fired before rendering starts.

resize

ViewSystem.ts:115

Fired after view has been resized.

Name Type Description
screenWidth number

The new width of the screen.
screenHeight number

The new height of the screen.

Inherited Properties

From class PIXI.SystemManager

runners { [key: string]: PIXI.Runner } readonly inherited overrides

a collection of runners defined by the user

Inherited Methods

From class PIXI.SystemManager

addRunners (…runnerIds) void inherited overrides

SystemManager.ts:49

Create a bunch of runners based of a collection of ids

Name Type Description
runnerIds string[]

the runner ids to add

addSystem (ClassRef, name) this inherited overrides

SystemManager.ts:61

Add a new system to the renderer.

Name Type Description
ClassRef ISystemConstructor<R>

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

emitWithCustomOptions (runner, options) void inherited overrides

SystemManager.ts:107

A function that will run a runner and call the runners function but pass in different options to each system based on there name.

E.g. If you have two systems added called systemA and systemB you could call do the following:

system.emitWithCustomOptions(init, {
    systemA: {...optionsForA},
    systemB: {...optionsForB},
});

init would be called on system A passing optionsForA and on system B passing optionsForB.

Name Type Description
runner PIXI.Runner

the runner to target
options Record<string, unknown>

key value options for each system

setup (config) void inherited overrides

SystemManager.ts:24

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

Name Type Description
config ISystemConfig<R>

the config for the system manager