+1 vote

I am trying to create a reflection shader attached to a ColorRect that reflects the portion of the screen immediately above it.

Here is a diagram showing the intended behavior:

enter image description here

What I have managed to achieve, however, looks like this:

enter image description here

I can only see the top of my triangle in the reflection.

In other words, I am not reflecting across the axis formed by the top of the ColorRect.

Here is my shader:

shader_type canvas_item;
render_mode unshaded;

void fragment(){

    vec2 uv = SCREEN_UV;
    float y = 1.0 - uv.y;

    COLOR = vec4(texture(SCREEN_TEXTURE, vec2(uv.x, y))); 
} 

How can I modify this shader to always reflect the screen across the top of the Color Rect?

asked Sep 23, 2018 in Engine by Diet Estus (1,494 points)
retagged Sep 23, 2018 by Diet Estus

1 Answer

+1 vote

With 1.0 - uv.y, you get something that's mirrored at the center of your screen. So what you see in your ColorRect depends on where the triangle is. Change 1.0 to reflect at different locations (e.g. 0.8 - uv.y). You can then pass this as a parameter if needed.

answered Sep 23, 2018 by ArdaE (92 points)

Is there a way to calculate the correct value from the position of the ColorRect or some other way? If I use this effect a lot, I'd prefer to avoid trial and error.

Yes. SCREEN_UV ranges from 0.0 at the bottom of your viewport to 1.0 at the top of it. So you can move your reflection point around from the bottom of the viewport using -uv.y to the top using -uv.y + 2. So simply multiply the ratio of the top Y of your ColorRect (measured from the bottom) to the height of your viewport by 2, and that should give the constant you need to add to -uv.y.

So 2.0 * TopY / ViewportHeight - uv.y, where TopY is the top Y coordinate of your ColorRect measured from the bottom of the viewport.

Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read How to use this Q&A? before posting your first questions.