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();