PixiJS

Class: ColorMatrixFilter

ColorMatrixFilter

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

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

Extends

Members

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.

Default Value:
  • 1

matrix Array<number>

The matrix of the color matrix filter

Default Value:
  • [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]

Methods

blackAndWhite (multiply) void

ts:231

Set the black and white matrice.

Name Type Description
multiply boolean

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

brightness (b, multiply) void

ts:164

Adjusts brightness

Name Type Description
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 @param matrix

browni (multiply) void

ts:453

Brown delicious browni filter (thanks Dominic Szablewski)

Name Type Description
multiply boolean

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

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

ts:487

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

Name Type Description
desaturation number

Tone values.
toned number

Tone values.
lightColor ColorSource

Tone values, example: 0xFFE580
darkColor ColorSource

Tone values, example: 0xFFE580
multiply boolean

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

contrast (amount, multiply) void

ts:300

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

Name Type Description
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 @param matrix

desaturate () void

ts:345

Desaturate image (remove color) Call the saturate function

grayscale (scale, multiply) void

ts:221

for our american friends!

Name Type Description
scale number
multiply boolean

greyscale (scale, multiply) void

ts:203

Set the matrices in grey scales

Name Type Description
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 @param matrix

hue (rotation, multiply) void

ts:248

Set the hue property of the color

Name Type Description
rotation number

in degrees
multiply boolean

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

kodachrome (multiply) void

ts:436

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

Name Type Description
multiply boolean

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

lsd (multiply) void

ts:579

LSD effect

Multiply the current matrix

Name Type Description
multiply boolean

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

negative (multiply) void

ts:351

Negative image (inverse of classic rgb matrix)

Name Type Description
multiply boolean

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

night (intensity, multiply) void

ts:523

Night effect

Name Type Description
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 @param matrix

polaroid (multiply) void

ts:402

Polaroid filter

Name Type Description
multiply boolean

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

predator (amount, multiply) void

ts:543

Predator effect

Erase the current matrix by setting a new indepent one

Name Type Description
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 @param matrix

reset () void

ts:598

Erase the current matrix by setting the default one.

saturate (amount, multiply) void

ts:323

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

Name Type Attributes Default Description
amount number 0

The saturation amount (0-1)
multiply boolean <optional>

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

sepia (multiply) void

ts:368

Sepia image

Name Type Description
multiply boolean

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

technicolor (multiply) void

ts:385

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

Name Type Description
multiply boolean

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

tint (color, multiply) void

ts:182

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.

Name Type Attributes Description
color ColorSource

Color of the tint. This is a hex value.
multiply boolean <optional>

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

toBGR (multiply) void

ts:419

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

Name Type Description
multiply boolean

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

vintage (multiply) void

ts:470

Vintage filter (thanks Dominic Szablewski)

Name Type Description
multiply boolean

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

Inherited Properties

From class Filter

antialias FilterAntialias inherited

should the filter use antialiasing?

Default Value:
  • inherit

blendMode BLEND_MODES inherited overrides

Get the blend mode of the filter.

Default Value:
  • "normal"

blendRequired boolean inherited

Whether or not this filter requires the previous render texture for blending.

Default Value:
  • false

enabled boolean inherited

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

Default Value:
  • true

padding number inherited

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.

Default Value:
  • 0

resolution number inherited

The resolution of the filter. Setting this to be lower will lower the quality but increase the performance of the filter.

Default Value:
  • 1

From class Shader

compatibleRenderers number readonly inherited

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 inherited

An instance of the GL program used by the WebGL renderer

gpuProgram GpuProgram inherited

An instance of the GPU program used by the WebGPU renderer

resources Record<string, any> inherited

A record of the resources used by the shader.

Inherited Methods

From class Filter

apply (filterManager, input, output, clearMode) void inherited

ts:219

Applies the filter

Name Type Description
filterManager FilterSystem

The renderer to retrieve the filter from
input Texture

The input render target.
output RenderSurface

The target to output to.
clearMode boolean

Should the output be cleared before rendering to it

From class Shader

addResource (name, groupIndex, bindIndex) void inherited

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 inherited

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!

Inherited Events

From class Shader

destroy inherited

ts:173

Fired after rendering finishes.