WebGL

LittleJS WebGL Interface

WebGL2 rendering engine for high-performance graphics
Batched sprite rendering for drawing thousands of sprites efficiently
Instanced rendering using vertex array objects (VAOs)
Polygon rendering with triangle strip support
Shader system with custom vertex and fragment shaders
Texture management with automatic atlas support
Post-processing effects via framebuffer and shader plugins
Automatic fallback to Canvas2D if WebGL is unavailable
Context loss and restoration handling
Can be disabled with glEnable setting
Advanced users can create custom shaders and render targets

Functions

glClampTextureSize(size) → numberengineWebGL.js:40

A texture size this device can make: the size asked for, or the largest it supports when that is smaller

The engine sizes the textures it makes itself through this, the shadow maps and the like, so a size a device does not have falls back instead of failing

size number: Pixels across

glClearCanvas()engineWebGL.js:381

Clear the canvas or render target to canvasClearColor

glClearRect(x, y, width, height)engineWebGL.js:995

Clear out a rectangle area of the WebGL canvas or render target

In framebuffer pixels from the bottom left: backing store pixels on the canvas, texture pixels in a render target

x number
y number
width number
height number

glCompileShader(source, type) → WebGLShader|undefinedengineWebGL.js:452

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

source string
type number

Returns

undefined with no WebGL

glCopyToContext(context)engineWebGL.js:751

Flush any sprites still in the buffer and copy the WebGL canvas to a 2D context

context CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D

glCreateProgram(vsSource, fsSource) → WebGLProgram|undefinedengineWebGL.js:472

Create WebGL program with given shaders

vsSource string
fsSource string

Returns

undefined with no WebGL

glCreateTexture(image, wrap, pixelated) → WebGLTexture|undefinedengineWebGL.js:552

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

image HTMLImageElement|HTMLCanvasElement|OffscreenCanvas|ImageBitmap optional
wrap boolean|Array<number> optional, default false: true for REPEAT, false for CLAMP_TO_EDGE, or the WebGL modes across and down
pixelated boolean optional: Hard edged or smooth, undefined follows tilesPixelated

Returns

undefined with no WebGL

glDeleteTexture(texture)engineWebGL.js:598

Deletes a WebGL texture

texture WebGLTexture optional

glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba, rgbaAdditive)engineWebGL.js:782

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

x number
y number
sizeX number
sizeY number
angle number optional, default 0
uv0X number optional, default 0
uv0Y number optional, default 0
uv1X number optional, default 1
uv1Y number optional, default 1
rgba number optional: white is -1
rgbaAdditive number optional, default 0: black is 0

glDrawColoredPoints(points, pointColors)engineWebGL.js:882

Add a list of colored points to the gl draw list

points Array<Vector2>: Array of Vector2 points in tri strip order
pointColors Array<number>: Array of 32-bit integer colors

glDrawOutlineTransform(points, rgba, lineWidth, x, y, sx, sy, angle, wrap)engineWebGL.js:865

Transform and add a polygon's outline to the gl draw list

points Array<Vector2>: Array of Vector2 points
rgba number: Color of the polygon as a 32-bit integer
lineWidth number: Width of the outline
x number
y number
sx number
sy number
angle number
wrap boolean optional, default true: Should the outline connect the first and last points

glDrawPoints(points, rgba)engineWebGL.js:875

Add a list of points to the gl draw list

points Array<Vector2>: Array of Vector2 points in tri strip order
rgba number: Color as a 32-bit integer

glDrawPointsTransform(points, rgba, x, y, sx, sy, angle, tristrip)engineWebGL.js:832

Transform and add a polygon to the gl draw list

points Array<Vector2>: Array of Vector2 points
rgba number: Color of the polygon as a 32-bit integer
x number
y number
sx number
sy number
angle number
tristrip boolean optional, default true: should tristrip algorithm be used

glDrawUntextured(x, y, sizeX, sizeY, angle, rgba)engineWebGL.js:814

Add an untextured rect to the gl draw list Zeroes the uvs and rgba so the texture contribution multiplies to 0, then carries the real color in the additive slot. Works regardless of which texture is currently bound.

x number
y number
sizeX number
sizeY number
angle number
rgba number: color as 32-bit integer

glFlush()engineWebGL.js:690

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

glSetAntialias(antialias)engineWebGL.js:763

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

antialias boolean optional, default true

glSetRenderTarget(texture, clear)engineWebGL.js:919

Set the WebGL render target to the given texture or back to the canvas

What is drawn into a texture is stored premultiplied, and draws of that texture blend it as such

texture WebGLTexture optional: a texture or undefined to use normal glCanvas
clear boolean optional, default false: should the render target be cleared, to canvasClearColor, CLEAR_BLACK for a transparent one

glSetTexture(texture)engineWebGL.js:395

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

texture WebGLTexture

glSetTextureData(texture, image, pixelated)engineWebGL.js:618

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

texture WebGLTexture
image HTMLImageElement|HTMLCanvasElement|OffscreenCanvas|ImageBitmap
pixelated boolean optional: Hard edged or smooth, undefined follows tilesPixelated

glSetTextureWrap(texture, wrap)engineWebGL.js:428

Set the wrap mode on an existing WebGL texture Flushes the current batch only if the texture is the active one

texture WebGLTexture
wrap boolean|Array<number> optional, default true: true for REPEAT, false for CLAMP_TO_EDGE, or the WebGL modes across and down, like [gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT]

Members

glAntialias : booleanengineWebGL.js:45

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

glCanvas : HTMLCanvasElementengineWebGL.js:22

The WebGL canvas which appears below the main canvas

glContext : WebGL2RenderingContextengineWebGL.js:27

WebGL2 context for glCanvas

glMaxTextureSize : numberengineWebGL.js:32

The largest texture this device makes, in pixels across, 0 until WebGL starts; at least 2048 with WebGL2