Help with shader material that projects a screen-sized texture on a quad without distortion?

Hi, I’m trying to write a shader material that projects a screen-sized texture onto a quad. I drew an example of what I mean below. There is a texture that takes up the whole screen, but I only want the portion of the screen covered by the quad to actually show the texture.

I tried to achieve this effect by using the xy vertex positions in clip space to calculate the UV coordinates in the vertex shader, and then use the interpolated UV coordinates to sample the texture in the fragment shader. This is implemented in the playground below.

This is pretty close to the effect I want. However, I am getting some distortion when the quad is angled. I think this is due to the perspective correction being applied when the UV coordinates are interpolated for each fragment. Is this what is causing the distortion and is there a way to turn this off? Otherwise, does anyone have any insight on how to achieve this effect?

Why not use screen coordinates to lookup the texture? Something like this:

1 Like