Class: WebGLRenderer

me. WebGLRenderer

new WebGLRenderer(canvas, width, height, options)

a WebGL renderer object
Parameters:
Name Type Argument 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 Argument 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
Source:
webgl_renderer.js, line 9

Extends

Classes

Compositor
Texture

Members

<static> currentTransform :me.Matrix2d

The current transformation matrix used for transformations on the overall scene
Type:
Source:
webgl_renderer.js, line 69

<static> gl

The WebGL context
Source:
webgl_renderer.js, line 37

Methods

<static> clearColor(color, opaque)

Clears the gl context with the given color.
Parameters:
Name Type Argument Default Description
color me.Color | String CSS color.
opaque Boolean <optional>
false Allow transparency [default] or clear the surface completely [true]
Source:
webgl_renderer.js, line 237

<static> clearRect(x, y, width, height)

Sets all pixels in the given rectangle to transparent black,
erasing any previously drawn content.
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.
Source:
webgl_renderer.js, line 258

<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
Source:
webgl_renderer.js, line 806

<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
Source:
webgl_renderer.js, line 188
See:
Returns:
Type
me.video.renderer.Texture
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.
Source:
webgl_renderer.js, line 304
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
Source:
webgl_renderer.js, line 356
See:
  • me.WebGLRenderer#createPattern

<static> drawShape(shape)

draw the given shape
Parameters:
Name Type Description
shape me.Rect | me.Polygon | me.Line | me.Ellipse a shape object
Source:
webgl_renderer.js, line 726

<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
Source:
webgl_renderer.js, line 373

<static> flush()

Flush the compositor to the frame buffer
Source:
webgl_renderer.js, line 227

<static> getContext() → {WebGLRenderingContext}

Returns the WebGLContext instance for the renderer return a reference to the system 2d Context
Source:
webgl_renderer.js, line 438
Returns:
Type
WebGLRenderingContext

<static> getContextGL(canvas, transparent) → {WebGLRenderingContext}

Returns the WebGL Context object of the given Canvas
Parameters:
Name Type Argument Default Description
canvas Canvas
transparent Boolean <optional>
true use false to disable transparency
Source:
webgl_renderer.js, line 398
Returns:
Type
WebGLRenderingContext

<static> getScreenContext() → {WebGLRenderingContext}

return a reference to the screen canvas corresponding WebGL Context
Source:
webgl_renderer.js, line 387
Returns:
Type
WebGLRenderingContext

<static> reset()

Reset context state
Source:
canvas_renderer.js, line 72

<static> reset()

Reset context state
Source:
webgl_renderer.js, line 103

<static> resetTransform()

resets the gl transform to identity
Source:
webgl_renderer.js, line 116

<static> restore()

restores the canvas context
Source:
webgl_renderer.js, line 512

<static> rotate(angle)

rotates the uniform matrix
Parameters:
Name Type Description
angle Number in radians
Source:
webgl_renderer.js, line 562

<static> save()

saves the canvas context
Source:
webgl_renderer.js, line 546

<static> scale(x, y)

scales the uniform matrix
Parameters:
Name Type Description
x Number
y Number
Source:
webgl_renderer.js, line 573

<static> scaleCanvas()

scales the canvas & GL Context
Source:
webgl_renderer.js, line 489

<static> setBlendMode(mode, gl)

set a blend mode for the given context
Parameters:
Name Type Argument Default Description
mode String <optional>
"normal" blend mode : "normal", "multiply"
gl WebGLRenderingContext <optional>
Source:
webgl_renderer.js, line 450

<static> setColor(color)

Sets the color for further draw calls
Parameters:
Name Type Description
color me.Color | String css color string.
Source:
webgl_renderer.js, line 605

<static> setGlobalAlpha(alpha)

Sets the global alpha
Parameters:
Name Type Description
alpha Number 0.0 to 1.0 values accepted.
Source:
webgl_renderer.js, line 594

<static> setLineWidth(width)

Set the line width
Parameters:
Name Type Description
width Number Line width
Source:
webgl_renderer.js, line 618

<static> setTransform(mat2d)

Resets (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
Source:
webgl_renderer.js, line 760

<static> strokeArc(x, y, radius, start, end, antiClockwise)

Stroke an arc at the specified coordinates with given radius, start and end points
Parameters:
Name Type Argument 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
Source:
webgl_renderer.js, line 629

<static> strokeEllipse(x, y, w, h)

Stroke an ellipse at the specified coordinates with given radius, start and end points
Parameters:
Name Type Description
x Number arc center point x-axis
y Number arc center point y-axis
w Number horizontal radius of the ellipse
h Number vertical radius of the ellipse
Source:
webgl_renderer.js, line 645

<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
Source:
webgl_renderer.js, line 659

<static> strokePolygon(poly)

Strokes a me.Polygon on the screen with a specified color
Parameters:
Name Type Description
poly me.Polygon the shape to draw
Source:
webgl_renderer.js, line 678

<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
Source:
webgl_renderer.js, line 703

<static> transform(mat2d)

Multiply given matrix into the renderer tranformation matrix
Parameters:
Name Type Description
mat2d me.Matrix2d Matrix to transform by
Source:
webgl_renderer.js, line 773

<static> translate(x, y)

Translates the uniform matrix by the given coordinates
Parameters:
Name Type Description
x Number
y Number
Source:
webgl_renderer.js, line 790