diff --git a/docs/CHANGELOG.txt b/docs/CHANGELOG.txt
index 9157cc83..2e972642 100644
--- a/docs/CHANGELOG.txt
+++ b/docs/CHANGELOG.txt
@@ -118,6 +118,7 @@ Other Changes:
to using the ImGui::MemAlloc()/MemFree() calls directly.
- Examples: OpenGL: Added a dummy GL call + comments in ImGui_ImplOpenGL3_Init() to detect uninitialized
GL function loaders early, and help users understand what they are missing. (#2421)
+- Examples: Emscripten: Added Emscripten+SDL+GLES2 example. (#2494, #2492, #2351, #336) [@nicolasnoble]
- Examples: OpenGL3: Minor tweaks + not calling glBindBuffer more than necessary in the render loop.
- Examples: Vulkan: Fixed in-flight buffers issues when using multi-viewports. (#2461, #2348, #2378, #2097)
- Examples: Vulkan: Added missing support for 32-bit indices (#define ImDrawIdx unsigned int).
@@ -127,6 +128,9 @@ Other Changes:
- Examples: GLUT: Fixed existing FreeGLUT example to work with regular GLUT. (#2465) [@andrewwillmott]
- Examples: GLUT: Renamed imgui_impl_freeglut.cpp/.h to imgui_impl_glut.cpp/.h. (#2465) [@andrewwillmott]
- Examples: GLUT: Made io.DeltaTime always > 0. (#2430)
+- Examples: Visual Studio: Updated default platform toolset+sdk in vcproj files from v100+sdk7 (vs2010)
+ to v110+sdk8 (vs2012). This is mostly so we can remove reliance on DXSDK_DIR for the DX10/DX11 example,
+ which if existing and when switching to recent SDK ends up conflicting and creating warnings.
-----------------------------------------------------------------------
diff --git a/docs/README.md b/docs/README.md
index ba48517e..1b00d2fb 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -135,8 +135,7 @@ Languages: (third-party bindings)
Frameworks:
- Renderers: DirectX 9/10/11/12, Metal, OpenGL2, OpenGL3+/ES2/ES3, Vulkan: [examples/](https://github.com/ocornut/imgui/tree/master/examples)
- Platform: GLFW, SDL, Win32, OSX, GLUT: [examples/](https://github.com/ocornut/imgui/tree/master/examples)
-- Framework: Allegro 5, Marmalade: [examples/](https://github.com/ocornut/imgui/tree/master/examples)
-- Unmerged PR: SDL2 + OpenGLES + Emscripten: [#336](https://github.com/ocornut/imgui/pull/336)
+- Framework: Allegro 5, Emscripten, Marmalade: [examples/](https://github.com/ocornut/imgui/tree/master/examples)
- Unmerged PR: Android: [#421](https://github.com/ocornut/imgui/pull/421)
- Cinder: [Cinder-ImGui](https://github.com/simongeilfus/Cinder-ImGui)
- Cocos2d-x: [imguix](https://github.com/c0i/imguix), [#551](https://github.com/ocornut/imgui/issues/551)
@@ -221,8 +220,8 @@ Frequently Asked Question (FAQ)
This library is poorly documented at the moment and expects of the user to be acquainted with C/C++.
- Run the examples/ applications and explore them.
- - See demo code in imgui_demo.cpp and particularly the ImGui::ShowDemoWindow() function.
- - The demo covers most features of Dear ImGui, so you can read the code and see its output.
+ - See demo code in imgui_demo.cpp and particularly the ImGui::ShowDemoWindow() function.
+ - The demo covers most features of Dear ImGui, so you can read the code and see its output.
- See documentation and comments at the top of imgui.cpp + effectively imgui.h.
- Dozens of standalone example applications using e.g. OpenGL/DirectX are provided in the examples/ folder to explain how to integrate Dear ImGui with your own engine/application.
- Your programming IDE is your friend, find the type or function declaration to find comments associated to it.
diff --git a/docs/TODO.txt b/docs/TODO.txt
index 2f945c55..b2a463b0 100644
--- a/docs/TODO.txt
+++ b/docs/TODO.txt
@@ -358,8 +358,7 @@ It's mostly a bunch of personal notes, probably incomplete. Feel free to query i
- misc: possible compile-time support for wchar_t instead of char*?
- backend: bgfx? https://gist.github.com/RichardGale/6e2b74bc42b3005e08397236e4be0fd0
- - web/emscriptem: refactor some examples to facilitate integration with emscripten main loop system. (#1713, #336)
- - web/emscriptem: with refactored examples, we could provide a direct imgui_impl_emscripten platform layer (see eg. https://github.com/floooh/sokol-samples/blob/master/html5/imgui-emsc.cc#L42)
+ - emscriptem: with refactored examples, we could provide a direct imgui_impl_emscripten platform layer (see eg. https://github.com/floooh/sokol-samples/blob/master/html5/imgui-emsc.cc#L42)
- remote: make a system like RemoteImGui first-class citizen/project (#75)
diff --git a/examples/.gitignore b/examples/.gitignore
index ddfa5ead..54c0a118 100644
--- a/examples/.gitignore
+++ b/examples/.gitignore
@@ -27,6 +27,7 @@ xcuserdata
## Emscripten output
*.out.js
*.out.wasm
+example_emscripten/example_emscripten.*
## Unix executables
example_glfw_opengl2/example_glfw_opengl2
diff --git a/examples/README.txt b/examples/README.txt
index 0a870750..d8bf231a 100644
--- a/examples/README.txt
+++ b/examples/README.txt
@@ -129,13 +129,15 @@ List of high-level Frameworks Bindings in this repository: (combine Platform + R
imgui_impl_allegro5.cpp
imgui_impl_marmalade.cpp
+Note that Dear ImGui works with Emscripten.
+The examples_emscripten/ app uses sdl.cpp + opengl3.cpp but other combinations are possible.
Third-party framework, graphics API and languages bindings are listed at:
https://github.com/ocornut/imgui/wiki/Bindings
Languages: C, C#, ChaiScript, D, Go, Haxe, Java, Lua, Odin, Pascal, PureBasic, Python, Rust, Swift...
- Frameworks: Cinder, Cocoa (OSX), Cocos2d-x, Emscripten, SFML, GML/GameMaker Studio, Irrlicht, Ogre,
- OpenSceneGraph, openFrameworks, LOVE, NanoRT, Nim Game Lib, Qt3d, SFML, Unreal Engine 4...
+ Frameworks: Cinder, Cocoa (OSX), Cocos2d-x, SFML, GML/GameMaker Studio, Irrlicht, Ogre, OpenSceneGraph,
+ openFrameworks, LOVE, NanoRT, Nim Game Lib, Qt3d, SFML, Unreal Engine 4...
Miscellaneous: Software Renderer, RemoteImgui, etc.
@@ -184,6 +186,12 @@ example_apple_opengl2/
= main.mm + imgui_impl_osx.mm + imgui_impl_opengl2.cpp
(NB: you may still want to use GLFW or SDL which will also support Windows, Linux along with OSX.)
+example_empscripten:
+ 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 + GL 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_glfw_opengl2/
GLFW + OpenGL2 example (legacy, fixed pipeline).
= main.cpp + imgui_impl_glfw.cpp + imgui_impl_opengl2.cpp
diff --git a/examples/example_allegro5/example_allegro5.vcxproj b/examples/example_allegro5/example_allegro5.vcxproj
index b0792697..c86dcb2b 100644
--- a/examples/example_allegro5/example_allegro5.vcxproj
+++ b/examples/example_allegro5/example_allegro5.vcxproj
@@ -21,29 +21,34 @@
{2AE17FDE-F7F3-4CAC-ADAB-0710EDA4F741}example_allegro5
+ 8.1ApplicationtrueMultiByte
+ v110ApplicationtrueMultiByte
+ v110ApplicationfalsetrueMultiByte
+ v110ApplicationfalsetrueMultiByte
+ v110
diff --git a/examples/example_emscripten/Makefile b/examples/example_emscripten/Makefile
new file mode 100644
index 00000000..6c9865ff
--- /dev/null
+++ b/examples/example_emscripten/Makefile
@@ -0,0 +1,58 @@
+#
+# Makefile to use with emscripten
+# See https://emscripten.org/docs/getting_started/downloads.html
+# for installation instructions. This Makefile assumes you have
+# loaded emscripten's environment.
+#
+# Running `make` will produce three files:
+# - example_emscripten.html
+# - example_emscripten.js
+# - example_emscripten.wasm
+#
+# All three are needed to run the demo.
+
+CC = emcc
+CXX = em++
+
+EXE = example_emscripten.html
+SOURCES = main.cpp
+SOURCES += ../imgui_impl_sdl.cpp ../imgui_impl_opengl3.cpp
+SOURCES += ../../imgui.cpp ../../imgui_demo.cpp ../../imgui_draw.cpp ../../imgui_widgets.cpp
+OBJS = $(addsuffix .o, $(basename $(notdir $(SOURCES))))
+UNAME_S := $(shell uname -s)
+
+EMS = -s USE_SDL=2 -s WASM=1
+EMS += -s ALLOW_MEMORY_GROWTH=1 -s BINARYEN_TRAP_MODE=clamp
+EMS += -s DISABLE_EXCEPTION_CATCHING=1 -s NO_EXIT_RUNTIME=0
+EMS += -s ASSERTIONS=1 -s SAFE_HEAP=1
+
+CPPFLAGS = -I../ -I../../
+CPPFLAGS += -g -Wall -Wformat -O3
+CPPFLAGS += $(EMS)
+LIBS = $(EMS)
+LDFLAGS = --shell-file shell_minimal.html
+
+##---------------------------------------------------------------------
+## BUILD RULES
+##---------------------------------------------------------------------
+
+%.o:%.cpp
+ $(CXX) $(CPPFLAGS) $(CXXFLAGS) -c -o $@ $<
+
+%.o:../%.cpp
+ $(CXX) $(CPPFLAGS) $(CXXFLAGS) -c -o $@ $<
+
+%.o:../../%.cpp
+ $(CXX) $(CPPFLAGS) $(CXXFLAGS) -c -o $@ $<
+
+%.o:../libs/gl3w/GL/%.c
+ $(CC) $(CPPFLAGS) $(CFLAGS) -c -o $@ $<
+
+all: $(EXE)
+ @echo Build complete for $(EXE)
+
+$(EXE): $(OBJS)
+ $(CXX) -o $@ $^ $(LIBS) $(LDFLAGS)
+
+clean:
+ rm -f $(EXE) $(OBJS) *.js *.wasm *.wasm.pre
diff --git a/examples/example_emscripten/README.md b/examples/example_emscripten/README.md
new file mode 100644
index 00000000..c607ed73
--- /dev/null
+++ b/examples/example_emscripten/README.md
@@ -0,0 +1,8 @@
+
+# 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
+
+```
+em++ -I.. -I../.. main.cpp ../imgui_impl_sdl.cpp ../imgui_impl_opengl3.cpp ../../imgui*.cpp -s USE_SDL=2 -s USE_WEBGL2=1 -s WASM=1 -s FULL_ES3=1 -s ALLOW_MEMORY_GROWTH=1 -s BINARYEN_TRAP_MODE=clamp --shell-file shell_minimal.html -o example-emscripten.html
+```
diff --git a/examples/example_emscripten/main.cpp b/examples/example_emscripten/main.cpp
new file mode 100644
index 00000000..847b505a
--- /dev/null
+++ b/examples/example_emscripten/main.cpp
@@ -0,0 +1,165 @@
+// dear imgui: standalone example application for Emscripten, using SDL2 + OpenGL3
+// 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.
+//
+// If you are new to dear imgui, see examples/README.txt and documentation at the top of imgui.cpp.
+// (Emscripten is a C++-to-javascript compiler, used to publish executables for the web. See https://emscripten.org/)
+
+#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;
+SDL_GLContext g_GLContext = NULL;
+
+// For clarity, our main loop code is declared at the end.
+void main_loop(void*);
+
+int main(int, char**)
+{
+ // Setup SDL
+ if (SDL_Init(SDL_INIT_VIDEO|SDL_INIT_TIMER) != 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);
+ g_Window = SDL_CreateWindow("Dear ImGui Emscripten example", SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED, 1280, 720, window_flags);
+ g_GLContext = SDL_GL_CreateContext(g_Window);
+ if (!g_GLContext)
+ {
+ fprintf(stderr, "Failed to initialize WebGL context!\n");
+ return 1;
+ }
+ 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
+
+ // Setup Dear ImGui style
+ ImGui::StyleColorsDark();
+ //ImGui::StyleColorsClassic();
+
+ // Setup Platform/Renderer bindings
+ ImGui_ImplSDL2_InitForOpenGL(g_Window, g_GLContext);
+ 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.
+ // - Read 'misc/fonts/README.txt' 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 \\ !
+ //io.Fonts->AddFontDefault();
+ //io.Fonts->AddFontFromFileTTF("../../misc/fonts/Roboto-Medium.ttf", 16.0f);
+ //io.Fonts->AddFontFromFileTTF("../../misc/fonts/Cousine-Regular.ttf", 15.0f);
+ //io.Fonts->AddFontFromFileTTF("../../misc/fonts/DroidSans.ttf", 16.0f);
+ //io.Fonts->AddFontFromFileTTF("../../misc/fonts/ProggyTiny.ttf", 10.0f);
+ //ImFont* font = io.Fonts->AddFontFromFileTTF("c:\\Windows\\Fonts\\ArialUni.ttf", 18.0f, NULL, io.Fonts->GetGlyphRangesJapanese());
+ //IM_ASSERT(font != NULL);
+
+ // 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);
+}
+
+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.
+ // - When io.WantCaptureKeyboard is true, do not dispatch keyboard input data to your main application.
+ // 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(g_Window);
+ 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 created 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();
+ SDL_GL_MakeCurrent(g_Window, g_GLContext);
+ glViewport(0, 0, (int)io.DisplaySize.x, (int)io.DisplaySize.y);
+ glClearColor(clear_color.x, clear_color.y, clear_color.z, clear_color.w);
+ glClear(GL_COLOR_BUFFER_BIT);
+ ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());
+ SDL_GL_SwapWindow(g_Window);
+}
diff --git a/examples/example_emscripten/shell_minimal.html b/examples/example_emscripten/shell_minimal.html
new file mode 100644
index 00000000..aab79f1b
--- /dev/null
+++ b/examples/example_emscripten/shell_minimal.html
@@ -0,0 +1,153 @@
+
+
+
+
+
+ Dear ImGui Emscripten example
+
+
+
+
+