Help: UV Pass Shader / UV Remap / Texture Mapping / Jagged Mapping / Incorrect Sampling

Questions
,
1

Hello fellow devs!

Im kinda new to this stuff. I’m sorry if this may be stupid or very easy… but I’m actually 4h+ searching for this solution and I can’t seem to find it anywhere!

I have some render passes I need combined, while replacing the diffuse color/texture with another one using the UV-pass. It’s a pretty straight-forward process but somehow I’m not able to manage it.

The combine pipeline is ok.
As of the UV pass remaping, I’ve got as far as:

vec4 colUV = texture2D(texUV, vUV);
vec4 colCust = texture2D(texCustom, vec2(colUV.r, colUV.g));

I simply mapped the RG channels from my UV-pass through the texture sampling. Logically that’s right for me, but I get some jagged results instead.

Following is a link to the Playground I’m studying on:
https://playground.babylonjs.com/#A7AX75#1

And here are the only references of the problem I was able to find online:


b58hv42
b58hv421378×812 292 KB

Also here:
https://www.youtube.com/watch?v=ZuJEHPUyAlo

They share the exact same texture jagged/distortion/incorrect sampling that’s happening to me.

Can anybody please tell me what I’m missing? What I’m doing wrong??
I’m using Uncompressed PNG at 16bit per channel already.
I’ve already tried so much several things… resampling, using filters, using STPQ, replicating in some other environments (Unity) but everywhere I get the same results:
See: https://github.com/abgrac/abgrac.github.io/tree/master/jagged

I’d be very gratefull if someone helped me out with it. Even if it’s just a suggestion…

All pictures are being rendered and processed at 16 bits. No anti-aliasing removed yet (to preserve edges).
Thank you very much in advance for any help provided!

Update: I managed to get it working using the EXR format at 32bit only, in my Unity3D environment. But ofc WebGL doesn’t support it, right? At least I tried and Babylon didn’t recognize it.

Gratefully,
@abgrac

1 Like
2

I would bet it’s because your uv texture is saved in .jpg: try to save it in .png and let use know if it’s better. Of course, don’t just convert the .jpg to .png! Save to .png your original generated uv picture/texture.

3

Hi Evgeni, @Evgeni_Popov, thanks for your reply.

I should’ve said that. Im already working with 2048px PNG 16bit format. Uncompressed.

NEWS: I managed to get it working using the EXR format at 32bit only. But ofc WebGL doesn’t support it, right? At least I tried and Babylon didn’t recognize it.

I feel I’m missing some processing on the coordinate… something like that.

4

If you want us to help you should update your PG with the exact configuration that does not work, as currently the uv picture points to a .jpg file.