Class ColorMatrix

Color Matrix filter class

See

demo
{@Link http://phoboslab.org/log/2013/11/fast-image-filters-with-webgl demo}

Example

Kodachrome filter

const filter = new ColorMatrix({
 matrix: [
    1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502,
    -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203,
    -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946,
    0, 0, 0, 1, 0
   ]
});
object.filters.push(filter);
object.applyFilters();

Hierarchy

BaseFilter
- ColorMatrix
  - HueRotation

Constructors

constructor

new ColorMatrix(options?): ColorMatrix
Constructor
Parameters
- Optional options: Record<string, any> = {}
  
  Options object
Returns ColorMatrix
Inherited from BaseFilter.constructor
- Defined in src/filters/BaseFilter.ts:58

Properties

colorsOnly

colorsOnly: boolean

Lock the colormatrix on the color part, skipping alpha, mainly for non webgl scenario to save some calculation

Default

true

`Optional` `Private` mainParameter

mainParameter?: keyof ColorMatrix

Name of the parameter that can be changed in the filter. Some filters have more than one parameter and there is no mainParameter

matrix

matrix: number[]

Colormatrix for pixels. array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning outside the -1, 1 range. 0.0039215686 is the part of 1 that get translated to 1 in 2d

Param

array of 20 numbers.

Default

`Private` vertexSource

vertexSource: string = vertexSource

Array of attributes to send with buffers. do not modify

`Static` defaults

defaults: Partial<TClassProperties<ColorMatrix>> = colorMatrixDefaultValues

`Static` type

type: string = 'ColorMatrix'

The class type. Used to identify which class this is. This is used for serialization purposes and internally it can be used to identify classes. As a developer you could use instance of Class but to avoid importing all the code and blocking tree shaking we try to avoid doing that.

Accessors

type

get type(): string
Filter type

Returns string
Default
Inherited from BaseFilter.type
- Defined in src/filters/BaseFilter.ts:25

Methods

_setupFrameBuffer

_setupFrameBuffer(options): void
Parameters
- options: TWebGLPipelineState
Returns void
Inherited from BaseFilter._setupFrameBuffer
- Defined in src/filters/BaseFilter.ts:190

_swapTextures

_swapTextures(options): void
Parameters
- options: TWebGLPipelineState
Returns void
Inherited from BaseFilter._swapTextures
- Defined in src/filters/BaseFilter.ts:217

applyTo

applyTo(options): void
Apply this filter to the input image data provided.

Determines whether to use WebGL or Canvas2D based on the options.webgl flag.
Parameters
- options: TWebGLPipelineState | T2DPipelineState
Returns void
Inherited from BaseFilter.applyTo
- Defined in src/filters/BaseFilter.ts:265

applyTo2d

applyTo2d(options): void
Apply the ColorMatrix operation to a Uint8Array representing the pixels of an image.
Parameters
- options: T2DPipelineState
Returns void
Overrides BaseFilter.applyTo2d
- Defined in src/filters/ColorMatrix.ts:70

applyToWebGL

applyToWebGL(options): void
Apply this filter using webgl.
Parameters
- options: TWebGLPipelineState
Returns void
Inherited from BaseFilter.applyToWebGL
- Defined in src/filters/BaseFilter.ts:315

bindAdditionalTexture

bindAdditionalTexture(gl, texture, textureUnit): void
Parameters
- gl: WebGLRenderingContext
- texture: WebGLTexture
- textureUnit: number
Returns void
Inherited from BaseFilter.bindAdditionalTexture
- Defined in src/filters/BaseFilter.ts:334

createHelpLayer

createHelpLayer(options): void
If needed by a 2d filter, this functions can create an helper canvas to be used remember that options.targetCanvas is available for use till end of chain.
Parameters
- options: T2DPipelineState
Returns void
Inherited from BaseFilter.createHelpLayer
- Defined in src/filters/BaseFilter.ts:380

createProgram

createProgram(gl, fragmentSource?, vertexSource?): {
    attributeLocations: TWebGLAttributeLocationMap;
    program: WebGLProgram;
    uniformLocations: TWebGLUniformLocationMap;
}
Compile this filter's shader program.
Parameters
- gl: WebGLRenderingContext
  
  The GL canvas context to use for shader compilation.
- fragmentSource: string = ...
  
  fragmentShader source for compilation
- vertexSource: string = ...
  
  vertexShader source for compilation
Returns {
    attributeLocations: TWebGLAttributeLocationMap;
    program: WebGLProgram;
    uniformLocations: TWebGLUniformLocationMap;
}
- attributeLocations: TWebGLAttributeLocationMap
- program: WebGLProgram
- uniformLocations: TWebGLUniformLocationMap
Inherited from BaseFilter.createProgram
- Defined in src/filters/BaseFilter.ts:77

getAttributeLocations

getAttributeLocations(gl, program): TWebGLAttributeLocationMap
Return a map of attribute names to WebGLAttributeLocation objects.
Parameters
- gl: WebGLRenderingContext
  
  The canvas context used to compile the shader program.
- program: WebGLProgram
  
  The shader program from which to take attribute locations.
Returns TWebGLAttributeLocationMap
A map of attribute names to attribute locations.
Inherited from BaseFilter.getAttributeLocations
- Defined in src/filters/BaseFilter.ts:146

getCacheKey

getCacheKey(): string
Returns a string that represent the current selected shader code for the filter. Used to force recompilation when parameters change or to retrieve the shader from cache

Returns string
Inherited from BaseFilter.getCacheKey
- Defined in src/filters/BaseFilter.ts:284

getFragmentSource

getFragmentSource(): string
Returns string
Overrides BaseFilter.getFragmentSource
- Defined in src/filters/ColorMatrix.ts:60

getMainParameter

getMainParameter(): undefined | string | boolean | number[] | ((gl, program) => TWebGLAttributeLocationMap) | ((options) => TWebGLProgramCacheItem) | ((options?) => boolean) | (() => {
    type: string;
}) | (() => {
    type: string;
}) | ((__namedParameters) => void) | ((gl, program) => TWebGLUniformLocationMap) | ((gl, uniformLocations) => void) | (() => string) | (() => string) | ((options) => void) | ((options) => void) | ((gl, fragmentSource?, vertexSource?) => {
    attributeLocations: TWebGLAttributeLocationMap;
    program: WebGLProgram;
    uniformLocations: TWebGLUniformLocationMap;
}) | ((gl, attributeLocations, aPositionData) => void) | ((options) => void) | ((options) => void) | ((options) => void) | ((gl, texture, textureUnit) => void) | ((gl, textureUnit) => void) | (() => undefined | string | boolean | number[] | ((gl, program) => TWebGLAttributeLocationMap) | ((options) => TWebGLProgramCacheItem) | ((options?) => boolean) | (() => {
    type: string;
}) | (() => {
    type: string;
}) | ((__namedParameters) => void) | ((gl, program) => TWebGLUniformLocationMap) | ((gl, uniformLocations) => void) | (() => string) | (() => string) | ((options) => void) | ((options) => void) | ((gl, fragmentSource?, vertexSource?) => {
    attributeLocations: TWebGLAttributeLocationMap;
    program: WebGLProgram;
    uniformLocations: TWebGLUniformLocationMap;
}) | ((gl, attributeLocations, aPositionData) => void) | ((options) => void) | ((options) => void) | ((options) => void) | ((gl, texture, textureUnit) => void) | ((gl, textureUnit) => void) | (() => string | boolean | number[] | ((gl: WebGLRenderingContext, program: WebGLProgram) => TWebGLAttributeLocationMap) | ... 21 more ... | undefined) | ((value) => void) | ((options) => void)) | ((value) => void) | ((options) => void)
Returns undefined | string | boolean | number[] | ((gl, program) => TWebGLAttributeLocationMap) | ((options) => TWebGLProgramCacheItem) | ((options?) => boolean) | (() => {
    type: string;
}) | (() => {
    type: string;
}) | ((__namedParameters) => void) | ((gl, program) => TWebGLUniformLocationMap) | ((gl, uniformLocations) => void) | (() => string) | (() => string) | ((options) => void) | ((options) => void) | ((gl, fragmentSource?, vertexSource?) => {
    attributeLocations: TWebGLAttributeLocationMap;
    program: WebGLProgram;
    uniformLocations: TWebGLUniformLocationMap;
}) | ((gl, attributeLocations, aPositionData) => void) | ((options) => void) | ((options) => void) | ((options) => void) | ((gl, texture, textureUnit) => void) | ((gl, textureUnit) => void) | (() => undefined | string | boolean | number[] | ((gl, program) => TWebGLAttributeLocationMap) | ((options) => TWebGLProgramCacheItem) | ((options?) => boolean) | (() => {
    type: string;
}) | (() => {
    type: string;
}) | ((__namedParameters) => void) | ((gl, program) => TWebGLUniformLocationMap) | ((gl, uniformLocations) => void) | (() => string) | (() => string) | ((options) => void) | ((options) => void) | ((gl, fragmentSource?, vertexSource?) => {
    attributeLocations: TWebGLAttributeLocationMap;
    program: WebGLProgram;
    uniformLocations: TWebGLUniformLocationMap;
}) | ((gl, attributeLocations, aPositionData) => void) | ((options) => void) | ((options) => void) | ((options) => void) | ((gl, texture, textureUnit) => void) | ((gl, textureUnit) => void) | (() => string | boolean | number[] | ((gl: WebGLRenderingContext, program: WebGLProgram) => TWebGLAttributeLocationMap) | ... 21 more ... | undefined) | ((value) => void) | ((options) => void)) | ((value) => void) | ((options) => void)
Inherited from BaseFilter.getMainParameter
- Defined in src/filters/BaseFilter.ts:351

getUniformLocations

getUniformLocations(gl, program): TWebGLUniformLocationMap
Return WebGL uniform locations for this filter's shader.
Parameters
- gl: WebGLRenderingContext
  
  The GL canvas context used to compile this filter's shader.
- program: WebGLProgram
  
  This filter's compiled shader program.
Returns TWebGLUniformLocationMap
Overrides BaseFilter.getUniformLocations
- Defined in src/filters/ColorMatrix.ts:102

isNeutralState

isNeutralState(options?): boolean
Generic isNeutral implementation for one parameter based filters. Used only in image applyFilters to discard filters that will not have an effect on the image Other filters may need their own version ( ColorMatrix, HueRotation, gamma, ComposedFilter )
Parameters
- Optional options: any
Returns boolean
Inherited from BaseFilter.isNeutralState
- Defined in src/filters/BaseFilter.ts:233

retrieveShader

retrieveShader(options): TWebGLProgramCacheItem
Retrieves the cached shader.
Parameters
- options: TWebGLPipelineState
Returns TWebGLProgramCacheItem
the compiled program shader
Inherited from BaseFilter.retrieveShader
- Defined in src/filters/BaseFilter.ts:295

sendAttributeData

sendAttributeData(gl, attributeLocations, aPositionData): void
Send attribute data from this filter to its shader program on the GPU.
Parameters
- gl: WebGLRenderingContext
  
  The canvas context used to compile the shader program.
- attributeLocations: Record<string, number>
  
  A map of shader attribute names to their locations.
- aPositionData: Float32Array
Returns void
Inherited from BaseFilter.sendAttributeData
- Defined in src/filters/BaseFilter.ts:177

sendUniformData

sendUniformData(gl, uniformLocations): void
Send data from this filter to its shader program's uniforms.
Parameters
- gl: WebGLRenderingContext
  
  The GL canvas context used to compile this filter's shader.
- uniformLocations: TWebGLUniformLocationMap
  
  A map of string uniform names to WebGLUniformLocation objects
Returns void
Overrides BaseFilter.sendUniformData
- Defined in src/filters/ColorMatrix.ts:118

setMainParameter

setMainParameter(value): void
Parameters
- value: any
Returns void
Inherited from BaseFilter.setMainParameter
- Defined in src/filters/BaseFilter.ts:355

setOptions

setOptions(__namedParameters): void
Parameters
- __namedParameters: Record<string, any>
Returns void
- Defined in src/filters/ColorMatrix.ts:52

toJSON

toJSON(): {
type: string;
}
Returns a JSON representation of an instance

Returns {
type: string;
}
JSON
- type: string
Inherited from BaseFilter.toJSON
- Defined in src/filters/BaseFilter.ts:405

toObject

toObject(): {
type: string;
}
Returns object representation of an instance

Returns {
type: string;
}
Object representation of an instance
- type: string
Inherited from BaseFilter.toObject
- Defined in src/filters/BaseFilter.ts:393

unbindAdditionalTexture

unbindAdditionalTexture(gl, textureUnit): void
Parameters
- gl: WebGLRenderingContext
- textureUnit: number
Returns void
Inherited from BaseFilter.unbindAdditionalTexture
- Defined in src/filters/BaseFilter.ts:345

`Static` fromObject

fromObject(__namedParameters, options): Promise<BaseFilter>
Parameters
- __namedParameters: Record<string, any>
- options: Abortable
Returns Promise<BaseFilter>
Inherited from BaseFilter.fromObject
- Defined in src/filters/BaseFilter.ts:410

Class ColorMatrix

See

Example

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Optional options: Record<string, any> = {}

Returns ColorMatrix

Properties

colorsOnly

Default

Optional Private mainParameter

matrix

Param

Default

Private vertexSource

Static defaults

Static type

Accessors

type

Returns string

Default

Methods

_setupFrameBuffer

Parameters

options: TWebGLPipelineState

Returns void

_swapTextures

Parameters

options: TWebGLPipelineState

Returns void

applyTo

Parameters

options: TWebGLPipelineState | T2DPipelineState

Returns void

applyTo2d

Parameters

options: T2DPipelineState

Returns void

applyToWebGL

Parameters

options: TWebGLPipelineState

Returns void

bindAdditionalTexture

Parameters

gl: WebGLRenderingContext

texture: WebGLTexture

textureUnit: number

Returns void

createHelpLayer

Parameters

options: T2DPipelineState

Returns void

createProgram

Parameters

gl: WebGLRenderingContext

fragmentSource: string = ...

vertexSource: string = ...

Returns { attributeLocations: TWebGLAttributeLocationMap; program: WebGLProgram; uniformLocations: TWebGLUniformLocationMap; }

attributeLocations: TWebGLAttributeLocationMap

program: WebGLProgram

uniformLocations: TWebGLUniformLocationMap

getAttributeLocations

Parameters

gl: WebGLRenderingContext

program: WebGLProgram

Returns TWebGLAttributeLocationMap

getCacheKey

Returns string

getFragmentSource

Returns string

getMainParameter

getUniformLocations

Parameters

`Optional` options: Record<string, any> = {}

`Optional` `Private` mainParameter

`Private` vertexSource

`Static` defaults

`Static` type

Returns {
attributeLocations: TWebGLAttributeLocationMap;
program: WebGLProgram;
uniformLocations: TWebGLUniformLocationMap;
}

`Optional` options: any

Returns {
type: string;
}

Returns {
type: string;
}

`Static` fromObject