How can I draw something behind my shader?
Posted: Sat Nov 30, 2024 10:13 pm
Hello everyone, I'm starting to learn how to code with Love2D and now I'm facing an issue that I can't solve.
I'm using the following shader on top of my screen:
Like so:
As you can see, I'm trying to draw a white circle in the middle of the screen (or at least that's why I want to do).
If I comment my shader code (the very last 5 lines right before the end keyword of the draw function) I can see the circle right where I wanted. But adding those shader lines displays the shader, but no circle at all.
Is my shader somehow hiding everything behind it or am I rendering stuff the wrong way?
Thanks in advance and sorry for my bad english, this is not my native language!
I'm using the following shader on top of my screen:
Code: Select all
uniform float millis;
vec2 curve(vec2 uv)
{
uv = (uv - 0.5) * 2.0;
uv *= 1.1;
uv.x *= 1.0 + pow((abs(uv.y) / 5.0), 2.0);
uv.y *= 1.0 + pow((abs(uv.x) / 4.0), 2.0);
uv = (uv / 2.0) + 0.5;
uv = uv *0.92 + 0.04;
return uv;
}
vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords)
{
vec2 uv = texture_coords;
uv = curve(uv);
vec4 oricolv4 = Texel(tex, vec2(uv.x,uv.y));
vec3 oricol = vec3(oricolv4.x, oricolv4.y, oricolv4.z);
vec3 col;
float x = sin(0.3*millis+uv.y*21.0)*sin(0.7*millis+uv.y*29.0)*sin(0.3+0.33*millis+uv.y*31.0)*0.0017;
col.r = Texel(tex,vec2(x+uv.x+0.001,uv.y+0.001)).x+0.05;
col.g = Texel(tex,vec2(x+uv.x+0.000,uv.y-0.002)).y+0.05;
col.b = Texel(tex,vec2(x+uv.x-0.002,uv.y+0.000)).z+0.05;
col.r += 0.08*Texel(tex,0.75*vec2(x+0.025, -0.027)+vec2(uv.x+0.001,uv.y+0.001)).x;
col.g += 0.05*Texel(tex,0.75*vec2(x+-0.022, -0.02)+vec2(uv.x+0.000,uv.y-0.002)).y;
col.b += 0.08*Texel(tex,0.75*vec2(x+-0.02, -0.018)+vec2(uv.x-0.002,uv.y+0.000)).z;
col = clamp(col*0.6+0.4*col*col*1.0,0.0,1.0);
float vig = (0.0 + 1.0*16.0*uv.x*uv.y*(1.0-uv.x)*(1.0-uv.y));
col *= vec3(pow(vig,0.3));
col *= vec3(0.95,1.05,0.95);
col *= 2.8;
float scans = clamp(0.35+0.35*sin(3.5*millis+uv.y*screen_coords.y*1.5), 0.0, 1.0);
float s = pow(scans,5.7);
col = col*vec3(0.4+0.7*s) ;
col *= 1.0+0.01*sin(10.0*millis);
if (uv.x < 0.0 || uv.x > 1.0)
col *= 0.0;
if (uv.y < 0.0 || uv.y > 1.0)
col *= 0.0;
col *= 1.0 - 0.65 * vec3(clamp((mod(texture_coords.x, 2.0)-1.0)*2.0,0.0,1.0));
float comp = smoothstep(0.1, 0.9, sin(millis));
return vec4(col, 1.0);
}
Code: Select all
local startTime = love.timer.getTime()
local crtShader
-- Helpers
function getScreenCanvas()
canvas = love.graphics.newCanvas(love.graphics.getWidth(), love.graphics.getHeight(), { type = "2d", readable = true })
return canvas
end
-- Main
function love.load()
crtShader = love.graphics.newShader("shaders/crt.glsl")
end
function love.draw()
love.graphics.setColor(255, 255, 255, 1)
love.graphics.circle(
"fill",
love.graphics.getWidth() / 2,
love.graphics.getHeight() / 2,
100
)
love.graphics.setCanvas()
crtShader:send('millis', love.timer.getTime() - startTime)
love.graphics.setShader(crtShader)
love.graphics.draw(getScreenCanvas(), 0, 0)
love.graphics.setShader()
end
If I comment my shader code (the very last 5 lines right before the end keyword of the draw function) I can see the circle right where I wanted. But adding those shader lines displays the shader, but no circle at all.
Is my shader somehow hiding everything behind it or am I rendering stuff the wrong way?
Thanks in advance and sorry for my bad english, this is not my native language!