Used for caching shader IDs
Sets the blendmode of the filter
Sets the blendmode of the filter
Shader uniform values, shortcut for uniformGroup.uniforms
The default fragment shader source
The default vertex shader source
Applies the filter
The renderer to retrieve the filter from
The input render target.
The target to output to.
Generated using TypeDoc
A filter is a special shader that applies post-processing effects to an input texture and writes into an output render-target.
Example of the {@link PIXI.filters.BlurFilter BlurFilter}.
Usage
Filters can be applied to any DisplayObject or Container. PixiJS'
FilterSystem
renders the container into temporary Framebuffer, then filter renders it to the screen. Multiple filters can be added to thefilters
array property and stacked on each other.Previous Version Differences
In PixiJS v3, a filter was always applied to whole screen.
In PixiJS v4, a filter can be applied only part of the screen. Developers had to create a set of uniforms to deal with coordinates.
In PixiJS v5 combines both approaches. Developers can use normal coordinates of v3 and then allow filter to use partial Framebuffers, bringing those extra uniforms into account.
Also be aware that we have changed default vertex shader, please consult Wiki.
Frames
The following table summarizes the coordinate spaces used in the filtering pipeline:
Built-in Uniforms
PixiJS viewport uses screen (CSS) coordinates,
(0, 0, renderer.screen.width, renderer.screen.height)
, andprojectionMatrix
uniform maps it to the gl viewport.uSampler
The most important uniform is the input texture that container was rendered into. Important note: as with all Framebuffers in PixiJS, both input and output are premultiplied by alpha.
By default, input normalized coordinates are passed to fragment shader with
vTextureCoord
. Use it to sample the input.This filter is just one uniform less than {@link PIXI.filters.AlphaFilter AlphaFilter}.
outputFrame
The
outputFrame
holds the rectangle where filter is applied in screen (CSS) coordinates. It's the same asrenderer.screen
for a fullscreen filter. Only a part ofoutputFrame.zw
size of temporary Framebuffer is used,(0, 0, outputFrame.width, outputFrame.height)
,Filters uses this quad to normalized (0-1) space, its passed into
aVertexPosition
attribute. To calculate vertex position in screen space using normalized (0-1) space:inputSize
Temporary framebuffer is different, it can be either the size of screen, either power-of-two. The
inputSize.xy
are size of temporary framebuffer that holds input. TheinputSize.zw
is inverted, it's a shortcut to evade division inside the shader.Set
inputSize.xy = outputFrame.zw
for a fullscreen filter.To calculate input normalized coordinate, you have to map it to filter normalized space. Multiply by
outputFrame.zw
to get input coordinate. Divide byinputSize.xy
to get input normalized coordinate.resolution
The
resolution
is the ratio of screen (CSS) pixels to real pixels.inputPixel
inputPixel.xy
is the size of framebuffer in real pixels, same asinputSize.xy * resolution
inputPixel.zw
is invertedinputPixel.xy
.It's handy for filters that use neighbour pixels, like {@link PIXI.filters.FXAAFilter FXAAFilter}.
inputClamp
If you try to get info from outside of used part of Framebuffer - you'll get undefined behaviour. For displacements, coordinates has to be clamped.
The
inputClamp.xy
is left-top pixel center, you may ignore it, because we use left-top part of FramebufferinputClamp.zw
is bottom-right pixel center.OR
Additional Information
Complete documentation on Filter usage is located in the Wiki.
Since PixiJS only had a handful of built-in filters, additional filters can be downloaded here from the PixiJS Filters repository.
PIXI