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.




  • Creates a new Shader instance.

    Consider createShaderFromCode as a simpler and more powerful way to create a shader.


    • graphicsDevice: GraphicsDevice

      The graphics device used to manage this shader.

    • definition: {
          attributes: {};
          cshader: string;
          fincludes: Map<string, string>;
          fragmentOutputTypes: string | string[];
          fshader: string;
          name: string;
          shaderLanguage: string;
          useTransformFeedback: boolean;
          vincludes: Map<string, string>;
          vshader: string;

      The shader definition from which to build the shader.

      • attributes: {}

        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.

        • cshader: string

          Compute shader source (WGSL code). Only supported on WebGPU platform.

        • fincludes: Map<string, string>

          A map containing key-value pairs of include names and their content. These are used for resolving #include directives in the fragment shader source.

        • fragmentOutputTypes: string | string[]

          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.

        • fshader: string

          Fragment shader source (GLSL code). Optional when useTransformFeedback or compute shader is specified.

        • name: string

          The name of the shader.

        • shaderLanguage: string

          Specifies the shader language of vertex and fragment shaders. Defaults to SHADERLANGUAGE_GLSL.

        • useTransformFeedback: boolean

          Specifies that this shader outputs post-VS data to a buffer.

        • vincludes: Map<string, string>

          A map containing key-value pairs of include names and their content. These are used for resolving #include directives in the vertex shader source.

        • vshader: string

          Vertex shader source (GLSL code). Optional when compute shader is specified.

      Returns Shader

      // 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: pc.SEMANTIC_POSITION

      const shader = new pc.Shader(graphicsDevice, shaderDefinition);