pixijs / Pixi Filters
Licence: mit
Collection of community-authored custom display filters for PixiJS
Stars: ✭ 524
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Pixi Filters
Phaser Kinetic Scrolling Plugin
Kinetic Scrolling plugin for Canvas using Phaser Framework
Stars: ✭ 117 (-77.67%)
Mutual labels: webgl, pixijs
Creature webgl
2D Skeletal Animation WebGL Runtimes for Creature ( PixiJS, PhaserJS, ThreeJS, BabylonJS, Cocos Creator )
Stars: ✭ 140 (-73.28%)
Mutual labels: webgl, pixijs
Pixi.js
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
Stars: ✭ 34,982 (+6575.95%)
Mutual labels: webgl, pixijs
Awesome Pixijs
My list of awesome pixi.js related parties
Stars: ✭ 489 (-6.68%)
Mutual labels: webgl, pixijs
Morph
Morph is a free and open-source tool for creating designs, animations or interactive visualizations from data.
Stars: ✭ 107 (-79.58%)
Mutual labels: webgl, pixijs
React Regl
React Fiber Reconciler Renderer for Regl WebGL
Stars: ✭ 171 (-67.37%)
Mutual labels: webgl, glsl-shaders
3d Game Shaders For Beginners
🎮 A step-by-step guide to implementing SSAO, depth of field, lighting, normal mapping, and more for your 3D game.
Stars: ✭ 11,698 (+2132.44%)
Mutual labels: webgl, glsl-shaders
Leaflet.pixioverlay
Bring Pixi.js power to Leaflet maps
Stars: ✭ 264 (-49.62%)
Mutual labels: webgl, pixijs
Blotter
A JavaScript API for drawing unconventional text effects on the web.
Stars: ✭ 2,833 (+440.65%)
Mutual labels: webgl, glsl-shaders
Pixi Seed
Pixi.js project seed with ES6 and webpack
Stars: ✭ 149 (-71.56%)
Mutual labels: webgl, pixijs
Gown.js
UI system for pixi.js inspired by feathers-ui
Stars: ✭ 195 (-62.79%)
Mutual labels: webgl, pixijs
Webgl Fundamentals
WebGL lessons that start with the basics
Stars: ✭ 3,315 (+532.63%)
Mutual labels: webgl, glsl-shaders
Detect Gpu
Classifies GPUs based on their 3D rendering benchmark score allowing the developer to provide sensible default settings for graphically intensive applications.
Stars: ✭ 460 (-12.21%)
Mutual labels: webgl, pixijs
Shaderkit
A library of fragment shaders you can use in any SpriteKit project.
Stars: ✭ 488 (-6.87%)
Mutual labels: glsl-shaders
Laserweb4
Collaborative effort on the next version of LaserWeb / CNCWeb
Stars: ✭ 456 (-12.98%)
Mutual labels: webgl
Lume
Create CSS3D/WebGL applications declaratively with HTML. Give regular DOM elements shadow and lighting.
Stars: ✭ 445 (-15.08%)
Mutual labels: webgl
PixiJS Filters
Demo
Click here to interactively play with filters to see how they work.
Filters
All filters work with PixiJS v5.
| Filter | Preview |
|---|---|
|
AdjustmentFilter @pixi/filter-adjustment |
 |
|
AdvancedBloomFilter @pixi/filter-advanced-bloom |
 |
|
AsciiFilter @pixi/filter-ascii |
 |
|
BevelFilter @pixi/filter-bevel |
 |
|
BloomFilter @pixi/filter-bloom |
 |
|
BulgePinchFilter @pixi/filter-bulge-pinch |
 |
|
ColorMapFilter @pixi/filter-color-map |
 |
|
ColorOverlayFilter @pixi/filter-color-overlay |
 |
|
ColorReplaceFilter @pixi/filter-color-replace |
 |
|
ConvolutionFilter @pixi/filter-convolution |
 |
|
CrossHatchFilter @pixi/filter-cross-hatch |
 |
|
CRTFilter @pixi/filter-crt |
 |
|
DotFilter @pixi/filter-dot |
 |
|
DropShadowFilter @pixi/filter-drop-shadow |
 |
|
EmbossFilter @pixi/filter-emboss |
 |
|
GlitchFilter @pixi/filter-glitch |
 |
|
GlowFilter @pixi/filter-glow |
 |
|
Godray @pixi/filter-godray |
 |
|
KawaseBlurFilter @pixi/filter-kawase-blur |
 |
|
MotionBlurFilter @pixi/filter-motion-blur |
 |
|
MultiColorReplaceFilter @pixi/filter-multi-color-replace |
 |
|
OldFilmFilter @pixi/filter-old-film |
 |
|
OutlineFilter @pixi/filter-outline |
 |
|
PixelateFilter @pixi/filter-pixelate |
 |
|
RadialBlurFilter @pixi/filter-radial-blur |
 |
|
ReflectionFilter @pixi/filter-reflection |
 |
|
RGBSplitFilter @pixi/filter-rgb |
 |
|
ShockwaveFilter @pixi/filter-shockwave |
 |
|
SimpleLightmapFilter @pixi/filter-simple-lightmap |
 |
|
TiltShiftFilter @pixi/filter-tilt-shift |
 |
|
TwistFilter @pixi/filter-twist |
 |
|
ZoomBlurFilter @pixi/filter-zoom-blur |
 |
Built-In Filters
PixiJS has a handful of core filters that are built-in to the PixiJS library.
| Filter | Preview |
|---|---|
| AlphaFilter |  |
| BlurFilter |  |
| ColorMatrixFilter (contrast) |  |
| ColorMatrixFilter (desaturate) |  |
| ColorMatrixFilter (kodachrome) |  |
| ColorMatrixFilter (lsd) |  |
| ColorMatrixFilter (negative) |  |
| ColorMatrixFilter (polaroid) |  |
| ColorMatrixFilter (predator) |  |
| ColorMatrixFilter (saturate) |  |
| ColorMatrixFilter (sepia) |  |
| DisplacementFilter |  |
| NoiseFilter |  |
Installation
Installation is available using NPM:
npm install pixi-filters
Alternatively, you can use a CDN such as JSDelivr:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi-filters.js"></script>
If all else failes, you can manually download the bundled file from the releases section and include it in your project.
Building
PixiJS Filters uses Lerna under-the-hood to build all of the filters separately. Install all dependencies by simply running the following.
npm install
Build all filters, demo and screenshots by running the following:
npm run build
Build single filter by running the following:
npm run build:prod -- --scope "@pixi/filter-emboss"
Build multiple filters where scope is a glob expression:
npm run build:prod -- --scope "{@pixi/filter-emboss,@pixi/filter-glow}"
Watch all filters (auto-rebuild upon src changes):
npm run watch
Build all filters in dev-mode (un-minified):
npm run build:dev
Documentation
API documention can be found here.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].