Jump to content

Custom Container + Custom ObjectRenderer and Shader: How to append Filters?


Recommended Posts

I have another question which might be easily answered by somebody who is very familiar with the pixi sources. I'm in the progress of writing some custom classes to render a particle system. 
The particel rendering is all fine and working. I made some pretty good progress so far.
I have a small customized PIXI.Container with a PIXI.ObjectRenderer and custom shader (it's like a sprite is rendered through the SpriteRenderer). 
As I said, this really works rock solid at the moment, I have learned a lot from the existing Particle/Sprite Renderer and I'm really impressed how many great examples of coding can be found in the PIXI v3 sources :))
NOW: After getting so far, I want more: Post processing of my render result. I thought this would be easy, just plug in some filters and you're done. But there seems to be a problem with my rendering order. 
Filteres are not applied at all, filters are not behaving like normal (change over time) interfering with sprites on the parent container or I get filters running only when I combine two of them. I tried to create a very minimal example- but it's still a lot of code.
See this? That rectangle is blurring over time?
Or this: A gray filter is applied but its still red
Try to apply both filters to the stage: Nothing happens.
Try to apply both filters to the stage: Nothing happens.
Let's make a sprite added to the stage visible,
now both filteres are triggered
My assumption: My custom renderer (RenderTester in the demos) is not called at the right position so it's getting mixed up during rendering. I couldn't find any relevant container.children checks so I don't think this is a cause.
I currently override PIXI.Container#_renderWebGL, I had version where I overwrote PIXI.Container#renderWebGL, called by my own the filter Manager with push & pop but I could never get my expected result which is:
1. Render whatever there is to render in my container with custom ObjectRenderer.
2. Then take the result to apply some post processing (blurring, thresholds, alpha blending, ..)
Is my filter approach correct? Or should I create my own RenderTarget workflow even that the FilterManager is basically doing exactly what I want ( managing some RenderTargets to process on )
I compared my Container/ObjectRenderer combination with the existing Sprite/SpriteRenderer and could't find
anything different that would prevent my container from applying a correct filter post processing.
Any advice? Did I missed something really obvious? Thanks!
 var RenderTester = augment(PIXI.Container, function(uber){        this.constructor = function(texture){      uber.constructor.call(this);      this._texture = texture;    }        //does this prevent the filteres from getting applied?    this._renderWebGL = function(renderer){      renderer.setObjectRenderer( renderer.plugins.tempRenderer );      renderer.plugins.tempRenderer.render( this );    }  });


Link to comment
Share on other sites

Sometimes you need the zen time while writing a forum post to get the mind sorted. I think the render target size is messed up

as my container has just a bunch of virtual particle coordinates and no content at all. I will look into this.

Link to comment
Share on other sites

 Well this was easy at the end: Everything works as expected now,

I just had to set the property filterArea on my container which is being rendered so that the current filter 

knows how large the RenderTarget should be. Until this the size was undetermined as the bounding rect of the container was unclear.


So this is my solution:

this.filterArea = new PIXI.Rectangle(0,0,900,500)

The other problems are outlined? Might be related to my efforts to isolate the problems, in my more complex version it totally works now.


Thanks for reading.

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.

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.


  • Recently Browsing   0 members

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