Class: WebGLShader

Phaser.Renderer.WebGL. WebGLShader

Instances of the WebGLShader class belong to the WebGL Pipeline classes. When the pipeline is created it will create an instance of this class for each one of its shaders, as defined in the pipeline configuration.

This class encapsulates everything needed to manage a shader in a pipeline, including the shader attributes and uniforms, as well as lots of handy methods such as set2f, for setting uniform values on this shader.

Typically, you do not create an instance of this class directly, as it works in unison with the pipeline to which it belongs. You can gain access to this class via a pipeline's shaders array, post-creation.

new WebGLShader(pipeline, name, vertexShader, fragmentShader, attributes)

Parameters:
Name Type Description
pipeline Phaser.Renderer.WebGL.WebGLPipeline

The WebGLPipeline to which this Shader belongs.
name string

The name of this Shader.
vertexShader string

The vertex shader source code as a single string.
fragmentShader string

The fragment shader source code as a single string.
attributes Array.<Phaser.Types.Renderer.WebGL.WebGLPipelineAttributesConfig>

An array of attributes.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 11)

Members

attributes :Array.<Phaser.Types.Renderer.WebGL.WebGLPipelineAttribute>

Array of objects that describe the vertex attributes.

Type:
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 89)

gl :WebGLRenderingContext

A reference to the WebGL Rendering Context the WebGL Renderer is using.

Type:
  • WebGLRenderingContext
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 71)

name :string

The name of this shader.

Type:
  • string
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 53)

pipeline :Phaser.Renderer.WebGL.WebGLPipeline

A reference to the WebGLPipeline that owns this Shader.

A Shader class can only belong to a single pipeline.

Type:
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 42)

program :WebGLProgram

The WebGLProgram created from the vertex and fragment shaders.

Type:
  • WebGLProgram
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 80)

renderer :Phaser.Renderer.WebGL.WebGLRenderer

A reference to the WebGLRenderer instance.

Type:
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 62)

uniforms :Phaser.Types.Renderer.WebGL.WebGLPipelineUniformsConfig

The active uniforms that this shader has.

This is an object that maps the uniform names to their WebGL location and cached values.

It is populated automatically via the createUniforms method.

Type:
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 131)

vertexComponentCount :number

The amount of vertex attribute components of 32 bit length.

Type:
  • number
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 98)

<readonly> vertexSize :number

The size, in bytes, of a single vertex.

This is derived by adding together all of the vertex attributes.

For example, the Multi Pipeline has the following attributes:

inPosition - (size 2 x gl.FLOAT) = 8 inTexCoord - (size 2 x gl.FLOAT) = 8 inTexId - (size 1 x gl.FLOAT) = 4 inTintEffect - (size 1 x gl.FLOAT) = 4 inTint - (size 4 x gl.UNSIGNED_BYTE) = 4

The total, in this case, is 8 + 8 + 4 + 4 + 4 = 28.

This is calculated automatically during the createAttributes method.

Type:
  • number
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 107)

Methods

bind( [setAttributes] [, flush])

Sets the program this shader uses as being the active shader in the WebGL Renderer.

This method is called every time the parent pipeline is made the current active pipeline.

Parameters:
Name Type Argument Default Description
setAttributes boolean <optional>
 false

Should the vertex attribute pointers be set?
flush boolean <optional>
 false

Flush the pipeline before binding this shader?
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 210)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

createAttributes(attributes)

Takes the vertex attributes config and parses it, creating the resulting array that is stored in this shaders attributes property, calculating the offset, normalization and location in the process.

Calling this method resets WebGLShader.attributes, WebGLShader.vertexSize and WebGLShader.vertexComponentCount.

It is called automatically when this class is created, but can be called manually if required.

Parameters:
Name Type Description
attributes Array.<Phaser.Types.Renderer.WebGL.WebGLPipelineAttributesConfig>

An array of attributes configs.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 148)

createUniforms()

Sets up the WebGLShader.uniforms object, populating it with the names and locations of the shader uniforms this shader requires.

It works by first calling gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS) to find out how many active uniforms this shader has. It then iterates through them, calling gl.getActiveUniform to get the WebGL Active Info from each one. Finally, the name and location are stored in the local array.

This method is called automatically when this class is created.

Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 329)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

destroy()

Removes all external references from this class and deletes the WebGL program from the WebGL context.

Does not remove this shader from the parent pipeline.

Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 1073)

hasUniform(name)

Checks to see if the given uniform name exists and is active in this shader.

Parameters:
Name Type Description
name string

The name of the uniform to check for.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 416)
Returns:

true if the uniform exists, otherwise false.

Type
boolean

rebind()

Sets the program this shader uses as being the active shader in the WebGL Renderer.

Then resets all of the attribute pointers.

Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 243)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

resetUniform(name)

Resets the cached values of the given uniform.

Parameters:
Name Type Description
name string

The name of the uniform to reset.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 431)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

set1f(name, x)

Sets a 1f uniform value based on the given name on this shader.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
name string

The name of the uniform to set.
x number

The new value of the float uniform.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 640)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

set1fv(name, arr)

Sets a 1fv uniform value based on the given name on this shader.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
name string

The name of the uniform to set.
arr Array.<number> | Float32Array

The new value to be used for the uniform variable.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 734)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

set1i(name, x)

Sets a 1i uniform value based on the given name on this shader.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
name string

The name of the uniform to set.
x number

The new value of the int uniform.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 910)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

set1iv(name, arr)

Sets a 1iv uniform value based on the given name on this shader.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
name string

The name of the uniform to set.
arr Array.<number> | Float32Array

The new value to be used for the uniform variable.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 822)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

set2f(name, x, y)

Sets a 2f uniform value based on the given name on this shader.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
name string

The name of the uniform to set.
x number

The new X component of the vec2 uniform.
y number

The new Y component of the vec2 uniform.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 662)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

set2fv(name, arr)

Sets a 2fv uniform value based on the given name on this shader.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
name string

The name of the uniform to set.
arr Array.<number> | Float32Array

The new value to be used for the uniform variable.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 756)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

set2i(name, x, y)

Sets a 2i uniform value based on the given name on this shader.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
name string

The name of the uniform to set.
x number

The new X component of the ivec2 uniform.
y number

The new Y component of the ivec2 uniform.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 932)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

set2iv(name, arr)

Sets a 2iv uniform value based on the given name on this shader.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
name string

The name of the uniform to set.
arr Array.<number> | Float32Array

The new value to be used for the uniform variable.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 844)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

set3f(name, x, y, z)

Sets a 3f uniform value based on the given name on this shader.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
name string

The name of the uniform to set.
x number

The new X component of the vec3 uniform.
y number

The new Y component of the vec3 uniform.
z number

The new Z component of the vec3 uniform.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 685)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

set3fv(name, arr)

Sets a 3fv uniform value based on the given name on this shader.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
name string

The name of the uniform to set.
arr Array.<number> | Float32Array

The new value to be used for the uniform variable.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 778)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

set3i(name, x, y, z)

Sets a 3i uniform value based on the given name on this shader.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
name string

The name of the uniform to set.
x number

The new X component of the ivec3 uniform.
y number

The new Y component of the ivec3 uniform.
z number

The new Z component of the ivec3 uniform.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 955)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

set3iv(name, arr)

Sets a 3iv uniform value based on the given name on this shader.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
name string

The name of the uniform to set.
arr Array.<number> | Float32Array

The new value to be used for the uniform variable.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 866)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

set4f(name, x, y, z, w)

Sets a 4f uniform value based on the given name on this shader.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
name string

The name of the uniform to set.
x number

X component of the uniform
y number

Y component of the uniform
z number

Z component of the uniform
w number

W component of the uniform
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 709)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

set4fv(name, arr)

Sets a 4fv uniform value based on the given name on this shader.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
name string

The name of the uniform to set.
arr Array.<number> | Float32Array

The new value to be used for the uniform variable.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 800)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

set4i(name, x, y, z, w)

Sets a 4i uniform value based on the given name on this shader.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
name string

The name of the uniform to set.
x number

X component of the uniform
y number

Y component of the uniform
z number

Z component of the uniform
w number

W component of the uniform
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 979)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

set4iv(name, arr)

Sets a 4iv uniform value based on the given name on this shader.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
name string

The name of the uniform to set.
arr Array.<number> | Float32Array

The new value to be used for the uniform variable.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 888)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

setAttribPointers( [reset])

Sets the vertex attribute pointers.

This should only be called after the vertex buffer has been bound.

It is called automatically during the bind method.

Parameters:
Name Type Argument Default Description
reset boolean <optional>
 false

Reset the vertex attribute locations?
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 262)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

setMatrix2fv(name, transpose, matrix)

Sets a matrix 2fv uniform value based on the given name on this shader.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
name string

The name of the uniform to set.
transpose boolean

Whether to transpose the matrix. Should be false.
matrix Array.<number> | Float32Array

The new values for the mat2 uniform.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 1004)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

setMatrix3fv(name, transpose, matrix)

Sets a matrix 3fv uniform value based on the given name on this shader.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
name string

The name of the uniform to set.
transpose boolean

Whether to transpose the matrix. Should be false.
matrix Float32Array

The new values for the mat3 uniform.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 1027)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

setMatrix4fv(name, transpose, matrix)

Sets a matrix 4fv uniform value based on the given name on this shader.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
name string

The name of the uniform to set.
transpose boolean

Should the matrix be transpose
matrix Float32Array

Matrix data
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 1050)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

setUniform1(setter, name, value1)

Sets the given uniform value/s based on the name and GL function.

This method is called internally by other methods such as set1f and set3iv.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
setter function

The GL function to call.
name string

The name of the uniform to set.
value1 boolean | number | Array.<number> | Float32Array

The new value of the uniform.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 456)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

setUniform2(setter, name, value1, value2)

Sets the given uniform value/s based on the name and GL function.

This method is called internally by other methods such as set1f and set3iv.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
setter function

The GL function to call.
name string

The name of the uniform to set.
value1 boolean | number | Array.<number> | Float32Array

The new value of the uniform.
value2 boolean | number | Array.<number> | Float32Array

The new value of the uniform.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 499)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

setUniform3(setter, name, value1, value2, value3)

Sets the given uniform value/s based on the name and GL function.

This method is called internally by other methods such as set1f and set3iv.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
setter function

The GL function to call.
name string

The name of the uniform to set.
value1 boolean | number | Array.<number> | Float32Array

The new value of the uniform.
value2 boolean | number | Array.<number> | Float32Array

The new value of the uniform.
value3 boolean | number | Array.<number> | Float32Array

The new value of the uniform.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 544)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader

setUniform4(setter, name, value1, value2, value3, value4)

Sets the given uniform value/s based on the name and GL function.

This method is called internally by other methods such as set1f and set3iv.

The uniform is only set if the value/s given are different to those previously set.

This method works by first setting this shader as being the current shader within the WebGL Renderer, if it isn't already. It also sets this shader as being the current one within the pipeline it belongs to.

Parameters:
Name Type Description
setter function

The GL function to call.
name string

The name of the uniform to set.
value1 boolean | number | Array.<number> | Float32Array

The new value of the uniform.
value2 boolean | number | Array.<number> | Float32Array

The new value of the uniform.
value3 boolean | number | Array.<number> | Float32Array

The new value of the uniform.
value4 boolean | number | Array.<number> | Float32Array

The new value of the uniform.
Since: 3.50.0
Source: src/renderer/webgl/WebGLShader.js (Line 591)
Returns:

This WebGLShader instance.

Type
Phaser.Renderer.WebGL.WebGLShader