# Shader

Class · category: Graphics

Source: https://github.com/playcanvas/engine/blob/f059dc005842f76e052cdf44d8370c8c7ec475ac/src/platform/graphics/shader.js#L29

A shader is a program that is responsible for rendering graphical primitives on a device's
graphics processor. The shader is generated from a shader definition. This shader definition
specifies the code for processing vertices and fragments processed by the GPU. The language of
the code is GLSL (or more specifically ESSL, the OpenGL ES Shading Language). The shader
definition also describes how the PlayCanvas engine should map vertex buffer elements onto the
attributes specified in the vertex shader code.

## Constructors

### constructor

```ts
new Shader(graphicsDevice: GraphicsDevice, definition: object)
```

Creates a new Shader instance.

Consider [ShaderUtils.createShader](https://api.playcanvas.com/engine/classes/ShaderUtils.md#createshader) as a simpler and more powerful way to create
a shader.

**Parameters**

- `graphicsDevice` ([`GraphicsDevice`](https://api.playcanvas.com/engine/classes/GraphicsDevice.md)): The graphics device used to manage this shader.
- `definition` (`object`): The shader definition from which to build the shader.
    - `definition.attributes` (`{}`, optional): Object detailing the mapping of
      vertex shader attribute names to semantics SEMANTIC_*. This enables the engine to match
      vertex buffer data as inputs to the shader. When not specified, rendering without vertex
      buffer is assumed.
    - `definition.cdefines` (`Map<string, string>`, optional): A map containing key-value pairs of
      define names and their values. These are used for resolving defines in the compute shader.
    - `definition.cincludes` (`Map<string, string>`, optional): A map containing key-value pairs
      of include names and their content. These are used for resolving #include directives in the
      compute shader source.
    - `definition.computeBindGroupFormat` ([`BindGroupFormat`](https://api.playcanvas.com/engine/classes/BindGroupFormat.md), optional): The bind group format for
      caller-provided compute resources in group 0. Only used on WebGPU.
    - `definition.computeEntryPoint` (`string`, optional): The entry point function name for the compute
      shader. Defaults to 'main'.
    - `definition.computeUniformBufferFormats` (`{}`, optional): The
      uniform buffer formats keyed by bind group entry name. Requires computeBindGroupFormat.
    - `definition.cshader` (`string`, optional): Compute shader source (WGSL code). Only supported on
      WebGPU platform.
    - `definition.feedbackVaryings` (`string[]`, optional): A list of shader output variable
      names that will be captured when using transform feedback. This setting is only effective
      if the useTransformFeedback property is enabled.
    - `definition.feedbackVaryingsMode` (`number`, optional): Specifies how transform feedback varyings
      are written into GPU buffers. Use [TRANSFORM_FEEDBACK_INTERLEAVED](https://api.playcanvas.com/engine/variables/TRANSFORM_FEEDBACK_INTERLEAVED.md) to pack all captured
      varyings into a single buffer, or [TRANSFORM_FEEDBACK_SEPARATE](https://api.playcanvas.com/engine/variables/TRANSFORM_FEEDBACK_SEPARATE.md) to store each varying
      in its own buffer. This setting is only effective when useTransformFeedback property is enabled.
      Defaults to [TRANSFORM_FEEDBACK_INTERLEAVED](https://api.playcanvas.com/engine/variables/TRANSFORM_FEEDBACK_INTERLEAVED.md).
    - `definition.fincludes` (`Map<string, string>`, optional): A map containing key-value pairs
      of include names and their content. These are used for resolving #include directives in the
      fragment shader source.
    - `definition.fragmentOutputTypes` (`string | string[]`, optional): Fragment shader output types,
      which default to vec4. Passing a string will set the output type for all color attachments.
      Passing an array will set the output type for each color attachment.
    - `definition.fshader` (`string`, optional): Fragment shader source (GLSL code). Optional when
      useTransformFeedback or compute shader is specified.
    - `definition.name` (`string`, optional): The name of the shader.
    - `definition.shaderLanguage` (`string`, optional): Specifies the shader language of vertex and
      fragment shaders. Defaults to [SHADERLANGUAGE_GLSL](https://api.playcanvas.com/engine/variables/SHADERLANGUAGE_GLSL.md).
    - `definition.useDualSourceBlending` (`boolean`, optional): Whether the fragment shader outputs a
      secondary color for dual-source blending. Defaults to false.
    - `definition.useTransformFeedback` (`boolean`, optional): Specifies that this shader outputs
      post-VS data to a buffer.
    - `definition.vincludes` (`Map<string, string>`, optional): A map containing key-value pairs of
      include names and their content. These are used for resolving #include directives in the
      vertex shader source.
    - `definition.vshader` (`string`, optional): Vertex shader source (GLSL code). Optional when
      compute shader is specified.

**Example**

```ts
// Create a shader that renders primitives with a solid red color

// Vertex shader
const vshader = `
attribute vec3 aPosition;

void main(void) {
    gl_Position = vec4(aPosition, 1.0);
}
`;

// Fragment shader
const fshader = `
precision ${graphicsDevice.precision} float;

void main(void) {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

const shaderDefinition = {
    attributes: {
        aPosition: SEMANTIC_POSITION
    },
    vshader,
    fshader
};

const shader = new Shader(graphicsDevice, shaderDefinition);
```

## Methods

### destroy

```ts
destroy(): void
```

Frees resources associated with this shader.