Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pixijs/filters
Collection of community-authored custom display filters for PixiJS
https://github.com/pixijs/filters
filters-pixijs glsl-shaders pixijs webgl
Last synced: 7 days ago
JSON representation
Collection of community-authored custom display filters for PixiJS
- Host: GitHub
- URL: https://github.com/pixijs/filters
- Owner: pixijs
- License: mit
- Created: 2016-02-28T17:46:21.000Z (almost 9 years ago)
- Default Branch: main
- Last Pushed: 2024-12-06T14:27:16.000Z (about 1 month ago)
- Last Synced: 2024-12-23T05:53:32.212Z (14 days ago)
- Topics: filters-pixijs, glsl-shaders, pixijs, webgl
- Language: TypeScript
- Homepage: https://pixijs.io/filters/docs/
- Size: 8.58 MB
- Stars: 974
- Watchers: 33
- Forks: 159
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - pixijs/filters - Collection of community-authored custom display filters for PixiJS (TypeScript)
- awesome - pixijs/filters - Collection of community-authored custom display filters for PixiJS (TypeScript)
README
# PixiJS Filters
[](https://github.com/pixijs/filters/actions/workflows/nodejs.yml?query=branch%3Amain) [](https://www.npmjs.com/package/pixi-filters)
## Compatibility
Depending on your version of PixiJS, you'll need to figure out which major version of PixiJS Filters to use.
| PixiJS | PixiJS Filters |
|--------|----------------|
| v5.x | v3.x |
| v6.x | v4.x |
| v7.x | v5.x |
| v8.x | v6.x |
## Installation
Installation is available using NPM:
```bash
npm install pixi-filters
```
Alternatively, you can use a CDN such as JSDelivr:
```html
```
If all else failes, you can manually download the bundled file from the [releases](https://github.com/pixijs/filters/releases) section and include it in your project.
## Demo
[View the PixiJS Filters Demo](https://pixijs.io/filters/examples/) to interactively play with filters to see how they work.
## Filters
| Filter | Preview |
|----------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------|
| **AdjustmentFilter**
_pixi-filters/adjustment_
[View demo][Adjustment_demo] |  |
| **AdvancedBloomFilter**
_pixi-filters/advanced-bloom_
[View demo][AdvancedBloom_demo] |  |
| **AsciiFilter**
_pixi-filters/ascii_
[View demo][Ascii_demo] |  |
| **BackdropBlurFilter**
_pixi-filters/backdrop-blur_
[View demo][BackdropBlur_demo] |  |
| **BevelFilter**
_pixi-filters/bevel_
[View demo][Bevel_demo] |  |
| **BloomFilter**
_pixi-filters/bloom_
[View demo][Bloom_demo] |  |
| **BulgePinchFilter**
_pixi-filters/bulge-pinch_
[View demo][BulgePinch_demo] |  |
| **ColorGradientFilter**
_pixi-filters/color-gradient_
[View demo][ColorGradient_demo] |  |
| **ColorMapFilter**
_pixi-filters/color-map_
[View demo][ColorMap_demo] |  |
| **ColorOverlayFilter**
_pixi-filters/color-overlay_
[View demo][ColorOverlay_demo] |  |
| **ColorReplaceFilter**
_pixi-filters/color-replace_
[View demo][ColorReplace_demo] |  |
| **ConvolutionFilter**
_pixi-filters/convolution_
[View demo][Convolution_demo] |  |
| **CrossHatchFilter**
_pixi-filters/cross-hatch_
[View demo][CrossHatch_demo] |  |
| **CRTFilter**
_pixi-filters/crt_
[View demo][CRT_demo] |  |
| **DotFilter**
_pixi-filters/dot_
[View demo][Dot_demo] |  |
| **DropShadowFilter**
_pixi-filters/drop-shadow_
[View demo][DropShadow_demo] |  |
| **EmbossFilter**
_pixi-filters/emboss_
[View demo][Emboss_demo] |  |
| **GlitchFilter**
_pixi-filters/glitch_
[View demo][Glitch_demo] |  |
| **GlowFilter**
_pixi-filters/glow_
[View demo][Glow_demo] |  |
| **GodrayFilter**
_pixi-filters/godray_
[View demo][Godray_demo] |  |
| **GrayscaleFilter**
_pixi-filters/grayscale_
[View demo][Grayscale_demo] |  |
| **HslAdjustmentFilter**
_pixi-filters/hsl-adjustment_
[View demo][HslAdjustment_demo] |  |
| **KawaseBlurFilter**
_pixi-filters/kawase-blur_
[View demo][KawaseBlur_demo] |  |
| **MotionBlurFilter**
_pixi-filters/motion-blur_
[View demo][MotionBlur_demo] |  |
| **MultiColorReplaceFilter**
_pixi-filters/multi-color-replace_
[View demo][MultiColorReplace_demo] |  |
| **OldFilmFilter**
_pixi-filters/old-film_
[View demo][OldFilm_demo] |  |
| **OutlineFilter**
_pixi-filters/outline_
[View demo][Outline_demo] |  |
| **PixelateFilter**
_pixi-filters/pixelate_
[View demo][Pixelate_demo] |  |
| **RadialBlurFilter**
_pixi-filters/radial-blur_
[View demo][RadialBlur_demo] |  |
| **ReflectionFilter**
_pixi-filters/reflection_
[View demo][Reflection_demo] |  |
| **RGBSplitFilter**
_pixi-filters/rgb-split_
[View demo][RGBSplit_demo] |  | |
| **ShockwaveFilter**
_pixi-filters/shockwave_
[View demo][Shockwave_demo] |  |
| **SimpleLightmapFilter**
_pixi-filters/simple-lightmap_
[View demo][SimpleLightmap_demo] |  |
| **TiltShiftFilter**
_pixi-filters/tilt-shift_
[View demo][TiltShift_demo] |  |
| **TwistFilter**
_pixi-filters/twist_
[View demo][Twist_demo] |  |
| **ZoomBlurFilter**
_pixi-filters/zoom-blur_
[View demo][ZoomBlur_demo] |  |
## Built-In Filters
PixiJS has a handful of core filters that are built-in to the PixiJS library.
| Filter | Preview |
|-----------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------|
| **AlphaFilter**
[View demo][Alpha_demo] |  |
| **BlurFilter**
[View demo][Blur_demo] |  |
| **ColorMatrixFilter** (contrast)
[View demo][ColorMatrix_demo] |  |
| **ColorMatrixFilter** (desaturate)
[View demo][ColorMatrix_demo] |  |
| **ColorMatrixFilter** (kodachrome)
[View demo][ColorMatrix_demo] |  |
| **ColorMatrixFilter** (lsd)
[View demo][ColorMatrix_demo] |  |
| **ColorMatrixFilter** (negative)
[View demo][ColorMatrix_demo] |  |
| **ColorMatrixFilter** (polaroid)
[View demo][ColorMatrix_demo] |  |
| **ColorMatrixFilter** (predator)
[View demo][ColorMatrix_demo] |  |
| **ColorMatrixFilter** (saturate)
[View demo][ColorMatrix_demo] |  |
| **ColorMatrixFilter** (sepia)
[View demo][ColorMatrix_demo] |  |
| **DisplacementFilter**
[View demo][Displacement_demo] |  |
| **NoiseFilter**
[View demo][Noise_demo] |  |
## Building
Install all dependencies by simply running the following.
```bash
npm install
```
Build all filters, demo and screenshots by running the following:
```bash
npm run build
```
Watch all filters and demo (auto-rebuild upon src changes):
```bash
npm run watch
```
## Documentation
API documention can be found [here](http://pixijs.io/filters/docs/).
[Adjustment_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=AdjustmentFilter
[AdvancedBloom_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=AdvancedBloomFilter
[Ascii_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=AsciiFilter
[BackdropBlur_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=BackdropBlurFilter
[Bevel_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=BevelFilter
[Bloom_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=BloomFilter
[BulgePinch_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=BulgePinchFilter
[ColorGradient_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ColorGradientFilter
[ColorMap_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ColorMapFilter
[ColorOverlay_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ColorOverlayFilter
[ColorReplace_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ColorReplaceFilter
[Convolution_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ConvolutionFilter
[CrossHatch_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=CrossHatchFilter
[CRT_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=CRTFilter
[Dot_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=DotFilter
[DropShadow_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=DropShadowFilter
[Emboss_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=EmbossFilter
[Glitch_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=GlitchFilter
[Glow_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=GlowFilter
[Godray_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=GodrayFilter
[Grayscale_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=GrayscaleFilter
[HslAdjustment_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=HslAdjustmentFilter
[KawaseBlur_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=KawaseBlurFilter
[MotionBlur_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=MotionBlurFilter
[MultiColorReplace_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=MultiColorReplaceFilter
[OldFilm_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=OldFilmFilter
[Outline_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=OutlineFilter
[Pixelate_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=PixelateFilter
[RadialBlur_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=RadialBlurFilter
[Reflection_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ReflectionFilter
[RGBSplit_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=RGBSplitFilter
[Shockwave_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ShockwaveFilter
[SimpleLightmap_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=SimpleLightmapFilter
[TiltShift_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=TiltShiftFilter
[Twist_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=TwistFilter
[ZoomBlur_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ZoomBlurFilter
[Alpha_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=AlphaFilter
[Blur_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=BlurFilter
[ColorMatrix_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=ColorMatrixFilter
[Displacement_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=DisplacementFilter
[Noise_demo]: https://filters.pixijs.download/main/examples/index.html?enabled=NoiseFilter