Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

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


zeh
 Share

Recommended Posts

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):

image.png.5d2a7bea79ddc2f3341f9bad3bd27b71.png

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!

Link to comment
Share on other sites

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.

image.png.d9ca7f85c9014b111c311cf63c024a52.png

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

image.png.b5139cf54034a7b56dbda9a2030cb037.png

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.

Link to comment
Share on other sites

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

image.png.8d9402d557c0eb69e3863af8597df924.png

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...