me.WebGLRenderer(canvas, width, height, optionsopt)

new WebGLRenderer(canvas, width, height, optionsopt)

a WebGL renderer object

Parameters:
Name Type Attributes Description
canvas HTMLCanvasElement

The html canvas tag to draw to on screen.

width Number

The width of the canvas without scaling

height Number

The height of the canvas without scaling

options Object <optional>

The renderer parameters

Properties
Name Type Attributes Default Description
doubleBuffering Boolean <optional>
false

Whether to enable double buffering

antiAlias Boolean <optional>
false

Whether to enable anti-aliasing

failIfMajorPerformanceCaveat Boolean <optional>
true

If true, the renderer will switch to CANVAS mode if the performances of a WebGL context would be dramatically lower than that of a native application making equivalent OpenGL calls.

transparent Boolean <optional>
false

Whether to enable transparency on the canvas (performance hit when enabled)

subPixel Boolean <optional>
false

Whether to enable subpixel renderering (performance hit when enabled)

zoomX Number <optional>
width

The actual width of the canvas with scaling applied

zoomY Number <optional>
height

The actual height of the canvas with scaling applied

compositor me.WebGLRenderer.Compositor <optional>

A class that implements the compositor API

Extends

Classes

Compositor

Members

static currentTransform :me.Matrix2d

The current transformation matrix used for transformations on the overall scene

static gl

The WebGL context

Methods

static clearColor(color, opaqueopt)

Clears the gl context with the given color.

Parameters:
Name Type Attributes Default Description
color me.Color | String

CSS color.

opaque Boolean <optional>
false

Allow transparency [default] or clear the surface completely [true]

static clearMask()

disable (remove) the rendering mask set through setMask.

See:
  • setMask

static clearRect(x, y, width, height)

Erase the pixels in the given rectangular area by setting them to transparent black (rgba(0,0,0,0)).

Parameters:
Name Type Description
x Number

x axis of the coordinate for the rectangle starting point.

y Number

y axis of the coordinate for the rectangle starting point.

width Number

The rectangle's width.

height Number

The rectangle's height.

static clipRect(x, y, width, height)

clip the given region from the original canvas. Once a region is clipped, all future drawing will be limited to the clipped region. You can however save the current region using the save(), and restore it (with the restore() method) any time in the future. (this is an experimental feature !)

Parameters:
Name Type Description
x Number
y Number
width Number
height Number

static createPattern(image, repeat) → {me.video.renderer.Texture}

Create a pattern with the specified repetition

Parameters:
Name Type Description
image image

Source image

repeat String

Define how the pattern should be repeated

Returns:
me.video.renderer.Texture
See:
Example
var tileable   = renderer.createPattern(image, "repeat");
var horizontal = renderer.createPattern(image, "repeat-x");
var vertical   = renderer.createPattern(image, "repeat-y");
var basic      = renderer.createPattern(image, "no-repeat");

static drawImage(image, sx, sy, sw, sh, dx, dy, dWidth, dHeight)

Draw an image to the gl context

Parameters:
Name Type Description
image Image

An element to draw into the context. The specification permits any canvas image source (CanvasImageSource), specifically, a CSSImageValue, an HTMLImageElement, an SVGImageElement, an HTMLVideoElement, an HTMLCanvasElement, an ImageBitmap, or an OffscreenCanvas.

sx Number

The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sy Number

The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sw Number

The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used.

sh Number

The height of the sub-rectangle of the source image to draw into the destination context.

dx Number

The X coordinate in the destination canvas at which to place the top-left corner of the source image.

dy Number

The Y coordinate in the destination canvas at which to place the top-left corner of the source image.

dWidth Number

The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.

dHeight Number

The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.

Example
// Position the image on the canvas:
renderer.drawImage(image, dx, dy);
// Position the image on the canvas, and specify width and height of the image:
renderer.drawImage(image, dx, dy, dWidth, dHeight);
// Clip the image and position the clipped part on the canvas:
renderer.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

static drawPattern(pattern, x, y, width, height)

Draw a pattern within the given rectangle.

Parameters:
Name Type Description
pattern me.video.renderer.Texture

Pattern object

x Number
y Number
width Number
height Number
See:
  • me.WebGLRenderer#createPattern

static fillArc(x, y, radius, start, end, antiClockwiseopt)

Fill an arc at the specified coordinates with given radius, start and end points

Parameters:
Name Type Attributes Default Description
x Number

arc center point x-axis

y Number

arc center point y-axis

radius Number
start Number

start angle in radians

end Number

end angle in radians

antiClockwise Boolean <optional>
false

draw arc anti-clockwise

static fillEllipse(x, y, w, h)

Fill an ellipse at the specified coordinates with given radius

Parameters:
Name Type Description
x Number

ellipse center point x-axis

y Number

ellipse center point y-axis

w Number

horizontal radius of the ellipse

h Number

vertical radius of the ellipse

static fillLine(startX, startY, endX, endY)

Fill a line of the given two points

Parameters:
Name Type Description
startX Number

the start x coordinate

startY Number

the start y coordinate

endX Number

the end x coordinate

endY Number

the end y coordinate

static fillPolygon(poly)

Fill a me.Polygon on the screen

Parameters:
Name Type Description
poly me.Polygon

the shape to draw

static fillRect(x, y, width, height)

Draw a filled rectangle at the specified coordinates

Parameters:
Name Type Description
x Number
y Number
width Number
height Number

static flush()

Flush the compositor to the frame buffer

static getContext() → {WebGLRenderingContext}

Returns the WebGLContext instance for the renderer return a reference to the system 2d Context

Returns:
WebGLRenderingContext

static getContextGL(canvas, transparentopt) → {WebGLRenderingContext}

Returns the WebGL Context object of the given Canvas

Parameters:
Name Type Attributes Default Description
canvas Canvas
transparent Boolean <optional>
true

use false to disable transparency

Returns:
WebGLRenderingContext

static getScreenContext() → {WebGLRenderingContext}

return a reference to the screen canvas corresponding WebGL Context

Returns:
WebGLRenderingContext

static reset()

Reset context state

static resetTransform()

Reset the gl transform to identity

static restore()

restores the canvas context

static rotate(angle)

rotates the uniform matrix

Parameters:
Name Type Description
angle Number

in radians

static save()

saves the canvas context

static scale(x, y)

scales the uniform matrix

Parameters:
Name Type Description
x Number
y Number

static scaleCanvas()

scales the canvas & GL Context

static setBlendMode(modeopt, glopt)

set a blend mode for the given context

Parameters:
Name Type Attributes Default Description
mode String <optional>
"normal"

blend mode : "normal", "multiply"

gl WebGLRenderingContext <optional>

static setColor(color)

Set the current fill & stroke style color. By default, or upon reset, the value is set to #000000.

Parameters:
Name Type Description
color me.Color | String

css color string.

static setGlobalAlpha(alpha)

Set the global alpha

Parameters:
Name Type Description
alpha Number

0.0 to 1.0 values accepted.

static setLineWidth(width)

Set the line width

Parameters:
Name Type Description
width Number

Line width

static setMask(maskopt)

A mask limits rendering elements to the shape and position of the given mask object. So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible. Mask are not preserved through renderer context save and restore.

Parameters:
Name Type Attributes Description
mask me.Rect | me.Polygon | me.Line | me.Ellipse <optional>

the shape defining the mask to be applied

static setTransform(mat2d)

Reset (overrides) the renderer transformation matrix to the identity one, and then apply the given transformation matrix.

Parameters:
Name Type Description
mat2d me.Matrix2d

Matrix to transform by

static strokeArc(x, y, radius, start, end, antiClockwiseopt)

Stroke an arc at the specified coordinates with given radius, start and end points

Parameters:
Name Type Attributes Default Description
x Number

arc center point x-axis

y Number

arc center point y-axis

radius Number
start Number

start angle in radians

end Number

end angle in radians

antiClockwise Boolean <optional>
false

draw arc anti-clockwise

static strokeEllipse(x, y, w, h)

Stroke an ellipse at the specified coordinates with given radius

Parameters:
Name Type Description
x Number

ellipse center point x-axis

y Number

ellipse center point y-axis

w Number

horizontal radius of the ellipse

h Number

vertical radius of the ellipse

static strokeLine(startX, startY, endX, endY)

Stroke a line of the given two points

Parameters:
Name Type Description
startX Number

the start x coordinate

startY Number

the start y coordinate

endX Number

the end x coordinate

endY Number

the end y coordinate

static strokePolygon(poly)

Stroke a me.Polygon on the screen with a specified color

Parameters:
Name Type Description
poly me.Polygon

the shape to draw

static strokeRect(x, y, width, height)

Draw a stroke rectangle at the specified coordinates

Parameters:
Name Type Description
x Number
y Number
width Number
height Number

static transform(mat2d)

Multiply given matrix into the renderer tranformation matrix

Parameters:
Name Type Description
mat2d me.Matrix2d

Matrix to transform by

static translate(x, y)

Translates the uniform matrix by the given coordinates

Parameters:
Name Type Description
x Number
y Number