I need some help as I am still learning shaders. I am attempting to convert a canvas_item shader to a spatial shader specifically a screen spatial shader like in Advanced Post Processing where you use a Quad and in the vertex() you move it to stay always in front of the camera. The one part I can not solve exactly is trying to get the normalized coordinates as the shader states. I am also using Compatibility renderer GLES3.
This is the shader: https://www.shadertoy.com/view/Ms2SWW
In an attempt to get the normalized coordinates I tried:
vec2 pixel_coords = (2.0 * FRAGCOORD.xy - VIEWPORT_SIZE.xy) / VIEWPORT_SIZE.y;
I also tried using:
vec3 ndc = vec3(SCREEN_UV, depth) * 2.0 - 1.0;
and extracting the x and y to be the pixel coords but that did not work.
I also tried using:
vec4 view = INV_PROJECTION_MATRIX * vec4(ndc, 1.0);
view.xyz /= view.w;
But the x and y also did not work.
Further I tried:
vec4 world = INV_VIEW_MATRIX * INV_PROJECTION_MATRIX * vec4(ndc, 1.0);
and
vec3 world_position = world.xyz / world.w;
But none of these will allign the image correctly.
If you have the time for help I would really appreciate it, and further if you might describe what it is that I am missing in the conversion here.
Shader Malfunction is As Follows:
shader_type spatial;
#define SHAPE 0
uniform sampler2D tunnel_tex;
void vertex() {
POSITION = vec4(VERTEX.xy, 1.0, 1.0);
}
void fragment() {
// normalized coordinates
vec2 pixel_coords = (2.0 * FRAGCOORD.xy - VIEWPORT_SIZE.xy) / VIEWPORT_SIZE.y;
float angle_of_pixel_to_center = atan(pixel_coords.x, pixel_coords.y);
#if SHAPE==0
float radius_to_pixel = length(angle_of_pixel_to_center);
#else
vec2 squared_coordinates = angle_of_pixel_to_center * angle_of_pixel_to_center;
vec2 coordinates_to_the_4th = squared_coordinates * squared_coordinates;
vec2 coordinates_to_the_8th = coordinates_to_the_4th * coordinates_to_the_4th;
float radius_to_pixel = pow(coordinates_to_the_8th.x + coordinates_to_the_8th.y, 1.0/8.0);
#endif
// index texture by radious and angle
vec2 tex_uv = vec2(0.3 / radius_to_pixel + 0.01 * TIME, angle_of_pixel_to_center / PI);
// fetch color with correct texture gradients to prevent discontinutity
vec2 corrected_tex_uv = vec2(tex_uv.x, atan(pixel_coords.y, abs(pixel_coords.x)) / PI);
vec3 base_color = textureGrad(tunnel_tex, tex_uv, dFdx(corrected_tex_uv),
dFdy(corrected_tex_uv)).xyz;
// darken at the center
vec3 final_color = base_color * radius_to_pixel;
ALBEDO = final_color;
}
Also I failed to even make it into a canvas_item shader, so that is likely the underlying problem with my understanding.
shader_type canvas_item;
//Broken For now.
// Based on Deform Tunnel Square or Circular by iq https://www.shadertoy.com/view/Ms2SWW
//Original is MIT License
// 0 : circular
// 1 : squareish
#define SHAPE 0
uniform sampler2D tunnel_tex;
void vertex() {
}
void fragment() {
// normalized coordinates
//https://docs.godotengine.org/en/stable/tutorials/shaders/converting_glsl_to_godot_shaders.html#id2
vec2 iResolution = 1.0 / SCREEN_PIXEL_SIZE;
vec2 pixel_coords = (2.0 * FRAGCOORD.xy - iResolution) / iResolution.y;
float angle_of_pixel_to_center = atan(pixel_coords.x, pixel_coords.y);
#if SHAPE==0
float radius_to_pixel = length(angle_of_pixel_to_center);
#else
vec2 squared_coordinates = angle_of_pixel_to_center * angle_of_pixel_to_center;
vec2 coordinates_to_the_4th = squared_coordinates * squared_coordinates;
vec2 coordinates_to_the_8th = coordinates_to_the_4th * coordinates_to_the_4th;
float radius_to_pixel = pow(coordinates_to_the_8th.x + coordinates_to_the_8th.y, 1.0/8.0);
#endif
// index texture by radious and angle
vec2 tex_uv = vec2(0.3 / radius_to_pixel + 0.1 * TIME, angle_of_pixel_to_center / PI);
// fetch color with correct texture gradients to prevent discontinutity
vec2 corrected_tex_uv = vec2(tex_uv.x, atan(pixel_coords.y, abs(pixel_coords.x)) / PI);
vec3 base_color = textureGrad(tunnel_tex, tex_uv, dFdx(corrected_tex_uv),
dFdy(corrected_tex_uv)).xyz;
// darken at the center
vec3 final_color = base_color * radius_to_pixel;
COLOR = vec4(final_color, 1.0);
}