Sign in to follow this  
EloB

Need help of migrating shader from v4 to v5

Recommended Posts

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 by ivan.popelyshev

Share this post


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

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

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.