How to make a filled triangle with SDL3 geometry renderer

Hello, I have just started learning SDL 2hours ago and i have decided to start with SDL3. Chatgpt also started learning SDL3 and it has always been my guide and so far, everything is doing fine untill i have to render a filled geometry. Chatgpt doesnt know how to do this yet. This is my code

#include <SDL3/SDL.h>

// TODO: reposition player init position to the middle

const int W = 640;
const int H = 480;

SDL_Window* window;
SDL_Renderer* renderer;
SDL_Event evt;

bool init(const char* title, int w, int h);
bool onCreate();
bool onUpdate(float dt);
bool onDraw();
bool onPollEvent(SDL_Event& evt);
bool onExit();
bool mainLoop();

struct Player {
    static SDL_FRect drawRect;

    float x;
    float y;
    int score;
} player, opponent;


struct Vertex {
    float x, y;
    SDL_FColor color;
};


int main(int argc, char* argv[]) {
    if (!init("Pong2D", W, H)) {
        SDL_Log("INITIALIZATION FAILED: %s", SDL_GetError());
        return -1;
    }

    onCreate();
    mainLoop();
    onExit();

    SDL_DestroyWindow(window);
    SDL_Quit();
    return 0;
}


SDL_FRect Player::drawRect = {0.0f, 0.0f, W * 0.02f, H * 0.2f};

bool onUpdate(float dt) {
    return true;
}


bool onDraw() {
    SDL_SetRenderDrawColor(renderer, 255, 255, 255, 255);
    SDL_RenderClear(renderer);

    SDL_SetRenderDrawColor(renderer, 0, 0, 0, 255);
    SDL_RenderLine(renderer, W * 0.5f, 0.0f, W * 0.5f, H);

    Vertex vertices[] {
        {  0.0f,  0.5f, { 255,   0,   0, 255 } },  // Top vertex (red)
        { -0.5f, -0.5f, {   0, 255,   0, 255 } },  // Bottom-left vertex (green)
        {  0.5f, -0.5f, {   0,   0, 255, 255 } }   // Bottom-right vertex (blue)
    };

    SDL_Vertex sdlVertices[3];
    for (int i = 0; i < 3; ++i) {
        sdlVertices[i].position.x = vertices[i].x * (W / 2) + (W / 2); // Scale and translate to window space
        sdlVertices[i].position.y = vertices[i].y * (H / 2) + (H / 2); // Scale and translate to window space
        sdlVertices[i].color.r = vertices[i].color.r;
        sdlVertices[i].color.g = vertices[i].color.g;
        sdlVertices[i].color.b = vertices[i].color.b;
        sdlVertices[i].color.a = vertices[i].color.a;
        sdlVertices[i].tex_coord.x = 0; // Texture coordinates are not used
        sdlVertices[i].tex_coord.y = 0; 
    }

    // Render the filled triangle
    SDL_RenderGeometry(renderer, nullptr, sdlVertices, 3, nullptr, 0);

    Player::drawRect.x = opponent.x;
    Player::drawRect.y = opponent.y;
    SDL_SetRenderDrawColor(renderer, 0xff, 0x00, 0x00, 0xff);
    SDL_RenderFillRect(renderer, &Player::drawRect);

    Player::drawRect.x = player.x;
    Player::drawRect.y = player.y;
    SDL_SetRenderDrawColor(renderer, 0x00, 0xff, 0x00, 0xff);
    SDL_RenderFillRect(renderer, &Player::drawRect);

    SDL_RenderPresent(renderer);
    return true;
}


bool onPollEvent(SDL_Event& evt) {
    if(evt.type == SDL_EVENT_QUIT)
        return false;

    return true;
}


bool mainLoop() {
    bool windowShouldClose = false;

    while (!windowShouldClose)
    {
        while(SDL_PollEvent(&evt)) 
            windowShouldClose = !onPollEvent(evt);

        onUpdate(0.0f);
        onDraw();
    }
    
    return true;
}


bool onCreate() {
    float spacing = W * 0.10f;
    float midY = (H - Player::drawRect.h) * 0.5f;
    opponent.x = spacing;
    opponent.y = midY;

    player.x = W - spacing - Player::drawRect.w;
    player.y = midY;
    return true;
}

bool onExit() {
    return true;
}


bool init(const char* title, int w, int h) {
    if(SDL_Init(SDL_INIT_VIDEO) != 0) return false;

    window = SDL_CreateWindow(title, w, h, SDL_WINDOW_RESIZABLE);
    if(!window) return false;

    renderer = SDL_CreateRenderer(window, nullptr);
    if(!renderer) {
        SDL_DestroyWindow(window);
        return false;
    }

    return true;
}

What am i doing wrong

Color are floats, not 8-bit integers as you expected. You should use float numbers between 0 and 1 instead of 8-bit integers. For example, in your case, 255 will be represented as 1.0.

1 Like