diff --git a/.gitignore b/.gitignore
index 3653bea5..a8772664 100644
--- a/.gitignore
+++ b/.gitignore
@@ -47,8 +47,10 @@ examples/example_glfw_opengl3/web/*
examples/example_glfw_wgpu/web/*
examples/example_glfw_wgpu/external/*
examples/example_sdl2_opengl3/web/*
+examples/example_sdl2_surface/web/*
examples/example_sdl2_wgpu/web/*
examples/example_sdl3_opengl3/web/*
+examples/example_sdl3_surface/web/*
examples/example_sdl3_wgpu/web/*
## JetBrains IDE artifacts
diff --git a/docs/BACKENDS.md b/docs/BACKENDS.md
index c599210d..afb908d5 100644
--- a/docs/BACKENDS.md
+++ b/docs/BACKENDS.md
@@ -105,7 +105,7 @@ List of high-level Frameworks Backends (combining Platform + Renderer):
imgui_impl_null.cpp
Emscripten is also supported!
-The SDL2+GL, SDL3+GL, GLFW+GL and GLFW+WebGPU examples are all ready to build and run with Emscripten.
+The SDL2+GL, SDL3+GL, SDL2+Surface, SDL3+Surface, GLFW+GL and GLFW+WebGPU examples are all ready to build and run with Emscripten.
### Recommended Backends
diff --git a/docs/EXAMPLES.md b/docs/EXAMPLES.md
index c745fcb0..9ccaa7d6 100644
--- a/docs/EXAMPLES.md
+++ b/docs/EXAMPLES.md
@@ -148,6 +148,7 @@ This requires SDL 2.0.18+ (released November 2021)
[example_sdl2_surface/](https://github.com/ocornut/imgui/blob/master/examples/example_sdl2_surface/)
SDL2 (Win32, Mac, Linux, etc.) + SDL_Surface CPU renderer example.
= main.cpp + imgui_impl_sdl2.cpp + imgui_impl_sdlsurface2.cpp
+This supports building with Emscripten.
[example_sdl2_vulkan/](https://github.com/ocornut/imgui/blob/master/examples/example_sdl2_vulkan/)
SDL2 (Win32, Mac, Linux, etc.) + Vulkan example.
@@ -185,6 +186,7 @@ SDL3 (Win32, Mac, Linux, etc.) + SDL_Renderer for SDL3 example.
[example_sdl3_surface/](https://github.com/ocornut/imgui/blob/master/examples/example_sdl3_surface/)
SDL3 (Win32, Mac, Linux, etc.) + SDL_Surface CPU renderer example.
= main.cpp + imgui_impl_sdl3.cpp + imgui_impl_sdlsurface3.cpp
+This supports building with Emscripten.
[example_sdl3_vulkan/](https://github.com/ocornut/imgui/blob/master/examples/example_sdl3_vulkan/)
SDL3 (Win32, Mac, Linux, etc.) + Vulkan example.
diff --git a/examples/example_sdl2_surface/Makefile.emscripten b/examples/example_sdl2_surface/Makefile.emscripten
new file mode 100644
index 00000000..849c0e29
--- /dev/null
+++ b/examples/example_sdl2_surface/Makefile.emscripten
@@ -0,0 +1,54 @@
+CC = emcc
+CXX = em++
+WEB_DIR = web
+EXE = $(WEB_DIR)/index.html
+IMGUI_DIR = ../..
+SOURCES = main.cpp
+SOURCES += $(IMGUI_DIR)/imgui.cpp $(IMGUI_DIR)/imgui_demo.cpp $(IMGUI_DIR)/imgui_draw.cpp $(IMGUI_DIR)/imgui_tables.cpp $(IMGUI_DIR)/imgui_widgets.cpp
+SOURCES += $(IMGUI_DIR)/backends/imgui_impl_sdl2.cpp $(IMGUI_DIR)/backends/imgui_impl_sdlsurface2.cpp
+OBJS = $(addprefix em_,$(addsuffix .o, $(basename $(notdir $(SOURCES)))))
+CPPFLAGS =
+LDFLAGS =
+EMS =
+
+EMS += -s USE_SDL=2
+EMS += -s DISABLE_EXCEPTION_CATCHING=1
+LDFLAGS += -s WASM=1 -s ALLOW_MEMORY_GROWTH=1 -s NO_EXIT_RUNTIME=0 -s ASSERTIONS=1
+
+USE_FILE_SYSTEM ?= 0
+ifeq ($(USE_FILE_SYSTEM), 0)
+LDFLAGS += -s NO_FILESYSTEM=1
+CPPFLAGS += -DIMGUI_DISABLE_FILE_FUNCTIONS
+endif
+ifeq ($(USE_FILE_SYSTEM), 1)
+LDFLAGS += --no-heap-copy --preload-file ../../misc/fonts@/fonts
+endif
+
+CPPFLAGS += -I$(IMGUI_DIR) -I$(IMGUI_DIR)/backends
+CPPFLAGS += -Wall -Wformat -O2 $(EMS)
+LDFLAGS += --shell-file ../libs/emscripten/shell_minimal.html
+LDFLAGS += $(EMS)
+
+em_%.o:%.cpp
+ $(CXX) $(CPPFLAGS) $(CXXFLAGS) -c -o $@ $<
+
+em_%.o:$(IMGUI_DIR)/%.cpp
+ $(CXX) $(CPPFLAGS) $(CXXFLAGS) -c -o $@ $<
+
+em_%.o:$(IMGUI_DIR)/backends/%.cpp
+ $(CXX) $(CPPFLAGS) $(CXXFLAGS) -c -o $@ $<
+
+all: $(EXE)
+ @echo Build complete for $(EXE)
+
+$(WEB_DIR):
+ mkdir $@
+
+serve: all
+ python3 -m http.server -d $(WEB_DIR)
+
+$(EXE): $(OBJS) $(WEB_DIR)
+ $(CXX) -o $@ $(OBJS) $(LDFLAGS)
+
+clean:
+ rm -rf $(OBJS) $(WEB_DIR)
diff --git a/examples/example_sdl2_surface/README.md b/examples/example_sdl2_surface/README.md
index e65ad2aa..aa82114a 100644
--- a/examples/example_sdl2_surface/README.md
+++ b/examples/example_sdl2_surface/README.md
@@ -33,3 +33,13 @@ c++ `sdl2-config --cflags` -I .. -I ../.. -I ../../backends \
main.cpp ../../backends/imgui_impl_sdl2.cpp ../../backends/imgui_impl_sdlsurface2.cpp ../../imgui*.cpp \
`sdl2-config --libs`
```
+
+## Emscripten
+
+Use `Makefile.emscripten`:
+```sh
+source /path/to/emsdk/emsdk_env.sh
+make -f Makefile.emscripten
+```
+
+This makes `web/index.html`, `web/index.js`, and `web/index.wasm`.
diff --git a/examples/example_sdl2_surface/main.cpp b/examples/example_sdl2_surface/main.cpp
index 85a086ce..eeb58de1 100644
--- a/examples/example_sdl2_surface/main.cpp
+++ b/examples/example_sdl2_surface/main.cpp
@@ -6,6 +6,9 @@
#include "imgui_impl_sdlsurface2.h"
#include
#include
+#ifdef __EMSCRIPTEN__
+#include "../libs/emscripten/emscripten_mainloop_stub.h"
+#endif
int main(int, char**)
{
@@ -55,6 +58,9 @@ int main(int, char**)
ImGuiIO& io = ImGui::GetIO(); (void)io;
io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard; // Enable Keyboard Controls
io.ConfigFlags |= ImGuiConfigFlags_NavEnableGamepad; // Enable Gamepad Controls
+#ifdef __EMSCRIPTEN__
+ io.IniFilename = nullptr;
+#endif
// Setup Dear ImGui style
ImGui::StyleColorsDark();
@@ -76,7 +82,11 @@ int main(int, char**)
// Main loop
bool done = false;
+#ifdef __EMSCRIPTEN__
+ EMSCRIPTEN_MAINLOOP_BEGIN
+#else
while (!done)
+#endif
{
// Poll and handle events (inputs, window resize, etc.)
SDL_Event event;
@@ -174,6 +184,9 @@ int main(int, char**)
SDL_BlitSurface(framebuffer, nullptr, window_surface, nullptr);
SDL_UpdateWindowSurface(window);
}
+#ifdef __EMSCRIPTEN__
+ EMSCRIPTEN_MAINLOOP_END;
+#endif
ImGui_ImplSDLSurface2_Shutdown();
ImGui_ImplSDL2_Shutdown();
diff --git a/examples/example_sdl3_surface/Makefile.emscripten b/examples/example_sdl3_surface/Makefile.emscripten
new file mode 100644
index 00000000..8d095207
--- /dev/null
+++ b/examples/example_sdl3_surface/Makefile.emscripten
@@ -0,0 +1,58 @@
+CC = emcc
+CXX = em++
+WEB_DIR = web
+EXE = $(WEB_DIR)/index.html
+IMGUI_DIR = ../..
+SOURCES = main.cpp
+SOURCES += $(IMGUI_DIR)/imgui.cpp $(IMGUI_DIR)/imgui_demo.cpp $(IMGUI_DIR)/imgui_draw.cpp $(IMGUI_DIR)/imgui_tables.cpp $(IMGUI_DIR)/imgui_widgets.cpp
+SOURCES += $(IMGUI_DIR)/backends/imgui_impl_sdl3.cpp $(IMGUI_DIR)/backends/imgui_impl_sdlsurface3.cpp
+OBJS = $(addprefix em_,$(addsuffix .o, $(basename $(notdir $(SOURCES)))))
+CPPFLAGS =
+LDFLAGS =
+EMS =
+
+EMS += -s USE_SDL=3
+EMS += -s DISABLE_EXCEPTION_CATCHING=1
+LDFLAGS += -s WASM=1 -s ALLOW_MEMORY_GROWTH=1 -s NO_EXIT_RUNTIME=0 -s ASSERTIONS=1
+LDFLAGS += -s FORCE_FILESYSTEM=1
+
+ifeq ($(shell $(CXX) --show-ports 2>/dev/null | grep -c 'sdl3 '),0)
+$(error This Emscripten toolchain does not provide an SDL3 port. Use an SDL3-capable emsdk to build this example for web)
+endif
+
+USE_FILE_SYSTEM ?= 0
+ifeq ($(USE_FILE_SYSTEM), 0)
+CPPFLAGS += -DIMGUI_DISABLE_FILE_FUNCTIONS
+endif
+ifeq ($(USE_FILE_SYSTEM), 1)
+LDFLAGS += --no-heap-copy --preload-file ../../misc/fonts@/fonts
+endif
+
+CPPFLAGS += -I$(IMGUI_DIR) -I$(IMGUI_DIR)/backends
+CPPFLAGS += -Wall -Wformat -O2 $(EMS)
+LDFLAGS += --shell-file ../libs/emscripten/shell_minimal.html
+LDFLAGS += $(EMS)
+
+em_%.o:%.cpp
+ $(CXX) $(CPPFLAGS) $(CXXFLAGS) -c -o $@ $<
+
+em_%.o:$(IMGUI_DIR)/%.cpp
+ $(CXX) $(CPPFLAGS) $(CXXFLAGS) -c -o $@ $<
+
+em_%.o:$(IMGUI_DIR)/backends/%.cpp
+ $(CXX) $(CPPFLAGS) $(CXXFLAGS) -c -o $@ $<
+
+all: $(EXE)
+ @echo Build complete for $(EXE)
+
+$(WEB_DIR):
+ mkdir $@
+
+serve: all
+ python3 -m http.server -d $(WEB_DIR)
+
+$(EXE): $(OBJS) $(WEB_DIR)
+ $(CXX) -o $@ $(OBJS) $(LDFLAGS)
+
+clean:
+ rm -rf $(OBJS) $(WEB_DIR)
diff --git a/examples/example_sdl3_surface/README.md b/examples/example_sdl3_surface/README.md
index b50eb5dd..89c3f3e1 100644
--- a/examples/example_sdl3_surface/README.md
+++ b/examples/example_sdl3_surface/README.md
@@ -31,3 +31,13 @@ c++ `pkg-config --cflags sdl3` -I .. -I ../.. -I ../../backends \
main.cpp ../../backends/imgui_impl_sdl3.cpp ../../backends/imgui_impl_sdlsurface3.cpp ../../imgui*.cpp \
-framework Cocoa -framework IOKit -framework CoreVideo `pkg-config --libs sdl3`
```
+
+## Emscripten
+
+Use `Makefile.emscripten`:
+```sh
+source /path/to/emsdk/emsdk_env.sh
+make -f Makefile.emscripten
+```
+
+This produces `web/index.html`, `web/index.js`, and `web/index.wasm`.
diff --git a/examples/example_sdl3_surface/main.cpp b/examples/example_sdl3_surface/main.cpp
index 6cfd00ab..b3956df9 100644
--- a/examples/example_sdl3_surface/main.cpp
+++ b/examples/example_sdl3_surface/main.cpp
@@ -3,6 +3,9 @@
#include "imgui_impl_sdlsurface3.h"
#include
#include
+#ifdef __EMSCRIPTEN__
+#include "../libs/emscripten/emscripten_mainloop_stub.h"
+#endif
int main(int, char**)
{
@@ -49,6 +52,9 @@ int main(int, char**)
ImGuiIO& io = ImGui::GetIO();
io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard;
io.ConfigFlags |= ImGuiConfigFlags_NavEnableGamepad;
+#ifdef __EMSCRIPTEN__
+ io.IniFilename = nullptr;
+#endif
ImGui::StyleColorsDark();
@@ -64,7 +70,11 @@ int main(int, char**)
ImVec4 clear_color = ImVec4(0.45f, 0.55f, 0.60f, 1.00f);
bool done = false;
+#ifdef __EMSCRIPTEN__
+ EMSCRIPTEN_MAINLOOP_BEGIN
+#else
while (!done)
+#endif
{
SDL_Event event;
while (SDL_PollEvent(&event))
@@ -160,6 +170,9 @@ int main(int, char**)
SDL_UpdateWindowSurface(window);
}
}
+#ifdef __EMSCRIPTEN__
+ EMSCRIPTEN_MAINLOOP_END;
+#endif
ImGui_ImplSDLSurface3_Shutdown();
ImGui_ImplSDL3_Shutdown();