Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Sep 25, 2020
wip
Aug 2, 2020
src
Sep 25, 2020
May 22, 2016
May 22, 2016
Aug 3, 2020
Sep 25, 2020

README.md

pixi-picture

Blend-modes emulated through filters

Allows to use blendModes that are not available in pure webgl implementation, such as PIXI.BLEND_MODES.OVERLAY.

Please, don't add children to sprite if you use those blendModes.

Use PIXI.picture.Sprite instead of PIXI.Sprite.

Overlay example

Logic: if sprite has special blendMode, push corresponding filter PIXI.picture.getBlendFilter(blendMode), if area is too small (<1px), dont draw at all.

If you want to use this with any components - just look in the source of Sprite how its done.

Assigning a filter to component directly container.filters = [PIXI.picture.getBlendFilter(blendMode)] should work too.

To be fixed: At the moment this implementation is a bit worse than v4, it uses extra pass for filter.

Heavenly filter feature

Enables backdropSampler uniform in filters, works only if you render stage to renderTexture or you have a filter somewhere in parents.

Sample DisplacementFilter takes everything from container and applies it as a displacement texture on backdrop.

Displacement example

Pixelate example

Compatibility

Compatible with PixiJS 5.3.2 and up. No guarantee for earlier versions!

For PixiJS v4.1 and prior see pixi-v4.1 branch

For PixiJS v4.7 and prior see pixi-v4.2 branch

For PixiJS v4.9 and prior see v4.x branch , npm 1.3.2

How to build

npm install
npm run build

About

A plugin that includes a sprite renderer that reduces border artifacts and 3 blend mode implementations for WebGL

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.