Raylib drawing a SDF to a render texture

Question

I'm trying to draw a circle SDF to a render texture, just a 64 radius circle SDF, centered at the mouse position. I've setup the code to render the contents of the render texture to the screen, which is 1366x768, same as the render texture size. I setup the render texture like this: lighting_buffer = LoadRenderTexture(screen_width, screen_height);

I don't get any errors from Raylib. As far as I can tell, the resulting circle is way bigger than it should be, and warped, it's wider than it is tall.

I have recorded a video of what the resulting render texture looks like when I move around the mouse: https://youtu.be/fXxpW-UwYJo

Here is the output that I get of the contents of the render texture (the mouse is at the coords approx. 511x466):

Here's my pixel shader code (using default vertex shader)

// Input vertex attributes (from vertex shader)
in vec2 fragTexCoord;
in vec4 fragColor;

// Output fragment color
out vec4 finalColor; 

uniform vec2 position;
uniform float radius;
uniform vec4 colour;
uniform float intensity;

void main()   
{
    vec2 circle_pos = position;
    circle_pos.y = 768 - position.y;

    vec2 sample_pos = (fragTexCoord * vec2(1366, 768)) - circle_pos;
    float sdf = length(sample_pos) - radius;
    finalColor = vec4(sdf,sdf,sdf,1);
}

Here's my rendering code:

void render_light(Vector2 position, float radius, Vector4 colour, float intensity) {
    
    SetShaderValueV(shader_lighting, GetShaderLocation(shader_lighting, "position"), (const void *)&position, RL_SHADER_UNIFORM_VEC2, 1);
    SetShaderValue(shader_lighting, GetShaderLocation(shader_lighting, "radius"), (const void *)&radius, RL_SHADER_UNIFORM_FLOAT);
    SetShaderValueV(shader_lighting, GetShaderLocation(shader_lighting, "colour"), (const void *)&colour, RL_SHADER_UNIFORM_VEC4, 1);
    SetShaderValue(shader_lighting, GetShaderLocation(shader_lighting, "intensity"), (const void *)&intensity, RL_SHADER_UNIFORM_FLOAT);
    
    Rectangle rect = { 0, 0, screen_width, screen_height };
    DrawRectangleRec(rect, RAYWHITE);  
}

void process_lighting() {
    BeginShaderMode(shader_lighting);
    BeginTextureMode(lighting_buffer);
    ClearBackground(BLACK);
    
    render_light({mouse_pos.x, mouse_pos.y}, 64.0f, {1.0f, 0.0f, 0.0f, 1.0f}, 5.0f);
    
    EndTextureMode();
    EndShaderMode();
}

I don't know raylib. However I had a quick look to see if I can assist, Please look at this sample https://www.raylib.com/examples/shaders/loader.html?name=shaders_spotlight - In a way it is very similar to what you want to do. Looking at your code compared to the sample code I can see two glaring differences. In the example the dimensions of the screen are passed to the shader - You have them hard coded. The other is that all calls to SetShaderValue are done outside the BeginDrawing/EndDrawing block. I hope there is a hint there — Sebastian Cabot, Mar 13 '22 at 20:36

Raylib drawing a SDF to a render texture

0 Answers0