Need help converting Filter from v4 to v5.

[doehyunbaek]

Hi. My application is written in v5([email protected]) and I am trying to reproduce this brush filter(alchemancy/brush-node-filter.ts at master · wonderunit/alchemancy (github.com) which uses v4([email protected]).

The problem is, it would not even initialize :(. Error it gives are :

 

Pixi.js Error: Could not initialize shader.

gl.VALIDATE_STATUS false

gl.getError() 0

TypeError: Failed to execute 'getProgramParameter' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLProgram'

at Program.getAttributeData

at Program.extractData

at new Program

at Function.Program.from

at BrushNodeFilter.Filter [as constructor]

at new BrushNodeFilter

 

I have changed constructor to use v4 default vertex shader and fragment shader of above link and there seems to be some part of fragment shader that makes it work with v4 but not v5. The same fragment shader works like charm in above repository but not in my application :(. I have read about their differing behaviors in (v5 Creating filters · pixijs/pixi.js Wiki (github.com)) but I have not found a reason why it won't even let me initialize the filter. I am sorry for crude description of my problem and would appericate any hint or quick guess you guys could give. Thanks in advance.

[ivan.popelyshev]

third param in constructor should be "uniforms" in different format: specify only values. instead "blue: { value: 1, type: "1f" }" write "blue: 1"

As for shader problem - look above that error, there should be more info

[doehyunbaek]

Hi ivan, thanks for your kind reply.

I didn't notice that shader format was a problem. Thanks for your suggestion. I fixed it and will learn about it more.

As for shader, I do not see any more info in my recurring console error messages(https://ibb.co/7kSHBvp). Maybe there are other ways to inspect that i'm missing? 

[ivan.popelyshev]

Yes, there should be warnings (yellow ones)

[ivan.popelyshev]

Sometimes i can deduce whats wrong from source code, but right now i need an actual example. can you whip it up for me? on jsfiddle , pixiplayground or whatever

[doehyunbaek]

Ivan, thanks for your kind reply. I turned off warning like an idiot :(. There was a warning. They are

instrument.ts:129 StatLogger: CanvasRenderer.dispatch:entityBuild was not finished

instrument.ts:129 Pixi.js Warning: gl.getProgramInfoLog() Varyings with the same name but different type, or statically used varyings in fragment shader are not declared in vertex shader: vFilterCoord

I am pretty new to Pixi so I think I would take some time to whip up example. I'll try to post an example by tomorrow night. Wait for me kindly :).

As for example, you want a reproducible code which above error occurs?

[ivan.popelyshev]

>  Varyings with the same name but different type, or statically used varyings in fragment shader are not declared in vertex shader: vFilterCoord

are you sure that is first line of your shader: "precision highp float;" 

[doehyunbaek]

You mean fragment shader? Yes it is(https://ibb.co/kSqhPHG).

[ivan.popelyshev]

put it on first line, not second. PixiJS has very stupid preprocessor that checks first line and if it has no precision, it adds. by default mediump

Edited March 11, 2021 by ivan.popelyshev

[doehyunbaek]

You mean like this(https://ibb.co/0hKvGnH)? Holy... Thanks for another lifesaver suggestion. But it does not solve my problem :(. Maybe I try to whip up a sandbox example tomorrow?

[doehyunbaek]

Hi.

I made up a codesandbox example(https://codesandbox.io/s/confident-chatterjee-lcrxz?file=/src/index.ts). There is actually not much to it. Right now I am failing to initialize Filter so I just made a filter with sprite made from empty texture.

I will try to update above drawing repo to v6 if I can get a hang of it. Such a great example but it's a shame it won't work on Pixi v5 :(. Should keep passing the torch!

[doehyunbaek]

Hi. I fixed above error by adding

varying vec2 vFilterCoord;

to my vertex shader. Will post an update.

[ivan.popelyshev]

Its empty. please press ctrl+S in "index.ts" file

[doehyunbaek]

Hi Ivan. Sorry for making so many dumb mistakes  Didn't mean to waste your time.

Actually I fixed above warning and error message by adding a line to vertex shader, though it does not solve my problem. It just draws nothing. 

I think it is pretty hopeless for me to use this brush in my project because of such a huge discrepancy between v4 and v5, and I changed my plan to refactor above alchemancy repository to pixi v6. I can't promise on anything because I got other things to do. But I'll certainly try in my free time :). Will update about it.

[ivan.popelyshev]

I need some context. This part of alchemancy was always strange for me , whats a grainSprite? Do you want to combine two textures somehow?

Edited March 12, 2021 by ivan.popelyshev

[ivan.popelyshev]

Also, how can i test this thing if sprite is not supplied and texture is empty?

[ivan.popelyshev]

If you want to try to do it from start, that's how its usually done in pixi-v5 : through mesh-shader: https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js

V6 is the same regarding filters and mesh-shaders.

As for current filter solution, it should be easy enough to port your old shader if you just stop , explain me how to set up example from your project manually, i remember that i helped with conversion of that project to typescript

Edited March 12, 2021 by ivan.popelyshev

[doehyunbaek]

Sorry. I just tried to fix the shader initialization error message first. I am sorry it made your work hard by not supplying context and giving no sprite and texture. I should have supplied something more. It's my bad.

I'll try to cook up PIXI rendering part of my project in the above sandbox. I'll update when I'm done with it. 

Again sorry for my carelessness and thank you for your kind reply.

[ivan.popelyshev]

OK, i checked out the project, again , and i looked in the filter and sources.

They rotate sprite by 45 degrees to get more edge, then take brush, multiply it by grain. However coordinates work is so obscene that i cant even change filterArea - coordinates are beyond repair. I can try to do that, but only for money or if original author of the project asks me. That's because im not the one who wrote that thing, and it will really consume some of my important brain time.

To show how everything is fubar, try "sprite.filterArea = this.app.screen" after "filter.padding = 1"
 

Edited March 12, 2021 by ivan.popelyshev

[doehyunbaek]

I'll try that. It's pretty sad the only good drawing example has that contrived filter :(. So you don't want me to give you my use of this brush filter?

[ivan.popelyshev]

no, i see how it works in alchemancy and its possible for me to rewrite it. I just dont have brain time on it right now  there are many other requests.

[ivan.popelyshev]

Actually, that's the thing. Only this line is important:

((brushSample.r * grainSample.r * (1.0+uBleed))- uBleed ) * (1.0+ uBleed) * uOpacity;

Everything else can be done with usual mesh-shader stuff. Just take mesh-shader example, pass "translationMatrix * vertexPosition / grainSize" to fragment through varying, "grainSize" should be size of grain texture. Combine two textures in fragment shader, use uBleed and uOpacity too. Dont do any extra tricks with coords of brush sprite. That should work.

Edited March 12, 2021 by ivan.popelyshev

[doehyunbaek]

Ivan, you're a magician. I'll try with your suggestion. I really thank you for you spending your precious time on my issue. Is there any way I can buy a coffee for you? Patreon or anything?