Class ColorMatrixFilter

The ColorMatrixFilter class lets you apply a 5x4 matrix transformation on the RGBA color and alpha values of every pixel on your displayObject to produce a result with a new set of RGBA color and alpha values. It's pretty powerful!

Example

import { filters } from 'pixi.js';

const colorMatrix = new filters.ColorMatrixFilter();
container.filters = [colorMatrix];
colorMatrix.contrast(2);

Author

Clément Chenebault clement@goodboydigital.com

Memberof

PIXI

Hierarchy (view full)

Constructors

Properties

autoFit: boolean

If enabled, PixiJS will fit the filter area into boundaries for better performance. Switch it off if it does not work for specific shader.

Default

true
disposeRunner: Runner<any, any[]>
enabled: boolean

If enabled is true the filter is applied, if false it will not.

grayscale: ((scale, multiply) => void)

Americanized alias of greyscale.

Type declaration

    • (scale, multiply): void
    • Parameters

      • scale: number

        value of the grey (0-1, where 0 is black)

      • multiply: boolean

        if true, current matrix and matrix are multiplied. If false, just set the current matrix with

      Returns void

Method

Returns

See

PIXI.ColorMatrixFilter.greyscale

legacy: boolean

Legacy filters use position and uvs from attributes (set by filter system)

multisample: null | MSAA_QUALITY

The samples override of the filter instance. If set to null, the sample count of the current render target is used.

Default

PIXI.Filter.defaultMultisample
padding: number

The padding of the filter. Some filters require extra space to breath such as a blur. Increasing this will add extra width and height to the bounds of the object that the filter is applied to.

program: Program

Program that the shader uses.

state: State

The WebGL state the filter requires to render.

uniformGroup: UniformGroup<Dict<any>>
SOURCE_KEY_MAP: Dict<string>

Used for caching shader IDs.

defaultMultisample: null | MSAA_QUALITY

Default filter samples for any filter.

Static

Default

PIXI.MSAA_QUALITY.NONE
defaultResolution: null | number

Default filter resolution for any filter.

Static

Accessors

  • get alpha(): number
  • The opacity value to use when mixing the original and resultant colors.

    When the value is 0, the original color is used without modification. When the value is 1, the result color is used. When in the range (0, 1) the color is interpolated between the original and result by this amount.

    Returns number

    Default

    1
    
  • set alpha(value): void
  • Parameters

    • value: number

    Returns void

  • get blendMode(): BLEND_MODES
  • Sets the blend mode of the filter.

    Returns BLEND_MODES

    Default

    PIXI.BLEND_MODES.NORMAL
    
  • set blendMode(value): void
  • Parameters

    Returns void

  • get matrix(): ColorMatrix
  • The matrix of the color matrix filter

    Returns ColorMatrix

    Member

    Default

    [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]
    
  • set matrix(value): void
  • Parameters

    Returns void

  • get resolution(): null | number
  • The resolution of the filter. Setting this to be lower will lower the quality but increase the performance of the filter. If set to null or 0, the resolution of the current render target is used.

    Returns null | number

    Default

    PIXI.Filter.defaultResolution
    
  • set resolution(value): void
  • Parameters

    • value: null | number

    Returns void

  • get uniforms(): Dict<any>
  • Shader uniform values, shortcut for uniformGroup.uniforms.

    Returns Dict<any>

  • get defaultFragmentSrc(): string
  • The default fragment shader source

    Returns string

  • get defaultVertexSrc(): string
  • The default vertex shader source

    Returns string

Methods

  • Applies the filter

    Parameters

    • filterManager: FilterSystem

      The renderer to retrieve the filter from

    • input: RenderTexture

      The input render target.

    • output: RenderTexture

      The target to output to.

    • Optional clearMode: CLEAR_MODES

      Should the output be cleared before rendering to it.

    • Optional _currentState: FilterState

      It's current state of filter. There are some useful properties in the currentState : target, filters, sourceFrame, destinationFrame, renderTarget, resolution

    Returns void

  • Set the black and white matrice.

    Parameters

    • multiply: boolean

      if true, current matrix and matrix are multiplied. If false, just set the current matrix with

    Returns void

  • Adjusts brightness

    Parameters

    • b: number

      value of the brigthness (0-1, where 0 is black)

    • multiply: boolean

      if true, current matrix and matrix are multiplied. If false, just set the current matrix with

    Returns void

  • Brown delicious browni filter (thanks Dominic Szablewski)

    Parameters

    • multiply: boolean

      if true, current matrix and matrix are multiplied. If false, just set the current matrix with

    Returns void

  • Parameters

    Returns boolean

  • We don't know exactly what it does, kind of gradient map, but funny to play with!

    Parameters

    • desaturation: number

      Tone values.

    • toned: number

      Tone values.

    • lightColor: number

      Tone values, example: 0xFFE580

    • darkColor: number

      Tone values, example: 0xFFE580

    • multiply: boolean

      if true, current matrix and matrix are multiplied. If false, just set the current matrix with

    Returns void

  • Set the contrast matrix, increase the separation between dark and bright Increase contrast : shadows darker and highlights brighter Decrease contrast : bring the shadows up and the highlights down

    Parameters

    • amount: number

      value of the contrast (0-1)

    • multiply: boolean

      if true, current matrix and matrix are multiplied. If false, just set the current matrix with

    Returns void

  • Desaturate image (remove color) Call the saturate function

    Returns void

  • Returns void

  • Set the matrices in grey scales

    Parameters

    • scale: number

      value of the grey (0-1, where 0 is black)

    • multiply: boolean

      if true, current matrix and matrix are multiplied. If false, just set the current matrix with

    Returns void

  • Set the hue property of the color

    Parameters

    • rotation: number

      in degrees

    • multiply: boolean

      if true, current matrix and matrix are multiplied. If false, just set the current matrix with

    Returns void

  • Color reversal film introduced by Eastman Kodak in 1935. (thanks Dominic Szablewski)

    Parameters

    • multiply: boolean

      if true, current matrix and matrix are multiplied. If false, just set the current matrix with

    Returns void

  • LSD effect

    Multiply the current matrix

    Parameters

    • multiply: boolean

      if true, current matrix and matrix are multiplied. If false, just set the current matrix with

    Returns void

  • Negative image (inverse of classic rgb matrix)

    Parameters

    • multiply: boolean

      if true, current matrix and matrix are multiplied. If false, just set the current matrix with

    Returns void

  • Night effect

    Parameters

    • intensity: number

      The intensity of the night effect.

    • multiply: boolean

      if true, current matrix and matrix are multiplied. If false, just set the current matrix with

    Returns void

  • Polaroid filter

    Parameters

    • multiply: boolean

      if true, current matrix and matrix are multiplied. If false, just set the current matrix with

    Returns void

  • Predator effect

    Erase the current matrix by setting a new indepent one

    Parameters

    • amount: number

      how much the predator feels his future victim

    • multiply: boolean

      if true, current matrix and matrix are multiplied. If false, just set the current matrix with

    Returns void

  • Erase the current matrix by setting the default one.

    Returns void

  • Set the saturation matrix, increase the separation between colors Increase saturation : increase contrast, brightness, and sharpness

    Parameters

    • Optional amount: number

      The saturation amount (0-1)

    • Optional multiply: boolean

      if true, current matrix and matrix are multiplied. If false, just set the current matrix with

    Returns void

  • Sepia image

    Parameters

    • multiply: boolean

      if true, current matrix and matrix are multiplied. If false, just set the current matrix with

    Returns void

  • Color motion picture process invented in 1916 (thanks Dominic Szablewski)

    Parameters

    • multiply: boolean

      if true, current matrix and matrix are multiplied. If false, just set the current matrix with

    Returns void

  • Sets each channel on the diagonal of the color matrix. This can be used to achieve a tinting effect on Containers similar to the tint field of some display objects like Sprite, Text, Graphics, and Mesh.

    Parameters

    • color: number

      Color of the tint. This is a hex value.

    • Optional multiply: boolean

      if true, current matrix and matrix are multiplied. If false, just set the current matrix with

    Returns void

  • Filter who transforms : Red -> Blue and Blue -> Red

    Parameters

    • multiply: boolean

      if true, current matrix and matrix are multiplied. If false, just set the current matrix with

    Returns void

  • Vintage filter (thanks Dominic Szablewski)

    Parameters

    • multiply: boolean

      if true, current matrix and matrix are multiplied. If false, just set the current matrix with

    Returns void

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

    Parameters

    • Optional vertexSrc: string

      The source of the vertex shader.

    • Optional fragmentSrc: string

      The source of the fragment shader.

    • Optional uniforms: Dict<any>

      Custom uniforms to use to augment the built-in ones.

    Returns Shader

    A shiny new PixiJS shader!

Generated using TypeDoc