Namespace: 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

Source: src/engineWebGL.js, line 1

Members

(static) glAntialias :boolean

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

Type:

boolean

Source: src/engineWebGL.js, line 32

(static) glCanvas :HTMLCanvasElement

The WebGL canvas which appears below the main canvas

Type:

HTMLCanvasElement

Source: src/engineWebGL.js, line 22

(static) glContext :WebGL2RenderingContext

WebGL2 context for glCanvas

Type:

WebGL2RenderingContext

Source: src/engineWebGL.js, line 27

Methods

(static) glClearCanvas()

Clear the canvas or render target to canvasClearColor

Source: src/engineWebGL.js, line 355

(static) glClearRect(x, y, width, height)

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

Parameters:

Name	Type	Description
`x`	number
`y`	number
`width`	number
`height`	number

Source: src/engineWebGL.js, line 923

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

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

Parameters:

Name	Type	Description
`source`	string
`type`	number

Source: src/engineWebGL.js, line 426

Returns:

Type:: WebGLShader

(static) glCopyToContext(context)

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

Parameters:

Name	Type	Description
`context`	CanvasRenderingContext2D \| OffscreenCanvasRenderingContext2D

Source: src/engineWebGL.js, line 688

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

Create WebGL program with given shaders

Parameters:

Name	Type	Description
`vsSource`	string
`fsSource`	string

Source: src/engineWebGL.js, line 446

Returns:

Type:: WebGLProgram

(static) glCreateTexture(imageopt, wrapopt) → {WebGLTexture}

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

Parameters:

Name	Type	Attributes	Default	Description
`image`	HTMLImageElement \| HTMLCanvasElement \| OffscreenCanvas \| ImageBitmap	<optional>
`wrap`	boolean \| Array.<number>	<optional>	false	true for REPEAT, false for CLAMP_TO_EDGE, or the WebGL modes across and down

Source: src/engineWebGL.js, line 493

Returns:

Type:: WebGLTexture

(static) glDeleteTexture(textureopt)

Deletes a WebGL texture

Parameters:

Name	Type	Attributes	Description
`texture`	WebGLTexture	<optional>

Source: src/engineWebGL.js, line 539

(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:

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: src/engineWebGL.js, line 719

(static) glDrawColoredPoints(points, pointColors)

Add a list of colored points to the gl draw list

Parameters:

Name	Type	Description
`points`	Array.<Vector2>	Array of Vector2 points in tri strip order
`pointColors`	Array.<number>	Array of 32-bit integer colors

Source: src/engineWebGL.js, line 810

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

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

Parameters:

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: src/engineWebGL.js, line 793

(static) glDrawPoints(points, rgba)

Add a list of points to the gl draw list

Parameters:

Name	Type	Description
`points`	Array.<Vector2>	Array of Vector2 points in tri strip order
`rgba`	number	Color as a 32-bit integer

Source: src/engineWebGL.js, line 803

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

Transform and add a polygon to the gl draw list

Parameters:

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: src/engineWebGL.js, line 766

(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.

Parameters:

Name	Type	Description
`x`	number
`y`	number
`sizeX`	number
`sizeY`	number
`angle`	number
`rgba`	number	color as 32-bit integer

Source: src/engineWebGL.js, line 751

(static) glFlush()

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

Source: src/engineWebGL.js, line 629

(static) glSetAntialias(antialiasopt)

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

Parameters:

Name	Type	Attributes	Default	Description
`antialias`	boolean	<optional>	true

Source: src/engineWebGL.js, line 700

(static) glSetRenderTarget(textureopt, clearopt)

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

Parameters:

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, to canvasClearColor, CLEAR_BLACK for a transparent one

Source: src/engineWebGL.js, line 847

(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

Parameters:

Name	Type	Description
`texture`	WebGLTexture

Source: src/engineWebGL.js, line 369

(static) glSetTextureData(texture, image)

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

Parameters:

Name	Type	Description
`texture`	WebGLTexture
`image`	HTMLImageElement \| HTMLCanvasElement \| OffscreenCanvas \| ImageBitmap

Source: src/engineWebGL.js, line 550

(static) glSetTextureWrap(texture, wrapopt)

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

Parameters:

Name	Type	Attributes	Default	Description
`texture`	WebGLTexture
`wrap`	boolean \| Array.<number>	<optional>	true	true for REPEAT, false for CLAMP_TO_EDGE, or the WebGL modes across and down, like [gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT]

Source: src/engineWebGL.js, line 402