Class: Shader

Shader

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

new Shader (options)

ts:178

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.

Name	Type	Description
`options`	ShaderWithResourcesDescriptor	The options for the shader using ShaderWithResourcesDescriptor.

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;

Members

compatibleRenderers number readonly

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 {@link GpuProgram} is provided.

glProgram GlProgram

An instance of the GL program used by the WebGL renderer

gpuProgram GpuProgram

An instance of the GPU program used by the WebGPU renderer

resources Record<string, any>

A record of the resources used by the shader.

Methods

from (options) Shader static

ts:417

A short hand function to create a shader based of a vertex and fragment shader.

Name	Type	Description
`options`	ShaderFromGroups & ShaderFromResources

Returns:

Type	Description
Shader	A shiny new PixiJS shader!

addResource (name, groupIndex, bindIndex) void

ts:339

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.

Name	Type	Description
`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)

destroy (destroyPrograms) void

ts:383

Use to destroy the shader when its not longer needed. It will destroy the resources and remove listeners.

Name	Type	Default	Description
`destroyPrograms`	boolean	false	if the programs should be destroyed as well. Make sure its not being used by other shaders!

Events

destroy

ts:173

Fired after rendering finishes.