Pixi’VNClass: Shader
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:165
The Shader class is an integral part of the PixiJS graphics pipeline. Central to rendering in PixiJS are two key elements: A [shader] and a [geometry]. The shader incorporates a GlProgram for WebGL or a GpuProgram for WebGPU, instructing the respective technology on how to render the geometry.
The primary goal of the Shader class is to offer a unified interface compatible with both WebGL and WebGPU. When constructing a shader, you need to provide both a WebGL program and a WebGPU program due to the distinctions between the two rendering engines. If only one is provided, the shader won't function with the omitted renderer.
Both WebGL and WebGPU utilize the same resource object when passed into the shader. Post-creation, the shader's interface remains consistent across both WebGL and WebGPU. The sole distinction lies in whether a glProgram or a gpuProgram is employed.
Modifying shader uniforms, which can encompass:
- TextureSampler TextureStyle
- TextureSource TextureSource
- UniformsGroups UniformGroup
Example
const shader = new Shader({
glProgram: glProgram,
gpuProgram: gpuProgram,
resources: {
uTexture: texture.source,
uSampler: texture.sampler,
uColor: [1, 0, 0, 1],
},
});
// update the uniforms
shader.resources.uColor[1] = 1;
shader.resources.uTexture = texture2.source;
@class
Advanced
Extends
EventEmitter<{destroy:Shader; }>
Extended by
Constructors
Constructor
> new Shader(options): Shader
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:209
There are two ways to create a shader. one is to pass in resources which is a record of uniform groups and resources. another is to pass in groups which is a record of BindGroups. this second method is really to make use of shared BindGroups. For most cases you will want to use resources as they are easier to work with. USe Groups if you want to share BindGroups between shaders. you cannot mix and match - either use resources or groups.
Parameters
options
The options for the shader
Returns
Shader
Overrides
Constructor
> new Shader(options): Shader
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:210
Parameters
options
Returns
Shader
Overrides
EventEmitter<{ 'destroy': Shader; }>.constructor
Properties
_destroyed
> _destroyed: boolean
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:194
Internal
_uniformBindMap
> _uniformBindMap: Record<number, Record<number, string>>
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:191
Internal
A record of the uniform groups and resources used by the shader. This is used by WebGL renderer to sync uniform data.
compatibleRenderers
> readonly compatibleRenderers: number
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:181
A number that uses two bits on whether the shader is compatible with the WebGL renderer and/or the WebGPU renderer. 0b00 - not compatible with either 0b01 - compatible with WebGL 0b10 - compatible with WebGPU This is automatically set based on if a GlProgram or GpuProgram is provided.
glProgram
> glProgram: GlProgram
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:173
An instance of the GL program used by the WebGL renderer
gpuProgram
> gpuProgram: GpuProgram
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:171
An instance of the GPU program used by the WebGPU renderer
groups
> groups: Record<number, BindGroup>
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:183
resources
> resources: Record<string, any>
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:185
A record of the resources used by the shader.
uid
> readonly uid: number
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:169
A unique identifier for the shader
prefixed
> static prefixed: string | boolean
Defined in: node_modules/eventemitter3/index.d.ts:9
Inherited from
Methods
addListener()
> addListener<T>(event, fn, context?): this
Defined in: node_modules/eventemitter3/index.d.ts:45
Type Parameters
T
T extends "destroy"
Parameters
event
T
fn
(...args) => void
context?
any
Returns
this
Inherited from
EventEmitter.addListener
addResource()
> addResource(name, groupIndex, bindIndex): void
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:218
Sometimes a resource group will be provided later (for example global uniforms) In such cases, this method can be used to let the shader know about the group.
Parameters
name
string
the name of the resource group
groupIndex
number
the index of the group (should match the webGPU shader group location)
bindIndex
number
the index of the bind point (should match the webGPU shader bind point)
Returns
void
destroy()
> destroy(destroyPrograms?): void
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:226
Use to destroy the shader when its not longer needed. It will destroy the resources and remove listeners.
Parameters
destroyPrograms?
boolean
if the programs should be destroyed as well. Make sure its not being used by other shaders!
Returns
void
emit()
> emit<T>(event, ...args): boolean
Defined in: node_modules/eventemitter3/index.d.ts:32
Calls each of the listeners registered for a given event.
Type Parameters
T
T extends "destroy"
Parameters
event
T
args
...ArgumentMap<{ destroy: Shader; }>[Extract<T, "destroy">]
Returns
boolean
Inherited from
EventEmitter.emit
eventNames()
> eventNames(): "destroy"[]
Defined in: node_modules/eventemitter3/index.d.ts:15
Return an array listing the events for which the emitter has registered listeners.
Returns
"destroy"[]
Inherited from
EventEmitter.eventNames
listenerCount()
> listenerCount(event): number
Defined in: node_modules/eventemitter3/index.d.ts:27
Return the number of listeners listening to a given event.
Parameters
event
"destroy"
Returns
number
Inherited from
EventEmitter.listenerCount
listeners()
> listeners<T>(event): (...args) => void[]
Defined in: node_modules/eventemitter3/index.d.ts:20
Return the listeners registered for a given event.
Type Parameters
T
T extends "destroy"
Parameters
event
T
Returns
(...args) => void[]
Inherited from
EventEmitter.listeners
off()
> off<T>(event, fn?, context?, once?): this
Defined in: node_modules/eventemitter3/index.d.ts:69
Type Parameters
T
T extends "destroy"
Parameters
event
T
fn?
(...args) => void
context?
any
once?
boolean
Returns
this
Inherited from
EventEmitter.off
on()
> on<T>(event, fn, context?): this
Defined in: node_modules/eventemitter3/index.d.ts:40
Add a listener for a given event.
Type Parameters
T
T extends "destroy"
Parameters
event
T
fn
(...args) => void
context?
any
Returns
this
Inherited from
EventEmitter.on
once()
> once<T>(event, fn, context?): this
Defined in: node_modules/eventemitter3/index.d.ts:54
Add a one-time listener for a given event.
Type Parameters
T
T extends "destroy"
Parameters
event
T
fn
(...args) => void
context?
any
Returns
this
Inherited from
EventEmitter.once
removeAllListeners()
> removeAllListeners(event?): this
Defined in: node_modules/eventemitter3/index.d.ts:79
Remove all listeners, or those of the specified event.
Parameters
event?
"destroy"
Returns
this
Inherited from
EventEmitter.removeAllListeners
removeListener()
> removeListener<T>(event, fn?, context?, once?): this
Defined in: node_modules/eventemitter3/index.d.ts:63
Remove the listeners of a given event.
Type Parameters
T
T extends "destroy"
Parameters
event
T
fn?
(...args) => void
context?
any
once?
boolean
Returns
this
Inherited from
EventEmitter.removeListener
from()
Call Signature
> static from(options): Shader
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:232
A short hand function to create a shader based of a vertex and fragment shader.
Parameters
options
Returns
Shader
A shiny new PixiJS shader!
Call Signature
> static from(options): Shader
Defined in: node_modules/pixi.js/lib/rendering/renderers/shared/shader/Shader.d.ts:233
A short hand function to create a shader based of a vertex and fragment shader.
Parameters
options
Returns
Shader
A shiny new PixiJS shader!