Global

Methods

clear(gl, options)
clear.js 13

Execute a clear command.

Name Type Description
gl WebGLRenderingContext
options Object optional
Name Type Description
color Array optional
depth Number optional
stencil Number optional
fb WebGLFramebuffer optional

createContext(contextOptions) → WebGLRenderingContext|WebGL2RenderingContext
createContext.js 18

Create an instance of WebGLRenderingContext or WebGL2RenderingContext.

Name Type Description
contextOptions Object
Name Type Description
alpha Boolean
depth Boolean
stencil Boolean
antialias Boolean
preserveDrawingBuffer Boolean
premultipliedAlpha Boolean
requireWebgl2 Boolean
canvas HTMLCanvasElement
Returns:

createCubeMap(gl, options) → WebGLTexture
createCubeMap.js 26

Name Type Description
gl WebGLRenderingContext | WebGL2RenderingContext
options Object
Name Type Default Description
level Number 0 optional
data Object
Name Type Description
px ArrayBufferView | HTMLImageElement | HTMLCanvasElement optional
nx ArrayBufferView | HTMLImageElement | HTMLCanvasElement optional
py ArrayBufferView | HTMLImageElement | HTMLCanvasElement optional
ny ArrayBufferView | HTMLImageElement | HTMLCanvasElement optional
pz ArrayBufferView | HTMLImageElement | HTMLCanvasElement optional
nz ArrayBufferView | HTMLImageElement | HTMLCanvasElement optional
width Number
height Number
format Number RGBA optional
type Number UNSIGNED_BYTE optional
internalFormat Number RGBA optional
wrapS Number CLAMP_TO_EDGE optional
wrapT Number CLAMP_TO_EDGE optional
minFilter Number LINEAR optional
magFilter Number LINEAR optional
Returns:

createFramebuffer(gl, options) → WebGLFramebuffer
createFramebuffer.js 21

Name Type Description
gl WebGLRenderingContext | WebGL2RenderingContext
options Object
Name Type Description
colorTexture WebGLTexture
depthTexture WebGLTexture
depthRenderbuffer WebGLRenderbuffer
colorAttachments Array.<(WebGLTexture|WebGLRenderbuffer)>
Returns:

createTexture(gl, options) → WebGLTexture
createTexture.js 29

Create a WebGLTexture.

Name Type Description
gl WebGLRenderingContext
options Object
Name Type Default Description
levels Array.<(ArrayBufferView|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement)>

all levels data
data ArrayBufferView | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement

level 0 data
width Number
height Number
depth Number 1 optional
internalFormat Number

For WebGL1, internal format must same with format.
format Number
type Number

Texel data type, such as gl.UNSIGNED_BYTE, gl.FLOAT, gl.UNSIGNED_INT.
target Number TEXTURE_2D optional
generateMipmap Boolean false optional
wrapS Number CLAMP_TO_EDGE optional
wrapT Number CLAMP_TO_EDGE optional
wrapR Number CLAMP_TO_EDGE optional
minFilter Number LINEAR optional
magFilter Number LINEAR optional
flipY Number false optional

Only valid for DOM-Element uploads
premultiplyAlpha Number false optional

Only valid for DOM-Element uploads
Returns:

createVAO(gl, options) → WebGLVertexArrayObjectOES|WebGLVertexArrayObject
createVAO.js 42

Create a vertex array object. You can imagine it like this

var glState = {
  attributeState: {
    ELEMENT_ARRAY_BUFFER: null,
    attributes: [
      { enable: ?, size: ?, type: ?, normalize: ?, stride: ?, offset: ?, buffer: ?, divisor: ?, },
      { enable: ?, size: ?, type: ?, normalize: ?, stride: ?, offset: ?, buffer: ?, divisor: ?, },
      { enable: ?, size: ?, type: ?, normalize: ?, stride: ?, offset: ?, buffer: ?, divisor: ?, },
      { enable: ?, size: ?, type: ?, normalize: ?, stride: ?, offset: ?, buffer: ?, divisor: ?, },
      { enable: ?, size: ?, type: ?, normalize: ?, stride: ?, offset: ?, buffer: ?, divisor: ?, },
      { enable: ?, size: ?, type: ?, normalize: ?, stride: ?, offset: ?, buffer: ?, divisor: ?, },
      { enable: ?, size: ?, type: ?, normalize: ?, stride: ?, offset: ?, buffer: ?, divisor: ?, },
      { enable: ?, size: ?, type: ?, normalize: ?, stride: ?, offset: ?, buffer: ?, divisor: ?, },
    ],
  },
Name Type Description
gl WebGLRenderingContext | WebGL2RenderingContext
options Object
Name Type Description
attributes Object

The key of Object is vertex attribute name, value is a Object, it includes location, size and data property, for example:

{
  a_pos: {
    location: 0,
    size: 3,
    data: [
      0, 0, 0,
      1, 1, 1,
      0, 1, 0,
    ],
    divisor: 0,
  }
}
indices Object

ELEMENT_ARRAY_BUFFER of vertex array.
Returns:

draw(gl, options, instanceCount)
draw.js 86

Execute a draw command.

Name Type Default Description
gl WebGLRenderingContext | WebGL2RenderingContext
options Object
Name Type Default Description
vs String

Vertex shader text
fs String

Fragment shader text
attributes Object optional

use attributes or vao property.
vao WebGLVertexArrayObjectOES | WebGLVertexArrayObject optional

@see createVAO
attributeLocations Object optional

If you define vao property, in order to correspond to attribute location of VAO, you must specify the location for the vertex attribute of shader program.
uniforms Object optional

The key of object is uniform name, value can be string(texture image file path), number, Array, ArrayBufferView. Uniform array is supported.
indices Array | Uint8Array | Uint16Array | Uint32Array optional

Vertex indices, when using an Array, it is treated as Uint16Array, so if the maximum value of indices is greater then 65535, Uint32Array MUST be used.
count Number indices.length optional

The number of vertices.
primitiveType Number gl.TRIANGLES optional

Primitive type. gl.LINES, gl.POINTS.
fb WebGLFramebuffer | null null optional

See createFramebuffer.
instanceCount Number 0 optional

The number of instances to draw.

updateTexture(gl, texture, source) → WebGLTexture
updateTexture.js 17

Update texture data.

Name Type Description
gl WebGLRenderingContext
texture WebGLTexture
source Object | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement
Name Type Default Description
width Number
height Number
arrayBufferView TypedArray
level Number 0 optional
internalFormat Number gl.RGBA optional
format Number gl.RGBA optional
type Number gl.UNSIGNED_BYTE optional
Returns: