moonpower/imgui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Emscripten support for SDL2 and SDL3 surface examples

Browse Source
This commit is contained in:
moonpower
2026-03-13 15:49:21 +01:00
parent 6575c02cac
commit dc4a1d294d
9 changed files with 163 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+2
View File
@@ -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
+1 -1
View File
@@ -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
+2
View File
@@ -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
+54
View File
@@ -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
+10
View File
@@ -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
+13
View File
@@ -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
+58
View File
@@ -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
+10
View File
@@ -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
+13
View File
@@ -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();