Sign in to follow this  
denis.kildishev

Fisheye custom filter wrong coordinates based on filterArea

Recommended Posts

Hello!

I'm trying to adapt shaders from this sample to Pixi JS custom filter:
https://jywarren.github.io/fisheye-correction-webgl/
https://github.com/bluemir/fisheye-correction-webgl

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
https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters
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
https://jsfiddle.net/f1nal/a5t07f3p/


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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

here: https://jsfiddle.net/Hackerham/69chqr2b/15/

I've adjusted your vertex shader to pixi format, with projectionMatrix and added mapping to normal space and back from it in fragment shader. Hope its understandable.

That's the second time I help a person with center-focused filter problem.

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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?

 

Share this post


Link to post
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) 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.