Jump to content

Fisheye custom filter wrong coordinates based on filterArea


Recommended Posts


I'm trying to adapt shaders from this sample to Pixi JS custom filter:

Unfortunately something is wrong with coordinates (though i'm using webgl code as a reference, but copy-paste to pixi doesn't work), i've tried this manual about Filter Area
and this topic


but it didn't help. maybe because in my case there is vertex shader also.

Here is fiddle with my code where the problem exists

Can someone explain how to do it right?
ivan.popelyshev can you help me?

Link to comment
Share on other sites

I've fixed that shader once, its somewhere in this subforum.

Also "sprite.filterArea = app.renderer.screen;"  , because filterArea should be applied to object with filters.

I can help you when I get enough time and attention to do this. I see you are not at  "almost done" step , filterArea is not used at all and you didnt make any intermediate working tests => I cant do it in 5 minutes , it needs at least 15.

Its good that there's vertex shader part too, because we are having trouble switching between DEFAULT vertex shader in v4 and v5.

Link to comment
Share on other sites

Yes, scale is kinda wrong. 

And anticipating question "why is that difficult"? - Pixi has several spaces : temporary pow2-renderTexture space, pixels space, normalized space. Uniforms and attributes depend on where do you apply filter, on position of sprite on screen.  Pixi-v5 has better set of uniforms than v4, you dont have to adjust "apply" function for it.

In case you dont like the parameters pixi gives, you can write your own FilterManager, https://github.com/pixijs/pixi.js/blob/v4.x/src/core/renderers/webgl/managers/FilterManager.js#L115  Maybe in future we'll make it stub filter manager that doesnt care about all those small things and just allows to fill the screen with whatever parameters online GLSL editors supply. Anyway, its doable.

Link to comment
Share on other sites

Btw, that fiddle you gave me also had VERY HUGE QUAD that is much bigger than screen, because vPosition was in PIXELS and our viewport is actually (0,0) - (1,1) , and and projectionMatrix is the way to convert between those two spaces. Its a wonder anything worked, well, maybe because vPosition was 0 for left-top and 1 for right-bottom corner or some other miracle

Link to comment
Share on other sites

wow, it works now :) thank you so much, i was trying something similar, but it was difficult to understand all that together and I spend a lot time without success.
looks almost clear now, but i still have one question:

but is the purpose of vert shader here? just to map aVertexPosition with projectionMatrix to pixels? and what does vTextureCoord = aTextureCoord do?


Link to comment
Share on other sites

vTextureCoord is position on temporary pow2-texture, basically what gets passed to uSampler if you dont do any displacements. The only way to pass it to fragment shader is through varying. It can be converted to another space ( pixels or normalized) and then back.

Vert shader maps pixels from aPosition to (-1,1)-(-1,1) space that pixi uses in a `gl.viewport` (i made a mistake in previous comment) 

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...