Shader with faked refraction, inverted screen lookup and larger screen read

bubble.glsl

shader_type canvas_item;

uniform float refractionMagnitude = 30.0;
uniform float captureMagnitude = 0.0;

void fragment() {
	
	// Possibly a more acturate way to do refraction? Uncomment and see how you like it (and comment out below refraction)
	//vec3 refraction = -refract(vec3(0,0,-1), texture(NORMAL_TEXTURE, UV).rgb, 1.1) *2.0;
	vec3 refraction = - texture(NORMAL_TEXTURE, UV).rgb * vec3(1.0,-1.0,1.0);

	ivec2 textureSizeValue = textureSize(TEXTURE, 0); 
	ivec2 textureScreenSizeValue = textureSize(SCREEN_TEXTURE, 0);
	vec2 textureToScreenRatio = vec2(
			float(textureSizeValue.x)/ float(textureScreenSizeValue.x),
			float(textureSizeValue.y)/ float(textureScreenSizeValue.y)
	);
	
	vec4 textureRead = texture(TEXTURE, UV);
	
	vec2 offsetToTextureCenter = (UV - vec2(0.5)) * 2.0;
	vec2 offsetToTextureCenterInScreenUvs = offsetToTextureCenter * textureToScreenRatio;
	
	vec2 newScreenUvs = SCREEN_UV + offsetToTextureCenterInScreenUvs * captureMagnitude;

	newScreenUvs.x = clamp(newScreenUvs.x, 0.0, 1.0);
	newScreenUvs.y = clamp(newScreenUvs.y, 0.0, 1.0);

	vec4 offsetScreenRead = textureLod(SCREEN_TEXTURE, (newScreenUvs  - refraction.rg/refractionMagnitude), 0.0);

	if (textureRead.a  > .04) {
		COLOR = offsetScreenRead;
	}
	else {
		COLOR = textureRead;
	}

}

Notes

Values of captureMagnitude

• 0.0 will be no extra capture space
• >0.0 to < 2.0 will be in non inverted image
• 2.0 will be an inverted image and grow from here in how much screen it grabs.

captureMagnitude = 0.0

captureMagnitude = 1.0

captureMagnitude = 2.0

captureMagnitude = 3.0

captureMagnitude = 5.0

We're really seeing a lot more of the screen in the "refraction"

Inverting SCREEN_UV (general)

If you wish to invert the screen and don't change the screen capture amount, this can be accomplished with

	vec2 invertedScreenUv = SCREEN_UV;
	invertedScreenUv.y = 1.0 - invertedScreenUv.y;