pixijs / pixi-extra-filters

[deprecated] Please see https://github.com/pixijs/pixi-filters

IMPORTANT: This project is no longer maintained. All community filters have been combined with the core pixi-filters and are not longer maintained here. Pull requests should be made to pixi-filters.

pixi-extra-filters

Some extra filters for pixi that aren't in the core plugin.

Usage

Browserify

If you use browserify you can use pixi-extra-filters like this:

var PIXI = require('pixi.js'),
    extraFilters = require('pixi-extra-filters');

var sprite = new PIXI.Sprite(someTexture);
sprite.filters = [new extraFilters.GlowFilter(15, 2, 1, 0xFF0000, 0.5)];

Prebuilt Files

If you are just including the built files, pixi-extra-filters extends the PIXI.filters namespace with its filters:

var sprite = new PIXI.Sprite(someTexture);
sprite.filters = [new PIXI.filters.GlowFilter(15, 2, 1, 0xFF0000, 0.5)];

Building

You will need to have node setup on your machine.

Then you can install dependencies and build:

npm i && npm run build

That will output the built distributables to ./dist.

pixi-extra-filters's Issues

SimpleLightmapFilter

Hello,

I've just created a simple lightmap filter for my needs. Here is a codepen and here is the tutorial I used.

This is sufficient for simple needs, it takes in arguments :

• The lightmap texture
• The ambient color
• The screen resolution

Here is a demo of the filter in action from the codepen above :

I think this can be a good addition to pixi-extras-filters. I can provide everything from the code to the doc. But may be this is not relevant? Let me know.

PIXI.filters vs PIXI.Filter

Hi,

PIXI.Filter is not defined in Pixi v3 or v4, but the lib tries to extend the PIXI.Filter

GlowFilter.prototype = Object.create(PIXI.Filter.prototype);

SimpleLightmapFilter can't be used . There are many error in shader.

Publish on npm

Can you please publish 1.1.1 on npm ?

pixi v4

Rework for pixiv4

Publish to npm

Hello!

Can you please publish this package on npm? Thanks!

Glow filter missing quality multiplier

pixi-extra-filters/src/filters/glow/GlowFilter.js

Line 27 in c038a8f

.replace(/%QUALITY_DIST%/gi, '' + (1 / quality / distance).toFixed(7))

pixi-extra-filters/src/filters/glow/GlowFilter.js

Line 28 in c038a8f

.replace(/%DIST%/gi, '' + distance.toFixed(7))

On the lines above the distance should be multiplied by quality before being set to the shader constant. According to the source algorithm on (https://codepen.io/mishaa/pen/raKzrm)

Deprecation Warning: AstractFilter has been renamed to Filter, please use PIXI.Filter

Deprecation Warning: AstractFilter has been renamed to Filter, please use PIXI.Filter

object_sprite.alpha = 0.85; // Works

object_sprite.filters = [new PIXI.filters.GlowFilter(15, 2, 1, 0xFF0000, 0.5)]; // Deprecated?

PixiJS 4

glslify is not defined

Hello,

I've just tried to use GlowFilter, but I got this error:

pixi-extra-filters.min.js:1 Uncaught ReferenceError: glslify is not defined

I only included pixi-extra-filters.min.js , please advice which file to include also.
Thanks

glowFilter Cannot create property 'value' on number '15'

when trying the glowFilter example, the constructor throw this error

OutlineFilter: this.uniforms.pixelWidth.value === null

I've just tried to use this and I noticed the this.uniforms.pixelWidth.value === null
at the point of time it is trying to mutate the value property.

Locally I have set the object up with a dummy value so it can at least process and it seems to be working fine.

Impacted Lines 69 and 78

Sample Filter Images ?

Would it be helpful for me to make a folder with sample pictures of each filter? I can do this for the vanilla pix filtersi as well.

Crashing the GPU: GlowFilter

Hey,

So the GlowFilter seems to be crashing webGL, the CPU zips up to 100% (which normally isnt enough to hang the laptop) but it isnt until webGL actually craps out that the lappy is usable again.

var stage = new PIXI.Container()
var sprite = new PIXI.Sprite.fromImage( 'apple2.png' )
sprite.position.set( 0, 0 )

stage.addChild( sprite )

var glow = new PIXI.filters.GlowFilter( WIDTH, HEIGHT, 15, 2, 1, 0xFFFFFF, .5 )
stage.filters = [ glow ]

setInterval( () => {
  renderer.render( stage )
}, 1000 / 60 )

MacBook Pro Retina mid 2014
Mac OSX 10.11.1
GeForce GT 750M 2048MB or Intel Iris Pro 1536MB
Chrome Version 47.0.2526.73 (64-bit)

Only log is WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost but I think thats after I've tabbed out of Chrome.

Chrome gpu data:

Graphics Feature Status
Canvas: Hardware accelerated
Flash: Hardware accelerated
Flash Stage3D: Hardware accelerated
Flash Stage3D Baseline profile: Hardware accelerated
Compositing: Hardware accelerated
Multiple Raster Threads: Enabled
Rasterization: Software only. Hardware acceleration disabled
Video Decode: Hardware accelerated
Video Encode: Hardware accelerated
WebGL: Hardware accelerated

ColorReplacementFilter

It would be great to have a pixi v3 compatible color replacement filter. There was one floating around made by msha back in v2, but it no longer works. Here's a link to it: http://codepen.io/mishaa/pen/emGNXE

There's also some discussion about the filter (and pictures showing its effect) in this forum: http://www.html5gamedevs.com/topic/10640-outline-a-sprite-change-certain-colors/page-2#entry89808

Publish new build

Hello,

Can you please update the build and version on npm, since pr #11 is not on npm I throw deprecation warnings in the console. I initially wanted to wait v4 and the new filters repo but I plan to open a demo soon