From ce6e6da5102d79d49b34d50dac98150733f181a8 Mon Sep 17 00:00:00 2001 From: ocornut Date: Thu, 2 Feb 2023 18:08:17 +0100 Subject: [PATCH] Examples: Made example_sdl_opengl3 and example_glfw_opengl3 build with Emscripten. Removed dedicated examples. (#2492, #2494, #3699, #3705) --- .gitignore | 4 +- docs/EXAMPLES.md | 30 ++- .../example_emscripten_glfw_opengl3/main.cpp | 167 ----------------- .../shell_minimal.html | 65 ------- examples/example_emscripten_opengl3/README.md | 26 --- examples/example_emscripten_opengl3/main.cpp | 176 ------------------ .../Makefile.emscripten} | 5 +- examples/example_glfw_opengl3/main.cpp | 17 ++ .../Makefile.emscripten} | 4 +- examples/example_sdl_opengl3/README.md | 40 +++- examples/example_sdl_opengl3/main.cpp | 16 ++ .../emscripten}/shell_minimal.html | 3 +- imgui_demo.cpp | 3 + 13 files changed, 91 insertions(+), 465 deletions(-) delete mode 100644 examples/example_emscripten_glfw_opengl3/main.cpp delete mode 100644 examples/example_emscripten_glfw_opengl3/shell_minimal.html delete mode 100644 examples/example_emscripten_opengl3/README.md delete mode 100644 examples/example_emscripten_opengl3/main.cpp rename examples/{example_emscripten_glfw_opengl3/Makefile => example_glfw_opengl3/Makefile.emscripten} (95%) rename examples/{example_emscripten_opengl3/Makefile => example_sdl_opengl3/Makefile.emscripten} (95%) rename examples/{example_emscripten_opengl3 => libs/emscripten}/shell_minimal.html (93%) diff --git a/.gitignore b/.gitignore index 702fb9060..3fd051e47 100644 --- a/.gitignore +++ b/.gitignore @@ -40,8 +40,8 @@ xcuserdata examples/*.o.tmp examples/*.out.js examples/*.out.wasm -examples/example_emscripten_glfw_opengl3/web/* -examples/example_emscripten_opengl3/web/* +examples/example_glfw_opengl3/web/* +examples/example_sdl_opengl3/web/* examples/example_emscripten_wgpu/web/* ## JetBrains IDE artifacts diff --git a/docs/EXAMPLES.md b/docs/EXAMPLES.md index b7874099e..48203341e 100644 --- a/docs/EXAMPLES.md +++ b/docs/EXAMPLES.md @@ -104,15 +104,10 @@ OSX + OpenGL2 example.
(NB: imgui_impl_osx.mm is currently not as feature complete as other platforms backends. You may prefer to use the GLFW Or SDL backends, which will also support Windows and Linux.) -[example_emscripten_opengl3/](https://github.com/ocornut/imgui/blob/master/examples/example_emscripten_opengl3/)
-Emcripten + SDL2 + OpenGL3+/ES2/ES3 example.
-= main.cpp + imgui_impl_sdl.cpp + imgui_impl_opengl3.cpp
-Note that other examples based on SDL or GLFW + OpenGL could easily be modified to work with Emscripten. -We provide this to make the Emscripten differences obvious, and have them not pollute all other examples. - [example_emscripten_wgpu/](https://github.com/ocornut/imgui/blob/master/examples/example_emscripten_wgpu/)
Emcripten + GLFW + WebGPU example.
= main.cpp + imgui_impl_glfw.cpp + imgui_impl_wgpu.cpp +Note that the 'example_glfw_opengl3' and 'example_sdl_opengl3' examples also supports Emscripten! [example_glfw_metal/](https://github.com/ocornut/imgui/blob/master/examples/example_glfw_metal/)
GLFW (Mac) + Metal example.
@@ -121,18 +116,18 @@ GLFW (Mac) + Metal example.
[example_glfw_opengl2/](https://github.com/ocornut/imgui/blob/master/examples/example_glfw_opengl2/)
GLFW + OpenGL2 example (legacy, fixed pipeline).
= main.cpp + imgui_impl_glfw.cpp + imgui_impl_opengl2.cpp
-**DO NOT USE THIS IF YOUR CODE/ENGINE IS USING MODERN OPENGL (SHADERS, VBO, VAO, etc.)**
+**DO NOT USE THIS IF YOUR CODE/ENGINE IS USING MODERN GL or WEBGL (SHADERS, VBO, VAO, etc.)**
This code is mostly provided as a reference to learn about Dear ImGui integration, because it is shorter. -If your code is using GL3+ context or any semi modern OpenGL calls, using this renderer is likely to -make things more complicated, will require your code to reset many OpenGL attributes to their initial +If your code is using GL3+ context or any semi modern GL calls, using this renderer is likely to +make things more complicated, will require your code to reset many GL attributes to their initial state, and might confuse your GPU driver. One star, not recommended. [example_glfw_opengl3/](https://github.com/ocornut/imgui/blob/master/examples/example_glfw_opengl3/)
GLFW (Win32, Mac, Linux) + OpenGL3+/ES2/ES3 example (modern, programmable pipeline).
= main.cpp + imgui_impl_glfw.cpp + imgui_impl_opengl3.cpp
-This uses more modern OpenGL calls and custom shaders.
-This may actually also work with OpenGL 2.x contexts!
-Prefer using that if you are using modern OpenGL in your application (anything with shaders). +This uses more modern GL calls and custom shaders.
+This support building with Emscripten and targetting WebGL.
+Prefer using that if you are using modern GL or WebGL in your application. [example_glfw_vulkan/](https://github.com/ocornut/imgui/blob/master/examples/example_glfw_vulkan/)
GLFW (Win32, Mac, Linux) + Vulkan example.
@@ -163,17 +158,18 @@ SDL2 (Mac) + Metal example.
[example_sdl_opengl2/](https://github.com/ocornut/imgui/blob/master/examples/example_sdl_opengl2/)
SDL2 (Win32, Mac, Linux etc.) + OpenGL example (legacy, fixed pipeline).
= main.cpp + imgui_impl_sdl.cpp + imgui_impl_opengl2.cpp
-**DO NOT USE OPENGL2 CODE IF YOUR CODE/ENGINE IS USING MODERN OPENGL (SHADERS, VBO, VAO, etc.)**
+**DO NOT USE OPENGL2 CODE IF YOUR CODE/ENGINE IS USING GL OR WEBGL (SHADERS, VBO, VAO, etc.)**
This code is mostly provided as a reference to learn about Dear ImGui integration, because it is shorter. -If your code is using GL3+ context or any semi modern OpenGL calls, using this renderer is likely to -make things more complicated, will require your code to reset many OpenGL attributes to their initial +If your code is using GL3+ context or any semi modern GL calls, using this renderer is likely to +make things more complicated, will require your code to reset many GL attributes to their initial state, and might confuse your GPU driver. One star, not recommended. [example_sdl_opengl3/](https://github.com/ocornut/imgui/blob/master/examples/example_sdl_opengl3/)
SDL2 (Win32, Mac, Linux, etc.) + OpenGL3+/ES2/ES3 example.
= main.cpp + imgui_impl_sdl.cpp + imgui_impl_opengl3.cpp
-This uses more modern OpenGL calls and custom shaders.
-This may actually also work with OpenGL 2.x contexts!
+This uses more modern GL calls and custom shaders.
+This support building with Emscripten and targetting WebGL.
+Prefer using that if you are using modern GL or WebGL in your application. [example_sdl_sdlrenderer/](https://github.com/ocornut/imgui/blob/master/examples/example_sdl_sdlrenderer/)
SDL2 (Win32, Mac, Linux, etc.) + SDL_Renderer (most graphics backends are supported underneath)
diff --git a/examples/example_emscripten_glfw_opengl3/main.cpp b/examples/example_emscripten_glfw_opengl3/main.cpp deleted file mode 100644 index 24a93a8b6..000000000 --- a/examples/example_emscripten_glfw_opengl3/main.cpp +++ /dev/null @@ -1,167 +0,0 @@ -// Dear ImGui: standalone example application for Emscripten, using GLFW + OpenGL3 -// (Emscripten is a C++-to-javascript compiler, used to publish executables for the web. See https://emscripten.org/) -// If you are new to Dear ImGui, read documentation from the docs/ folder + read the top of imgui.cpp. -// Read online: https://github.com/ocornut/imgui/tree/master/docs - -// This is mostly the same code as the GLFW + OpenGL3 example, simply with the modifications needed to run on Emscripten. -// It is possible to combine both code into a single source file that will compile properly on Desktop and using Emscripten. -// See https://github.com/ocornut/imgui/pull/2492 as an example on how to do just that. - -#include "imgui.h" -#include "imgui_impl_glfw.h" -#include "imgui_impl_opengl3.h" -#include -#include -#define GL_SILENCE_DEPRECATION -#if defined(IMGUI_IMPL_OPENGL_ES2) -#include -#endif -#include // Will drag system OpenGL headers - -// Emscripten requires to have full control over the main loop. We're going to store our GLFW book-keeping variables globally. -// Having a single function that acts as a loop prevents us to store state in the stack of said function. So we need some location for this. -GLFWwindow* g_Window = NULL; - -static void glfw_error_callback(int error, const char* description) -{ - fprintf(stderr, "Glfw Error %d: %s\n", error, description); -} - -// For clarity, our main loop code is declared at the end. -static void main_loop(void*); - -int main(int, char**) -{ - // Setup window - glfwSetErrorCallback(glfw_error_callback); - if (!glfwInit()) - return 1; - - // For the browser using Emscripten, we are going to use WebGL1 with GL ES2. See the Makefile. for requirement details. - // It is very likely the generated file won't work in many browsers. Firefox is the only sure bet, but I have successfully - // run this code on Chrome for Android for example. - const char* glsl_version = "#version 100"; - glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 2); - glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 0); - glfwWindowHint(GLFW_CLIENT_API, GLFW_OPENGL_ES_API); - - // Create window with graphics context - GLFWwindow* window = glfwCreateWindow(1280, 720, "Dear ImGui GLFW+Emscripten example", NULL, NULL); - if (window == NULL) - return 1; - glfwMakeContextCurrent(window); - glfwSwapInterval(1); // Enable vsync - g_Window = window; - - // Setup Dear ImGui context - IMGUI_CHECKVERSION(); - ImGui::CreateContext(); - ImGuiIO& io = ImGui::GetIO(); (void)io; - //io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard; // Enable Keyboard Controls - //io.ConfigFlags |= ImGuiConfigFlags_NavEnableGamepad; // Enable Gamepad Controls - - // For an Emscripten build we are disabling file-system access, so let's not attempt to do a fopen() of the imgui.ini file. - // You may manually call LoadIniSettingsFromMemory() to load settings from your own storage. - io.IniFilename = NULL; - - // Setup Dear ImGui style - ImGui::StyleColorsDark(); - //ImGui::StyleColorsLight(); - - // Setup Platform/Renderer backends - ImGui_ImplGlfw_InitForOpenGL(window, true); - ImGui_ImplOpenGL3_Init(glsl_version); - - // Load Fonts - // - If no fonts are loaded, dear imgui will use the default font. You can also load multiple fonts and use ImGui::PushFont()/PopFont() to select them. - // - AddFontFromFileTTF() will return the ImFont* so you can store it if you need to select the font among multiple. - // - If the file cannot be loaded, the function will return NULL. Please handle those errors in your application (e.g. use an assertion, or display an error and quit). - // - The fonts will be rasterized at a given size (w/ oversampling) and stored into a texture when calling ImFontAtlas::Build()/GetTexDataAsXXXX(), which ImGui_ImplXXXX_NewFrame below will call. - // - Use '#define IMGUI_ENABLE_FREETYPE' in your imconfig file to use Freetype for higher quality font rendering. - // - Read 'docs/FONTS.md' for more instructions and details. - // - Remember that in C/C++ if you want to include a backslash \ in a string literal you need to write a double backslash \\ ! - // - Emscripten allows preloading a file or folder to be accessible at runtime. See Makefile for details. - //io.Fonts->AddFontDefault(); -#ifndef IMGUI_DISABLE_FILE_FUNCTIONS - //io.Fonts->AddFontFromFileTTF("fonts/segoeui.ttf", 18.0f); - io.Fonts->AddFontFromFileTTF("fonts/DroidSans.ttf", 16.0f); - //io.Fonts->AddFontFromFileTTF("fonts/Roboto-Medium.ttf", 16.0f); - //io.Fonts->AddFontFromFileTTF("fonts/Cousine-Regular.ttf", 15.0f); - //io.Fonts->AddFontFromFileTTF("fonts/ProggyTiny.ttf", 10.0f); - //ImFont* font = io.Fonts->AddFontFromFileTTF("fonts/ArialUni.ttf", 18.0f, NULL, io.Fonts->GetGlyphRangesJapanese()); - //IM_ASSERT(font != NULL); -#endif - - // This function call won't return, and will engage in an infinite loop, processing events from the browser, and dispatching them. - emscripten_set_main_loop_arg(main_loop, NULL, 0, true); -} - -static void main_loop(void* arg) -{ - IM_UNUSED(arg); // We can pass this argument as the second parameter of emscripten_set_main_loop_arg(), but we don't use that. - - // Our state (make them static = more or less global) as a convenience to keep the example terse. - static bool show_demo_window = true; - static bool show_another_window = false; - static ImVec4 clear_color = ImVec4(0.45f, 0.55f, 0.60f, 1.00f); - - // Poll and handle events (inputs, window resize, etc.) - // You can read the io.WantCaptureMouse, io.WantCaptureKeyboard flags to tell if dear imgui wants to use your inputs. - // - When io.WantCaptureMouse is true, do not dispatch mouse input data to your main application, or clear/overwrite your copy of the mouse data. - // - When io.WantCaptureKeyboard is true, do not dispatch keyboard input data to your main application, or clear/overwrite your copy of the keyboard data. - // Generally you may always pass all inputs to dear imgui, and hide them from your application based on those two flags. - glfwPollEvents(); - - // Start the Dear ImGui frame - ImGui_ImplOpenGL3_NewFrame(); - ImGui_ImplGlfw_NewFrame(); - ImGui::NewFrame(); - - // 1. Show the big demo window (Most of the sample code is in ImGui::ShowDemoWindow()! You can browse its code to learn more about Dear ImGui!). - if (show_demo_window) - ImGui::ShowDemoWindow(&show_demo_window); - - // 2. Show a simple window that we create ourselves. We use a Begin/End pair to create a named window. - { - static float f = 0.0f; - static int counter = 0; - - ImGui::Begin("Hello, world!"); // Create a window called "Hello, world!" and append into it. - - ImGui::Text("This is some useful text."); // Display some text (you can use a format strings too) - ImGui::Checkbox("Demo Window", &show_demo_window); // Edit bools storing our window open/close state - ImGui::Checkbox("Another Window", &show_another_window); - - 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 - - if (ImGui::Button("Button")) // Buttons return true when clicked (most widgets return true when edited/activated) - counter++; - ImGui::SameLine(); - ImGui::Text("counter = %d", counter); - - ImGui::Text("Application average %.3f ms/frame (%.1f FPS)", 1000.0f / ImGui::GetIO().Framerate, ImGui::GetIO().Framerate); - ImGui::End(); - } - - // 3. Show another simple window. - if (show_another_window) - { - ImGui::Begin("Another Window", &show_another_window); // Pass a pointer to our bool variable (the window will have a closing button that will clear the bool when clicked) - ImGui::Text("Hello from another window!"); - if (ImGui::Button("Close Me")) - show_another_window = false; - ImGui::End(); - } - - // Rendering - ImGui::Render(); - int display_w, display_h; - glfwGetFramebufferSize(g_Window, &display_w, &display_h); - glViewport(0, 0, display_w, display_h); - glClearColor(clear_color.x * clear_color.w, clear_color.y * clear_color.w, clear_color.z * clear_color.w, clear_color.w); - glClear(GL_COLOR_BUFFER_BIT); - ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData()); - - glfwSwapBuffers(g_Window); -} diff --git a/examples/example_emscripten_glfw_opengl3/shell_minimal.html b/examples/example_emscripten_glfw_opengl3/shell_minimal.html deleted file mode 100644 index 05e8a3163..000000000 --- a/examples/example_emscripten_glfw_opengl3/shell_minimal.html +++ /dev/null @@ -1,65 +0,0 @@ - - - - - - Dear ImGui GLFW+Emscripten example - - - - - - {{{ SCRIPT }}} - - diff --git a/examples/example_emscripten_opengl3/README.md b/examples/example_emscripten_opengl3/README.md deleted file mode 100644 index e2b19e44b..000000000 --- a/examples/example_emscripten_opengl3/README.md +++ /dev/null @@ -1,26 +0,0 @@ -## How to Build - -- You need to install Emscripten from https://emscripten.org/docs/getting_started/downloads.html, and have the environment variables set, as described in https://emscripten.org/docs/getting_started/downloads.html#installation-instructions - -- Depending on your configuration, in Windows you may need to run `emsdk/emsdk_env.bat` in your console to access the Emscripten command-line tools. - -- You may also refer to our [Continuous Integration setup](https://github.com/ocornut/imgui/tree/master/.github/workflows) for Emscripten setup. - -- Then build using `make` while in the `example_emscripten_opengl3/` directory. - -## How to Run - -To run on a local machine: -- `make serve` will use Python3 to spawn a local webserver, you can then browse http://localhost:8000 to access your build. -- Otherwise, generally you will need a local webserver: - - Quoting [https://emscripten.org/docs/getting_started](https://emscripten.org/docs/getting_started/Tutorial.html#generating-html):
-_"Unfortunately several browsers (including Chrome, Safari, and Internet Explorer) do not support file:// [XHR](https://emscripten.org/docs/site/glossary.html#term-xhr) requests, and can’t load extra files needed by the HTML (like a .wasm file, or packaged file data as mentioned lower down). For these browsers you’ll need to serve the files using a [local webserver](https://emscripten.org/docs/getting_started/FAQ.html#faq-local-webserver) and then open http://localhost:8000/hello.html."_ - - Emscripten SDK has a handy `emrun` command: `emrun web/example_emscripten_opengl3.html --browser firefox` which will spawn a temporary local webserver (in Firefox). See https://emscripten.org/docs/compiling/Running-html-files-with-emrun.html for details. - - You may use Python 3 builtin webserver: `python -m http.server -d web` (this is what `make serve` uses). - - You may use Python 2 builtin webserver: `cd web && python -m SimpleHTTPServer`. - - If you are accessing the files over a network, certain browsers, such as Firefox, will restrict Gamepad API access to secure contexts only (e.g. https only). - -## Obsolete features: - -- Emscripten 2.0 (August 2020) obsoleted the fastcomp backend, only llvm is supported. -- Emscripten 1.39.0 (October 2019) obsoleted the `BINARYEN_TRAP_MODE=clamp` compilation flag which was required with version older than 1.39.0 to avoid rendering artefacts. See [#2877](https://github.com/ocornut/imgui/issues/2877) for details. If you use an older version, uncomment this line in the Makefile: `#EMS += -s BINARYEN_TRAP_MODE=clamp` diff --git a/examples/example_emscripten_opengl3/main.cpp b/examples/example_emscripten_opengl3/main.cpp deleted file mode 100644 index 881da42f3..000000000 --- a/examples/example_emscripten_opengl3/main.cpp +++ /dev/null @@ -1,176 +0,0 @@ -// Dear ImGui: standalone example application for Emscripten, using SDL2 + OpenGL3 -// (Emscripten is a C++-to-javascript compiler, used to publish executables for the web. See https://emscripten.org/) -// If you are new to Dear ImGui, read documentation from the docs/ folder + read the top of imgui.cpp. -// Read online: https://github.com/ocornut/imgui/tree/master/docs - -// This is mostly the same code as the SDL2 + OpenGL3 example, simply with the modifications needed to run on Emscripten. -// It is possible to combine both code into a single source file that will compile properly on Desktop and using Emscripten. -// See https://github.com/ocornut/imgui/pull/2492 as an example on how to do just that. - -#include "imgui.h" -#include "imgui_impl_sdl.h" -#include "imgui_impl_opengl3.h" -#include -#include -#include -#include - -// Emscripten requires to have full control over the main loop. We're going to store our SDL book-keeping variables globally. -// Having a single function that acts as a loop prevents us to store state in the stack of said function. So we need some location for this. -SDL_Window* g_Window = NULL; - -// For clarity, our main loop code is declared at the end. -static void main_loop(void*); - -int main(int, char**) -{ - // Setup SDL - if (SDL_Init(SDL_INIT_VIDEO | SDL_INIT_TIMER | SDL_INIT_GAMECONTROLLER) != 0) - { - printf("Error: %s\n", SDL_GetError()); - return -1; - } - - // For the browser using Emscripten, we are going to use WebGL1 with GL ES2. See the Makefile. for requirement details. - // It is very likely the generated file won't work in many browsers. Firefox is the only sure bet, but I have successfully - // run this code on Chrome for Android for example. - const char* glsl_version = "#version 100"; - //const char* glsl_version = "#version 300 es"; - SDL_GL_SetAttribute(SDL_GL_CONTEXT_FLAGS, 0); - SDL_GL_SetAttribute(SDL_GL_CONTEXT_PROFILE_MASK, SDL_GL_CONTEXT_PROFILE_ES); - SDL_GL_SetAttribute(SDL_GL_CONTEXT_MAJOR_VERSION, 2); - SDL_GL_SetAttribute(SDL_GL_CONTEXT_MINOR_VERSION, 0); - - // Create window with graphics context - SDL_GL_SetAttribute(SDL_GL_DOUBLEBUFFER, 1); - SDL_GL_SetAttribute(SDL_GL_DEPTH_SIZE, 24); - SDL_GL_SetAttribute(SDL_GL_STENCIL_SIZE, 8); - SDL_DisplayMode current; - SDL_GetCurrentDisplayMode(0, ¤t); - SDL_WindowFlags window_flags = (SDL_WindowFlags)(SDL_WINDOW_OPENGL | SDL_WINDOW_RESIZABLE | SDL_WINDOW_ALLOW_HIGHDPI); - SDL_Window* window = SDL_CreateWindow("Dear ImGui SDL+Emscripten example", SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED, 1280, 720, window_flags); - SDL_GLContext gl_context = SDL_GL_CreateContext(window); - if (!gl_context) - { - fprintf(stderr, "Failed to initialize GL context!\n"); - return 1; - } - SDL_GL_MakeCurrent(window, gl_context); - SDL_GL_SetSwapInterval(1); // Enable vsync - - // Setup Dear ImGui context - IMGUI_CHECKVERSION(); - ImGui::CreateContext(); - ImGuiIO& io = ImGui::GetIO(); (void)io; - //io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard; // Enable Keyboard Controls - //io.ConfigFlags |= ImGuiConfigFlags_NavEnableGamepad; // Enable Gamepad Controls - - // For an Emscripten build we are disabling file-system access, so let's not attempt to do a fopen() of the imgui.ini file. - // You may manually call LoadIniSettingsFromMemory() to load settings from your own storage. - io.IniFilename = NULL; - - // Setup Dear ImGui style - ImGui::StyleColorsDark(); - //ImGui::StyleColorsLight(); - - // Setup Platform/Renderer backends - ImGui_ImplSDL2_InitForOpenGL(window, gl_context); - ImGui_ImplOpenGL3_Init(glsl_version); - - // Load Fonts - // - If no fonts are loaded, dear imgui will use the default font. You can also load multiple fonts and use ImGui::PushFont()/PopFont() to select them. - // - AddFontFromFileTTF() will return the ImFont* so you can store it if you need to select the font among multiple. - // - If the file cannot be loaded, the function will return NULL. Please handle those errors in your application (e.g. use an assertion, or display an error and quit). - // - The fonts will be rasterized at a given size (w/ oversampling) and stored into a texture when calling ImFontAtlas::Build()/GetTexDataAsXXXX(), which ImGui_ImplXXXX_NewFrame below will call. - // - Use '#define IMGUI_ENABLE_FREETYPE' in your imconfig file to use Freetype for higher quality font rendering. - // - Read 'docs/FONTS.md' for more instructions and details. - // - Remember that in C/C++ if you want to include a backslash \ in a string literal you need to write a double backslash \\ ! - // - Emscripten allows preloading a file or folder to be accessible at runtime. See Makefile for details. - //io.Fonts->AddFontDefault(); -#ifndef IMGUI_DISABLE_FILE_FUNCTIONS - //io.Fonts->AddFontFromFileTTF("fonts/segoeui.ttf", 18.0f); - io.Fonts->AddFontFromFileTTF("fonts/DroidSans.ttf", 16.0f); - //io.Fonts->AddFontFromFileTTF("fonts/Roboto-Medium.ttf", 16.0f); - //io.Fonts->AddFontFromFileTTF("fonts/Cousine-Regular.ttf", 15.0f); - //io.Fonts->AddFontFromFileTTF("fonts/ProggyTiny.ttf", 10.0f); - //ImFont* font = io.Fonts->AddFontFromFileTTF("fonts/ArialUni.ttf", 18.0f, NULL, io.Fonts->GetGlyphRangesJapanese()); - //IM_ASSERT(font != NULL); -#endif - - // This function call won't return, and will engage in an infinite loop, processing events from the browser, and dispatching them. - g_Window = window; - emscripten_set_main_loop_arg(main_loop, NULL, 0, true); -} - -static void main_loop(void* arg) -{ - ImGuiIO& io = ImGui::GetIO(); - IM_UNUSED(arg); // We can pass this argument as the second parameter of emscripten_set_main_loop_arg(), but we don't use that. - - // Our state (make them static = more or less global) as a convenience to keep the example terse. - static bool show_demo_window = true; - static bool show_another_window = false; - static ImVec4 clear_color = ImVec4(0.45f, 0.55f, 0.60f, 1.00f); - - // Poll and handle events (inputs, window resize, etc.) - // You can read the io.WantCaptureMouse, io.WantCaptureKeyboard flags to tell if dear imgui wants to use your inputs. - // - When io.WantCaptureMouse is true, do not dispatch mouse input data to your main application, or clear/overwrite your copy of the mouse data. - // - When io.WantCaptureKeyboard is true, do not dispatch keyboard input data to your main application, or clear/overwrite your copy of the keyboard data. - // Generally you may always pass all inputs to dear imgui, and hide them from your application based on those two flags. - SDL_Event event; - while (SDL_PollEvent(&event)) - { - ImGui_ImplSDL2_ProcessEvent(&event); - // Capture events here, based on io.WantCaptureMouse and io.WantCaptureKeyboard - } - - // Start the Dear ImGui frame - ImGui_ImplOpenGL3_NewFrame(); - ImGui_ImplSDL2_NewFrame(); - ImGui::NewFrame(); - - // 1. Show the big demo window (Most of the sample code is in ImGui::ShowDemoWindow()! You can browse its code to learn more about Dear ImGui!). - if (show_demo_window) - ImGui::ShowDemoWindow(&show_demo_window); - - // 2. Show a simple window that we create ourselves. We use a Begin/End pair to create a named window. - { - static float f = 0.0f; - static int counter = 0; - - ImGui::Begin("Hello, world!"); // Create a window called "Hello, world!" and append into it. - - ImGui::Text("This is some useful text."); // Display some text (you can use a format strings too) - ImGui::Checkbox("Demo Window", &show_demo_window); // Edit bools storing our window open/close state - ImGui::Checkbox("Another Window", &show_another_window); - - 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 - - if (ImGui::Button("Button")) // Buttons return true when clicked (most widgets return true when edited/activated) - counter++; - ImGui::SameLine(); - ImGui::Text("counter = %d", counter); - - ImGui::Text("Application average %.3f ms/frame (%.1f FPS)", 1000.0f / ImGui::GetIO().Framerate, ImGui::GetIO().Framerate); - ImGui::End(); - } - - // 3. Show another simple window. - if (show_another_window) - { - ImGui::Begin("Another Window", &show_another_window); // Pass a pointer to our bool variable (the window will have a closing button that will clear the bool when clicked) - ImGui::Text("Hello from another window!"); - if (ImGui::Button("Close Me")) - show_another_window = false; - ImGui::End(); - } - - // Rendering - ImGui::Render(); - glViewport(0, 0, (int)io.DisplaySize.x, (int)io.DisplaySize.y); - glClearColor(clear_color.x * clear_color.w, clear_color.y * clear_color.w, clear_color.z * clear_color.w, clear_color.w); - glClear(GL_COLOR_BUFFER_BIT); - ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData()); - SDL_GL_SwapWindow(g_Window); -} diff --git a/examples/example_emscripten_glfw_opengl3/Makefile b/examples/example_glfw_opengl3/Makefile.emscripten similarity index 95% rename from examples/example_emscripten_glfw_opengl3/Makefile rename to examples/example_glfw_opengl3/Makefile.emscripten index 178deb309..8ea4eacfc 100644 --- a/examples/example_emscripten_glfw_opengl3/Makefile +++ b/examples/example_glfw_opengl3/Makefile.emscripten @@ -6,7 +6,7 @@ # This Makefile assumes you have loaded emscripten's environment. # (On Windows, you may need to execute emsdk_env.bat or encmdprompt.bat ahead) # -# Running `make` will produce three files: +# Running `make -f Makefile.emscripten` will produce three files: # - web/index.html # - web/index.js # - web/index.wasm @@ -32,7 +32,6 @@ EMS = ##--------------------------------------------------------------------- # ("EMS" options gets added to both CPPFLAGS and LDFLAGS, whereas some options are for linker only) - EMS += -s DISABLE_EXCEPTION_CATCHING=1 LDFLAGS += -s USE_GLFW=3 -s WASM=1 -s ALLOW_MEMORY_GROWTH=1 -s NO_EXIT_RUNTIME=0 -s ASSERTIONS=1 @@ -60,7 +59,7 @@ endif CPPFLAGS += -I$(IMGUI_DIR) -I$(IMGUI_DIR)/backends #CPPFLAGS += -g CPPFLAGS += -Wall -Wformat -Os $(EMS) -LDFLAGS += --shell-file shell_minimal.html +# LDFLAGS += --shell-file ../libs/emscripten/shell_minimal.html LDFLAGS += $(EMS) ##--------------------------------------------------------------------- diff --git a/examples/example_glfw_opengl3/main.cpp b/examples/example_glfw_opengl3/main.cpp index 1dd1a2f9f..259fb8999 100644 --- a/examples/example_glfw_opengl3/main.cpp +++ b/examples/example_glfw_opengl3/main.cpp @@ -3,6 +3,8 @@ // If you are new to Dear ImGui, read documentation from the docs/ folder + read the top of imgui.cpp. // Read online: https://github.com/ocornut/imgui/tree/master/docs +// This example can also compile and run with Emscripten. See Makefile.emscripten for details. + #include "imgui.h" #include "imgui_impl_glfw.h" #include "imgui_impl_opengl3.h" @@ -25,6 +27,11 @@ static GLFWwindow* g_AppWindow = NULL; // Forward declarations of helper functions void MainLoopStep(); +#ifdef __EMSCRIPTEN__ +#include +void MainLoopForEmscripten(void*) { MainLoopStep(); } +#endif + static void glfw_error_callback(int error, const char* description) { fprintf(stderr, "GLFW Error %d: %s\n", error, description); @@ -91,6 +98,7 @@ int main(int, char**) // - Use '#define IMGUI_ENABLE_FREETYPE' in your imconfig file to use Freetype for higher quality font rendering. // - Read 'docs/FONTS.md' for more instructions and details. // - Remember that in C/C++ if you want to include a backslash \ in a string literal you need to write a double backslash \\ ! + // - Our Emscripten build process allows embedding fonts to be accessible at runtime from the "fonts/" folder. See Makefile.emscripten for details. //io.Fonts->AddFontDefault(); //io.Fonts->AddFontFromFileTTF("c:\\Windows\\Fonts\\segoeui.ttf", 18.0f); //io.Fonts->AddFontFromFileTTF("../../misc/fonts/DroidSans.ttf", 16.0f); @@ -100,8 +108,17 @@ int main(int, char**) //IM_ASSERT(font != NULL); // Main loop +#ifndef __EMSCRIPTEN__ + // Desktop Build while (!glfwWindowShouldClose(window)) MainLoopStep(); +#else + // Emscripten Build + // For an Emscripten build we are disabling file-system access, so let's not attempt to do a fopen() of the imgui.ini file. + // You may manually call LoadIniSettingsFromMemory() to load settings from your own storage. + io.IniFilename = NULL; + emscripten_set_main_loop_arg(MainLoopForEmscripten, NULL, 0, true); +#endif // Cleanup ImGui_ImplOpenGL3_Shutdown(); diff --git a/examples/example_emscripten_opengl3/Makefile b/examples/example_sdl_opengl3/Makefile.emscripten similarity index 95% rename from examples/example_emscripten_opengl3/Makefile rename to examples/example_sdl_opengl3/Makefile.emscripten index 8851695a1..778f1265c 100644 --- a/examples/example_emscripten_opengl3/Makefile +++ b/examples/example_sdl_opengl3/Makefile.emscripten @@ -6,7 +6,7 @@ # This Makefile assumes you have loaded emscripten's environment. # (On Windows, you may need to execute emsdk_env.bat or encmdprompt.bat ahead) # -# Running `make` will produce three files: +# Running `make -f Makefile.emscripten` will produce three files: # - web/index.html # - web/index.js # - web/index.wasm @@ -60,7 +60,7 @@ endif CPPFLAGS += -I$(IMGUI_DIR) -I$(IMGUI_DIR)/backends #CPPFLAGS += -g CPPFLAGS += -Wall -Wformat -Os $(EMS) -LDFLAGS += --shell-file shell_minimal.html +LDFLAGS += --shell-file ../libs/emscripten/shell_minimal.html LDFLAGS += $(EMS) ##--------------------------------------------------------------------- diff --git a/examples/example_sdl_opengl3/README.md b/examples/example_sdl_opengl3/README.md index 06d4b2d33..ccd580888 100644 --- a/examples/example_sdl_opengl3/README.md +++ b/examples/example_sdl_opengl3/README.md @@ -1,12 +1,13 @@ # How to Build -- On Windows with Visual Studio's IDE +## Windows with Visual Studio's IDE Use the provided project file (.vcxproj). Add to solution (imgui_examples.sln) if necessary. -- On Windows with Visual Studio's CLI +## Windows with Visual Studio's CLI +Use build_win32.bat or directly: ``` set SDL2_DIR=path_to_your_sdl2_folder cl /Zi /MD /I.. /I..\.. /I%SDL2_DIR%\include main.cpp ..\..\backends\imgui_impl_sdl.cpp ..\..\backends\imgui_impl_opengl3.cpp ..\..\imgui*.cpp /FeDebug/example_sdl_opengl3.exe /FoDebug/ /link /libpath:%SDL2_DIR%\lib\x86 SDL2.lib SDL2main.lib opengl32.lib /subsystem:console @@ -15,15 +16,42 @@ cl /Zi /MD /I.. /I..\.. /I%SDL2_DIR%\include main.cpp ..\..\backends\imgui_impl_ cl /Zi /MD /I.. /I..\.. /I%SDL2_DIR%\include main.cpp ..\..\backends\imgui_impl_sdl.cpp ..\..\backends\imgui_impl_opengl3.cpp ..\..\imgui*.cpp /FeDebug/example_sdl_opengl3.exe /FoDebug/ /link /libpath:%SDL2_DIR%\lib\x64 SDL2.lib SDL2main.lib opengl32.lib /subsystem:console ``` -- On Linux and similar Unixes +## Linux and similar Unixes +Use our Makefile or directly: ``` -c++ `sdl2-config --cflags` -I .. -I ../.. -I ../../backends main.cpp ../../backends/imgui_impl_sdl.cpp ../../backends/imgui_impl_opengl3.cpp ../../imgui*.cpp `sdl2-config --libs` -lGL -ldl +c++ `sdl2-config --cflags` -I .. -I ../.. -I ../../backends + main.cpp ../../backends/imgui_impl_sdl.cpp ../../backends/imgui_impl_opengl3.cpp ../../imgui*.cpp + `sdl2-config --libs` -lGL -ldl ``` -- On Mac OS X +## macOS +Use our Makefile or directly: ``` brew install sdl2 -c++ `sdl2-config --cflags` -I .. -I ../.. -I ../../backends main.cpp ../../backends/imgui_impl_sdl.cpp ../../backends/imgui_impl_opengl3.cpp ../../imgui*.cpp `sdl2-config --libs` -framework OpenGl -framework CoreFoundation +c++ `sdl2-config --cflags` -I .. -I ../.. -I ../../backends + main.cpp ../../backends/imgui_impl_sdl.cpp ../../backends/imgui_impl_opengl3.cpp ../../imgui*.cpp + `sdl2-config --libs` -framework OpenGl -framework CoreFoundation ``` + +## Emscripten + +**Building** + +You need to install Emscripten from https://emscripten.org/docs/getting_started/downloads.html, and have the environment variables set, as described in https://emscripten.org/docs/getting_started/downloads.html#installation-instructions + +- Depending on your configuration, in Windows you may need to run `emsdk/emsdk_env.bat` in your console to access the Emscripten command-line tools. +- You may also refer to our [Continuous Integration setup](https://github.com/ocornut/imgui/tree/master/.github/workflows) for Emscripten setup. +- Then build using `make -f Makefile.emscripten` while in the current directory. + +**Running an Emscripten project** + +To run on a local machine: +- `make -f Makefile.emscripten serve` will use Python3 to spawn a local webserver, you can then browse http://localhost:8000 to access your build. +- Otherwise, generally you will need a local webserver. Quoting [https://emscripten.org/docs/getting_started](https://emscripten.org/docs/getting_started/Tutorial.html#generating-html):
+_"Unfortunately several browsers (including Chrome, Safari, and Internet Explorer) do not support file:// [XHR](https://emscripten.org/docs/site/glossary.html#term-xhr) requests, and can’t load extra files needed by the HTML (like a .wasm file, or packaged file data as mentioned lower down). For these browsers you’ll need to serve the files using a [local webserver](https://emscripten.org/docs/getting_started/FAQ.html#faq-local-webserver) and then open http://localhost:8000/hello.html."_ +- Emscripten SDK has a handy `emrun` command: `emrun web/index.html --browser firefox` which will spawn a temporary local webserver (in Firefox). See https://emscripten.org/docs/compiling/Running-html-files-with-emrun.html for details. +- You may use Python 3 builtin webserver: `python -m http.server -d web` (this is what `make serve` uses). +- You may use Python 2 builtin webserver: `cd web && python -m SimpleHTTPServer`. +- If you are accessing the files over a network, certain browsers, such as Firefox, will restrict Gamepad API access to secure contexts only (e.g. https only). diff --git a/examples/example_sdl_opengl3/main.cpp b/examples/example_sdl_opengl3/main.cpp index df8a6001f..67f7422a9 100644 --- a/examples/example_sdl_opengl3/main.cpp +++ b/examples/example_sdl_opengl3/main.cpp @@ -3,6 +3,8 @@ // If you are new to Dear ImGui, read documentation from the docs/ folder + read the top of imgui.cpp. // Read online: https://github.com/ocornut/imgui/tree/master/docs +// This example can also compile and run with Emscripten. See Makefile.emscripten for details. + #include "imgui.h" #include "imgui_impl_sdl.h" #include "imgui_impl_opengl3.h" @@ -19,6 +21,10 @@ static SDL_Window* g_AppWindow = NULL; // Forward declarations of helper functions bool MainLoopStep(); +#ifdef __EMSCRIPTEN__ +#include +void MainLoopForEmscripten(void*) { MainLoopStep(); } +#endif // Main code int main(int, char**) @@ -88,6 +94,7 @@ int main(int, char**) // - Use '#define IMGUI_ENABLE_FREETYPE' in your imconfig file to use Freetype for higher quality font rendering. // - Read 'docs/FONTS.md' for more instructions and details. // - Remember that in C/C++ if you want to include a backslash \ in a string literal you need to write a double backslash \\ ! + // - Our Emscripten build process allows embedding fonts to be accessible at runtime from the "fonts/" folder. See Makefile.emscripten for details. //io.Fonts->AddFontDefault(); //io.Fonts->AddFontFromFileTTF("c:\\Windows\\Fonts\\segoeui.ttf", 18.0f); //io.Fonts->AddFontFromFileTTF("../../misc/fonts/DroidSans.ttf", 16.0f); @@ -97,11 +104,20 @@ int main(int, char**) //IM_ASSERT(font != NULL); // Main loop +#ifndef __EMSCRIPTEN__ + // Desktop Build while (true) { if (!MainLoopStep()) break; } +#else + // Emscripten Build + // For an Emscripten build we are disabling file-system access, so let's not attempt to do a fopen() of the imgui.ini file. + // You may manually call LoadIniSettingsFromMemory() to load settings from your own storage. + io.IniFilename = NULL; + emscripten_set_main_loop_arg(MainLoopForEmscripten, NULL, 0, true); +#endif // Cleanup ImGui_ImplOpenGL3_Shutdown(); diff --git a/examples/example_emscripten_opengl3/shell_minimal.html b/examples/libs/emscripten/shell_minimal.html similarity index 93% rename from examples/example_emscripten_opengl3/shell_minimal.html rename to examples/libs/emscripten/shell_minimal.html index 6cb61bd77..bcf626261 100644 --- a/examples/example_emscripten_opengl3/shell_minimal.html +++ b/examples/libs/emscripten/shell_minimal.html @@ -3,9 +3,10 @@ - Dear ImGui SDL+Emscripten example + Dear ImGui Emscripten example