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 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.

new PIXI.Renderer (options) overrides

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.

Extends

Members

PIXI.Renderer.plugins object staticreadonly

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.

particle PIXI.ParticleRenderer

Renderer for ParticleContainer objects.

prepare PIXI.Prepare

Pre-render display objects.

tilingSprite PIXI.TilingSpriteRenderer

Renderer for TilingSprite objects.

autoDensity boolean

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

Default Value:
  • --

backgroundAlpha number

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

backgroundColor number

The background color to fill if not transparent

clearBeforeRender boolean

This sets if the Renderer 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.

gl WebGLRenderingContext readonly

WebGL context, set by the contextSystem (this.context)

Default Value:
  • undefined

globalUniforms PIXI.UniformGroup

Global uniforms

height number readonly

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

Default Value:
  • 600

options Object readonly

The supplied constructor options.

plugins object readonly

Collection of plugins.

preserveDrawingBuffer boolean

The value of the preserveDrawingBuffer flag affects whether or not the contents of the stencil buffer is retained after rendering.

renderingToScreen boolean readonly

Flag if we are rendering to the screen vs renderTexture

Default Value:
  • true

resolution number

The resolution / device pixel ratio of the renderer.

Default Value:
  • PIXI.settings.RESOLUTION

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

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

useContextAlpha boolean

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

view HTMLCanvasElement

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

_backgroundColor number protected

The background color as a number.

Default Value:
  • 0

_backgroundColorRgba Array<number> protected

The background color as an [R, G, B, A] array.

_backgroundColorString string protected

The background color as a string.

Default Value:
  • "#000000"

_lastObjectRendered PIXI.DisplayObject protected

The last root object that the renderer tried to render.

Default Value:
  • undefined

Methods

PIXI.Renderer.registerPlugin (pluginName, ctor) void static

Adds a plugin to the renderer.

Name Type Description
pluginName keyof

The name of the plugin.

ctor IRendererPluginConstructor

The constructor function or class for the plugin.

PIXI.Renderer.registerSystem (systemName, ctor) void static

Adds a system to the renderer.

Name Type Description
systemName keyof

The name of the system.

ctor ISystemConstructor

The constructor function or class for the system.

addPlugin (ClassRef, name) this

Add a new plugin to the renderer.

Name Type Description
ClassRef IRendererPluginConstructor

Class reference

name string

Property name for the plugin.

Returns:
Type Description
this

addSystem (ClassRef, name) PIXI.Renderer

Add a new system to the renderer.

Name Type Description
ClassRef ISystemConstructor

Class reference

name keyof

Property name for system

Returns:
Type Description
PIXI.Renderer Return instance of renderer

clear () void

Clear the frame buffer

destroy (removeView) void

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, scaleMode, resolution, region, multisample) PIXI.RenderTexture

Useful function that returns a texture of the display object that can then be used to create sprites This can be quite useful if your displayObject is complicated and needs to be reused multiple times.

Name Type Attributes Description
displayObject PIXI.IRenderableObject

The displayObject the object will be generated from.

scaleMode PIXI.SCALE_MODES <optional>

The scale mode of the texture.

resolution number <optional>

The resolution / device pixel ratio of the texture being generated.

region PIXI.Rectangle <optional>

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

multisample PIXI.MSAA_QUALITY <optional>

The number of samples of the frame buffer.

Returns:
Type Description
PIXI.RenderTexture A texture of the graphics object.

render (displayObject, options) void

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?

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

Returns:
Type Description
PIXI.Renderer Returns itself.

resize (screenWidth, screenHeight) void

Resizes the WebGL view to the specified width and height.

Name Type Description
screenWidth number

The new width of the screen.

screenHeight number

The new height of the screen.

Events

context

Fired when the WebGL context is set.

Name Type Description
gl WebGLRenderingContext

WebGL context.

postrender

Fired after rendering finishes.

prerender

Fired before rendering starts.

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.