Deprecated: Phaser 3 API Documentation

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:

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

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:

Phaser.Renderer.WebGL.WebGLPipeline

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:

Phaser.Renderer.WebGL.WebGLRenderer

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:

Phaser.Types.Renderer.WebGL.WebGLPipelineUniformsConfig

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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