WebGL

LittleJS WebGL Interface

  • All WebGL used by the engine is wrapped up here
  • Will fall back to 2D canvas rendering if WebGL is not supported
  • For normal stuff you won't need to see or call anything in this file
  • For advanced stuff there are helper functions to create shaders, textures, etc
  • Can be disabled with glEnable to revert to 2D canvas rendering
  • Batches sprite rendering on GPU for incredibly fast performance
  • Sprite transform math is done in the shader where possible
  • Supports shadertoy style post processing shaders via plugin

Members

(static) glAntialias :boolean

Should WebGL be setup with anti-aliasing? must be set before calling engineInit

Type:
  • boolean

(static) glCanvas :HTMLCanvasElement

The WebGL canvas which appears above the main canvas and below the overlay canvas

Type:
  • HTMLCanvasElement

(static) glContext :WebGL2RenderingContext

WebGL2 context for glCanvas

Type:
  • WebGL2RenderingContext

Methods

(static) glClearCanvas()

Clear the canvas and setup the viewport

(static) glCompileShader(source, type) → {WebGLShader}

Compile WebGL shader of the given type, will throw errors if in debug mode

Parameters:
NameTypeDescription
sourcestring
typenumber
Returns:
Type: 
WebGLShader

(static) glCopyToContext(context)

Flush any sprites still in the buffer and copy to main canvas

Parameters:
NameTypeDescription
contextCanvasRenderingContext2D | OffscreenCanvasRenderingContext2D

(static) glCreateProgram(vsSource, fsSource) → {WebGLProgram}

Create WebGL program with given shaders

Parameters:
NameTypeDescription
vsSourcestring
fsSourcestring
Returns:
Type: 
WebGLProgram

(static) glCreateTexture(imageopt) → {WebGLTexture}

Create WebGL texture from an image and init the texture settings Restores the active texture when done

Parameters:
NameTypeAttributesDescription
imageHTMLImageElement | HTMLCanvasElement | OffscreenCanvas<optional>
Returns:
Type: 
WebGLTexture

(static) glDeleteTexture(textureopt)

Deletes a WebGL texture

Parameters:
NameTypeAttributesDescription
textureWebGLTexture<optional>

(static) glDraw(x, y, sizeX, sizeY, angleopt, uv0Xopt, uv0Yopt, uv1Xopt, uv1Yopt, rgbaopt, rgbaAdditiveopt)

Add a sprite to the gl draw list, used by all gl draw functions

Parameters:
NameTypeAttributesDefaultDescription
xnumber
ynumber
sizeXnumber
sizeYnumber
anglenumber<optional>
0
uv0Xnumber<optional>
0
uv0Ynumber<optional>
0
uv1Xnumber<optional>
1
uv1Ynumber<optional>
1
rgbanumber<optional>
-1

white is -1

rgbaAdditivenumber<optional>
0

black is 0

(static) glDrawColoredPoints(points, pointColors)

Add a list of colored points to the gl draw list

Parameters:
NameTypeDescription
pointsArray.<Vector2>

Array of Vector2 points in tri strip order

pointColorsArray.<number>

Array of 32-bit integer colors

(static) glDrawOutlineTransform(points, rgba, lineWidth, x, y, sx, sy, angle, wrapopt)

Transform and add a polygon to the gl draw list

Parameters:
NameTypeAttributesDefaultDescription
pointsArray.<Vector2>

Array of Vector2 points

rgbanumber

Color of the polygon as a 32-bit integer

lineWidthnumber

Width of the outline

xnumber
ynumber
sxnumber
synumber
anglenumber
wrapboolean<optional>
true

Should the outline connect the first and last points

(static) glDrawPoints(points, rgba)

Add a list of points to the gl draw list

Parameters:
NameTypeDescription
pointsArray.<Vector2>

Array of Vector2 points in tri strip order

rgbanumber

Color as a 32-bit integer

(static) glDrawPointsTransform(points, rgba, x, y, sx, sy, angle, tristripopt)

Transform and add a polygon to the gl draw list

Parameters:
NameTypeAttributesDefaultDescription
pointsArray.<Vector2>

Array of Vector2 points

rgbanumber

Color of the polygon as a 32-bit integer

xnumber
ynumber
sxnumber
synumber
anglenumber
tristripboolean<optional>
true

should tristrip algorithm be used

(static) glFlush()

Draw all sprites and clear out the buffer, called automatically by the system whenever necessary

(static) glRegisterTextureInfo(textureInfo)

Tells WebGL to create or update the glTexture and start tracking it

Parameters:
NameTypeDescription
textureInfoTextureInfo

(static) glSetAntialias(antialiasopt)

Set anti-aliasing for WebGL canvas Must be called before engineInit

Parameters:
NameTypeAttributesDefaultDescription
antialiasboolean<optional>
true

(static) glSetTexture(texture, wrapopt)

Set the WebGL texture, called automatically if using multiple textures

  • This may also flush the gl buffer resulting in more draw calls and worse performance
Parameters:
NameTypeAttributesDefaultDescription
textureWebGLTexture
wrapboolean<optional>
false

Should the texture wrap or clamp

(static) glSetTextureData(texture, image)

Set WebGL texture data from an image, restores the active texture when done

Parameters:
NameTypeDescription
textureWebGLTexture
imageHTMLImageElement | HTMLCanvasElement | OffscreenCanvas

(static) glUnregisterTextureInfo(textureInfo)

Tells WebGL to destroy the glTexture and stop tracking it

Parameters:
NameTypeDescription
textureInfoTextureInfo