Jump to content

Pixi.js gets realtime filters!


Mat Groves
 Share

Recommended Posts

Howdy all!

 

Thought this would be a good place to let you all know that we have finally got round to implementing realtime filters in pixi.js for the webGL renderer :D

 

More info can be found on our blog: http://www.goodboydigital.com/pixijs-webgl-filters/

 

Also you can check out the fish pool demo to see filters in action: http://www.goodboydigital.com/pixijs/examples/15/indexAll.html

 

post-165-0-17141300-1384421455.jpg

 

Best off all? They are hot to trot, easy to add and you can start using them right now :)

 

Enjoy!

 

Mat

Link to comment
Share on other sites

Thanks everyone! Glad you like em'

 

 

This is howsome!

I wonder how hard it could be to implement light-map filters for dynamic lightning on 2d sprites....

 

Not so hard at all :)

 

 

Thanks !

 

Amazing as usual !

 

Filters don't seem to work on Graphics though but that is not a big deal.

 

Interesting, filters are supposed to work on graphics too :/ if you could share some sample code, I would be more than happy to fix the issue!

 

Thanks

Link to comment
Share on other sites

Interesting, filters are supposed to work on graphics too :/ if you could share some sample code, I would be more than happy to fix the issue!

 

Well, just go here :

 

http://pixelshaped.com/reunionjs/

 

And type this in the Chrome Console :

mainContainer.filters = [blurFilter];

 

Assuming mainContainer is a PIXI.DisplayObjectContainer that contains the whole thing. And that blurFilter is a PIXI.BlurFilter. You can display the source, nothing is obfuscated ;) Maybe I did something wrong, though.

Link to comment
Share on other sites

I have tested the filters on Android and iOS and here are my results:

 

iPad 2 (iOS 6.1.3) with CocoonJS Launcher 1.4.5

issues: Not working, only black screen.

 

Nexus 7 (Android 4.3) with CocoonJS Launcher 1.4.5

issues: Working, but slow. (BlurFilter 19fps, GreyFilter 52fps)

 

Nexus 7 (Android 4.3) with Chrome 31.0

issues: Working! (BlurFilter 32fps, GreyFilter 60fps)

 

Nexus 7 (Android 4.3) with Firefox 25.0

issues: Working! (BlurFilter 37fps, GreyFilter 60fps)

Link to comment
Share on other sites

I have tested the filters on Android and iOS and here are my results:

 

iPad 2 (iOS 6.1.3) with CocoonJS Launcher 1.4.5

issues: Not working, only black screen.

 

Nexus 7 (Android 4.3) with CocoonJS Launcher 1.4.5

issues: Working, but slow. (BlurFilter 19fps, GreyFilter 52fps)

 

Nexus 7 (Android 4.3) with Chrome 31.0

issues: Working! (BlurFilter 32fps, GreyFilter 60fps)

 

Nexus 7 (Android 4.3) with Firefox 25.0

issues: Working! (BlurFilter 37fps, GreyFilter 60fps)

 

Thanks for this enpu! Most interesting..

I will have to investigate further methinks!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...