Opengl实例十：引入imgui库进行界面控制

最新推荐文章于 2024-04-15 00:14:40 发布
最新推荐文章于 2024-04-15 00:14:40 发布
阅读量2k 收藏 9
点赞数 2
分类专栏： opengl 文章标签： 图形渲染
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38409301/article/details/126917165
版权

引入imgui的过程。

链接：https://www.bilibili.com/video/BV11Z4y1c7so?p=33&vd_source=6e3b20138bc307e963c4c37b2753232f

效果：

 

 

代码：

 

#include <glad/glad.h>
#include <GLFW/glfw3.h>
#include <glm/glm.hpp>
#include <glm/gtc/matrix_transform.hpp>
#include <glm/gtc/type_ptr.hpp>
#include "Shader.h"
#include "imgui/imgui.h"
#include "imgui/imgui_impl_glfw.h"
#include "imgui/imgui_impl_opengl3.h"

#include <iostream>
#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"


void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow* window);

// settings
const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;

int main()
{
    //设置330版本给imgui使用
    const char* glsl_version = "#version 330";
    // glfw: initialize and configure
    // ------------------------------
    glfwInit();
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

#ifdef __APPLE__
    glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);
#endif

    // glfw window creation
    // --------------------
    GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL", NULL, NULL);
    if (window == NULL)
    {
        std::cout << "Failed to create GLFW window" << std::endl;
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);
    glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);

    // glad: load all OpenGL function pointers
    // ---------------------------------------
    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
    {
        std::cout << "Failed to initialize GLAD" << std::endl;
        return -1;
    }

    // configure global opengl state
    // -----------------------------
    glEnable(GL_DEPTH_TEST);

    // build and compile our shader zprogram
    //在上面配置初始化完成后再进行界面的引入
    //创建imgui的上下文
    ImGui::CreateContext();
    ImGuiIO& io = ImGui::GetIO();
    (void)io;
    // 设置样式
    ImGui::StyleColorsDark();
    //设置平台和渲染器
    ImGui_ImplGlfw_InitForOpenGL(window, true);
    ImGui_ImplOpenGL3_Init(glsl_version);


    Shader ourShader(".//text//vertex.txt", ".//text//fragment.txt");

    // set up vertex data (and buffer(s)) and configure vertex attributes
    // ------------------------------------------------------------------
    float vertices[] = {
        -0.5f, -0.5f, -0.5f,  0.0f, 0.0f,
         0.5f, -0.5f, -0.5f,  1.0f, 0.0f,
         0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
         0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
        -0.5f,  0.5f, -0.5f,  0.0f, 1.0f,
        -0.5f, -0.5f, -0.5f,  0.0f, 0.0f,

        -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
         0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
         0.5f,  0.5f,  0.5f,  1.0f, 1.0f,
         0.5f,  0.5f,  0.5f,  1.0f, 1.0f,
        -0.5f,  0.5f,  0.5f,  0.0f, 1.0f,
        -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,

        -0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
        -0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
        -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
        -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
        -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
        -0.5f,  0.5f,  0.5f,  1.0f, 0.0f,

         0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
         0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
         0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
         0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
         0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
         0.5f,  0.5f,  0.5f,  1.0f, 0.0f,

        -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
         0.5f, -0.5f, -0.5f,  1.0f, 1.0f,
         0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
         0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
        -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
        -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,

        -0.5f,  0.5f, -0.5f,  0.0f, 1.0f,
         0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
         0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
         0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
        -0.5f,  0.5f,  0.5f,  0.0f, 0.0f,
        -0.5f,  0.5f, -0.5f,  0.0f, 1.0f
    };
    // world space positions of our cubes
    glm::vec3 cubePositions[] = {
        glm::vec3(0.0f,  0.0f,  0.0f),
        glm::vec3(2.0f,  5.0f, -15.0f),
        glm::vec3(-1.5f, -2.2f, -2.5f),
        glm::vec3(-3.8f, -2.0f, -12.3f),
        glm::vec3(2.4f, -0.4f, -3.5f),
        glm::vec3(-1.7f,  3.0f, -7.5f),
        glm::vec3(1.3f, -2.0f, -2.5f),
        glm::vec3(1.5f,  2.0f, -2.5f),
        glm::vec3(1.5f,  0.2f, -1.5f),
        glm::vec3(-1.3f,  1.0f, -1.5f)
    };
    unsigned int VBO, VAO;
    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);

    glBindVertexArray(VAO);

    glBindBuffer(GL_ARRAY_BUFFER, VBO);
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

    // position attribute
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)0);
    glEnableVertexAttribArray(0);
    // texture coord attribute
    glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(3 * sizeof(float)));
    glEnableVertexAttribArray(1);


    // load and create a texture 
    // -------------------------
    unsigned int texture1, texture2;
    // texture 1
    // ---------
    glGenTextures(1, &texture1);
    glBindTexture(GL_TEXTURE_2D, texture1);
    // set the texture wrapping parameters
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
    // set texture filtering parameters
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    // load image, create texture and generate mipmaps
    int width, height, nrChannels;
    stbi_set_flip_vertically_on_load(true); // tell stb_image.h to flip loaded texture's on the y-axis.
    unsigned char* data = stbi_load(".//resource//container.jpg", &width, &height, &nrChannels, 0);
    if (data)
    {
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
        glGenerateMipmap(GL_TEXTURE_2D);
    }
    else
    {
        std::cout << "Failed to load texture" << std::endl;
    }
    stbi_image_free(data);
    // texture 2
    // ---------
    glGenTextures(1, &texture2);
    glBindTexture(GL_TEXTURE_2D, texture2);
    // set the texture wrapping parameters
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
    // set texture filtering parameters
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    // load image, create texture and generate mipmaps
    data = stbi_load(".//resource//awesomeface.png", &width, &height, &nrChannels, 0);
    if (data)
    {
        // note that the awesomeface.png has transparency and thus an alpha channel, so make sure to tell OpenGL the data type is of GL_RGBA
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, data);
        glGenerateMipmap(GL_TEXTURE_2D);
    }
    else
    {
        std::cout << "Failed to load texture" << std::endl;
    }
    stbi_image_free(data);

    // tell opengl for each sampler to which texture unit it belongs to (only has to be done once)
    // -------------------------------------------------------------------------------------------
    ourShader.use();
    ourShader.setInt("texture1", 0);
    ourShader.setInt("texture2", 1);

    float f = 0.0f;
    ImVec4 clear_color = ImVec4(0.45f, 0.55f, 0.60f, 1.00f);
    // render loop
    // -----------
    while (!glfwWindowShouldClose(window))
    {
        // input
        // -----
        processInput(window);

        //使用imgui创建窗口
        ImGui_ImplOpenGL3_NewFrame();
        ImGui_ImplGlfw_NewFrame();
        ImGui::NewFrame();
   
        ImGui::Begin("Hello, world!");
        ImGui::Text("%.3f ms/frame (%.1f FPS)", 1000.0f / ImGui::GetIO().Framerate, ImGui::GetIO().Framerate);
        ImGui::SliderFloat("float", &f, 0.0f, 1.0f);            // Edit 1 float using a slider from 0.0f to 1.0f
        ImGui::ColorEdit3("clear color", (float*)&clear_color); // Edit 3 floats representing a color
        ImGui::End();
        // render
        //通过imgui的颜色控制背景颜色
        glClearColor(clear_color.x, clear_color.y, clear_color.z, clear_color.w);
        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // also clear the depth buffer now!

         // bind textures on corresponding texture units
        glActiveTexture(GL_TEXTURE0);
        glBindTexture(GL_TEXTURE_2D, texture1);
        glActiveTexture(GL_TEXTURE1);
        glBindTexture(GL_TEXTURE_2D, texture2);

        // activate shader
        ourShader.use();

        // create transformations
        glm::mat4 view = glm::mat4(1.0f); // make sure to initialize matrix to identity matrix first
        glm::mat4 projection = glm::mat4(1.0f);
        projection = glm::perspective(glm::radians(45.0f), (float)SCR_WIDTH / ((float)SCR_HEIGHT), 0.1f, 100.0f);
        view = glm::translate(view, glm::vec3(0.0f, 0.0f, -3.0f));
        // pass transformation matrices to the shader
        ourShader.setMat4("projection", projection); // note: currently we set the projection matrix each frame, but since the projection matrix rarely changes it's often best practice to set it outside the main loop only once.
        ourShader.setMat4("view", view);

        // render boxes
        glBindVertexArray(VAO);
        for (unsigned int i = 0; i < 10; i++)
        {
            // calculate the model matrix for each object and pass it to shader before drawing
            glm::mat4 model = glm::mat4(1.0f);
            model = glm::translate(model, cubePositions[i]);
            float angle = 20.0f * i;
            float rotateAngle = glm::radians(angle);
            if ((i%3==0))
            {
                rotateAngle = (float)glfwGetTime() * rotateAngle;
            }
            model = glm::rotate(model, rotateAngle, glm::vec3(1.0f, 0.3f, 0.5f));
            ourShader.setMat4("model", model);

            glDrawArrays(GL_TRIANGLES, 0, 36);
        }

        //渲染
        ImGui::Render();
        ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());
        // glfw: swap buffers and poll IO events (keys pressed/released, mouse moved etc.)
        // -------------------------------------------------------------------------------
        glfwSwapBuffers(window);
        glfwPollEvents();
    }

    // optional: de-allocate all resources once they've outlived their purpose:
    // ------------------------------------------------------------------------
    glDeleteVertexArrays(1, &VAO);
    glDeleteBuffers(1, &VBO);

    // glfw: terminate, clearing all previously allocated GLFW resources.
    // ------------------------------------------------------------------
    glfwTerminate();
    return 0;
}

// process all input: query GLFW whether relevant keys are pressed/released this frame and react accordingly
// ---------------------------------------------------------------------------------------------------------
void processInput(GLFWwindow* window)
{
    if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
        glfwSetWindowShouldClose(window, true);
}

// glfw: whenever the window size changed (by OS or user resize) this callback function executes
// ---------------------------------------------------------------------------------------------
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
    // make sure the viewport matches the new window dimensions; note that width and 
    // height will be significantly larger than specified on retina displays.
    glViewport(0, 0, width, height);
}

qq_1410888563
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
rust-imgui-opengl-renderer:适用于imgui-rs的OpenGL（3+）渲染
05-11
imgui-opengl-renderer 适用于OpenGL（3+）渲染 整合指南 构造它（通过在从一个OpenGL函数装载机或或诸如此类）。 let renderer = imgui_opengl_renderer :: Renderer :: new ( & mut imgui, | s | video. gl_get_proc_address (s) as _); 调用render绘制UI。 renderer. render (ui); 查看以在上下文中查看所有内容。
OpenGL 6.ImGui
sinat_34014668的博客
10-07 1281
ImGui的使用
关于ImGui动画系统 如何使用ImGui做动画！！
最新发布
HalfPeople_的博客
04-15 560
动画序列和组合：你可以将多个动画对象组合在一起，形成一个动画序列或组合效果。例如，你可以创建一个淡入动画和一个移动动画，然后将它们组合在一起，实现一个对象的同时淡入和移动效果。其实可以使用他来过渡窗口大小 Button大小 位置什么的 这里只是说给你看到过渡和Key的定义 可以出来的过渡效果 这个不是只能做这种效果的意思噢。动画播放控制：你可以控制动画的播放状态，如播放、暂停、停止等。动画参数编辑：你可以在ImGui界面中添加参数编辑器，以便用户可以调整动画的参数，如FPS限制、播放速度 等。
新手在OpenGL项目里集成【imgui、implot】
Xixixihohoho的博客
02-27 857
背景：想在自己的cpp项目里添加ui界面，调研发现有一个平台无关的轻量级的图形界面库ImGUI。没有任何第三方依赖，可以将ImGUI的源码直接加到项目中使用。介绍不多说了，这里给一个无脑上手的流程。
psychic-ui：OpenGL UI库
02-04
psychic-ui：OpenGL UI库
imgui显示图片
做一个快乐学习者
03-20 1万+
搞了半天终于会用imgui显示图片了，记录一下 #include <windows.h> #include <assert.h> #include <d3d9.h> #pragma comment(lib,"d3d9") #define STB_IMAGE_IMPLEMENTATION #include "stb_image.h" #define ST...
imgui-显示图片
qq_43535469的博客
05-06 2622
ImGui::Begin("attribute"); unsigned int a; texture.getzlsDiff(a);//a实际上就是一个纹理对象 //就是用来glBindTexture(GL_TEXTURE_2D,a);的这个 ImGui::Image((void*)(intptr_t)a, ImVec2(200, 100));
计算机图形处理（一）
qq_34200964的博客
03-22 1193
Question:1. 使用OpenGL(3.3及以上)+GLFW或freeglut画一个简单的三角形。2. 对三角形的三个顶点分别改为红绿蓝，像下面这样。3. 给上述工作添加一个GUI，里面有一个菜单栏，使得可以选择并改变三角形的颜色。4. 绘制其他的图元，除了三角形，还有点、线等。5. 使用EBO(Element Buffer Object)绘制多个三角形。Answer:#include &l...
OpenGL2与ImGui整合入门教程
weixin_42450862的博客
12-02 1913
OpenGL2与ImGui整合入门教程
imaditor：具有ImGui界面创意的图像编辑器
02-04
`imaditor` 是一款基于 `ImGui` 图形用户界面库开发的图像编辑工具，它利用了 `OpenGL` 进行图形渲染，实现了高效、轻量级的图像处理功能。该编辑器采用 `C++` 编程语言实现，具有很高的可定制性和灵活性，适合对...
ImGuiCppPractice：练习ImGui库https：//github.comocornutimgui
02-22
7. **与其他库的集成**：ImGui可以很好地与其他图形库（如OpenGL、DirectX等）结合使用，允许你在同一界面上展示3D模型和实时数据。 通过这个项目，你将学习如何在实际项目中有效地利用ImGui，创建出具有专业外观的...
OpenGL_study:使用本教程https进行OpenGL学习的存储库
05-11
OpenGL 学习库 相关资料 教程地址： 原教程地址： 中文教程地址： 参考网址： OpenGL API doc： GLFW： GLEW：   stb: assimp： OpenGL tutorial video： Xcode GLFW & GLEW 环境配置： 目录 注：以下各部分并非...
AyaGui：Chang Yu开发的基于Modern C ++和OpenGL的精简自定义imgui模式图形用户界面
02-04
AyaGui是由Chang Yu开发的一个图形用户界面（GUI）框架，它专注于现代C++编程语言和OpenGL图形库的结合，以实现一个高效且可定制的Immediate Mode GUI系统。 Immediate Mode GUI模式是一种用户界面设计方法，它在...
IMGUI_DX11显示自定义图片
abcz的博客
10-29 5831
IMGUI官方自带的例子里有一个Widgets项，里面有个Images 由于官方只演示了字体默认图片，并没有演示如何加载自定义图片 我们先搜索一下这个Images关键词 通过代码搜索，观察发现，这个纹理ID是画图的关键 ImTextureID my_tex_id = io.Fonts->TexID; 我们搜索看看io.Fonts->TexID是什么时候被赋值的...
三、C++反作弊对抗实战 (实战篇 —— 4.辅助工具开发：利用MFC、Freetype、ImGui在OpenGL绘制滚动文字、窗口、菜单、按钮等控件)
Koma的主页
10-13 1535
利用MFC、Freetype、ImGui在OpenGL绘制滚动文字、窗口、菜单、按钮等控件。 这一章节将讲述如何在OpenGL/DirectX环境的游戏中使用第三方的ImGui绘制常见的窗口和控件，例如菜单、按钮、复选框、滑动条等等，这一章节需要有一定的C++基础和Win32相关开发经验
imgui 函数ImGui_ImplOpenGL3_Init() crash解决方案
zxcasd11的博客
08-19 1455
解决方案： https://phabricator.polutropon.games/file/data/yjben6oh44tkpcrjmk7l/PHID-FILE-minh2e74gz6pkb25htzx/file 自测可行： 在imconfig.h 头文件中添加 #define IMGUI_IMPL_OPENGL_LOADER_GL3W 可以解决问题 关键提示： // Desktop OpenGL: attempt to detect default GL loader based on availa
DirectX11学习笔记十 imGUI入坑
MaxLykoS的博客
03-25 4191
下载地址   Immediate Mode Graphical User interface，Immediate模式，不保存UI对象，用静态方法创建，Unity里的GUI就是这种模式，适合小游戏或快速开发，如果要做动画或者保存状态，可能需要自己额外封装一层，好处就是好写，虽然我还是喜欢UGUI的那种。 入坑方法：   进入github官网下载源码，将这些文件拖入自己的项目，比如单独弄一个imGUI...
IMGUI 系统 - Dear ImGUI
热门推荐
Jave.Lin 的学习笔记
07-03 2万+
简单介绍 因为我在写 LearnGL 系列笔记的时候，发现没有 GUI 可以用，好蛋疼，然后在 GitHub 上找到一个叫：Dear ImGui，这个GUI系统对我来说，太太太完美了，它是用 C++ 编写的一个 GUI 系统。 看了下面的 案例截图 你会发现，原来以前看到的一些大厂的各种 DEMO，或是一些软件原来就是用 Dear ImGui 制作的，Vulkan、OpenGL的一些示例，还有如果你使用过 Unity 的旧版的 GUI 系统，你就会发现 Unity 的 GUI 接口设计是参考 Dear Im
ImGUI 1.87 绘制D3D外部菜单
「 虚幻私塾」
09-30 1316
ImGUI 它是与平台无关的C++轻量级跨平台图形界面库，没有任何第三方依赖，可以将ImGUI的源码直接加到项目中使用，该框架通常会配合特定的D3Dx9等图形开发工具包一起使用，ImGUI常用来实现进程内的菜单功能，而有些辅助开发作者也会使用该框架开发菜单页面，总体来说这是一个很不错的绘图库，如下将公开新版ImGUI如何实现绘制外部菜单的功能。接着我们使用Imgui绘制一个动态菜单，首先下载imgui并打开项目中的。另外，Imgui也支持绘制到整个屏幕上，也可以当作全局GUI界面来使用。
opengl嵌入照片代码
05-13
OpenGL是开放图形库的一种实现，可以在计算机图形中使用它来实现渲染三维图形，其中包括了高级的视觉效果。如果需要在OpenGL中嵌入照片，我们需要使用OpenGL库中的纹理和图像处理方法来完成。 首先，我们需要将图片数据加载进来，并将其转化为OpenGL可读格式，比如BMP或JPEG等常见的图片格式。然后，我们需要定义一个OpenGL纹理对象来装载这张图片，使用glGenTextures函数创建纹理对象，再使用glTexImage2D函数将图片数据传递给OpenGL，这样OpenGL就能够识别我们要使用的图片数据。在OpenGL中，可以使用glTexEnv函数来对图片进行处理。 接下来，我们需要用正确的纹理坐标来贴上这张图片。这些坐标必须与OpenGL中的坐标系保持一致。我们可以使用glTexCoordPointer函数来进行坐标转换，在绘制时一起使用。 最后，我们需要用OpenGL渲染出带有图片的图形，OpenGL提供了glDrawArrays函数和glDrawElements函数来绘制图形。 总的来说，嵌入照片的OpenGL代码需要完成以下几个步骤：加载图片、创建纹理对象、定义纹理坐标、绘制带有图片的图形。如果我们能完整地完成这些步骤，就能够使用OpenGL来嵌入照片了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值