Class: WebGLRenderer

Extends

• Tiny.SystemRenderer

Members

_activeRenderTargetTiny.RenderTarget

Holds the current render target

_activeShaderTiny.Shader

Holds the current shader

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 Tiny will use a canvas sized fillRect operation every frame to set the canvas background color. If the scene is transparent Tiny 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.

currentRendererTiny.ObjectRenderer

The currently active ObjectRenderer.

emptyRendererTiny.ObjectRenderer

An empty renderer.

filterManagerTiny.FilterManager

Manages the filters.

Version:

• 1.2.0

readonlyheightnumber

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

maskManagerTiny.MaskManager

Manages the masks using the stencil buffer.

readonlyoptionsobject

The supplied constructor options.

readonlypluginsobject

Collection of installed plugins. These are included by default in Tiny, 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	Tiny.accessibility.AccessibilityManager	Support tabbing interactive elements.
extract	Tiny.extract.WebGLExtract	Extract image data from renderer.
interaction	Tiny.interaction.InteractionManager	Handles mouse, touch and pointer events.
prepare	Tiny.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 Tiny will Math.floor() x/y values when rendering, stopping pixel interpolation.
Handy for crisp pixel art and speed on legacy devices.

screenTiny.Rectangle

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

Its safe to use as filterArea or hitArea for whole stage

stateTiny.WebGLState

The currently active ObjectRenderer.

stencilManagerTiny.StencilManager

Manages the stencil buffer.

textureManagerTiny.TextureManager

Manages textures

Version:

• 1.2.0

transparentboolean

Whether the render view is transparent

typenumber

The type of this renderer as a standardised const

See:

• Tiny.RENDERER_TYPE

viewHTMLCanvasElement

The canvas element that everything is drawn to

readonlywidthnumber

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

Methods

bindRenderTarget(renderTarget) ❯ {Tiny.WebGLRenderer}

tiny/core/renderers/webgl/WebGLRenderer.js, line 460

Changes the current render target to the one given in parameter

Name	Type	Description
renderTarget	Tiny.RenderTarget	the new render target

Returns:

Type	Description
Tiny.WebGLRenderer	Returns itself.

bindRenderTexture(renderTexture, transform) ❯ {Tiny.WebGLRenderer}

tiny/core/renderers/webgl/WebGLRenderer.js, line 429

Binds a render texture for rendering

Name	Type	Description
renderTexture	Tiny.RenderTexture	The render texture to render
transform	Tiny.Transform	The transform to be applied to the render texture

Returns:

Type	Description
Tiny.WebGLRenderer	Returns itself.

bindShader(shader, autoProject) ❯ {Tiny.WebGLRenderer}

tiny/core/renderers/webgl/WebGLRenderer.js, line 482

Changes the current shader to the one given in parameter

Name	Type	Default	Description
shader	Tiny.Shader		the new shader
autoProject	boolean	true	optional Whether automatically set the projection matrix

Returns:

Type	Description
Tiny.WebGLRenderer	Returns itself.

bindTexture(texture, location, forceLocation) ❯ {number}

tiny/core/renderers/webgl/WebGLRenderer.js, line 509

Binds the texture. This will return the location of the bound texture.
It may not be the same as the one you pass in. This is due to optimisation that prevents needless binding of textures. For example if the texture is already bound it will return the current location of the texture instead of the one provided. To bypass this use force location

Name	Type	Description
texture	Tiny.Texture	the new texture
location	number	the suggested texture location
forceLocation	boolean	force the location

Returns:

Type	Description
number	bound texture location

bindVao(vao) ❯ {Tiny.WebGLRenderer}

tiny/core/renderers/webgl/WebGLRenderer.js, line 598

Changes the current Vao to the one given in parameter

Name	Type	Description
vao	Tiny.VertexArrayObject	the new Vao

Returns:

Type	Description
Tiny.WebGLRenderer	Returns itself.

clear(clearColor)

tiny/core/renderers/webgl/WebGLRenderer.js, line 391

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

Name	Type	Description
clearColor	number	optional The colour

clearRenderTexture(renderTexture, clearColor) ❯ {Tiny.WebGLRenderer}

tiny/core/renderers/webgl/WebGLRenderer.js, line 411

Erases the render texture and fills the drawing area with a colour

Name	Type	Description
renderTexture	Tiny.RenderTexture	The render texture to clear
clearColor	number	optional The colour

Returns:

Type	Description
Tiny.WebGLRenderer	Returns itself.

createVao() ❯ {VertexArrayObject}

tiny/core/renderers/webgl/WebGLRenderer.js, line 588

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

Returns:

Type	Description
VertexArrayObject	The new VAO.

destroy(removeView)

tiny/core/renderers/webgl/WebGLRenderer.js, line 667

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

Name	Type	Default	Description
removeView	boolean	false	optional Removes the Canvas element from the DOM.

flush()

tiny/core/renderers/webgl/WebGLRenderer.js, line 351

This should 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, region) ❯ {Tiny.Texture}

tiny/core/renderers/SystemRenderer.js, line 231

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	Tiny.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
region	Tiny.Rectangle	optional The region of the displayObject, that shall be rendered, if no region is specified, defaults to the local bounds of the displayObject.

Returns:

Type	Description
Tiny.Texture	a texture of the graphics object

registerPlugin(pluginName, ctor)

tiny/core/renderers/webgl/WebGLRenderer.js, line 719

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)

tiny/core/renderers/webgl/WebGLRenderer.js, line 284

Renders the object to its webGL view

Name	Type	Description
displayObject	Tiny.DisplayObject	the object to be rendered
renderTexture	Tiny.RenderTexture	The render texture to render to.
clear	boolean	optional Should the canvas be cleared before the new render
transform	Tiny.Transform	optional A transform to apply to the render texture before rendering.
skipUpdateTransform	boolean	optional Should we skip the update transform pass?

reset() ❯ {Tiny.WebGLRenderer}

tiny/core/renderers/webgl/WebGLRenderer.js, line 620

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

Returns:

Type	Description
Tiny.WebGLRenderer	Returns itself.

resize(screenWidth, screenHeight)

tiny/core/renderers/webgl/WebGLRenderer.js, line 361

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

setBlendMode(blendMode)

tiny/core/renderers/webgl/WebGLRenderer.js, line 382

Resizes the webGL view to the specified width and height.

Name	Type	Description
blendMode	number	the desired blend mode

setObjectRenderer(objectRenderer)

tiny/core/renderers/webgl/WebGLRenderer.js, line 336

Changes the current renderer to the one given in parameter

Name	Type	Description
objectRenderer	Tiny.ObjectRenderer	The object renderer to use.

setTransform(matrix)

tiny/core/renderers/webgl/WebGLRenderer.js, line 400

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

Name	Type	Description
matrix	Tiny.Matrix	The transformation matrix

unbindTexture(texture) ❯ {Tiny.WebGLRenderer}

tiny/core/renderers/webgl/WebGLRenderer.js, line 553

unbinds the texture ...

Name	Type	Description
texture	Tiny.Texture	the texture to unbind

Returns:

Type	Description
Tiny.WebGLRenderer	Returns itself.

Events

context

tiny/core/renderers/webgl/WebGLRenderer.js, line 203

Fired when the WebGL context is set.

Name	Type	Description
gl	WebGLRenderingContext	WebGL context.

postrender

tiny/core/renderers/webgl/WebGLRenderer.js, line 191

Fired after rendering finishes.

prerender

tiny/core/renderers/webgl/WebGLRenderer.js, line 197

Fired before rendering starts.