Class: WebGLRenderer

me. WebGLRenderer

new WebGLRenderer(canvas, width, height, options)

a WebGL renderer object
Parameters:
Name Type Argument Description
canvas Canvas 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
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 63

<static> gl

The WebGL context
Source:
webgl_renderer.js, line 36

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 192

<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 218

<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 144
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, dw, dh)

Draw an image to the gl context
Parameters:
Name Type Description
image Image Source image
sx Number Source x-coordinate
sy Number Source y-coordinate
sw Number Source width
sh Number Source height
dx Number Destination x-coordinate
dy Number Destination y-coordinate
dw Number Destination width
dh Number Destination height
Source:
webgl_renderer.js, line 264
Example
// Can be used in three ways:
renderer.drawImage(image, dx, dy);
renderer.drawImage(image, dx, dy, dw, dh);
renderer.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
// dx, dy, dw, dh being the destination target & dimensions. sx, sy, sw, sh being the position & dimensions to take from the image

<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 317
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 664

<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 334

<static> flush()

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

<static> getContext() → {WebGLContext}

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

<static> getContextGL(canvas, opaque) → {WebGLContext}

Returns the WebGL Context object of the given Canvas
Parameters:
Name Type Argument Default Description
canvas Canvas
opaque Boolean <optional>
false Use true to disable transparency
Source:
webgl_renderer.js, line 359
Returns:
Type
WebGLContext

<static> getScreenContext() → {WebGLContext}

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

<static> globalAlpha() → {Number}

return the current global alpha
Source:
webgl_renderer.js, line 532
Returns:
Type
Number

<static> reset()

Reset context state
Source:
webgl_renderer.js, line 428

<static> resetTransform()

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

<static> restore()

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

<static> rotate(angle)

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

<static> save()

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

<static> scale(x, y)

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

<static> scaleCanvas()

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

<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 543

<static> setLineWidth(width)

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

<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 698

<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 567

<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 583

<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 597

<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 616

<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 641

<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 711

<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 728
Copyright © 2011 - 2017, Olivier Biot, Jason Oster, Aaron McLeod
Documentation generated by JSDoc 3.4.0 on 2017-02-28T11:37:42+08:00 using the DocStrap template modified by codename-.