How to draw raylib graphics below the imgui interface?

[semiloker]

I'm having problems drawing the imgui interface, no matter what I do, the raylib graphic is always higher than the imgui, what could be the problem, how to fix it?

#include "raylib.h"
#include "imgui.h"
#include "imgui_impl_raylib.h"
#include "imgui_impl_opengl3.h"
#include <iostream>

int main()
{
    // Initialize Raylib
    InitWindow(800, 600, "Raylib & ImGui Example");
    SetTargetFPS(60);

    // Initialize ImGui
    ImGui::CreateContext();
    ImGuiIO& io = ImGui::GetIO();
    io.ConfigFlags |= ImGuiConfigFlags_DockingEnable; // Enable docking

    ImGui::StyleColorsDark(); // Set style

    // Initialize ImGui for Raylib and OpenGL
    ImGui_ImplRaylib_Init();
    ImGui_ImplOpenGL3_Init("#version 330"); // Ensure correct OpenGL version

    // Main loop
    while (!WindowShouldClose())
    {
        // Start a new frame for ImGui
        ImGui_ImplOpenGL3_NewFrame();
        ImGui_ImplRaylib_NewFrame();
        ImGui::NewFrame();

        ImGui::DockSpaceOverViewport(); // Enable docking support

        // Your ImGui interface code
        ImGui::Begin("Hello, ImGui!");
        ImGui::Text("This is a sample ImGui window");
        ImGui::End();

        renderUI();

        ImGui::Begin("Stats");
        ImGui::Text("FPS: %.1f", io.Framerate);
        ImGui::Text("MS: %.1f", io.DeltaTime * 1000);
        ImGui::End();

        // Render ImGui
        ImGui::Render();

        BeginDrawing();
        ClearBackground(RAYWHITE);

        DrawRectangle(20, 20, 20, 20, WHITE);
        DrawRectangle(60, 20, 20, 20, WHITE);
        DrawRectangle(100, 20, 20, 20, WHITE);
        DrawRectangle(140, 20, 20, 20, WHITE);
        DrawRectangle(180, 20, 20, 20, WHITE);


        ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData()); // Render ImGui content

        EndDrawing();
    }

    // Cleanup
    ImGui_ImplOpenGL3_Shutdown();
    ImGui_ImplRaylib_Shutdown();
    ImGui::DestroyContext();

    CloseWindow();
    return 0;
}

[pkhead]

call rlDrawRenderBatchActive (from rlgl) before ImGui_ImplOpenGL3_RenderDrawData

[pkhead]

you're welcome! i probably should explain why this is necessary:
rshapes functions are batched, meaning that it combines multiple shape draw calls into one OpenGL draw call later, for performance reasons. this works perfectly fine when rendering only with Raylib, because Raylib knows when it needs to send an OpenGL draw call for the batch (except for some rmodel functions, iirc). however, since ImGui_ImplOpenGL3_RenderDrawData uses OpenGL directly, Raylib won't know about the OpenGL draw calls that will be sent by that function, so you need to flush Raylib's render batch manually. otherwise Raylib's draw batch will be rendered after ImGui's draw calls (in EndDrawing in this particular circumstance).

[semiloker]

Thanks again, but what about entering text, values in the imgui interface, the keyboard input is just ignored, I seem to have missed something again?

[pkhead]

i don't know. what library are you using? if you're using rlImGui, you could try using the rlImGui.h functions instead of the imgui_impl_raylib.h functions and see if that fixes it.

[semiloker]

i using default imgui_impl_raylib.h and .cpp files (https://github.com/oskaritimperi/imgui-impl-raylib) , and for backend render imgui using imgui_impl_opengl3

[semiloker]

i using default imgui_impl_raylib.h and .cpp files (https://github.com/oskaritimperi/imgui-impl-raylib) , and for backend render imgui using imgui_impl_opengl3

I don't use rlimgui because it doesn't use the backend renderer (maybe I'm wrong), that is, there is a short int on ImDrawList because of which I can't exceed 65k. Thanks to the imgui_impl_opengl3 rendering backend I can, I tried to connect rlimgui + imgui_impl_opengl3, but after 65k the imgui interface started to artifact