PIXI

Class: WebGLRenderer

PIXI. WebGLRenderer

The WebGLRenderer draws the scene and all its content onto a webGL enabled canvas. This renderer should be used for browsers that support webGL. This Render works by automatically managing webGLBatchs. 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 :)

new PIXI.WebGLRenderer(options)

core/renderers/webgl/WebGLRenderer.js, line 33
Name Type Description
options object optional

The optional renderer parameters

Name Type Default Description
width number 800 optional

the width of the screen
height number 600 optional

the height of the screen
view HTMLCanvasElement optional

the canvas to use as a view, optional
transparent boolean false optional

If the render view is transparent, default false
autoResize boolean false optional

If the render view is automatically resized, default false
antialias boolean false optional

sets antialias. If not available natively then FXAA antialiasing is used
forceFXAA boolean false optional

forces FXAA antialiasing to be used over native. FXAA is faster, but may not always look as great
resolution number 1 optional

The resolution / device pixel ratio of the renderer. The resolution of the renderer retina would be 2.
clearBeforeRender boolean true optional

This sets if the CanvasRenderer 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.
preserveDrawingBuffer boolean false optional

enables drawing buffer preservation, enable this if you need to call toDataUrl on the webgl context.
roundPixels boolean false optional

If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation.
legacy boolean false optional

If true Pixi will aim to ensure compatibility with older / less advanced devices. If you experiance unexplained flickering try setting this to true.

Extends

Members

autoResizeboolean

Whether css dimensions of canvas view should be resized to screen dimensions automatically

backgroundColornumber

The background color to fill if not transparent

blendModesobject.<string, mixed>

Tracks the blend modes useful for this renderer.

clearBeforeRenderboolean

This sets if the CanvasRenderer will clear the canvas or not before the new render pass. If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every frame to set the canvas background color. If the scene is transparent Pixi 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.

extractPIXI.extract.WebGLExtract

Collection of methods for extracting data (image, pixels, etc.) from a display object or render texture

See:

readonlyheightnumber

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

Default Value:
  • 600

readonlyoptionsObject

The supplied constructor options.

readonlypluginsobject

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

Support tabbing interactive elements.
extract PIXI.extract.WebGLExtract

Extract image data from renderer.
interaction PIXI.interaction.InteractionManager

Handles mouse, touch and pointer events.
prepare PIXI.prepare.WebGLPrepare

Pre-render display objects.

preserveDrawingBufferboolean

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

resolutionnumber

The resolution / device pixel ratio of the renderer

Default Value:
  • 1

roundPixelsboolean

If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. Handy for crisp pixel art and speed on legacy devices.

screenPIXI.Rectangle

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

Its safe to use as filterArea or hitArea for whole stage

transparentboolean

Whether the render view is transparent

typenumber

The type of this renderer as a standardised const

See:

viewHTMLCanvasElement

The canvas element that everything is drawn to

readonlywidthnumber

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

Default Value:
  • 800

Methods

destroy(removeView)

core/renderers/webgl/WebGLRenderer.js, line 304

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

Name Type Default Description
removeView boolean false optional

Removes the Canvas element from the DOM. See: https://github.com/pixijs/pixi.js/issues/2233

inherited generateTexture(displayObject, scaleMode, resolution){PIXI.Texture}

core/renderers/SystemRenderer.js, line 247

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 Description
displayObject PIXI.DisplayObject

The displayObject the object will be generated from
scaleMode number

Should be one of the scaleMode consts
resolution number

The resolution / device pixel ratio of the texture being generated
Returns:
Type Description
PIXI.Texture a texture of the graphics object

registerPlugin(pluginName, ctor)

core/renderers/webgl/WebGLRenderer.js, line 331

Adds a plugin to the renderer.

Name Type Description
pluginName string

The name of the plugin.
ctor function

The constructor function or class for the plugin.

render(displayObject, renderTexture, clear, transform, skipUpdateTransform)

core/renderers/webgl/WebGLRenderer.js, line 227

Renders the object to its webGL view

Name Type Description
displayObject PIXI.DisplayObject

the object to be rendered
renderTexture PIXI.RenderTexture

The render texture to render to.
clear boolean optional

Should the canvas be cleared before the new render
transform PIXI.Transform optional

A transform to apply to the render texture before rendering.
skipUpdateTransform boolean optional

Should we skip the update transform pass?

reset(){PIXI.WebGLRenderer}

core/renderers/webgl/WebGLRenderer.js, line 291

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

Returns:
Type Description
PIXI.WebGLRenderer Returns itself.

resize(screenWidth, screenHeight)

core/renderers/webgl/WebGLRenderer.js, line 280

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

core/renderers/webgl/WebGLRenderer.js, line 185

Fired when the WebGL context is set.

Name Type Description
gl WebGLRenderingContext

WebGL context.

postrender

core/renderers/webgl/WebGLRenderer.js, line 173

Fired after rendering finishes.

prerender

core/renderers/webgl/WebGLRenderer.js, line 179

Fired before rendering starts.