Fisheye custom filter wrong coordinates based on filterArea

[denis.kildishev]

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?

[ivan.popelyshev]

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.

[denis.kildishev]

i have filterArea, its almost at the bottom of js:

"app.stage.filterArea = app.renderer.screen;"

Working test is here:

https://jywarren.github.io/fisheye-correction-webgl/

its the same shaders, but used without pixi and there is not problem with positioning here.

[ivan.popelyshev]

I mean, its not in stage "i did everything i could but its not working because of stupid bug somewhere", so i couldn't help within 5 minutes, I can get back to you in a few hours maybe

[denis.kildishev]

Ok, thank you) i've tried already some modifications and mapping coords, but it didn't work and i removed it.

[denis.kildishev]

18 hours ago, ivan.popelyshev said:

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

It was the same one? or just fish eye too? haven't found it

[ivan.popelyshev]

Yep, its difficult to find something here

[ivan.popelyshev]

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.

[ivan.popelyshev]

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.

[ivan.popelyshev]

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

[denis.kildishev]

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?

 

[ivan.popelyshev]

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)