IWebGLRenderer interface

Ashley's avatar
Medal
Construct Team Founder
Published 14 Nov, 2017
694 words
~3-5 mins

The IWebGLRenderer interface provides methods for rendering to the Layout View, which is rendered using a WebGL canvas. The interface's methods provide high-level drawing commands implemented by Construct, so you don't need to handle low-level concerns like vertex buffers.

This interface cannot be directly constructed. It is only available as a parameter to a Draw() call.

Renderer state

Since IWebGLRenderer is based on WebGL, it also uses a persistent rendering state. Therefore to correctly render something, all the intended state must be specified, otherwise it will use an undefined previous state. IWebGLRenderer simplifies the renderer state to:

  1. A blend mode. Typically a normal alpha blend mode is used.
  2. A fill mode (internally, the current fragment shader). The fill modes can be color fill (draw a solid color), texture fill (draw a texture), and smooth line fill (for drawing smooth lines).
  3. A color set by SetColor() or SetColorRgba(). The alpha component of the color is used as the opacity in texture fill mode.
  4. A texture set by SetTexture(). This is only used in texture fill mode.

Therefore a Draw() method should begin by specifying the blend mode, the fill mode, the color, and the texture (if texture fill mode is used), before continuing to draw. The renderer efficiently discards redundant calls, so if the state does not actually change then these calls have minimal performance overhead.

Once all state is set up, quads can be issued using one of the Rect() or Quad() method overloads. These methods draw using the currently set state.

Methods

SetAlphaBlendMode()

Set the blend mode to a premultiplied alpha blending mode.

SetColorFillMode()

Set the fill mode to draw a solid color, specified by the current color.

SetTextureFillMode()

Set the fill mode to draw a texture, specified by the current texture, and using the alpha component of the current color as the opacity.

SetSmoothLineFillMode()

Set the fill mode to draw smooth lines using the current color.

SetColor(color)

Set the current color with an SDK.Color.

SetColorRgba(r, g, b, a)

Set the current color by directly passing the RGBA components.

SetOpacity(o)

Set only the alpha component of the current color. Note this does not affect the RGB components.

ResetColor()

Set the current color to (1, 1, 1, 1).

Rect(rect)

Draw a rectangle given by an SDK.Rect.

Rect2(left, top, right, bottom)

Draw a rectangle by directly passing the left, top, right and bottom positions.

Quad(quad)

Draw a quad given by an SDK.Quad.

Quad2(tlx, tly, trx, try_, brx, bry, blx, bly)

Draw a quad by directly passing the positions of each of the four points in the quad.

Quad3(quad, rect)

Draw a quad given by an SDK.Quad, using an SDK.Rect for the source texture co-ordinates to draw from.

Quad4(quad, texQuad)

Draw a quad given by an SDK.Quad, using another SDK.Quad for the source texture co-ordinates to draw from.

ConvexPoly(pointsArray)

Draw a convex polygon using the given array of points, in alternating X, Y order. Therefore the size of the array must be even, and must contain at least six elements (to define three points).

Line(x1, y1, x2, y2)

Draws a quad from the point (x1, y1) to (x2, y2) with the current line width.

TexturedLine(x1, y1, x2, y2, u, v)

Draws a quad from the point (x1, y1) to (x2, y2) with the current line width, and using (u, 0) as the texture co-ordinates at the start, and (v, 0) as the texture co-ordinates at the end.

LineRect(left, top, right, bottom)

Draws four lines along the edges of a given rectangle.

LineRect2(rect)

Draws four lines along the edges of a given SDK.Rect.

LineQuad(quad)

Draws four lines along the edges of a given SDK.Quad.

PushLineWidth(w)

PopLineWidth()

Set the current line width for line-drawing calls. This must be followed by a PopLineWidth() call when finished to restore the previous line width.

PushLineCap(lineCap)

PopLineCap()

Set the current line cap for line-drawing calls. This must be followed by a PopLineCap() call when finished to restore the previous line cap. The available line caps are "butt" and "square".

SetTexture(texture)

Set the current texture to a given IWebGLTexture.

CreateWebGLText()

Return a new IWebGLText interface. This manages text wrapping, drawing text, and uploading the results to a WebGL texture.