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
- 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 above the main canvas and below the overlay canvas
- HTMLCanvasElement
- Source
(static) glContext :WebGL2RenderingContext
WebGL2 context for glCanvas
- WebGL2RenderingContext
- Source
Methods
(static) glClearCanvas()
Clear the canvas and setup the viewport
- 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) → {WebGLTexture}
Create WebGL texture from an image and init the texture settings Restores the active texture when done
| Name | Type | Attributes | Description |
|---|---|---|---|
image | HTMLImageElement | | <optional> |
- 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) glFlush()
Draw all sprites and clear out the buffer, called automatically by the system whenever necessary
- 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) 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
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
texture | WebGLTexture | |||
wrap | boolean | <optional> | false | Should the texture wrap or clamp |
- 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