Need help of migrating shader from v4 to v5

[EloB]

I saw some cool smoke filter on a tutorial site but it was really old (like Pixi 2.0).

I managed to get it to work on v4 but I don't know how to goto v5...

https://jsbin.com/mabapatetu/1/edit

Can anyone help me?

[ivan.popelyshev]

Hello, and Welcome to the forums!

First, small thing: in both v4 and v5 application adds render() method in ticker if you dont stop it , so you dont have to add "renderer.render(stage)" there if you are not a fan of 120FPS.

Filter approach:

https://www.pixiplayground.com/#/edit/6ThqOOz-SVJe3AyvkbnaU

v5 does have a slight regression in terms of how can you set up uniforms: there is no automatic creation for them!

Either you specify them in constructor, either you set them in `filter.uniforms` before the first render. 

Yes, you did that. But you assumed that "filter.uniforms.resolution" exists - it does not. That's the first problem - its your job to create arrays.

Second problem is that "resolution" uniform exists and pixijs uploads there information different from what you want, it is mentioned in v5 docs here: https://github.com/pixijs/pixi.js/blob/e0320c08763cf10a0b92c84bc8d69e412806e2a9/packages/core/src/filters/Filter.js#L105 , its modified here: https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/filters/FilterSystem.js#L259

Almost no mentions in docs about that, and PixiJS doesn't have a warning in case you use the same names as it does.

I debug it by placing breakpoint in https://github.com/pixijs/pixi.js/blob/e0320c08763cf10a0b92c84bc8d69e412806e2a9/packages/core/src/shader/ShaderSystem.js#L132 , and tracking which uniforms are uploaded, after that line it goes inside generated sync uniforms function where all is present. When it tried to upload [NaN, NaN] to resolution I realized what is wrong.

So, lets rename it to "dimensions" or use already existing "outputFrame.zw".

Shader approach:

Filter input is a temporary framebuffer that contains rendered container. Why the heck do we need that if you do not use the input? Because v4 did not have good ways to specify shader except that.

In v5 we have a mesh shader for such cases: https://pixijs.io/examples/#/mesh-and-shaders/triangle-color.js , https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js

Lets copy it, and adjust the shader: dont use gl_FragCoord, use texture coords (uvs).

https://www.pixiplayground.com/#/edit/6ThqOOz-SVJe3AyvkbnaU

Conclusion:

PixiJS docs / wiki are still not enough for people to understand stuff about shaders. We need to improve them. However, I have two questions to you : did you at least read https://github.com/pixijs/pixi.js/wiki/v5-Creating-filters or did you not notice that it exists? Did you look at previous topic here at the forums about filter convertion? I mention "Shader Approach" very often.

I've spent an hour to make that post. I will link it every next time someone else asks for filter convertion.

 

Edited January 17, 2020 by ivan.popelyshev