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

constructor

Properties

autoFit disposeRunner enabled grayscale legacy multisample padding program state uniformGroup SOURCE_KEY_MAP defaultMultisample defaultResolution

Accessors

alpha blendMode matrix resolution uniforms defaultFragmentSrc defaultVertexSrc

Methods

apply blackAndWhite brightness browni checkUniformExists colorTone contrast desaturate destroy greyscale hue kodachrome lsd negative night polaroid predator reset saturate sepia technicolor tint toBGR vintage from

Constructors

constructor

Properties

autoFit

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

disposeRunner: Runner<any, any[]>

enabled

enabled: boolean

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

grayscale

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

Readonly legacy

legacy: boolean

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

multisample

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

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

Program that the shader uses.

state

state: State

The WebGL state the filter requires to render.

uniformGroup

uniformGroup: UniformGroup<Dict<any>>

Static SOURCE_KEY_MAP

SOURCE_KEY_MAP: Dict<string>

Used for caching shader IDs.

Static defaultMultisample

defaultMultisample: null | MSAA_QUALITY

Default filter samples for any filter.

Static

Default

PIXI.MSAA_QUALITY.NONE

Static defaultResolution

defaultResolution: null | number

Default filter resolution for any filter.

Static

Accessors

alpha

  • 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

blendMode

  • 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

matrix

  • 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

resolution

  • 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

uniforms

  • get uniforms(): Dict<any>

  • Shader uniform values, shortcut for uniformGroup.uniforms.

    Returns Dict<any>

Static defaultFragmentSrc

  • get defaultFragmentSrc(): string

  • The default fragment shader source

    Returns string

Static defaultVertexSrc

  • get defaultVertexSrc(): string

  • The default vertex shader source

    Returns string

Methods

apply

  • apply(filterManager, input, output, clearMode?, _currentState?): void

  • 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

blackAndWhite

  • blackAndWhite(multiply): 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

brightness

  • brightness(b, multiply): 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

browni

  • browni(multiply): 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

checkUniformExists

  • checkUniformExists(name, group): boolean

  • Parameters

    Returns boolean

colorTone

  • colorTone(desaturation, toned, lightColor, darkColor, multiply): void

  • 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

contrast

  • contrast(amount, multiply): 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

  • desaturate(): void

  • Desaturate image (remove color) Call the saturate function

    Returns void

destroy

  • destroy(): void

  • Returns void

greyscale

  • greyscale(scale, multiply): 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

hue

  • hue(rotation, multiply): 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

kodachrome

  • kodachrome(multiply): 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

  • lsd(multiply): 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

  • negative(multiply): 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

  • night(intensity, multiply): 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

  • polaroid(multiply): 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

  • predator(amount, multiply): 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

reset

  • reset(): void

  • Erase the current matrix by setting the default one.

    Returns void

saturate

  • saturate(amount?, multiply?): 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

  • sepia(multiply): void

  • Sepia image

    Parameters

    • multiply: boolean

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

    Returns void

technicolor

  • technicolor(multiply): 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

tint

  • tint(color, multiply?): 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

toBGR

  • toBGR(multiply): 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

  • vintage(multiply): 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

Static from

  • from(vertexSrc?, fragmentSrc?, uniforms?): Shader

  • 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!

Settings

Member Visibility

Theme

On This Page

constructorautoFitdisposeRunnerenabledgrayscalelegacymultisamplepaddingprogramstateuniformGroupSOURCE_KEY_MAPdefaultMultisampledefaultResolutionalphablendModematrixresolutionuniformsdefaultFragmentSrcdefaultVertexSrcapplyblackAndWhitebrightnessbrownicheckUniformExistscolorTonecontrastdesaturatedestroygreyscalehuekodachromelsdnegativenightpolaroidpredatorresetsaturatesepiatechnicolortinttoBGRvintagefrom

Generated using TypeDoc