pixijs / filters Goto Github PK

View Code? Open in Web Editor NEW

885.0 33.0 157.0 8.45 MB

Collection of community-authored custom display filters for PixiJS

Home Page: https://pixijs.io/filters/docs/

License: MIT License

JavaScript 3.00% GLSL 13.85% HTML 0.26% TypeScript 62.25% WGSL 20.64%

pixijs webgl filters-pixijs glsl-shaders

filters's Introduction

PixiJS 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:

npm install pixi-filters

Alternatively, you can use a CDN such as JSDelivr:

<script src="https://cdn.jsdelivr.net/npm/pixi-filters@latest/dist/browser/pixi-filters.min.js"></script>

If all else failes, you can manually download the bundled file from the releases section and include it in your project.

Demo

View the PixiJS Filters Demo to interactively play with filters to see how they work.

Filters

Filter	Preview
AdjustmentFilter pixi-filters/adjustment View demo
AdvancedBloomFilter pixi-filters/advanced-bloom View demo
AsciiFilter pixi-filters/ascii View demo
BackdropBlurFilter pixi-filters/backdrop-blur View demo
BevelFilter pixi-filters/bevel View demo
BloomFilter pixi-filters/bloom View demo
BulgePinchFilter pixi-filters/bulge-pinch View demo
ColorGradientFilter pixi-filters/color-gradient View demo
ColorMapFilter pixi-filters/color-map View demo
ColorOverlayFilter pixi-filters/color-overlay View demo
ColorReplaceFilter pixi-filters/color-replace View demo
ConvolutionFilter pixi-filters/convolution View demo
CrossHatchFilter pixi-filters/cross-hatch View demo
CRTFilter pixi-filters/crt View demo
DotFilter pixi-filters/dot View demo
DropShadowFilter pixi-filters/drop-shadow View demo
EmbossFilter pixi-filters/emboss View demo
GlitchFilter pixi-filters/glitch View demo
GlowFilter pixi-filters/glow View demo
GodrayFilter pixi-filters/godray View demo
GrayscaleFilter pixi-filters/grayscale View demo
HslAdjustmentFilter pixi-filters/hsl-adjustment View demo
KawaseBlurFilter pixi-filters/kawase-blur View demo
MotionBlurFilter pixi-filters/motion-blur View demo
MultiColorReplaceFilter pixi-filters/multi-color-replace View demo
OldFilmFilter pixi-filters/old-film View demo
OutlineFilter pixi-filters/outline View demo
PixelateFilter pixi-filters/pixelate View demo
RadialBlurFilter pixi-filters/radial-blur View demo
ReflectionFilter pixi-filters/reflection View demo
RGBSplitFilter pixi-filters/rgb-split View demo
ShockwaveFilter pixi-filters/shockwave View demo
SimpleLightmapFilter pixi-filters/simple-lightmap View demo
TiltShiftFilter pixi-filters/tilt-shift View demo
TwistFilter pixi-filters/twist View demo
ZoomBlurFilter pixi-filters/zoom-blur View demo

Built-In Filters

PixiJS has a handful of core filters that are built-in to the PixiJS library.

Filter	Preview
AlphaFilter View demo
BlurFilter View demo
ColorMatrixFilter (contrast) View demo
ColorMatrixFilter (desaturate) View demo
ColorMatrixFilter (kodachrome) View demo
ColorMatrixFilter (lsd) View demo
ColorMatrixFilter (negative) View demo
ColorMatrixFilter (polaroid) View demo
ColorMatrixFilter (predator) View demo
ColorMatrixFilter (saturate) View demo
ColorMatrixFilter (sepia) View demo
DisplacementFilter View demo
NoiseFilter View demo

Building

Install all dependencies by simply running the following.

npm install

Build all filters, demo and screenshots by running the following:

npm run build

Watch all filters and demo (auto-rebuild upon src changes):

npm run watch

Documentation

API documention can be found here.

filters's People

Contributors

Stargazers

Watchers

Forkers

pawelstan bma73 clairetsai818 happy-ferret aknep nikosandronikos nchase onlycxue psyrendust dhilip89 finscn naranjamecanica sjfricke ahung89 newrebel exponenta dtysky groseler nuthinking lazyknightx emmanuel-lp5 snichele ewanse mfoonirlee c8se pondrejk mathatan eldiegod secretmapper stantoxt haoyuan336 partynikko ffx0s sugishima zwiebelritter ndee85 shawnlinx j1930021 jacobcoughenour inzrb admin-hellogroup sxweet webcaetano sabrinaayu devsubhani fuzinato jonlepage jcyuan dai696 gakit kouketsu-t templeblock xdestiny110 rtalon83 cryemo nathanvogel ran125 guardwu2015 alaingalvan mudcube websiteinspiration shalevy1 meynl gini4136 364734461 forkkit lilieming muzaffaraka madukubah jonaskjellstrom johnfordman xingzheerniu 30in2020 laino bjindal4 mmacasang1014 doc22940 krtr bekiremretopuz matthewvroman spring500 quzzion jrvisuals vb6hobbyst7 yukun8612 lvfangren sjeiti blurymind liguorui torbendalgaard sts0mrg0 hasanhduzgun chrisarasin dev7355608 sjp8 turbopixi uxder gregmax17 boban-dj st3v0

filters's Issues

Run Shockwave Filter just once?

I've tried setting the shockwave value to null using a settimeout and removing the filter, but that doesn't seem to work right. I want the shockwave applied just once to my bg sprite when the user clicks on it - not in a looping fashion like the sample Is there a way to do this that is performance friendly? Overall the filter is super cool but seems like it would be costly.

What is LISENCE of this repository

I wanna use this in my MIT product, could you please add LISENCE?

Fails to build on old node version

I'm almost certain this is because of the old node I'm running (and which the company mandates... grrrrrr) - but there's an error when it tries to run the linting part. Could the script either fail to run if it detects an older node version, and / or provide pre-built bin files for those who may be in a similar situation please? Cheers

C:\Projects\WebGL\pixi-filters>npm run lint

> [email protected] lint C:\Projects\WebGL\pixi-filters
> eslint src/**/*.js

C:\Projects\WebGL\pixi-filters\node_modules\eslint\node_modules\strip-bom\index.js:2
module.exports = x => {
                   ^^
SyntaxError: Unexpected token =>
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (C:\Projects\WebGL\pixi-filters\node_modules\eslint\lib\config\config-file.js:23:16)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "lint"
npm ERR! node v0.12.0
npm ERR! npm  v2.5.1
npm ERR! code ELIFECYCLE
npm ERR! [email protected] lint: `eslint src/**/*.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] lint script 'eslint src/**/*.js'.
npm ERR! This is most likely a problem with the pixi-filters package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     eslint src/**/*.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls pixi-filters
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Projects\WebGL\pixi-filters\npm-debug.log

C:\Projects\WebGL\pixi-filters>

SimpleLightmapFilter isn't working correctly

Added a new example for SimpleLightmapFilter: 50d41de

Getting this stack track when opening examples (npm run examples) and enabling the SimpleLightmapFilter:

[SUGGEST]Manage shader's source with ES6 standard method.

@bigtimebuddy I refactor my custom Filter and use common export string & import string & template string like this :

import commonHead from '../_shared/common-head.frag.js';
import loadDiffuse from '../_shared/load-diffuse.frag.js';
import loadNormal from '../_shared/load-normal.frag.js';
import computeNormal from '../_shared/compute-normal.frag.js';

export default `

${commonHead}

void main(void)
{

${loadDiffuse}
${loadNormal}

    uViewSize;

    // simplified lambert shading that makes assumptions for ambient color

    // compute Distance
    float D = 1.0;

${computeNormal}

    vec3 L = vec3(1.0, 1.0, 1.0);

    // pre-multiply light color with intensity
    // then perform "N dot L" to determine our diffuse
    vec3 diffuse = uLightColor * max(dot(N, L), 0.0);

    vec3 finalColor = diffuseColor.rgb * diffuse;

    gl_FragColor = vec4(finalColor, diffuseColor.a);
}

`;

then use

import vertex from './ambient.vert.js';
import fragment from './ambient.frag.js';

in Filter js file.

I think this way is standard and more common . It's better than using glslify(pixi 4.0) or readFileSync(pixi 4.5) or rollup's rule(pixi-filters).

[REQUEST]Let Blur support `Working in lower resolution`

I read a article : https://software.intel.com/en-us/blogs/2014/07/15/an-investigation-of-fast-real-time-gpu-based-image-blur-algorithms

there is a tip for optimizing Blur Shader:　Let Blur support Working in lower resolution

I hope pixi's blur could support this feature.

example:

blurFilter.resolutionScale = 0.5;

The the blurFilter will be working in 1/2 resolution.

Pixelate Filter is Busted

If you see the demos, the PixelateFilter doesn't appear to be operating correctly. Shows up as a solid block instead of pixelated image. http://pixijs.github.io/pixi-filters/examples/

[REQUEST] Glare Filter

A picture is worth a thousand words:

Add a Threshold Filter

Hello!

As per pixijs/pixijs#2297 it would be nice to have a threshold filter with a configurable threshold point. This has applications in a few other effects (bloom-like effects, faux-metaball effects, image processing).

Thank you!

when use DisplacementFilter & ColorMatrixFilter , there is a strange thing.

open http://pixijs.github.io/pixi-filters/examples/

First , enable the DisplacementFilter, it's already enabled by default.

Then enable the ColorMatrixFilter, you will find the strange thing.

I don't know how to describe the thing.

Please try it by yourself.

How to do multi-pass in pixi's filter/shader ?

in this article : https://software.intel.com/en-us/blogs/2014/07/15/an-investigation-of-fast-real-time-gpu-based-image-blur-algorithms

The "Kawase blur" filter is a multi-pass filter. But I don't know how to do multi-pass in pixi's filter/shader .

Could you help me please ? thanks.

About outline filter

When the thickness is big , the result is strange :

Is it a bug ?

[SUGGEST] Add `list of files modified` to Wiki

When I create a new filter , I need to modify some files.
But I often forget someone.

So, suggest add a clear list of the files need to modified.

	modified:   filters/all/src/index.js
	modified:   filters/all/package.json
	modified:   filters/all/types.d.ts
	modified:   filters/all/README.md
	modified:   examples/index.html
	modified:   tools/screenshots/config.json
	modified:   README.md

[REQUEST] Add some arguments to make GodrayFilter support non-parallel light.

GodrayFilter is very amazing , I love it.

But I found that some God ray effects are use non-parallel light.
e.g.

So Could you make GodrayFilter support non-parallel light ,please ?
Or Should we need a new AdvancedGodrayFilter ?

DropShadowFilter

Hi!

Would it be possible to have DropShadowFIlter in pixi v4? If its simply copying files from v3 with a little change I would be happy to help.

Cheers,
P.

ColorMatrixFilter broken in Chrome

Firefox version: 49.0.2
Chrome version: Version 54.0.2840.87 m

If you go to this page in both Firefox and Chrome and compare you can see the the ColorMatrixFilter has no effect.

https://pixijs.github.io/examples/#/filters/filter.js

I will include an image comparing the two where it is apparent where Firefox is on the left and Chrome is on the right. I am using this filter heavily in my application so I would b very appreciative if it was fixed, thank you.

[REQUEST] The Demo uses separate filters-files when `build:dev`

The Demo is not only for demo , it's also a very good test case.
I think many developers would use it for testing when the filter is under develop.
But the new Demo is hard to test and dev.

When add or modify the filters-files , users have to run npm run build again.

I think uses separate filters-files is a better choice.

Thank you.

npm install doesn't have any js files

When I install via npm like so:

npm install pixi-filters

I don't get any js files. Just the following:

.npmignore
package.json
README.md

Am I missing a step here?

`npm run build` can't run.

I've install all node_modules .
but there're some errors:

rocky@Rocky-MBP pixi-filters [* master]$ npm run build

> @ prebuild /Users/rocky/DEV/@git-fav/_pixijs.com/pixi-filters
> npm run lint


> @ lint /Users/rocky/DEV/@git-fav/_pixijs.com/pixi-filters
> eslint scripts **/src **/rollup.config.js --fix


> @ build /Users/rocky/DEV/@git-fav/_pixijs.com/pixi-filters
> lerna run build

lerna info version 2.4.0
lerna ERR! build Errored while running script in '@pixi/filter-ascii'
lerna ERR! execute callback with error
lerna ERR! Error: Command failed: npm run build
lerna ERR! [!] Error: Cannot find module '@tools/build'
lerna ERR! Error: Cannot find module '@tools/build'
lerna ERR!     at Function.Module._resolveFilename (module.js:469:15)
lerna ERR!     at Function.Module._load (module.js:417:25)
lerna ERR!     at Module.require (module.js:497:17)
lerna ERR!     at require (internal/module.js:20:19)
lerna ERR!     at Object.<anonymous> (/Users/rocky/DEV/@git-fav/_pixijs.com/pixi-filters/filters/ascii/rollup.config.js:5:29)
lerna ERR!     at Module._compile (module.js:570:32)
lerna ERR!     at Object.require.extensions..js (/Users/rocky/DEV/@git-fav/_pixijs.com/pixi-filters/node_modules/rollup/bin/rollup:2675:8)
lerna ERR!     at Module.load (module.js:487:32)
lerna ERR!     at tryModuleLoad (module.js:446:12)
lerna ERR!     at Function.Module._load (module.js:438:3)
lerna ERR! 
lerna ERR! 
lerna ERR! npm ERR! Darwin 17.0.0
lerna ERR! npm ERR! argv "/Users/rocky/.nvm/versions/node/v6.10.3/bin/node" "/Users/rocky/.nvm/versions/node/v6.10.3/bin/npm" "run" "build:umd"
lerna ERR! npm ERR! node v6.10.3
lerna ERR! npm ERR! npm  v3.10.10
lerna ERR! npm ERR! code ELIFECYCLE
lerna ERR! npm ERR! @pixi/[email protected] build:umd: `rollup -c -f umd && rollup -cp -f umd`
lerna ERR! npm ERR! Exit status 1
lerna ERR! npm ERR! 
lerna ERR! npm ERR! Failed at the @pixi/[email protected] build:umd script 'rollup -c -f umd && rollup -cp -f umd'.
lerna ERR! npm ERR! Make sure you have the latest version of node.js and npm installed.
lerna ERR! npm ERR! If you do, this is most likely a problem with the @pixi/filter-ascii package,
lerna ERR! npm ERR! not with npm itself.
lerna ERR! npm ERR! Tell the author that this fails on your system:
lerna ERR! npm ERR!     rollup -c -f umd && rollup -cp -f umd
lerna ERR! npm ERR! You can get information on how to open an issue for this project with:
lerna ERR! npm ERR!     npm bugs @pixi/filter-ascii
lerna ERR! npm ERR! Or if that isn't available, you can get their info via:
lerna ERR! npm ERR!     npm owner ls @pixi/filter-ascii
lerna ERR! npm ERR! There is likely additional logging output above.
lerna ERR! npm WARN Local package.json exists, but node_modules missing, did you mean to install?
lerna ERR! 
lerna ERR! npm ERR! Please include the following file with any support request:
lerna ERR! npm ERR!     /Users/rocky/DEV/@git-fav/_pixijs.com/pixi-filters/filters/ascii/npm-debug.log
lerna ERR! 
lerna ERR! npm ERR! Darwin 17.0.0
lerna ERR! npm ERR! argv "/Users/rocky/.nvm/versions/node/v6.10.3/bin/node" "/Users/rocky/.nvm/versions/node/v6.10.3/bin/npm" "run" "build"
lerna ERR! npm ERR! node v6.10.3
lerna ERR! npm ERR! npm  v3.10.10
lerna ERR! npm ERR! code ELIFECYCLE
lerna ERR! npm ERR! @pixi/[email protected] build: `npm run build:umd && npm run build:es`
lerna ERR! npm ERR! Exit status 1
lerna ERR! npm ERR! 
lerna ERR! npm ERR! Failed at the @pixi/[email protected] build script 'npm run build:umd && npm run build:es'.
lerna ERR! npm ERR! Make sure you have the latest version of node.js and npm installed.
lerna ERR! npm ERR! If you do, this is most likely a problem with the @pixi/filter-ascii package,
lerna ERR! npm ERR! not with npm itself.
lerna ERR! npm ERR! Tell the author that this fails on your system:
lerna ERR! npm ERR!     npm run build:umd && npm run build:es
lerna ERR! npm ERR! You can get information on how to open an issue for this project with:
lerna ERR! npm ERR!     npm bugs @pixi/filter-ascii
lerna ERR! npm ERR! Or if that isn't available, you can get their info via:
lerna ERR! npm ERR!     npm owner ls @pixi/filter-ascii
lerna ERR! npm ERR! There is likely additional logging output above.
lerna ERR! npm WARN Local package.json exists, but node_modules missing, did you mean to install?
lerna ERR! 
lerna ERR! npm ERR! Please include the following file with any support request:
lerna ERR! npm ERR!     /Users/rocky/DEV/@git-fav/_pixijs.com/pixi-filters/filters/ascii/npm-debug.log
lerna ERR! 
lerna ERR! > @pixi/[email protected] build /Users/rocky/DEV/@git-fav/_pixijs.com/pixi-filters/filters/ascii
lerna ERR! > npm run build:umd && npm run build:es
lerna ERR! 
lerna ERR! 
lerna ERR! > @pixi/[email protected] build:umd /Users/rocky/DEV/@git-fav/_pixijs.com/pixi-filters/filters/ascii
lerna ERR! > rollup -c -f umd && rollup -cp -f umd
lerna ERR! 
lerna ERR! 
lerna ERR!     at Promise.all.then.arr (/Users/rocky/DEV/@git-fav/_pixijs.com/pixi-filters/node_modules/execa/index.js:236:11)
lerna WARN complete Waiting for 3 child processes to exit. CTRL-C to exit immediately.
lerna ERR! build Errored while running script in '@pixi/filter-color-replace'
lerna ERR! build Errored while running script in '@pixi/filter-bloom'
lerna ERR! build Errored while running script in '@pixi/filter-bulge-pinch'
(node:19430) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 12): Error: Command failed: npm run build
[!] Error: Cannot find module '@tools/build'
Error: Cannot find module '@tools/build'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/rocky/DEV/@git-fav/_pixijs.com/pixi-filters/filters/ascii/rollup.config.js:5:29)
    at Module._compile (module.js:570:32)
    at Object.require.extensions..js (/Users/rocky/DEV/@git-fav/_pixijs.com/pixi-filters/node_modules/rollup/bin/rollup:2675:8)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)


npm ERR! Darwin 17.0.0
npm ERR! argv "/Users/rocky/.nvm/versions/node/v6.10.3/bin/node" "/Users/rocky/.nvm/versions/node/v6.10.3/bin/npm" "run" "build:umd"
npm ERR! node v6.10.3
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @pixi/[email protected] build:umd: `rollup -c -f umd && rollup -cp -f umd`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @pixi/[email protected] build:umd script 'rollup -c -f umd && rollup -cp -f umd'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the @pixi/filter-ascii package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     rollup -c -f umd && rollup -cp -f umd
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs @pixi/filter-ascii
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls @pixi/filter-ascii
npm ERR! There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/rocky/DEV/@git-fav/_pixijs.com/pixi-filters/filters/ascii/npm-debug.log

npm ERR! Darwin 17.0.0
npm ERR! argv "/Users/rocky/.nvm/versions/node/v6.10.3/bin/node" "/Users/rocky/.nvm/versions/node/v6.10.3/bin/npm" "run" "build"
npm ERR! node v6.10.3
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @pixi/[email protected] build: `npm run build:umd && npm run build:es`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @pixi/[email protected] build script 'npm run build:umd && npm run build:es'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the @pixi/filter-ascii package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run build:umd && npm run build:es
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs @pixi/filter-ascii
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls @pixi/filter-ascii
npm ERR! There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/rocky/DEV/@git-fav/_pixijs.com/pixi-filters/filters/ascii/npm-debug.log

> @pixi/[email protected] build /Users/rocky/DEV/@git-fav/_pixijs.com/pixi-filters/filters/ascii
> npm run build:umd && npm run build:es


> @pixi/[email protected] build:umd /Users/rocky/DEV/@git-fav/_pixijs.com/pixi-filters/filters/ascii
> rollup -c -f umd && rollup -cp -f umd



npm ERR! Darwin 17.0.0
npm ERR! argv "/Users/rocky/.nvm/versions/node/v6.10.3/bin/node" "/Users/rocky/.nvm/versions/node/v6.10.3/bin/npm" "run" "build"
npm ERR! node v6.10.3
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ build: `lerna run build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ build script 'lerna run build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     lerna run build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/rocky/DEV/@git-fav/_pixijs.com/pixi-filters/npm-debug.log
rocky@Rocky-MBP pixi-filters [* master]$

Talk about `ShockwaveFilter`

My game need shockwave effect , so I have been doing research on it recently.

I think the shockwave need these features(params) :

center ( already in current ShockwaveFilter, but not in pixel coord)
time ( already in current ShockwaveFilter)
speed
duration
amplitude ( already in current ShockwaveFilter, params.x )
refraction ( already in current ShockwaveFilter, params.y )
wavelength ( already in current ShockwaveFilter, params.z, but not in pixel coord )
Q: params.z = half of wavelength ???
lighter

the speed & duration are very important for shockwave effect in a real game.

And the shockwave needs attenuation effect ( bad English) . I mean that the amplitude should be smaller and smaller with time.

the lighter is used for enhancing the effect. In some cases (e.g. a pond in a dark forest) , if no lighter , player will see the shockwave effect difficulty.

So I want to create a new ShockwaveFilter, then an old question:

Should I create a new AdvancedShockwaveFilter or create a new shockwave filter ?

Could you give me some advices please , thank you ?

[SUGGEST] Move `filters/all` & `filters/**/lib` to `dist` folder.

let the filters only include source code of all filters.
put the build-files to a standalone folder.

[REQUEST] Need more arguments of BloomFilter.

The BloomFilter based on Blur Filter. There are 4 arguments in Blur Filter strength, quality, resolution, kernelSize

But only strength(named blur in BloomFilter) should be set .
I hope BloomFilter could supply all Blur Filter's arguments as optional .

They could help user to control the detail of bloom effect .

BTW , I hope strength and blur could become one name (bad english..., but I think you could understand me)

[SUGGEST] Make the ColorReplace Filter support multi colors.

In the real game , replace multi colors is very useful.
e.g. it could be used for making multi characters with one template image + some color palettes.

this is a template image:

this is a color palette, in game, the bottom colors in the template image will be replaced with top colors :

another color palette, could create another character:

Shockwave filter doesn't seen to work on Chrome/Android

demo: http://pixijs.github.io/pixi-filters/examples/
probably on other mobile browsers too.

Any thoughts on this?

normal map GodrayFilter

Hi , first , thank you guys for GodrayFilter and AdvancedBloomFilter , your are awsome !!!
is there a chance that it can work with normal map.
idea to make fake dynamic lighting or special effects on sprites. like Emboss Effect.
if yes, do you have an example, its is simple to do?

i would like use this normal map generator
https://www.codeandweb.com/spriteilluminator

thanks

Switch Pixi reference in examples to use HTTPS

Change http://s3-eu-west-1.amazonaws.com/pixi.js/dev/pixi.min.js to https://s3-eu-west-1.amazonaws.com/pixi.js/dev/pixi.min.js.

This would prevent issues in situations where the github.io link is HTTPS rather than HTTP and throws a Mixed Content exception.

How to get the error log when create the screenshots ?

When I run npm run build, if there are some errors when creating the screenshots , I can't get them.
So

How to get the error log when create the screenshots ?
Thanks.

RGB Filter, blue doen't mooves

In the rgb split filter the blue doesn't moves at all :D

https://jsfiddle.net/6w0kuqko/71/ -> in here I move red, bue and green and you can see red and green moving

https://jsfiddle.net/6w0kuqko/73/ -> in here i move only blue and set red and green to 0,0. Nothing is moving !

[REQUEST] A Color Adjust Filter is very useful.

I saw a color adjust Filter example : http://webglsamples.org/color-adjust/color-adjust.html
And there is a article talk about the detail of it : https://www.youtube.com/watch?v=rfQ8rKGTVlg#t=25m03s
It's very useful for a game vfx.

Maybe we could try to include it .

BTW , could the ColorMatrixFilter do the same thing ?

[BUG: ShockwaveFilter] When canvas isn't a square , the wave is not a circle.

I think the code for computing dist has bug.

Pixi.Filter is undefined

Hello! Your README approach doesn't seem to work or there's a version conflict or something.

  <script src="/node_modules/pixi.js/bin/pixi.js"></script>
  <script src="/node_modules/pixi-filters/bin/pixi-filters.js"></script>

In PIXI.Filter.prototype -> Uncaught TypeError: Cannot read property 'prototype' of undefined
PIXI.VERSION 3.0.10
pixi-filters 1.0.0

Where to find the `pixi-filters.js` & `pixi-filters.min.js` ?

In the last pixi-filters , after npm run build , I can't find the dist files.
Where can I find the pixi-filters.js & pixi-filters.min.js ?

Thanks.

How to make my filter support `import fragment from './xxxx.frag'`

I found in this repo , use import fragment from './xxxx.frag' to include a shader file.
But in pixi.js, don't support this way.

How to make my filter support import fragment from './xxxx.frag' ?

BlurFilter here and in Core?

Hi!

Just looking to catch up with some v4 goodness on the typescript definitions.

Is it normal that this repo contains a BlurFilter and the Pixi core has a BlurFilter too?

https://github.com/pixijs/pixi.js/blob/dev-4.1.0/src/filters/blur/BlurFilter.js

Thanks!

Need to update with AlphaFilter

see pixijs/pixijs#4349

Drop shadow not in CDNJS

Hello,

For a project I'm working now I need the CDN files but the drop shadow (only filter I need for it) is not in the CDNJS links.

https://cdnjs.com/libraries/pixi-filters/1.0.8

Also is not found in the file with all the filters:

https://cdnjs.cloudflare.com/ajax/libs/pixi-filters/1.0.8/filters.js
https://cdnjs.cloudflare.com/ajax/libs/pixi-filters/1.0.8/filters.min.js

Hopefully you can upload it.

Thanks,
Rodrigo.

where is the bin folder ?

Is there build for the filters ?

The arguments of Filter should not be uv coord.

Example :
the center of ShockwaveFilter used uv coord, the x/y is [0.0 , 1.0].

When user want to use it , have to do some transform.

I know the transform is easy , but uv is the low layer in renderer, it should be black-box for the game coder.

And in real case , e.g. : a stone drop into a water .
The logic of game should be :

// water is a Sprite object.

var filter = new Shockwave(store.position);
water.filters = [filter];

It's easy and clear.

if Shockwave.center use uv coord.

the code maybe like this :

// water is a Sprite object.

var center = new PIXI.Point(0,0);
center.x = store.position.x / app.renderer.width;
center.y = store.position.y / app.renderer.height;
var filter = new Shockwave();

In fact , use app.renderer.width & app.renderer.height is wrong.
it's need use filterArea. but user can't get the filterArea easily.

So I think the filter should use screen/viewport/pixel coord, and filter do transform internal .

Drop shadow filter bad performance?

Testing the filters here: http://pixijs.github.io/pixi-filters/examples/ most of the filters work fine at 60FPS on a laptop (i7, gtx 950M) but the drop shadow filter performance is really bad. Can the implementation of drop shadow be somehow improved?

[BUG]A black rect in the center of `ShockwaveFilter` on some Android devices.

A black rect in the center of ShockwaveFilter on some Android devices.

When time become bigger , the black rect would disappear.

Android 7.0 + Samsung S7.

there is a thread talk about it , but I don't know how to solve.

A different (maybe better) algorithm of Bloom Filter

I create a Bloom Filter : https://github.com/finscn/pixi.js/blob/master/src/morefilters/bloom/BloomBrightnessFilter.js

The algorithm learned form https://learnopengl.com/#!Advanced-Lighting/Bloom

I test it and PIXI's Bloom Filter, the effect of BloomBrightnessFilter is better.

PIXI's Bloom Filter is faster , opengl's Bloom is better(but need more computation) .
So I hope PIXI could support both bloom filters.

Question - Can the Drop shadow filter render in a higher resolution

Right now the Drop shadow filter is rendering at a 1x resolution in a 2x retina environment. Is this something that is easily fixed as a setting, like in #44?

I've tried to recreate above pull request for the Drop shadow filter but it stays "jagged"...

any intention to implement invertColor Filter ?

[REQUEST] Motion Blur Filter

I think the motion-blur is very useful.

like the blur effect of background in this gif

Deprecate Bower Support

Bower support has been dropped in favor of using npm/yarn in PixiJS. Should drop support for it here and undo the complex publish process.

Merge in pixi-extra-filters

https://github.com/pixijs/pixi-extra-filters is a redundant repo for optional PixiJS filters. Suggest merging these two repos to create less confusion and take advantage of documentation, examples, etc.

[SUGGEST] Use one code-style about `{}` in js code.

There are 2 styles in pixi-filters

xxxxx {

}

and

xxxxx
{

}

Whatever use which one , just use one, please.

BTW, I could accept the shader's code style is different from js's .

Cannot find module 'glslify'

I want to use pixi-filters like this :

const PIXI = require('pixi.js'),
    filters = require('pixi-filters')

But when my browserify task is running, i get this error :

All my packages are up to date and correctly installed, but this one seems to have a problem with glslify.

How can I solve the problem ?

Replace Browserify Build with Rollup

Replace Browserify builds with Rollup builds. Makes it much easier to generate clean build files without the internal module overhead in Browserify. Should help reduce the overhead of building and build for es environments (pkg.module)

Importing pixi-filters doesn't seem to do anything

I'm trying to get the filters to work, but am failing to do so.

I've imported both pixi.js and pixi-filters to no avail:

import 'pixi.js';
import 'pixi-filters';

// ...

const outlineFilterRed = new PIXI.filters.GlowFilter(15, 2, 1, 0xff9999, 0.5);

Produces the following error:

Property 'GlowFilter' does not exist on type 'typeof filters'.

Package Versions:
pixi.js: 4.5.5
pisi-filters: 2.0.0

Could you please point out what am I doing wrong?

P.S
This issue on stackoverflow: https://stackoverflow.com/questions/46014961/how-to-get-pixi-filters-working