Add Emscripten support for SDL2 and SDL3 surface examples

.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

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
 

docs/EXAMPLES.md

@@ -148,6 +148,7 @@ This requires SDL 2.0.18+ (released November 2021) <BR>
 [example_sdl2_surface/](https://github.com/ocornut/imgui/blob/master/examples/example_sdl2_surface/) <BR>
 SDL2 (Win32, Mac, Linux, etc.) + SDL_Surface CPU renderer example.<BR>
 = main.cpp + imgui_impl_sdl2.cpp + imgui_impl_sdlsurface2.cpp <BR>
+This supports building with Emscripten.<BR>
 
 [example_sdl2_vulkan/](https://github.com/ocornut/imgui/blob/master/examples/example_sdl2_vulkan/) <BR>
 SDL2 (Win32, Mac, Linux, etc.) + Vulkan example. <BR>
@@ -185,6 +186,7 @@ SDL3 (Win32, Mac, Linux, etc.) + SDL_Renderer for SDL3 example.<BR>
 [example_sdl3_surface/](https://github.com/ocornut/imgui/blob/master/examples/example_sdl3_surface/) <BR>
 SDL3 (Win32, Mac, Linux, etc.) + SDL_Surface CPU renderer example.<BR>
 = main.cpp + imgui_impl_sdl3.cpp + imgui_impl_sdlsurface3.cpp <BR>
+This supports building with Emscripten.<BR>
 
 [example_sdl3_vulkan/](https://github.com/ocornut/imgui/blob/master/examples/example_sdl3_vulkan/) <BR>
 SDL3 (Win32, Mac, Linux, etc.) + Vulkan example. <BR>

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)

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`.

examples/example_sdl2_surface/main.cpp

@@ -6,6 +6,9 @@
 #include "imgui_impl_sdlsurface2.h"
 #include <SDL.h>
 #include <stdio.h>
+#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();

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)

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`.

examples/example_sdl3_surface/main.cpp

@@ -3,6 +3,9 @@
 #include "imgui_impl_sdlsurface3.h"
 #include <SDL3/SDL.h>
 #include <stdio.h>
+#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();