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
- Source
Members
(static) glAntialias :boolean
Should WebGL be setup with anti-aliasing? must be set before calling engineInit
- boolean
- Source
(static) glCanvas :HTMLCanvasElement
The WebGL canvas which appears below the main canvas
- HTMLCanvasElement
- Source
(static) glContext :WebGL2RenderingContext
WebGL2 context for glCanvas
- WebGL2RenderingContext
- Source
Methods
(static) glClearCanvas()
Clear the canvas and setup the viewport
- Source
(static) glClearRect(x, y, width, height)
Clear out a rectangle area of the WebGL canvas or render target
| Name | Type | Description |
|---|---|---|
x | number | |
y | number | |
width | number | |
height | number |
- Source
(static) glCompileShader(source, type) → {WebGLShader}
Compile WebGL shader of the given type, will throw errors if in debug mode
| Name | Type | Description |
|---|---|---|
source | string | |
type | number |
- Source
- Type:
- WebGLShader
(static) glCopyToContext(context)
Flush any sprites still in the buffer and copy to main canvas
| Name | Type | Description |
|---|---|---|
context | CanvasRenderingContext2D | |
- Source
(static) glCreateProgram(vsSource, fsSource) → {WebGLProgram}
Create WebGL program with given shaders
| Name | Type | Description |
|---|---|---|
vsSource | string | |
fsSource | string |
- Source
- Type:
- WebGLProgram
(static) glCreateTexture(imageopt, wrapopt) → {WebGLTexture}
Create WebGL texture from an image and init the texture settings Restores the active texture when done
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
image | HTMLImageElement | | <optional> | ||
wrap | boolean | <optional> | false | true for REPEAT, false for CLAMP_TO_EDGE |
- Source
- Type:
- WebGLTexture
(static) glDeleteTexture(textureopt)
Deletes a WebGL texture
| Name | Type | Attributes | Description |
|---|---|---|---|
texture | WebGLTexture | <optional> |
- Source
(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
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
x | number | |||
y | number | |||
sizeX | number | |||
sizeY | number | |||
angle | number | <optional> | 0 | |
uv0X | number | <optional> | 0 | |
uv0Y | number | <optional> | 0 | |
uv1X | number | <optional> | 1 | |
uv1Y | number | <optional> | 1 | |
rgba | number | <optional> | -1 | white is -1 |
rgbaAdditive | number | <optional> | 0 | black is 0 |
- Source
(static) glDrawColoredPoints(points, pointColors)
Add a list of colored points to the gl draw list
| Name | Type | Description |
|---|---|---|
points | Array.<Vector2> | Array of Vector2 points in tri strip order |
pointColors | Array.<number> | Array of 32-bit integer colors |
- Source
(static) glDrawOutlineTransform(points, rgba, lineWidth, x, y, sx, sy, angle, wrapopt)
Transform and add a polygon to the gl draw list
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
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> | true | Should the outline connect the first and last points |
- Source
(static) glDrawPoints(points, rgba)
Add a list of points to the gl draw list
| Name | Type | Description |
|---|---|---|
points | Array.<Vector2> | Array of Vector2 points in tri strip order |
rgba | number | Color as a 32-bit integer |
- Source
(static) glDrawPointsTransform(points, rgba, x, y, sx, sy, angle, tristripopt)
Transform and add a polygon to the gl draw list
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
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> | true | should tristrip algorithm be used |
- Source
(static) glDrawUntextured(x, y, sizeX, sizeY, angle, rgba)
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.
| Name | Type | Description |
|---|---|---|
x | number | |
y | number | |
sizeX | number | |
sizeY | number | |
angle | number | |
rgba | number | color as 32-bit integer |
- Source
(static) glFlush()
Draw all sprites and clear out the buffer, called automatically by the system whenever necessary
- Source
(static) glRegisterTextureInfo(textureInfo)
Tells WebGL to create or update the glTexture and start tracking it
| Name | Type | Description |
|---|---|---|
textureInfo | TextureInfo |
- Source
(static) glSetAntialias(antialiasopt)
Set anti-aliasing for WebGL canvas Must be called before engineInit
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
antialias | boolean | <optional> | true |
- Source
(static) glSetRenderTarget(textureopt, clearopt)
Set the WebGL render target to the given texture or back to the canvas
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
texture | WebGLTexture | <optional> | a texture or undefined to use normal glCanvas | |
clear | boolean | <optional> | false | should the render target be cleared |
- Source
(static) glSetTexture(texture)
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
| Name | Type | Description |
|---|---|---|
texture | WebGLTexture |
- Source
(static) glSetTextureData(texture, image)
Set WebGL texture data from an image, restores the active texture when done
| Name | Type | Description |
|---|---|---|
texture | WebGLTexture | |
image | HTMLImageElement | |
- Source
(static) glSetTextureWrap(texture, wrapopt)
Set the wrap mode (REPEAT or CLAMP_TO_EDGE) on an existing WebGL texture Flushes the current batch only if the texture is the active one
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
texture | WebGLTexture | |||
wrap | boolean | <optional> | true | true for REPEAT, false for CLAMP_TO_EDGE |
- Source
(static) glUnregisterTextureInfo(textureInfo)
Tells WebGL to destroy the glTexture and stop tracking it
| Name | Type | Description |
|---|---|---|
textureInfo | TextureInfo |
- Source