ALT uniform float u_time_ms; uniform vec4 u_color; uniform sampler2D u_graphic; uniform sampler2D u_screen_texture; uniform vec2 u_resolution; // screen resolution uniform vec2 u_graphic_resolution; // graphic resolution in vec2 v_uv; in vec2 v_screenuv; out vec4 fragColor; void main() { float time_sec = u_time_ms / 1000.; float wave_amplitude = .525; float wave_speed = 1.8; float wave_period = .175; vec2 scale = vec2(2.5, 8.5); float waves = v_uv.y * scale.y + sin(v_uv.x * scale.x / wave_period - time_sec * wave_speed) * cos(0.2 * v_uv.x * scale.x /wave_period + time_sec * wave_speed) * wave_amplitude - wave_amplitude; float distortion = noise(v_uv*scale*vec2(2.1, 1.05) + time_sec * 0.12) * .25 - .125; vec2 reflected_screenuv = vec2(v_screenuv.x - distortion, v_screenuv.y); vec4 screen_color = texture(u_screen_texture, reflected_screenuv); vec4 wave_crest_color = vec4(1); float wave_crest = clamp(smoothstep(0.1, 0.14, waves) - smooth

ALT #version 300 es precision mediump float; uniform float iTime; uniform sampler2D u_graphic; in vec2 v_uv; out vec4 fragColor; vec3 hsv2rgb(vec3 c){ vec4 K=vec4(1.,2./3.,1./3.,3.); return c.z*mix(K.xxx,clamp(abs(fract(c.x+K.xyz)*6.-K.w)-K.x, 0., 1.),c.y); } void main() { const float TAU = 6.28318530; const float steps = 4.0; // up/down/left/right pixels float radius = 2.0; vec3 outlineColorHSL = vec3(sin(iTime/2.0) * 1., 1., 1.); vec2 aspect = 1.0 / vec2(textureSize(u_graphic, 0)); for (float i = 0.0; i < TAU; i += TAU / steps) { // Sample image in a circular pattern vec2 offset = vec2(sin(i), cos(i)) * aspect * radius; vec4 col = texture(u_graphic, v_uv + offset); // Mix outline with background float alpha = smoothstep(0.5, 0.7, col.a); fragColor = mix(fragColor, vec4(hsv2rgb(outlineColorHSL), 1.0), alpha); } vec4 mat = texture(u_graphic, v_uv); float factor = smoothstep(0.5, 0.7, mat.a); fragColor = mix(fragColor, mat, factor); }