Example: SDL2 + OpenGLES + Emscripten

examples/README.txt

@@ -52,3 +52,8 @@ sdl_opengl_example/
 
 allegro5_example/
  Allegro 5 example.
+
+sdl_emscripten_example/
+ SDL2 + OpenGL ES 2 (WebGL compatible) + Emscripten example.
+ Main event loop is different in Emscripten.
+ OpenGL ES 2 differs slightly from opengl3_example/ code

examples/sdl_emscripten_example/README.md

@@ -0,0 +1,29 @@
+
+# How to Build
+
+- On Windows with Visual Studio's CLI
+
+\<sdl2path\> is your SDL2 folder.
+
+```
+cl /MD /I <sdl2path\include> /I ..\.. main.cpp imgui_impl_sdl.cpp ..\..\imgui*.cpp /link /LIBPATH:<sdl2path\lib> SDL2.lib SDL2main.lib
+```
+
+- On Linux and similar Unixes
+
+```
+c++ `sdl2-config --cflags` -I ../.. main.cpp imgui_impl_sdl.cpp ../../imgui*.cpp `sdl2-config --libs` -lGL -o sdl2example
+```
+
+- On Mac OS X
+
+```
+brew install sdl2
+c++ `sdl2-config --cflags` -I ../.. main.cpp imgui_impl_sdl.cpp ../../imgui*.cpp `sdl2-config --libs` -framework OpenGl -o sdl2example
+```
+
+- Emscripten
+
+```
+em++ -O2 -s USE_SDL=2 -I ../.. main.cpp imgui_impl_sdl.cpp ../../imgui*.cpp -o html/index.html
+```

examples/sdl_emscripten_example/imgui_impl_sdl.cpp

@@ -0,0 +1,354 @@
+// ImGui SDL2 binding with OpenGL ES 2, compatible with WebGL when compiled with Emscripten
+// https://github.com/ocornut/imgui
+
+#include <imgui.h>
+#include "imgui_impl_sdl.h"
+
+#include <SDL.h>
+#include <SDL_syswm.h>
+#ifdef __APPLE__
+#include <OpenGL/gl.h>
+#include <OpenGL/glext.h>
+#else
+#include <SDL_opengles2.h>
+#endif
+
+// Data
+static double g_Time = 0.0f;
+static bool g_MousePressed[3] = { false, false, false };
+static float g_MouseWheel = 0.0f;
+static GLuint g_FontTexture = 0;
+static int g_ShaderHandle = 0, g_VertHandle = 0, g_FragHandle = 0;
+static int g_AttribLocationTex = 0, g_AttribLocationProjMtx = 0;
+static int g_AttribLocationPosition = 0, g_AttribLocationUV = 0, g_AttribLocationColor = 0;
+static unsigned int g_VboHandle = 0, g_ElementsHandle = 0;
+
+// This is the main rendering function that you have to implement and provide to ImGui (via setting up 'RenderDrawListsFn' in the ImGuiIO structure)
+// If text or lines are blurry when integrating ImGui in your engine:
+// - in your Render function, try translating your projection matrix by (0.5f,0.5f) or (0.375f,0.375f)
+void ImGui_ImplSdl_RenderDrawLists(ImDrawData* draw_data)
+{
+ // Backup GL state
+ GLint last_program, last_texture, last_array_buffer, last_element_array_buffer;
+ glGetIntegerv(GL_CURRENT_PROGRAM, &last_program);
+ glGetIntegerv(GL_TEXTURE_BINDING_2D, &last_texture);
+ glGetIntegerv(GL_ARRAY_BUFFER_BINDING, &last_array_buffer);
+ glGetIntegerv(GL_ELEMENT_ARRAY_BUFFER_BINDING, &last_element_array_buffer);
+
+ // Setup render state: alpha-blending enabled, no face culling, no depth testing, scissor enabled
+ glEnable(GL_BLEND);
+ glBlendEquation(GL_FUNC_ADD);
+ glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
+ glDisable(GL_CULL_FACE);
+ glDisable(GL_DEPTH_TEST);
+ glEnable(GL_SCISSOR_TEST);
+ glActiveTexture(GL_TEXTURE0);
+
+ // Handle cases of screen coordinates != from framebuffer coordinates (e.g. retina displays)
+ ImGuiIO& io = ImGui::GetIO();
+ float fb_height = io.DisplaySize.y * io.DisplayFramebufferScale.y;
+ draw_data->ScaleClipRects(io.DisplayFramebufferScale);
+
+ // Setup orthographic projection matrix
+ const float ortho_projection[4][4] =
+ {
+ { 2.0f/io.DisplaySize.x, 0.0f, 0.0f, 0.0f },
+ { 0.0f, 2.0f/-io.DisplaySize.y, 0.0f, 0.0f },
+ { 0.0f, 0.0f, -1.0f, 0.0f },
+ {-1.0f, 1.0f, 0.0f, 1.0f },
+ };
+ glUseProgram(g_ShaderHandle);
+ glUniform1i(g_AttribLocationTex, 0);
+ glUniformMatrix4fv(g_AttribLocationProjMtx, 1, GL_FALSE, &ortho_projection[0][0]);
+
+ // Render command lists
+ glBindBuffer(GL_ARRAY_BUFFER, g_VboHandle);
+ glEnableVertexAttribArray(g_AttribLocationPosition);
+ glEnableVertexAttribArray(g_AttribLocationUV);
+ glEnableVertexAttribArray(g_AttribLocationColor);
+
+#define OFFSETOF(TYPE, ELEMENT) ((size_t)&(((TYPE *)0)->ELEMENT))
+ glVertexAttribPointer(g_AttribLocationPosition, 2, GL_FLOAT, GL_FALSE, sizeof(ImDrawVert), (GLvoid*)OFFSETOF(ImDrawVert, pos));
+ glVertexAttribPointer(g_AttribLocationUV, 2, GL_FLOAT, GL_FALSE, sizeof(ImDrawVert), (GLvoid*)OFFSETOF(ImDrawVert, uv));
+ glVertexAttribPointer(g_AttribLocationColor, 4, GL_UNSIGNED_BYTE, GL_TRUE, sizeof(ImDrawVert), (GLvoid*)OFFSETOF(ImDrawVert, col));
+#undef OFFSETOF
+
+ for (int n = 0; n < draw_data->CmdListsCount; n++)
+ {
+ const ImDrawList* cmd_list = draw_data->CmdLists[n];
+ const ImDrawIdx* idx_buffer_offset = 0;
+
+ glBindBuffer(GL_ARRAY_BUFFER, g_VboHandle);
+ glBufferData(GL_ARRAY_BUFFER, (GLsizeiptr)cmd_list->VtxBuffer.size() * sizeof(ImDrawVert), (GLvoid*)&cmd_list->VtxBuffer.front(), GL_STREAM_DRAW);
+
+ glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, g_ElementsHandle);
+ glBufferData(GL_ELEMENT_ARRAY_BUFFER, (GLsizeiptr)cmd_list->IdxBuffer.size() * sizeof(ImDrawIdx), (GLvoid*)&cmd_list->IdxBuffer.front(), GL_STREAM_DRAW);
+
+ for (const ImDrawCmd* pcmd = cmd_list->CmdBuffer.begin(); pcmd != cmd_list->CmdBuffer.end(); pcmd++)
+ {
+ if (pcmd->UserCallback)
+ {
+ pcmd->UserCallback(cmd_list, pcmd);
+ }
+ else
+ {
+ glBindTexture(GL_TEXTURE_2D, (GLuint)(intptr_t)pcmd->TextureId);
+ glScissor((int)pcmd->ClipRect.x, (int)(fb_height - pcmd->ClipRect.w), (int)(pcmd->ClipRect.z - pcmd->ClipRect.x), (int)(pcmd->ClipRect.w - pcmd->ClipRect.y));
+ glDrawElements(GL_TRIANGLES, (GLsizei)pcmd->ElemCount, GL_UNSIGNED_SHORT, idx_buffer_offset);
+ }
+ idx_buffer_offset += pcmd->ElemCount;
+ }
+ }
+
+ // Restore modified state
+ glDisableVertexAttribArray(g_AttribLocationPosition);
+ glDisableVertexAttribArray(g_AttribLocationUV);
+ glDisableVertexAttribArray(g_AttribLocationColor);
+ glUseProgram(last_program);
+ glBindTexture(GL_TEXTURE_2D, last_texture);
+ glBindBuffer(GL_ARRAY_BUFFER, last_array_buffer);
+ glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, last_element_array_buffer);
+ glDisable(GL_SCISSOR_TEST);
+}
+
+static const char* ImGui_ImplSdl_GetClipboardText()
+{
+ return SDL_GetClipboardText();
+}
+
+static void ImGui_ImplSdl_SetClipboardText(const char* text)
+{
+ SDL_SetClipboardText(text);
+}
+
+bool ImGui_ImplSdl_ProcessEvent(SDL_Event* event)
+{
+ ImGuiIO& io = ImGui::GetIO();
+ switch (event->type)
+ {
+ case SDL_MOUSEWHEEL:
+ {
+ if (event->wheel.y > 0)
+ g_MouseWheel = 1;
+ if (event->wheel.y < 0)
+ g_MouseWheel = -1;
+ return true;
+ }
+ case SDL_MOUSEBUTTONDOWN:
+ {
+ if (event->button.button == SDL_BUTTON_LEFT) g_MousePressed[0] = true;
+ if (event->button.button == SDL_BUTTON_RIGHT) g_MousePressed[1] = true;
+ if (event->button.button == SDL_BUTTON_MIDDLE) g_MousePressed[2] = true;
+ return true;
+ }
+ case SDL_TEXTINPUT:
+ {
+ ImGuiIO& io = ImGui::GetIO();
+ io.AddInputCharactersUTF8(event->text.text);
+ return true;
+ }
+ case SDL_KEYDOWN:
+ case SDL_KEYUP:
+ {
+ int key = event->key.keysym.sym & ~SDLK_SCANCODE_MASK;
+ io.KeysDown[key] = (event->type == SDL_KEYDOWN);
+ io.KeyShift = ((SDL_GetModState() & KMOD_SHIFT) != 0);
+ io.KeyCtrl = ((SDL_GetModState() & KMOD_CTRL) != 0);
+ io.KeyAlt = ((SDL_GetModState() & KMOD_ALT) != 0);
+ return true;
+ }
+ }
+ return false;
+}
+
+bool ImGui_ImplSdl_CreateDeviceObjects()
+{
+ // Backup GL state
+ GLint last_texture, last_array_buffer;
+ glGetIntegerv(GL_TEXTURE_BINDING_2D, &last_texture);
+ glGetIntegerv(GL_ARRAY_BUFFER_BINDING, &last_array_buffer);
+
+ const GLchar *vertex_shader =
+ "uniform mat4 ProjMtx;\n"
+ "attribute vec2 Position;\n"
+ "attribute vec2 UV;\n"
+ "attribute vec4 Color;\n"
+ "varying vec2 Frag_UV;\n"
+ "varying vec4 Frag_Color;\n"
+ "void main()\n"
+ "{\n"
+ " Frag_UV = UV;\n"
+ " Frag_Color = Color;\n"
+ " gl_Position = ProjMtx * vec4(Position.xy,0,1);\n"
+ "}\n";
+
+ const GLchar* fragment_shader =
+#ifdef __EMSCRIPTEN__
+ // WebGL requires precision specifiers but OpenGL 2.1 disallows
+ // them, so I define the shader without it and then add it here.
+ "precision mediump float;\n"
+#endif
+ "uniform sampler2D Texture;\n"
+ "varying vec2 Frag_UV;\n"
+ "varying vec4 Frag_Color;\n"
+ "void main()\n"
+ "{\n"
+ " gl_FragColor = Frag_Color * texture2D(Texture, Frag_UV);\n"
+ "}\n";
+
+ g_ShaderHandle = glCreateProgram();
+ g_VertHandle = glCreateShader(GL_VERTEX_SHADER);
+ g_FragHandle = glCreateShader(GL_FRAGMENT_SHADER);
+ glShaderSource(g_VertHandle, 1, &vertex_shader, 0);
+ glShaderSource(g_FragHandle, 1, &fragment_shader, 0);
+ glCompileShader(g_VertHandle);
+ glCompileShader(g_FragHandle);
+ glAttachShader(g_ShaderHandle, g_VertHandle);
+ glAttachShader(g_ShaderHandle, g_FragHandle);
+ glLinkProgram(g_ShaderHandle);
+
+ g_AttribLocationTex = glGetUniformLocation(g_ShaderHandle, "Texture");
+ g_AttribLocationProjMtx = glGetUniformLocation(g_ShaderHandle, "ProjMtx");
+ g_AttribLocationPosition = glGetAttribLocation(g_ShaderHandle, "Position");
+ g_AttribLocationUV = glGetAttribLocation(g_ShaderHandle, "UV");
+ g_AttribLocationColor = glGetAttribLocation(g_ShaderHandle, "Color");
+
+ glGenBuffers(1, &g_VboHandle);
+ glGenBuffers(1, &g_ElementsHandle);
+
+ ImGuiIO& io = ImGui::GetIO();
+
+ // Build texture
+ unsigned char* pixels;
+ int width, height;
+ io.Fonts->GetTexDataAsRGBA32(&pixels, &width, &height); // Load as RGBA 32-bits for OpenGL3 demo because it is more likely to be compatible with user's existing shader.
+
+ // Create OpenGL texture
+ glGenTextures(1, &g_FontTexture);
+ glBindTexture(GL_TEXTURE_2D, g_FontTexture);
+ glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
+ glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
+ glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, pixels);
+
+ // Store our identifier
+ io.Fonts->TexID = (void *)(intptr_t)g_FontTexture;
+
+ // Cleanup (don't clear the input data if you want to append new fonts later)
+ io.Fonts->ClearInputData();
+ io.Fonts->ClearTexData();
+
+ // Restore modified GL state
+ glBindTexture(GL_TEXTURE_2D, last_texture);
+ glBindBuffer(GL_ARRAY_BUFFER, last_array_buffer);
+
+ return true;
+}
+
+void ImGui_ImplSdl_InvalidateDeviceObjects()
+{
+ if (g_VboHandle) glDeleteBuffers(1, &g_VboHandle);
+ if (g_ElementsHandle) glDeleteBuffers(1, &g_ElementsHandle);
+
+ glDetachShader(g_ShaderHandle, g_VertHandle);
+ glDeleteShader(g_VertHandle);
+ g_VertHandle = 0;
+
+ glDetachShader(g_ShaderHandle, g_FragHandle);
+ glDeleteShader(g_FragHandle);
+ g_FragHandle = 0;
+
+ glDeleteProgram(g_ShaderHandle);
+ g_ShaderHandle = 0;
+
+ if (g_FontTexture)
+ {
+ glDeleteTextures(1, &g_FontTexture);
+ ImGui::GetIO().Fonts->TexID = 0;
+ g_FontTexture = 0;
+ }
+}
+
+bool ImGui_ImplSdl_Init(SDL_Window *window)
+{
+ ImGuiIO& io = ImGui::GetIO();
+ io.KeyMap[ImGuiKey_Tab] = SDLK_TAB; // Keyboard mapping. ImGui will use those indices to peek into the io.KeyDown[] array.
+ io.KeyMap[ImGuiKey_LeftArrow] = SDL_SCANCODE_LEFT;
+ io.KeyMap[ImGuiKey_RightArrow] = SDL_SCANCODE_RIGHT;
+ io.KeyMap[ImGuiKey_UpArrow] = SDL_SCANCODE_UP;
+ io.KeyMap[ImGuiKey_DownArrow] = SDL_SCANCODE_DOWN;
+ io.KeyMap[ImGuiKey_PageUp] = SDL_SCANCODE_PAGEUP;
+ io.KeyMap[ImGuiKey_PageDown] = SDL_SCANCODE_PAGEDOWN;
+ io.KeyMap[ImGuiKey_Home] = SDL_SCANCODE_HOME;
+ io.KeyMap[ImGuiKey_End] = SDL_SCANCODE_END;
+ io.KeyMap[ImGuiKey_Delete] = SDLK_DELETE;
+ io.KeyMap[ImGuiKey_Backspace] = SDLK_BACKSPACE;
+ io.KeyMap[ImGuiKey_Enter] = SDLK_RETURN;
+ io.KeyMap[ImGuiKey_Escape] = SDLK_ESCAPE;
+ io.KeyMap[ImGuiKey_A] = SDLK_a;
+ io.KeyMap[ImGuiKey_C] = SDLK_c;
+ io.KeyMap[ImGuiKey_V] = SDLK_v;
+ io.KeyMap[ImGuiKey_X] = SDLK_x;
+ io.KeyMap[ImGuiKey_Y] = SDLK_y;
+ io.KeyMap[ImGuiKey_Z] = SDLK_z;
+
+ io.RenderDrawListsFn = ImGui_ImplSdl_RenderDrawLists; // Alternatively you can set this to NULL and call ImGui::GetDrawData() after ImGui::Render() to get the same ImDrawData pointer.
+ io.SetClipboardTextFn = ImGui_ImplSdl_SetClipboardText;
+ io.GetClipboardTextFn = ImGui_ImplSdl_GetClipboardText;
+
+#ifdef _WIN32
+ SDL_SysWMinfo wmInfo;
+ SDL_VERSION(&wmInfo.version);
+ SDL_GetWindowWMInfo(window, &wmInfo);
+ io.ImeWindowHandle = wmInfo.info.win.window;
+#endif
+
+ return true;
+}
+
+void ImGui_ImplSdl_Shutdown()
+{
+ ImGui_ImplSdl_InvalidateDeviceObjects();
+ ImGui::Shutdown();
+}
+
+void ImGui_ImplSdl_NewFrame(SDL_Window *window)
+{
+ if (!g_FontTexture)
+ ImGui_ImplSdl_CreateDeviceObjects();
+
+ ImGuiIO& io = ImGui::GetIO();
+
+ // Setup display size (every frame to accommodate for window resizing)
+ int w, h;
+ SDL_GetWindowSize(window, &w, &h);
+ io.DisplaySize = ImVec2((float)w, (float)h);
+
+ // Setup time step
+ Uint32 time = SDL_GetTicks();
+ double current_time = time / 1000.0;
+ io.DeltaTime = g_Time > 0.0 ? (float)(current_time - g_Time) : (float)(1.0f/60.0f);
+ g_Time = current_time;
+
+ // Setup inputs
+ // (we already got mouse wheel, keyboard keys & characters from glfw callbacks polled in glfwPollEvents())
+ int mx, my;
+ Uint32 mouseMask = SDL_GetMouseState(&mx, &my);
+ if (SDL_GetWindowFlags(window) & SDL_WINDOW_MOUSE_FOCUS)
+ io.MousePos = ImVec2((float)mx, (float)my); // Mouse position, in pixels (set to -1,-1 if no mouse / on another screen, etc.)
+ else
+ io.MousePos = ImVec2(-1,-1);
+
+ io.MouseDown[0] = g_MousePressed[0] || (mouseMask & SDL_BUTTON(SDL_BUTTON_LEFT)) != 0; // If a mouse press event came, always pass it as "mouse held this frame", so we don't miss click-release events that are shorter than 1 frame.
+ io.MouseDown[1] = g_MousePressed[1] || (mouseMask & SDL_BUTTON(SDL_BUTTON_RIGHT)) != 0;
+ io.MouseDown[2] = g_MousePressed[2] || (mouseMask & SDL_BUTTON(SDL_BUTTON_MIDDLE)) != 0;
+ g_MousePressed[0] = g_MousePressed[1] = g_MousePressed[2] = false;
+
+ io.MouseWheel = g_MouseWheel;
+ g_MouseWheel = 0.0f;
+
+ // Hide OS mouse cursor if ImGui is drawing it
+ SDL_ShowCursor(io.MouseDrawCursor ? 0 : 1);
+
+ // Start the frame
+ ImGui::NewFrame();
+}