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(width, height, options)

core/renderers/webgl/WebGLRenderer.js, line 30
Name Type Default Description
width number 0 optional

the width of the canvas view
height number 0 optional

the height of the canvas view
options object optional

The optional renderer parameters

Name Type Default Description
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.

Extends

Members

backgroundColor

Sets the background color.

Methods

bindRenderTarget(renderTarget){PIXI.WebGLRenderer}

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

Changes the current render target to the one given in parameter

Name Type Description
renderTarget PIXI.RenderTarget

the new render target
Returns:
Type Description
PIXI.WebGLRenderer Returns itself.

bindRenderTexture(renderTexture, transform){PIXI.WebGLRenderer}

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

Binds a render texture for rendering

Name Type Description
renderTexture PIXI.RenderTexture

The render texture to render
transform PIXI.Transform

The transform to be applied to the render texture
Returns:
Type Description
PIXI.WebGLRenderer Returns itself.

bindShader(shader){PIXI.WebGLRenderer}

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

Changes the current shader to the one given in parameter

Name Type Description
shader PIXI.Shader

the new shader
Returns:
Type Description
PIXI.WebGLRenderer Returns itself.

bindTexture(texture, location){PIXI.WebGLRenderer}

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

Binds the texture ... @mat

Name Type Default Description
texture PIXI.Texture

the new texture
location number 0

the texture location
Returns:
Type Description
PIXI.WebGLRenderer Returns itself.

clear(clearColor)

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

Erases the active render target and fills the drawing area with a colour

Name Type Description
clearColor number optional

The colour

createVao(){VertexArrayObject}

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

Creates a new VAO from this renderer's context and state.

Returns:
Type Description
VertexArrayObject The new VAO.

destroy(removeView)

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

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

flush()

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

This shoudl be called if you wish to do some custom rendering
It will basically render anything that may be batched up such as sprites

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

core/renderers/SystemRenderer.js, line 225

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

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

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

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 487

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

Returns:
Type Description
PIXI.WebGLRenderer Returns itself.

resize(width, height)

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

Resizes the webGL view to the specified width and height.

Name Type Description
width number

the new width of the webGL view
height number

the new height of the webGL view

setBlendMode(blendMode)

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

Resizes the webGL view to the specified width and height.

Name Type Description
blendMode number

the desired blend mode

setObjectRenderer(objectRenderer)

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

Changes the current renderer to the one given in parameter

Name Type Description
objectRenderer PIXI.ObjectRenderer

The object renderer to use.

setTransform(matrix)

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

Sets the transform of the active render target to the given matrix

Name Type Description
matrix PIXI.Matrix

The transformation matrix