Class: WebGLRenderer

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

Name Type Description
width number

the width of the screen

height number

the height of the screen

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 Tiny will Math.floor() x/y values when rendering, stopping pixel interpolation.

backgroundColor number 0x000000 optional

The background color of the rendered area (shown if not transparent).

legacy boolean false optional

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

powerPreference string optional

Parameter passed to webgl context, set to "high-performance" for devices with dual graphics card

Extends

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

Default Value:
  • 600

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.

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

Its safe to use as filterArea or hitArea for whole stage

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:

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

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}

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.

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}

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

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.

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}

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}

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

Returns:
Type Description
VertexArrayObject The new VAO.

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

Name Type Default Description
removeView boolean false optional

Removes the Canvas element from the DOM.

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}

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)

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)

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?

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

Returns:
Type Description
Tiny.WebGLRenderer Returns itself.

resize(screenWidth, screenHeight)

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

Resizes the webGL view to the specified width and height.

Name Type Description
blendMode number

the desired blend mode

setObjectRenderer(objectRenderer)

Changes the current renderer to the one given in parameter

Name Type Description
objectRenderer Tiny.ObjectRenderer

The object renderer to use.

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

Name Type Description
matrix Tiny.Matrix

The transformation matrix

unbinds the texture ...

Name Type Description
texture Tiny.Texture

the texture to unbind

Returns:
Type Description
Tiny.WebGLRenderer Returns itself.

Events

Fired when the WebGL context is set.

Name Type Description
gl WebGLRenderingContext

WebGL context.

Fired after rendering finishes.

Fired before rendering starts.

Documentation generated by JSDoc 3.4.3 on Mon Dec 03 2018 17:48:53 GMT+0800 (CST)