twgl/programs

Low level shader program related functions

You should generally not need to use these functions. They are provided
for those cases where you're doing something out of the ordinary
and you need lower level access.

For backward compatibility they are available at both twgl.programs and twgl
itself

See module:twgl for core functions

Methods

(static) bindUniformBlock(gl, programInfo, uniformBlockInfo) → {bool}

Binds a uniform block to the matching uniform block point.
Matches by blocks by name so blocks must have the same name not just the same
structure.

If you have changed any values and you upload the values into the corresponding WebGLBuffer
call module:twgl.setUniformBlock instead.

Parameters:
Name Type Description
gl WebGL2RenderingContext

A WebGL 2 rendering context.
programInfo module:twgl.ProgramInfo | module:twgl.UniformBlockSpec

a ProgramInfo
as returned from module:twgl.createProgramInfo or or UniformBlockSpec as
returned from module:twgl.createUniformBlockSpecFromProgram.
uniformBlockInfo module:twgl.UniformBlockInfo

a UniformBlockInfo as returned from
module:twgl.createUniformBlockInfo.
Returns:
Type:
bool

true if buffer was bound. If the programInfo has no block with the same block name
no buffer is bound.

(static) createAttributeSetters(gl, program) → {Object.<string, function()>}

Creates setter functions for all attributes of a shader
program. You can pass this to module:twgl.setBuffersAndAttributes to set all your buffers and attributes.

See:
  • module:twgl.setAttributes for example
Parameters:
Name Type Description
gl WebGLRenderingContext

The WebGLRenderingContext to use.
program WebGLProgram

the program to create setters for.
Returns:
Type:
Object.<string, function()>

an object with a setter for each attribute by name.

(static) createProgram(gl, shaders, opt_attribsopt, opt_locationsopt, opt_errorCallbackopt) → (nullable) {WebGLProgram}

Creates a program, attaches (and/or compiles) shaders, binds attrib locations, links the
program.

NOTE: There are 4 signatures for this function

twgl.createProgram(gl, [vs, fs], options);
twgl.createProgram(gl, [vs, fs], opt_errFunc);
twgl.createProgram(gl, [vs, fs], opt_attribs, opt_errFunc);
twgl.createProgram(gl, [vs, fs], opt_attribs, opt_locations, opt_errFunc);
Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext to use.
shaders Array.<WebGLShader> | Array.<string>

The shaders to attach, or element ids for their source, or strings that contain their source
opt_attribs module:twgl.ProgramOptions | Array.<string> | module:twgl.ErrorCallback <optional>

Options for the program or an array of attribs names or an error callback. Locations will be assigned by index if not passed in
opt_locations Array.<number> | module:twgl.ErrorCallback <optional>

The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.
opt_errorCallback module:twgl.ErrorCallback <optional>

callback for errors. By default it just prints an error to the console
on error. If you want something else pass an callback. It's passed an error message.
Returns:
Type:
WebGLProgram

the created program or null if error of a callback was provided.

(static) createProgramAsync(gl, shaders, opt_attribsopt, opt_locationsopt, opt_errorCallbackopt) → {Promise.<WebGLProgram>}

Same as createProgram but returns a promise

NOTE: There are 4 signatures for this function

twgl.createProgramAsync(gl, [vs, fs], options);
twgl.createProgramAsync(gl, [vs, fs], opt_errFunc);
twgl.createProgramAsync(gl, [vs, fs], opt_attribs, opt_errFunc);
twgl.createProgramAsync(gl, [vs, fs], opt_attribs, opt_locations, opt_errFunc);
Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext to use.
shaders Array.<WebGLShader> | Array.<string>

The shaders to attach, or element ids for their source, or strings that contain their source
opt_attribs module:twgl.ProgramOptions | Array.<string> | module:twgl.ErrorCallback <optional>

Options for the program or an array of attribs names or an error callback. Locations will be assigned by index if not passed in
opt_locations Array.<number> | module:twgl.ErrorCallback <optional>

The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.
opt_errorCallback module:twgl.ErrorCallback <optional>

callback for errors. By default it just prints an error to the console
on error. If you want something else pass an callback. It's passed an error message.
Returns:
Type:
Promise.<WebGLProgram>

The created program

(static) createProgramFromScripts(gl, shaderScriptIds, opt_attribsopt, opt_locationsopt, opt_errorCallbackopt) → (nullable) {WebGLProgram}

Creates a program from 2 script tags.

NOTE: There are 4 signatures for this function

twgl.createProgramFromScripts(gl, [vs, fs], opt_options);
twgl.createProgramFromScripts(gl, [vs, fs], opt_errFunc);
twgl.createProgramFromScripts(gl, [vs, fs], opt_attribs, opt_errFunc);
twgl.createProgramFromScripts(gl, [vs, fs], opt_attribs, opt_locations, opt_errFunc);
Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext
to use.
shaderScriptIds Array.<string>

Array of ids of the script
tags for the shaders. The first is assumed to be the
vertex shader, the second the fragment shader.
opt_attribs module:twgl.ProgramOptions | Array.<string> | module:twgl.ErrorCallback <optional>

Options for the program or an array of attribs names or an error callback. Locations will be assigned by index if not passed in
opt_locations Array.<number> | module:twgl.ErrorCallback <optional>

The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.
opt_errorCallback module:twgl.ErrorCallback <optional>

callback for errors. By default it just prints an error to the console
on error. If you want something else pass an callback. It's passed an error message.
Returns:
Type:
WebGLProgram

the created program or null if error or a callback was provided.

(static) createProgramFromSources(gl, shaderSources, opt_attribsopt, opt_locationsopt, opt_errorCallbackopt) → (nullable) {WebGLProgram}

Creates a program from 2 sources.

NOTE: There are 4 signatures for this function

twgl.createProgramFromSource(gl, [vs, fs], opt_options);
twgl.createProgramFromSource(gl, [vs, fs], opt_errFunc);
twgl.createProgramFromSource(gl, [vs, fs], opt_attribs, opt_errFunc);
twgl.createProgramFromSource(gl, [vs, fs], opt_attribs, opt_locations, opt_errFunc);
Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext
to use.
shaderSources Array.<string>

Array of sources for the
shaders. The first is assumed to be the vertex shader,
the second the fragment shader.
opt_attribs module:twgl.ProgramOptions | Array.<string> | module:twgl.ErrorCallback <optional>

Options for the program or an array of attribs names or an error callback. Locations will be assigned by index if not passed in
opt_locations Array.<number> | module:twgl.ErrorCallback <optional>

The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.
opt_errorCallback module:twgl.ErrorCallback <optional>

callback for errors. By default it just prints an error to the console
on error. If you want something else pass an callback. It's passed an error message.
Returns:
Type:
WebGLProgram

the created program or null if error or a callback was provided.

(static) createProgramInfo(gl, shaderSources, opt_attribsopt, opt_locationsopt, opt_errorCallbackopt) → (nullable) {module:twgl.ProgramInfo}

Creates a ProgramInfo from 2 sources.

A ProgramInfo contains

programInfo = {
   program: WebGLProgram,
   uniformSetters: object of setters as returned from createUniformSetters,
   attribSetters: object of setters as returned from createAttribSetters,
}

NOTE: There are 4 signatures for this function

twgl.createProgramInfo(gl, [vs, fs], options);
twgl.createProgramInfo(gl, [vs, fs], opt_errFunc);
twgl.createProgramInfo(gl, [vs, fs], opt_attribs, opt_errFunc);
twgl.createProgramInfo(gl, [vs, fs], opt_attribs, opt_locations, opt_errFunc);
Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext
to use.
shaderSources Array.<string>

Array of sources for the
shaders or ids. The first is assumed to be the vertex shader,
the second the fragment shader.
opt_attribs module:twgl.ProgramOptions | Array.<string> | module:twgl.ErrorCallback <optional>

Options for the program or an array of attribs names or an error callback. Locations will be assigned by index if not passed in
opt_locations Array.<number> | module:twgl.ErrorCallback <optional>

The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.
opt_errorCallback module:twgl.ErrorCallback <optional>

callback for errors. By default it just prints an error to the console
on error. If you want something else pass an callback. It's passed an error message.
Returns:
Type:
module:twgl.ProgramInfo

The created ProgramInfo or null if it failed to link or compile

(static) createProgramInfoAsync(gl, shaderSources, opt_attribsopt, opt_locationsopt, opt_errorCallbackopt) → {Promise.<module:twgl.ProgramInfo>}

Same as createProgramInfo but returns a promise

Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext
to use.
shaderSources Array.<string>

Array of sources for the
shaders or ids. The first is assumed to be the vertex shader,
the second the fragment shader.
opt_attribs module:twgl.ProgramOptions | Array.<string> | module:twgl.ErrorCallback <optional>

Options for the program or an array of attribs names or an error callback. Locations will be assigned by index if not passed in
opt_locations Array.<number> | module:twgl.ErrorCallback <optional>

The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.
opt_errorCallback module:twgl.ErrorCallback <optional>

callback for errors. By default it just prints an error to the console
on error. If you want something else pass an callback. It's passed an error message.
Returns:
Type:
Promise.<module:twgl.ProgramInfo>

The created ProgramInfo

(static) createProgramInfoFromProgram(gl, program) → {module:twgl.ProgramInfo}

Creates a ProgramInfo from an existing program.

A ProgramInfo contains

programInfo = {
   program: WebGLProgram,
   uniformSetters: object of setters as returned from createUniformSetters,
   attribSetters: object of setters as returned from createAttribSetters,
}
Parameters:
Name Type Description
gl WebGLRenderingContext

The WebGLRenderingContext
to use.
program WebGLProgram

an existing WebGLProgram.
Returns:
Type:
module:twgl.ProgramInfo

The created ProgramInfo.

(static) createUniformBlockInfo(gl, programInfo, blockName, optionsopt) → {module:twgl.UniformBlockInfo}

Creates a UniformBlockInfo for the specified block

Note: If the blockName matches no existing blocks a warning is printed to the console and a dummy
UniformBlockInfo is returned. This is because when debugging GLSL
it is common to comment out large portions of a shader or for example set
the final output to a constant. When that happens blocks get optimized out.
If this function did not create dummy blocks your code would crash when debugging.

Parameters:
Name Type Attributes Description
gl WebGL2RenderingContext

A WebGL2RenderingContext
programInfo module:twgl.ProgramInfo

a ProgramInfo
as returned from module:twgl.createProgramInfo
blockName string

The name of the block.
options module:twgl.UniformBlockInfoOptions <optional>

Optional options for using existing an existing buffer and arrayBuffer
Returns:
Type:
module:twgl.UniformBlockInfo

The created UniformBlockInfo

(static) createUniformBlockInfoFromProgram(gl, program, blockName, optionsopt) → {module:twgl.UniformBlockInfo}

Creates a UniformBlockInfo for the specified block

Note: If the blockName matches no existing blocks a warning is printed to the console and a dummy
UniformBlockInfo is returned. This is because when debugging GLSL
it is common to comment out large portions of a shader or for example set
the final output to a constant. When that happens blocks get optimized out.
If this function did not create dummy blocks your code would crash when debugging.

Parameters:
Name Type Attributes Description
gl WebGL2RenderingContext

A WebGL2RenderingContext
program WebGLProgram

A WebGLProgram
uniformBlockSpec. module:twgl.UniformBlockSpec

A UniformBlockSpec as returned
from module:twgl.createUniformBlockSpecFromProgram.
blockName string

The name of the block.
options module:twgl.UniformBlockInfoOptions <optional>

Optional options for using existing an existing buffer and arrayBuffer
Returns:
Type:
module:twgl.UniformBlockInfo

The created UniformBlockInfo

(static) createUniformBlockSpecFromProgram(gl, program) → {module:twgl.UniformBlockSpec}

Creates a UniformBlockSpec for the given program.

A UniformBlockSpec represents the data needed to create and bind
UniformBlockObjects

Parameters:
Name Type Description
gl WebGL2RenderingContext

A WebGL2 Rendering Context
program WebGLProgram

A WebGLProgram for a successfully linked program
Returns:
Type:
module:twgl.UniformBlockSpec

The created UniformBlockSpec

(static) createUniformSetters(gl, program) → {Object.<string, function()>}

Creates setter functions for all uniforms of a shader
program.

See:
Parameters:
Name Type Description
gl WebGLRenderingContext

The WebGLRenderingContext to use.
program WebGLProgram

the program to create setters for.
Returns:
Type:
Object.<string, function()>

an object with a setter by name for each uniform

(static) setBlockUniforms(uniformBlockInfo, values)

Sets values of a uniform block object

Parameters:
Name Type Description
uniformBlockInfo module:twgl.UniformBlockInfo

A UniformBlockInfo as returned by module:twgl.createUniformBlockInfo.
values Object.<string, ?>

A uniform name to value map where the value is correct for the given
type of uniform. So for example given a block like

  uniform SomeBlock {
    float someFloat;
    vec2 someVec2;
    vec3 someVec3Array[2];
    int someInt;
  }

You can set the values of the uniform block with

  twgl.setBlockUniforms(someBlockInfo, {
     someFloat: 12.3,
     someVec2: [1, 2],
     someVec3Array: [1, 2, 3, 4, 5, 6],
     someInt: 5,
  }

Arrays can be JavaScript arrays or typed arrays

You can also fill out structure and array values either via
shortcut. Example

// -- in shader --
struct Light {
  float intensity;
  vec4 color;
  float nearFar[2];
};
uniform Lights {
  Light lights[2];
};

// in JavaScript

twgl.setBlockUniforms(someBlockInfo, {
  lights: [
    { intensity: 5.0, color: [1, 0, 0, 1], nearFar[0.1, 10] },
    { intensity: 2.0, color: [0, 0, 1, 1], nearFar[0.2, 15] },
  ],
});

or the more traditional way

twgl.setBlockUniforms(someBlockInfo, {
  "lights[0].intensity": 5.0,
  "lights[0].color": [1, 0, 0, 1],
  "lights[0].nearFar": [0.1, 10],
  "lights[1].intensity": 2.0,
  "lights[1].color": [0, 0, 1, 1],
  "lights[1].nearFar": [0.2, 15],
});

You can also specify partial paths

twgl.setBlockUniforms(someBlockInfo, {
  'lights[1]': { intensity: 5.0, color: [1, 0, 0, 1], nearFar[0.2, 15] },
});

But you can not specify leaf array indices.

twgl.setBlockUniforms(someBlockInfo, {
  'lights[1].nearFar[1]': 15,     // BAD! nearFar is a leaf
  'lights[1].nearFar': [0.2, 15], // GOOD
});

IMPORTANT!, packing in a UniformBlock is unintuitive.
For example the actual layout of someVec3Array above in memory
is 1, 2, 3, unused, 4, 5, 6, unused. twgl takes in 6 values
as shown about and copies them, skipping the padding. This might
be confusing if you're already familiar with Uniform blocks.

If you want to deal with the padding yourself you can access the array
buffer views directly. eg:

 someBlockInfo.someVec3Array.set([1, 2, 3, 0, 4, 5, 6, 0]);

Any name that doesn't match will be ignored

(static) setBuffersAndAttributes(gl, setters, buffers)

Sets attributes and buffers including the ELEMENT_ARRAY_BUFFER if appropriate

Example:

const programInfo = createProgramInfo(
    gl, ["some-vs", "some-fs");

const arrays = {
  position: { numComponents: 3, data: [0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0], },
  texcoord: { numComponents: 2, data: [0, 0, 0, 1, 1, 0, 1, 1],                 },
};

const bufferInfo = createBufferInfoFromArrays(gl, arrays);

gl.useProgram(programInfo.program);

This will automatically bind the buffers AND set the
attributes.

setBuffersAndAttributes(gl, programInfo, bufferInfo);

For the example above it is equivalent to

gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.enableVertexAttribArray(a_positionLocation);
gl.vertexAttribPointer(a_positionLocation, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);
gl.enableVertexAttribArray(a_texcoordLocation);
gl.vertexAttribPointer(a_texcoordLocation, 4, gl.FLOAT, false, 0, 0);
Parameters:
Name Type Description
gl WebGLRenderingContext

A WebGLRenderingContext.
setters module:twgl.ProgramInfo | Object.<string, function()>

A ProgramInfo as returned from module:twgl.createProgramInfo or Attribute setters as returned from module:twgl.createAttributeSetters
buffers module:twgl.BufferInfo | module:twgl.VertexArrayInfo

a BufferInfo as returned from module:twgl.createBufferInfoFromArrays.
or a VertexArrayInfo as returned from module:twgl.createVertexArrayInfo

(static) setUniformBlock(gl, programInfo, uniformBlockInfo)

Uploads the current uniform values to the corresponding WebGLBuffer
and binds that buffer to the program's corresponding bind point for the uniform block object.

If you haven't changed any values and you only need to bind the uniform block object
call module:twgl.bindUniformBlock instead.

Parameters:
Name Type Description
gl WebGL2RenderingContext

A WebGL 2 rendering context.
programInfo module:twgl.ProgramInfo | module:twgl.UniformBlockSpec

a ProgramInfo
as returned from module:twgl.createProgramInfo or or UniformBlockSpec as
returned from module:twgl.createUniformBlockSpecFromProgram.
uniformBlockInfo module:twgl.UniformBlockInfo

a UniformBlockInfo as returned from
module:twgl.createUniformBlockInfo.

(static) setUniforms(setters, values)

Set uniforms and binds related textures.

example:

const programInfo = createProgramInfo(
    gl, ["some-vs", "some-fs"]);

const tex1 = gl.createTexture();
const tex2 = gl.createTexture();

... assume we setup the textures with data ...

const uniforms = {
  u_someSampler: tex1,
  u_someOtherSampler: tex2,
  u_someColor: [1,0,0,1],
  u_somePosition: [0,1,1],
  u_someMatrix: [
    1,0,0,0,
    0,1,0,0,
    0,0,1,0,
    0,0,0,0,
  ],
};

gl.useProgram(programInfo.program);

This will automatically bind the textures AND set the
uniforms.

twgl.setUniforms(programInfo, uniforms);

For the example above it is equivalent to

let texUnit = 0;
gl.activeTexture(gl.TEXTURE0 + texUnit);
gl.bindTexture(gl.TEXTURE_2D, tex1);
gl.uniform1i(u_someSamplerLocation, texUnit++);
gl.activeTexture(gl.TEXTURE0 + texUnit);
gl.bindTexture(gl.TEXTURE_2D, tex2);
gl.uniform1i(u_someSamplerLocation, texUnit++);
gl.uniform4fv(u_someColorLocation, [1, 0, 0, 1]);
gl.uniform3fv(u_somePositionLocation, [0, 1, 1]);
gl.uniformMatrix4fv(u_someMatrix, false, [
    1,0,0,0,
    0,1,0,0,
    0,0,1,0,
    0,0,0,0,
  ]);

Note it is perfectly reasonable to call setUniforms multiple times. For example

const uniforms = {
  u_someSampler: tex1,
  u_someOtherSampler: tex2,
};

const moreUniforms {
  u_someColor: [1,0,0,1],
  u_somePosition: [0,1,1],
  u_someMatrix: [
    1,0,0,0,
    0,1,0,0,
    0,0,1,0,
    0,0,0,0,
  ],
};

twgl.setUniforms(programInfo, uniforms);
twgl.setUniforms(programInfo, moreUniforms);

You can also add WebGLSamplers to uniform samplers as in

const uniforms = {
  u_someSampler: {
    texture: someWebGLTexture,
    sampler: someWebGLSampler,
  },
};

In which case both the sampler and texture will be bound to the
same unit.

Parameters:
Name Type Description
setters module:twgl.ProgramInfo | Object.<string, function()>

a ProgramInfo as returned from createProgramInfo or the setters returned from
createUniformSetters.
values Object.<string, ?>

an object with values for the
uniforms.
You can pass multiple objects by putting them in an array or by calling with more arguments.For example

const sharedUniforms = {
  u_fogNear: 10,
  u_projection: ...
  ...
};

const localUniforms = {
  u_world: ...
  u_diffuseColor: ...
};

twgl.setUniforms(programInfo, sharedUniforms, localUniforms);

// is the same as

twgl.setUniforms(programInfo, [sharedUniforms, localUniforms]);

// is the same as

twgl.setUniforms(programInfo, sharedUniforms);
twgl.setUniforms(programInfo, localUniforms};

You can also fill out structure and array values either via
shortcut. Example

// -- in shader --
struct Light {
  float intensity;
  vec4 color;
  float nearFar[2];
};
uniform Light lights[2];

// in JavaScript

twgl.setUniforms(programInfo, {
  lights: [
    { intensity: 5.0, color: [1, 0, 0, 1], nearFar[0.1, 10] },
    { intensity: 2.0, color: [0, 0, 1, 1], nearFar[0.2, 15] },
  ],
});

or the more traditional way

twgl.setUniforms(programInfo, {
  "lights[0].intensity": 5.0,
  "lights[0].color": [1, 0, 0, 1],
  "lights[0].nearFar": [0.1, 10],
  "lights[1].intensity": 2.0,
  "lights[1].color": [0, 0, 1, 1],
  "lights[1].nearFar": [0.2, 15],
});

You can also specify partial paths

twgl.setUniforms(programInfo, {
  'lights[1]': { intensity: 5.0, color: [1, 0, 0, 1], nearFar[0.2, 15] },
});

But you can not specify leaf array indices

twgl.setUniforms(programInfo, {
  'lights[1].nearFar[1]': 15,     // BAD! nearFar is a leaf
  'lights[1].nearFar': [0.2, 15], // GOOD
});

(static) setUniformsAndBindTextures(setters, values)

Alias for setUniforms

Parameters:
Name Type Description
setters module:twgl.ProgramInfo | Object.<string, function()>

a ProgramInfo as returned from createProgramInfo or the setters returned from
createUniformSetters.
values Object.<string, ?>

an object with values for the

(inner) createProgramInfos(gl, programSpecs, programOptionsopt) → (nullable) {Object.<string, module:twgl.ProgramInfo>}

Creates multiple programInfos

Note: the reason this function exists is because the fastest way to create multiple
programs in WebGL is to create and compile all shaders and link all programs and only
afterwards check if they succeeded. In that way, giving all your shaders

See:

  • module:twgl.createProgramInfo

    Examples:

    const programInfos = twgl.createProgramInfos(gl, {
  lambert: [lambertVS, lambertFS],
  phong: [phongVS, phoneFS],
  particles: {
    shaders: [particlesVS, particlesFS],
    transformFeedbackVaryings: ['position', 'velocity'],
  },
});

    or

    const {lambert, phong, particles} = twgl.createProgramInfos(gl, {
  lambert: [lambertVS, lambertFS],
  phong: [phongVS, phoneFS],
  particles: {
    shaders: [particlesVS, particlesFS],
    transformFeedbackVaryings: ['position', 'velocity'],
  },
});
Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

the WebGLRenderingContext
programSpecs Object.<string, module:twgl.ProgramSpec>

An object of ProgramSpecs, one per program.
programOptions module:twgl.ProgramOptions <optional>

options to apply to all programs
Returns:
Type:
Object.<string, module:twgl.ProgramInfo>

the created programInfos by name

(inner) createProgramInfosAsync(gl, programSpecs, programOptionsopt) → {Promise.<Object.<string, module:twgl.ProgramInfo>>}

Creates multiple programInfos asynchronously

See:

  • module:twgl.createProgramInfoAsync

    Example:

    const programInfos = await twgl.createProgramInfosAsync(gl, {
  lambert: [lambertVS, lambertFS],
  phong: [phongVS, phoneFS],
  particles: {
    shaders: [particlesVS, particlesFS],
    transformFeedbackVaryings: ['position', 'velocity'],
  },
});
Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

the WebGLRenderingContext
programSpecs Object.<string, module:twgl.ProgramSpec>

An object of ProgramSpecs, one per program.
programOptions module:twgl.ProgramOptions <optional>

options to apply to all programs
Returns:
Type:
Promise.<Object.<string, module:twgl.ProgramInfo>>

the created programInfos by name

(inner) createPrograms(gl, programSpecs, programOptionsopt) → (nullable) {Object.<string, WebGLProgram>}

Creates multiple programs

Note: the reason this function exists is because the fastest way to create multiple
programs in WebGL is to create and compile all shaders and link all programs and only
afterwards check if they succeeded. In that way, giving all your shaders

See:

  • module:twgl.createProgram

    Example:

    const programs = twgl.createPrograms(gl, {
  lambert: [lambertVS, lambertFS],
  phong: [phongVS, phoneFS],
  particles: {
    shaders: [particlesVS, particlesFS],
    transformFeedbackVaryings: ['position', 'velocity'],
  },
});
Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

the WebGLRenderingContext
programSpecs Object.<string, module:twgl.ProgramSpec>

An object of ProgramSpecs, one per program.
programOptions module:twgl.ProgramOptions <optional>

options to apply to all programs
Returns:
Type:
Object.<string, WebGLProgram>

the created programInfos by name

(inner) createProgramsAsync(gl, programSpecs, programOptionsopt) → (nullable) {Object.<string, WebGLProgram>}

Creates multiple programs asynchronously

See:

  • module:twgl.createProgramAsync

    Example:

    const programs = await twgl.createProgramsAsync(gl, {
  lambert: [lambertVS, lambertFS],
  phong: [phongVS, phoneFS],
  particles: {
    shaders: [particlesVS, particlesFS],
    transformFeedbackVaryings: ['position', 'velocity'],
  },
});
Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

the WebGLRenderingContext
programSpecs Object.<string, module:twgl.ProgramSpec>

An object of ProgramSpecs, one per program.
programOptions module:twgl.ProgramOptions <optional>

options to apply to all programs
Returns:
Type:
Object.<string, WebGLProgram>

the created programInfos by name

Type Definitions

ProgramCallback(erropt, resultopt)

Program Callback

Parameters:
Name Type Attributes Description
err string <optional>

error message, falsy if no error
result WebGLProgram | module:twgl.ProgramInfo <optional>

the program or programInfo

UniformBlockInfoOptions

Options to allow createUniformBlockInfo to use an existing buffer and arrayBuffer at an offset

Properties:
Name Type Attributes Description
array ArrayBuffer <optional>

an existing array buffer to use for values
offset number <optional>

the offset in bytes to use in the array buffer (default = 0)
buffer WebGLBuffer <optional>

the buffer to use for this uniform block info
bufferOffset number <optional>

the offset in bytes in the buffer to use (default = use offset above)
Type:
  • Object