How to get correct fragment shader UV in Pixi 5.0 RC0?

[zeh]

I have a few shaders I've created using Pixi 5.0.0-beta.3. To get the correct 0...1 UV for a position I'd normally do this, since vTextureCoord is not normalized:

uniform vec2 u_resolution; // Manually passed
uniform vec4 filterArea; // Automatically passed

vec2 getUV(vec2 coord) {
	// Return correct UV for sprite coordinates
	return coord * filterArea.xy / u_resolution;
}

void main() {
	vec2 uv = getUV(vTextureCoord);
	gl_FragColor = vec4(uv.x, uv.y, 0.0, 1.0);
}

This doesn't seem to work anymore, though - filterArea is always empty.

Unfortunately vTextureCoord is also not on the 0...1 range - if I try drawing a diamond...

gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
vec2 uv = vTextureCoord;
if (uv.x + uv.y > 0.5 && abs(uv.x - uv.y) < 0.5 && uv.x + uv.y <= 1.5) {
	// If within diamond, turn purple
	gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);
}

...I get this (notice the incorrect scale):

So, what's the way to calculate a 0...1 UV in Pixi 5.0?

I've tried checking the diff between versions, but it's not very clear what has changed there. I've tried using outputFrame, inputSize, and inputPixel (I've seen that in some other examples) but to no avail.

Any help in the right direction is appreciated!

[ivan.popelyshev]

My telepathy doesn't work on this case (sometimes it works). Please make a demo at https://www.pixiplayground.com/

[zeh]

2 hours ago, ivan.popelyshev said:

My telepathy doesn't work on this case (sometimes it works). Please make a demo at https://www.pixiplayground.com/

Sure. Here it is. You can see how the "diamond" is not correctly placed within the size of the graphics element.

If that wasn't clear, a similar example on ShaderToy shows the expected result.

I'm not expecting anyone to fix my code, I just want some documentation on how to get a value from 0,0 (top left) to 1,1 (bottom right) on a fragment shader since vTextureCoord is not normalized and the previous workaround stopped working. Or to know whether something replaced the built-in "filterArea" in between beta-3 and rc-0.

[zeh]

Edit: I got it to work by replacing "filterArea" with "inputPixel" in the original workaround.

Unfortunately we still need to know the original resolution via a custom uniform, but at least it works the same as the original workaround.

Would love to know of a better solution that doesn't require a u_resolution to be passed. The documention mentions outputFrame (among others) but I haven't been able to make that work - just declaring outputFrame as a "uniform vec4" prevents the fragment shader from compiling.

[ivan.popelyshev]

I figured it out. You dont pass your own vertex shader code to constructor, it'll take default, and in 5.0.0-rc it doesn't have old attributes => it doesnt trigget "legacy" mode , and old uniforms dont appear in it. That mode exists to support pixi-v3 and v4 filter shaders.

https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/filters/FilterSystem.js#L254

Here are new uniforms, you can see that old filterArea was moved partially to outputFrame and to inputSize. I hope this version of filter uniforms is easier to understand than the one from v4.

[ivan.popelyshev]

Btw new default filter has different attributes, beware! Here's the new displacement: https://github.com/pixijs/pixi.js/tree/dev/packages/filters/filter-displacement/src

[zeh]

A bit late, but thanks again @ivan.popelyshev, I was able to make it work with the above code and examples.

I had previously trying outputFrame/inputSize/resolution but kept getting errors that the uniforms were not matching; by checking the filter displacement example I was able to see I missed the highp precision.

uniform highp vec4 outputFrame;
uniform highp vec4 inputSize;
uniform highp vec4 resolution;

So the above works.

For the record, I can now get the UV simply as

uniform vec4 inputPixel;
uniform highp vec4 outputFrame;

vec2 getUV(vec2 coord) {
	return coord * inputPixel.xy / outputFrame.zw;
}

Without having to pass the dimensions manually.

[ivan.popelyshev]

We are going to add extra "textureCoord" varying or "filterCoord" (i dont remember) in default vertex shader so transition will be easier for other users.

[ivan.popelyshev]

I suggest you use 5.0.0-rc2

[zeh]

Thanks, good to know, I'll take a look at textureCoord.

I've updated to RC 2 a couple of days ago. Seem to be progressing well.