mirror of
https://github.com/ocornut/imgui.git
synced 2026-05-10 05:38:24 +08:00
Examples: SDL2+WebGPU, SDL3+WebGPU: add new examples. (#8381)
This commit is contained in:
BrutPitt
ocornut
@@ -102,6 +102,8 @@ Other Changes:
|
||||
latest Dawn-Native and WGPU-Native. (#8381, #8567, #8191, #7435) [@brutpitt]
|
||||
- GLFW+WebGPU: removed unnecessary ImGui_ImplWGPU_InvalidateDeviceObjects() call
|
||||
during surface resize. (#8381)
|
||||
- SDL2+WebGPU: added new example (Emscripten + native Dawn/WGPU). (#8381) [@brutpitt]
|
||||
- SDL3+WebGPU: added new example (Emscripten + native Dawn/WGPU). (#8381) [@brutpitt]
|
||||
|
||||
|
||||
-----------------------------------------------------------------------
|
||||
|
||||
@@ -0,0 +1,197 @@
|
||||
# Building for desktop (WebGPU-native) with Dawn:
|
||||
# 1. git clone https://github.com/google/dawn dawn
|
||||
# 2. cmake -B build -DIMGUI_DAWN_DIR=dawn
|
||||
# 3. cmake --build build
|
||||
# The resulting binary will be found at one of the following locations:
|
||||
# * build/Debug/example_sdl2_wgpu[.exe]
|
||||
# * build/example_sdl2_wgpu[.exe]
|
||||
|
||||
# Building for desktop (WGPU-Native) with WGPU-Native:
|
||||
# 1. download WGPU-Native autogenerated binary modules for your platform/compiler from: https://github.com/gfx-rs/wgpu-native/releases
|
||||
# 2. unzip the downloaded file in your_preferred_folder
|
||||
# 3. cmake -B build -DIMGUI_WGPU_DIR=your_preferred_folder ("full path" or "relative" starting from current directory)
|
||||
# 4. cmake --build build
|
||||
# The resulting binary will be found at one of the following locations:
|
||||
# * build/Debug/example_sdl2_wgpu[.exe]
|
||||
# * build/example_sdl2_wgpu[.exe]
|
||||
|
||||
# Building for Emscripten:
|
||||
# 1. Install Emscripten SDK following the instructions: https://emscripten.org/docs/getting_started/downloads.html
|
||||
# 2. Install Ninja build system
|
||||
# 3. emcmake cmake -G Ninja -B build
|
||||
# (optional) -DIMGUI_EMSCRIPTEN_WEBGPU_FLAG="--use-port=path/to/emdawnwebgpu_package/emdawnwebgpu.port.py", see ReadMe.md
|
||||
# 3. cmake --build build
|
||||
# 4. emrun build/index.html
|
||||
|
||||
cmake_minimum_required(VERSION 3.22) # Dawn requires CMake >= 3.22
|
||||
project(imgui_example_sdl2_wgpu C CXX)
|
||||
|
||||
set(IMGUI_EXECUTABLE example_sdl2_wgpu)
|
||||
|
||||
if(NOT CMAKE_BUILD_TYPE)
|
||||
set(CMAKE_BUILD_TYPE Debug CACHE STRING "" FORCE)
|
||||
endif()
|
||||
|
||||
set(CMAKE_CXX_STANDARD 17) # Dawn requires C++17
|
||||
|
||||
# Dear ImGui
|
||||
set(IMGUI_DIR ../../)
|
||||
|
||||
# ImGui example commons source files
|
||||
set(IMGUI_EXAMPLE_SOURCE_FILES
|
||||
main.cpp
|
||||
# backend files
|
||||
${IMGUI_DIR}/backends/imgui_impl_sdl2.cpp
|
||||
${IMGUI_DIR}/backends/imgui_impl_wgpu.cpp
|
||||
# Dear ImGui files
|
||||
${IMGUI_DIR}/imgui.cpp
|
||||
${IMGUI_DIR}/imgui_draw.cpp
|
||||
${IMGUI_DIR}/imgui_demo.cpp
|
||||
${IMGUI_DIR}/imgui_tables.cpp
|
||||
${IMGUI_DIR}/imgui_widgets.cpp
|
||||
)
|
||||
|
||||
if(EMSCRIPTEN)
|
||||
if(NOT IMGUI_EMSCRIPTEN_WEBGPU_FLAG) # if IMGUI_EMSCRIPTEN_WEBGPU_FLAG not used, set by current EMSCRIPTEN version
|
||||
if(EMSCRIPTEN_VERSION VERSION_GREATER_EQUAL "4.0.10")
|
||||
set(IMGUI_EMSCRIPTEN_WEBGPU_FLAG "--use-port=emdawnwebgpu" CACHE STRING "Choose between --use-port=emdawnwebgpu (Dawn implementation of EMSCRIPTEN) and -sUSE_WEBGPU=1 (WGPU implementation of EMSCRIPTEN, deprecated in 4.0.10): default to --use-port=emdawnwebgpu for EMSCRIPTEN >= 4.0.10")
|
||||
else()
|
||||
set(IMGUI_EMSCRIPTEN_WEBGPU_FLAG "-sUSE_WEBGPU=1" CACHE STRING "Use -sUSE_WEBGPU=1 for EMSCRIPTEN WGPU implementation")
|
||||
endif()
|
||||
else() # if IMGUI_EMSCRIPTEN_WEBGPU_FLAG used, check correct version
|
||||
if(EMSCRIPTEN_VERSION VERSION_LESS "4.0.10" AND "${IMGUI_EMSCRIPTEN_WEBGPU_FLAG}" MATCHES "emdawnwebgpu")
|
||||
# it's necessary EMSCRIPTEN >= v4.0.10 (although "--use-port=path/to/emdawnwebgpu.port.py" is supported/tested from v4.0.8)
|
||||
message(FATAL_ERROR "emdawnwebgpu needs EMSCRIPTEN version >= 4.0.10")
|
||||
endif()
|
||||
endif()
|
||||
|
||||
add_compile_options(-sDISABLE_EXCEPTION_CATCHING=1 -DIMGUI_DISABLE_FILE_FUNCTIONS=1)
|
||||
else() # Native/Desktop build
|
||||
find_package(SDL2 REQUIRED) # SDL_MAIN_HANDLED
|
||||
|
||||
if(NOT IMGUI_DAWN_DIR AND NOT IMGUI_WGPU_DIR) # if it's Native/Desktop build, IMGUI_DAWN_DIR or IMGUI_WGPU_DIR must be specified
|
||||
message(FATAL_ERROR "Please specify the Dawn or WGPU base directory")
|
||||
endif()
|
||||
|
||||
if(IMGUI_DAWN_DIR AND IMGUI_WGPU_DIR) # both IMGUI_DAWN_DIR and IMGUI_WGPU_DIR cannot be set
|
||||
message(FATAL_ERROR "Please specify only one between Dawn / WGPU base directory")
|
||||
endif()
|
||||
|
||||
if(APPLE) # Add SDL2 module to get Surface, with libs and file property for MacOS build
|
||||
set_source_files_properties(${IMGUI_DIR}/backends/imgui_impl_wgpu.cpp PROPERTIES COMPILE_FLAGS "-x objective-c++")
|
||||
set(OS_LIBRARIES "-framework CoreFoundation -framework QuartzCore -framework Metal -framework MetalKit -framework Cocoa")
|
||||
endif()
|
||||
|
||||
if(IMGUI_DAWN_DIR) # DAWN-Native build options
|
||||
set(IMGUI_DAWN_DIR CACHE PATH "Path to Dawn repository")
|
||||
if(NOT IMGUI_DAWN_DIR)
|
||||
message(FATAL_ERROR "Please specify the Dawn repository by setting IMGUI_DAWN_DIR")
|
||||
endif()
|
||||
|
||||
option(DAWN_USE_GLFW OFF) # disable buildin GLFW in DAWN when we use SDL2 / SDL3
|
||||
|
||||
option(DAWN_FETCH_DEPENDENCIES "Use fetch_dawn_dependencies.py as an alternative to using depot_tools" ON)
|
||||
set(DAWN_BUILD_MONOLITHIC_LIBRARY "STATIC" CACHE STRING "Build monolithic library: SHARED, STATIC, or OFF.")
|
||||
|
||||
# Dawn builds many things by default - disable things we don't need
|
||||
option(DAWN_BUILD_SAMPLES "Enables building Dawn's samples" OFF)
|
||||
option(TINT_BUILD_CMD_TOOLS "Build the Tint command line tools" OFF)
|
||||
option(TINT_BUILD_DOCS "Build documentation" OFF)
|
||||
option(TINT_BUILD_TESTS "Build tests" OFF)
|
||||
if(NOT APPLE)
|
||||
option(TINT_BUILD_MSL_WRITER "Build the MSL output writer" OFF)
|
||||
endif()
|
||||
if(WIN32)
|
||||
option(DAWN_FORCE_SYSTEM_COMPONENT_LOAD "Allow system component fallback" ON)
|
||||
option(TINT_BUILD_SPV_READER "Build the SPIR-V input reader" OFF)
|
||||
option(TINT_BUILD_WGSL_READER "Build the WGSL input reader" ON)
|
||||
option(TINT_BUILD_GLSL_WRITER "Build the GLSL output writer" OFF)
|
||||
option(TINT_BUILD_GLSL_VALIDATOR "Build the GLSL output validator" OFF)
|
||||
option(TINT_BUILD_SPV_WRITER "Build the SPIR-V output writer" ON)
|
||||
option(TINT_BUILD_WGSL_WRITER "Build the WGSL output writer" ON)
|
||||
endif()
|
||||
# check if WAYLAND is the current Session Type and enable DAWN_USE_WAYLAND Wayland option @compile time
|
||||
# You can override this using: cmake -DDAWN_USE_WAYLAND=X (X = ON | OFF)
|
||||
if(LINUX)
|
||||
if($ENV{XDG_SESSION_TYPE} MATCHES wayland)
|
||||
option(DAWN_USE_WAYLAND "Enable support for Wayland surface" ON)
|
||||
endif()
|
||||
endif()
|
||||
|
||||
add_subdirectory("${IMGUI_DAWN_DIR}" "${CMAKE_CURRENT_BINARY_DIR}/dawn" EXCLUDE_FROM_ALL)
|
||||
|
||||
set(LIBRARIES webgpu_dawn ${OS_LIBRARIES})
|
||||
else() # WGPU-Native build options
|
||||
|
||||
set(WGPU_NATIVE_LIB_DIR ${IMGUI_WGPU_DIR}/lib)
|
||||
find_library(WGPU_LIBRARY NAMES libwgpu_native.a wgpu_native.lib wgpu_native HINTS ${WGPU_NATIVE_LIB_DIR} REQUIRED)
|
||||
if(WIN32)
|
||||
set(OS_LIBRARIES d3dcompiler ws2_32 userenv bcrypt ntdll opengl32 Propsys RuntimeObject)
|
||||
elseif(UNIX AND NOT APPLE)
|
||||
set(OS_LIBRARIES "-lm -ldl")
|
||||
endif()
|
||||
|
||||
set(LIBRARIES ${WGPU_LIBRARY} ${OS_LIBRARIES})
|
||||
endif()
|
||||
endif()
|
||||
|
||||
add_executable(${IMGUI_EXECUTABLE} ${IMGUI_EXAMPLE_SOURCE_FILES})
|
||||
|
||||
target_include_directories(${IMGUI_EXECUTABLE} PUBLIC
|
||||
${IMGUI_DIR}
|
||||
${IMGUI_DIR}/backends
|
||||
${SDL2_INCLUDE_DIRS}
|
||||
)
|
||||
|
||||
target_compile_definitions(${IMGUI_EXECUTABLE} PUBLIC "IMGUI_EXAMPLE_SDL2_WGPU")
|
||||
|
||||
# compiler option only for IMGUI_EXAMPLE_SOURCE_FILES
|
||||
if (MSVC)
|
||||
target_compile_options(${IMGUI_EXECUTABLE} PUBLIC /W4) # warning level 4
|
||||
else()
|
||||
target_compile_options(${IMGUI_EXECUTABLE} PUBLIC -Wall) # -Wextra -Wpedantic
|
||||
endif()
|
||||
|
||||
# IMGUI_IMPL_WEBGPU_BACKEND_DAWN/WGPU internal define is set according to:
|
||||
# EMSCRIPTEN: by used FLAG
|
||||
# --use-port=emdawnwebgpu --> IMGUI_IMPL_WEBGPU_BACKEND_DAWN enabled (+EMSCRIPTEN)
|
||||
# -sUSE_WEBGPU=1 --> IMGUI_IMPL_WEBGPU_BACKEND_WGPU enabled (+EMSCRIPTEN)
|
||||
# NATIVE: by used SDK installation directory
|
||||
# if IMGUI_DAWN_DIR is valid --> IMGUI_IMPL_WEBGPU_BACKEND_DAWN enabled
|
||||
# if IMGUI_WGPU_DIR is valid --> IMGUI_IMPL_WEBGPU_BACKEND_WGPU enabled
|
||||
|
||||
if(NOT EMSCRIPTEN) # WegGPU-Native settings
|
||||
if(IMGUI_DAWN_DIR)
|
||||
target_compile_definitions(${IMGUI_EXECUTABLE} PUBLIC "IMGUI_IMPL_WEBGPU_BACKEND_DAWN")
|
||||
else()
|
||||
target_compile_definitions(${IMGUI_EXECUTABLE} PUBLIC "IMGUI_IMPL_WEBGPU_BACKEND_WGPU")
|
||||
target_include_directories(${IMGUI_EXECUTABLE} PUBLIC ${IMGUI_WGPU_DIR}/include)
|
||||
endif()
|
||||
|
||||
target_link_libraries(${IMGUI_EXECUTABLE} INTERFACE webgpu_cpp PUBLIC ${LIBRARIES} ${SDL2_LIBRARIES})
|
||||
else() # Emscripten settings
|
||||
set(CMAKE_EXECUTABLE_SUFFIX ".html")
|
||||
|
||||
if("${IMGUI_EMSCRIPTEN_WEBGPU_FLAG}" MATCHES "emdawnwebgpu")
|
||||
target_compile_options(${IMGUI_EXECUTABLE} PUBLIC "${IMGUI_EMSCRIPTEN_WEBGPU_FLAG}")
|
||||
target_compile_definitions(${IMGUI_EXECUTABLE} PUBLIC "IMGUI_IMPL_WEBGPU_BACKEND_DAWN")
|
||||
else()
|
||||
target_compile_definitions(${IMGUI_EXECUTABLE} PUBLIC "IMGUI_IMPL_WEBGPU_BACKEND_WGPU")
|
||||
endif()
|
||||
message(STATUS "Using ${IMGUI_EMSCRIPTEN_WEBGPU_FLAG} WebGPU implementation")
|
||||
|
||||
target_compile_options(${IMGUI_EXECUTABLE} PUBLIC "-sUSE_SDL=2")
|
||||
target_link_options(${IMGUI_EXECUTABLE} PRIVATE
|
||||
"${IMGUI_EMSCRIPTEN_WEBGPU_FLAG}"
|
||||
"-sUSE_SDL=2"
|
||||
"-sWASM=1"
|
||||
"-sASYNCIFY=1"
|
||||
"-sALLOW_MEMORY_GROWTH=1"
|
||||
"-sNO_EXIT_RUNTIME=0"
|
||||
"-sASSERTIONS=1"
|
||||
"-sDISABLE_EXCEPTION_CATCHING=1"
|
||||
"-sNO_FILESYSTEM=1"
|
||||
"--shell-file=${CMAKE_CURRENT_LIST_DIR}/../libs/emscripten/shell_minimal.html"
|
||||
)
|
||||
set_target_properties(${IMGUI_EXECUTABLE} PROPERTIES OUTPUT_NAME "index")
|
||||
endif()
|
||||
@@ -0,0 +1,103 @@
|
||||
#
|
||||
# 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.
|
||||
# (On Windows, you may need to execute emsdk_env.bat or encmdprompt.bat ahead)
|
||||
#
|
||||
# Running `make -f Makefile.emscripten` will produce three files:
|
||||
# - web/index.html
|
||||
# - web/index.js
|
||||
# - web/index.wasm
|
||||
#
|
||||
# All three are needed to run the demo.
|
||||
|
||||
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_wgpu.cpp
|
||||
OBJS = $(addsuffix .o, $(basename $(notdir $(SOURCES))))
|
||||
UNAME_S := $(shell uname -s)
|
||||
CPPFLAGS =
|
||||
LDFLAGS =
|
||||
EMS =
|
||||
|
||||
##---------------------------------------------------------------------
|
||||
## EMSCRIPTEN OPTIONS
|
||||
##---------------------------------------------------------------------
|
||||
|
||||
# ("EMS" options gets added to both CPPFLAGS and LDFLAGS, whereas some options are for linker only)
|
||||
EMS += -s USE_SDL=2
|
||||
EMS += -s DISABLE_EXCEPTION_CATCHING=1
|
||||
LDFLAGS += -s WASM=1
|
||||
LDFLAGS += -s ALLOW_MEMORY_GROWTH=1
|
||||
LDFLAGS += -s ASYNCIFY=1
|
||||
LDFLAGS += -s NO_EXIT_RUNTIME=0
|
||||
LDFLAGS += -s ASSERTIONS=1
|
||||
|
||||
# (1) Using legacy WebGPU implementation (Emscripten < 4.0.10)
|
||||
#EMS += -DIMGUI_IMPL_WEBGPU_BACKEND_WGPU
|
||||
#LDFLAGS += -s USE_WEBGPU=1
|
||||
|
||||
# or (2) Using newer Dawn-based WebGPU port (Emscripten >= 4.0.10)
|
||||
EMS += --use-port=emdawnwebgpu
|
||||
LDFLAGS += --use-port=emdawnwebgpu
|
||||
|
||||
# Build as single file (binary text encoded in .html file)
|
||||
#LDFLAGS += -sSINGLE_FILE
|
||||
|
||||
# Emscripten allows preloading a file or folder to be accessible at runtime.
|
||||
# The Makefile for this example project suggests embedding the misc/fonts/ folder into our application, it will then be accessible as "/fonts"
|
||||
# See documentation for more details: https://emscripten.org/docs/porting/files/packaging_files.html
|
||||
# (Default value is 0. Set to 1 to enable file-system and include the misc/fonts/ folder as part of the build.)
|
||||
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
|
||||
|
||||
##---------------------------------------------------------------------
|
||||
## FINAL BUILD FLAGS
|
||||
##---------------------------------------------------------------------
|
||||
|
||||
CPPFLAGS += -I$(IMGUI_DIR) -I$(IMGUI_DIR)/backends
|
||||
#CPPFLAGS += -g
|
||||
CPPFLAGS += -Wall -Wformat -Os $(EMS)
|
||||
LDFLAGS += --shell-file ../libs/emscripten/shell_minimal.html
|
||||
LDFLAGS += $(EMS)
|
||||
|
||||
##---------------------------------------------------------------------
|
||||
## BUILD RULES
|
||||
##---------------------------------------------------------------------
|
||||
|
||||
%.o:%.cpp
|
||||
$(CXX) $(CPPFLAGS) $(CXXFLAGS) -c -o $@ $<
|
||||
|
||||
%.o:$(IMGUI_DIR)/%.cpp
|
||||
$(CXX) $(CPPFLAGS) $(CXXFLAGS) -c -o $@ $<
|
||||
|
||||
%.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 -f $(EXE) $(OBJS) $(WEB_DIR)/*.js $(WEB_DIR)/*.wasm $(WEB_DIR)/*.wasm.pre
|
||||
@@ -0,0 +1,167 @@
|
||||
## How to Build
|
||||
|
||||
|
||||
---
|
||||
|
||||
### Using CMake
|
||||
#### Building for desktop (WebGPU-native) with Google Dawn:
|
||||
1. `git clone https://github.com/google/dawn dawn`
|
||||
2. `cmake -B build -DIMGUI_DAWN_DIR=dawn`
|
||||
3. `cmake --build build`
|
||||
The resulting binary will be found at one of the following locations:
|
||||
* build/Debug/example_sdl2_wgpu[.exe]
|
||||
* build/example_sdl2_wgpu[.exe]
|
||||
|
||||
#### Building for desktop (WebGPU-Native) with WGPU:
|
||||
1. download WGPU-Native autogenerated binary modules for your platform/compiler from: https://github.com/gfx-rs/wgpu-native/releases
|
||||
2. unzip the downloaded file in `your_preferred_folder`
|
||||
3. `cmake -B build -DIMGUI_WGPU_DIR=your_preferred_folder` ("full path" or "relative" starting from current directory)
|
||||
4. `cmake --build build`
|
||||
The resulting binary will be found at one of the following locations:
|
||||
* build/Debug/example_sdl2_wgpu[.exe]
|
||||
* build/example_sdl2_wgpu[.exe]
|
||||
|
||||
#### Building for Emscripten:
|
||||
1. Install Emscripten SDK following the instructions: https://emscripten.org/docs/getting_started/downloads.html
|
||||
2. Install Ninja build system
|
||||
3. `emcmake cmake -G Ninja -B build`
|
||||
- (optional) `-DIMGUI_EMSCRIPTEN_WEBGPU_FLAG="--use-port=path/to/emdawnwebgpu_package/emdawnwebgpu.port.py"`, see below
|
||||
4. `cmake --build build`
|
||||
|
||||
#### Sync Emscripten with latest Google Dawn:
|
||||
If you want to sync Emscripten with latest DAWN release it's necessary to download the `port-emdawnwgpu-package` (released daily by Google) here:
|
||||
https://github.com/google/dawn/releases
|
||||
Unpack it in your preferred folder and to replace the step 3 with:
|
||||
|
||||
3. `emcmake cmake -DIMGUI_EMSCRIPTEN_WEBGPU_FLAG="--use-port=path/to/emdawnwebgpu_package/emdawnwebgpu.port.py" -G Ninja -B build`
|
||||
|
||||
**N.B.**
|
||||
For the WASM code produced by Emscripten to work correctly, it will also be necessary to have the "corresponding" (or newer) version of Google Canary (nightly build for developers) that includes the latest changes
|
||||
|
||||
|
||||
---
|
||||
|
||||
### CMake by step
|
||||
|
||||
#### Generate Dawn Native:
|
||||
|
||||
- `cmake -G Ninja -DIMGUI_DAWN_DIR=path_to_sdk_dir -B where_to_build_dir`
|
||||
- Using `IMGUI_DAWN_DIR` set `IMGUI_IMPL_WEBGPU_BACKEND_DAWN` compiler define
|
||||
|
||||
#### Generate WGPU Native:
|
||||
|
||||
- `cmake -G Ninja -DIMGUI_WGPU_DIR=path_to_sdk_dir -B where_to_build_dir`
|
||||
|
||||
- Using `IMGUI_WGPU_DIR` set `IMGUI_IMPL_WEBGPU_BACKEND_WGPU` compiler define
|
||||
|
||||
#### Generate Emscripten:
|
||||
|
||||
- `emcmake cmake -G Ninja -B where_to_build_dir`\
|
||||
CMake checks the EMSCRIPEN version then:
|
||||
- if EMS >= 4.0.10 uses `--use-port=emdawnwebgpu` flag to build
|
||||
- it set `IMGUI_IMPL_WEBGPU_BACKEND_DAWN` compiler define
|
||||
- if EMS < 4.0.10 uses `-sUSE_WEBGPU=1` flag to build
|
||||
- it set `IMGUI_IMPL_WEBGPU_BACKEND_WGPU` compiler define
|
||||
|
||||
#### Generate Emscripten forcing `-sUSE_WEBGPU=1` deprecated flag even with EMS >= 4.0.10
|
||||
- `emcmake cmake -G Ninja -DIMGUI_EMSCRIPTEN_WEBGPU_FLAG="-sUSE_WEBGPU=1" -B where_to_build_dir`
|
||||
- it set `IMGUI_IMPL_WEBGPU_BACKEND_WGPU` compiler define
|
||||
|
||||
#### Generate Emscripten using external WebGPU library (emdawnwebgpu_pkg)
|
||||
- `emcmake cmake -G Ninja -DIMGUI_EMSCRIPTEN_WEBGPU_FLAG="--use-port=path_to_emdawnwebgpu_pkg" -B where_to_build_dir`
|
||||
- it set `IMGUI_IMPL_WEBGPU_BACKEND_DAWN` compiler define
|
||||
- *To use external WebGPU library it's necessary to have EMS >= 4.0.10 or the minimum requirements specified by the package:*
|
||||
- https://github.com/google/dawn/releases
|
||||
|
||||
#### Build time
|
||||
|
||||
Once the procedure for the specific builder is generated, the build command is **always the same**:
|
||||
|
||||
- Build using CMake
|
||||
- `cmake --build where_to_build_dir`
|
||||
- It will use selected builder to build the example.
|
||||
|
||||
- Build explicitly:
|
||||
- `cd where_to_build_dir`
|
||||
- `ninja`
|
||||
- This is the builder chosen during the generation phase
|
||||
|
||||
---
|
||||
|
||||
### CMake useful options
|
||||
#### Generator types (alternative to **ninja** bulder):
|
||||
- `-G Ninja` to build with __ninja__ builder
|
||||
- `-G "Unix Makefiles"` to build with __make__ builder
|
||||
- `-G "Visual Studio 17 2022" -A x64` to create a VS 2022 solution (.sln) file, Windows only
|
||||
- **Native build only**
|
||||
- Not **officially** supported to build Google Dawn
|
||||
|
||||
Example:
|
||||
- using **make** instead **ninja**:
|
||||
- `cmake -G "Unix Makefiles" -DIMGUI_DAWN_DIR=path_to_sdk_dir -B where_to_build_dir`
|
||||
|
||||
**Syntax is case sensitive and the "" are necessary in case of spaces between words*
|
||||
|
||||
#### Directories
|
||||
- The directory path can be absolute or relative (starting from the current directory)
|
||||
- It's necessary to use different `where_to_build_dir` for different CMake generations
|
||||
|
||||
|
||||
#### Build type
|
||||
The default build type is **Debug**
|
||||
It is possible to use a different build type using:
|
||||
- `-DCMAKE_BUILD_TYPE=Release`
|
||||
- `-DCMAKE_BUILD_TYPE=MinSizeRel`
|
||||
- `-DCMAKE_BUILD_TYPE=RelWithDebInfo`
|
||||
|
||||
Example:
|
||||
- building **Release**:
|
||||
- `cmake -G ninja -DIMGUI_WGPU_DIR=path_to_sdk_dir -DCMAKE_BUILD_TYPE=Release -B where_to_build_dir `
|
||||
|
||||
#### GLFW / SDL2 / SDL3 includes, libraries, search paths and package manager
|
||||
|
||||
Includes and libraries, by default, are searched in system/compiler paths (environment variables): you can add the path to your development tools to the environment variables without having to modify the `CMakeLists.txt` file.
|
||||
- e.g. CLang search in path specified from the following environment variables:
|
||||
- include files: CPATH, C_INCLUDE_PATH, CPLUS_INCLUDE_PATH
|
||||
- library files: LIBRARY_PATH
|
||||
|
||||
If you are using a package manager (**vcpkg** / **conan** / ... ) you need/can to specify it, adding to cmake command:
|
||||
- `-DCMAKE_TOOLCHAIN_FILE=path/to/package_manager.cmake`
|
||||
|
||||
Examples:
|
||||
|
||||
- using **vcpkg** package manager it's necessary adding:
|
||||
- `-DCMAKE_TOOLCHAIN_FILE=<vcpkg_root_dir>/scripts/buildsystems/vcpkg.cmake`
|
||||
|
||||
- full cmake command using **vcpkg** package manager:
|
||||
- `cmake -G Ninja -DIMGUI_DAWN_DIR=path_to_sdk_dir -DCMAKE_TOOLCHAIN_FILE=<vcpkg_root_dir>/scripts/buildsystems/vcpkg.cmake -B where_to_build_dir`
|
||||
|
||||
---
|
||||
|
||||
|
||||
### Using makefile
|
||||
|
||||
- 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
|
||||
|
||||
- Depending on your configuration, in Windows you may need to run `emsdk/emsdk_env.bat` in your console to access the Emscripten command-line tools.
|
||||
|
||||
- You may also refer to our [Continuous Integration setup](https://github.com/ocornut/imgui/tree/master/.github/workflows) for Emscripten setup.
|
||||
|
||||
- Then build using `make -f Makefile.emscripten` while in the `example_glfw_wgpu/` directory.
|
||||
|
||||
- Requires recent Emscripten as WGPU is still a work-in-progress API.
|
||||
|
||||
---
|
||||
|
||||
## How to Run
|
||||
|
||||
To run on a local machine:
|
||||
- Make sure your browse supports WGPU and it is enabled. WGPU is still WIP not enabled by default in most browser.
|
||||
- `make serve` will use Python3 to spawn a local webserver, you can then browse http://localhost:8000 to access your build.
|
||||
- Otherwise, generally you will need a local webserver:
|
||||
- Quoting [https://emscripten.org/docs/getting_started](https://emscripten.org/docs/getting_started/Tutorial.html#generating-html):<br>
|
||||
_"Unfortunately several browsers (including Chrome, Safari, and Internet Explorer) do not support file:// [XHR](https://emscripten.org/docs/site/glossary.html#term-xhr) requests, and can’t load extra files needed by the HTML (like a .wasm file, or packaged file data as mentioned lower down). For these browsers you’ll need to serve the files using a [local webserver](https://emscripten.org/docs/getting_started/FAQ.html#faq-local-webserver) and then open http://localhost:8000/hello.html."_
|
||||
- Emscripten SDK has a handy `emrun` command: `emrun web/example_glfw_wgpu.html --browser firefox` which will spawn a temporary local webserver (in Firefox). See https://emscripten.org/docs/compiling/Running-html-files-with-emrun.html for details.
|
||||
- You may use Python 3 builtin webserver: `python -m http.server -d web` (this is what `make serve` uses).
|
||||
- You may use Python 2 builtin webserver: `cd web && python -m SimpleHTTPServer`.
|
||||
- If you are accessing the files over a network, certain browsers, such as Firefox, will restrict Gamepad API access to secure contexts only (e.g. https only).
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,199 @@
|
||||
# Building for desktop (WebGPU-native) with Dawn:
|
||||
# 1. git clone https://github.com/google/dawn dawn
|
||||
# 2. cmake -B build -DIMGUI_DAWN_DIR=dawn
|
||||
# 3. cmake --build build
|
||||
# The resulting binary will be found at one of the following locations:
|
||||
# * build/Debug/example_sdl3_wgpu[.exe]
|
||||
# * build/example_sdl3_wgpu[.exe]
|
||||
|
||||
# Building for desktop (WGPU-Native) with WGPU-Native:
|
||||
# 1. download WGPU-Native autogenerated binary modules for your platform/compiler from: https://github.com/gfx-rs/wgpu-native/releases
|
||||
# 2. unzip the downloaded file in your_preferred_folder
|
||||
# 3. cmake -B build -DIMGUI_WGPU_DIR=your_preferred_folder ("full path" or "relative" starting from current directory)
|
||||
# 4. cmake --build build
|
||||
# The resulting binary will be found at one of the following locations:
|
||||
# * build/Debug/example_sdl3_wgpu[.exe]
|
||||
# * build/example_sdl3_wgpu[.exe]
|
||||
|
||||
# Building for Emscripten:
|
||||
# 1. Install Emscripten SDK following the instructions: https://emscripten.org/docs/getting_started/downloads.html
|
||||
# 2. Install Ninja build system
|
||||
# 3. emcmake cmake -G Ninja -B build
|
||||
# (optional) -DIMGUI_EMSCRIPTEN_WEBGPU_FLAG="--use-port=path/to/emdawnwebgpu_package/emdawnwebgpu.port.py", see ReadMe.md
|
||||
# 4. cmake --build build
|
||||
# 5. emrun build/index.html
|
||||
|
||||
cmake_minimum_required(VERSION 3.22) # Dawn requires CMake >= 3.22
|
||||
project(imgui_example_sdl3_wgpu C CXX)
|
||||
|
||||
set(IMGUI_EXECUTABLE example_sdl3_wgpu)
|
||||
|
||||
if(NOT CMAKE_BUILD_TYPE)
|
||||
set(CMAKE_BUILD_TYPE Debug CACHE STRING "" FORCE)
|
||||
endif()
|
||||
|
||||
set(CMAKE_CXX_STANDARD 17) # Dawn requires C++17
|
||||
|
||||
# Dear ImGui
|
||||
set(IMGUI_DIR ../../)
|
||||
|
||||
# ImGui example commons source files
|
||||
set(IMGUI_EXAMPLE_SOURCE_FILES
|
||||
main.cpp
|
||||
# backend files
|
||||
${IMGUI_DIR}/backends/imgui_impl_sdl3.cpp
|
||||
${IMGUI_DIR}/backends/imgui_impl_wgpu.cpp
|
||||
# Dear ImGui files
|
||||
${IMGUI_DIR}/imgui.cpp
|
||||
${IMGUI_DIR}/imgui_draw.cpp
|
||||
${IMGUI_DIR}/imgui_demo.cpp
|
||||
${IMGUI_DIR}/imgui_tables.cpp
|
||||
${IMGUI_DIR}/imgui_widgets.cpp
|
||||
)
|
||||
|
||||
if(EMSCRIPTEN)
|
||||
if(EMSCRIPTEN_VERSION VERSION_LESS "4.0.15")
|
||||
message(FATAL_ERROR "Using Emscripten with SDL3 needs Emscripten version >= 4.0.15")
|
||||
endif()
|
||||
if(NOT IMGUI_EMSCRIPTEN_WEBGPU_FLAG) # if IMGUI_EMSCRIPTEN_WEBGPU_FLAG not used, set by current EMSCRIPTEN version
|
||||
if(EMSCRIPTEN_VERSION VERSION_GREATER_EQUAL "4.0.10")
|
||||
set(IMGUI_EMSCRIPTEN_WEBGPU_FLAG "--use-port=emdawnwebgpu" CACHE STRING "Choose between --use-port=emdawnwebgpu (Dawn implementation of EMSCRIPTEN) and -sUSE_WEBGPU=1 (WGPU implementation of EMSCRIPTEN, deprecated in 4.0.10): default to --use-port=emdawnwebgpu for EMSCRIPTEN >= 4.0.10")
|
||||
else()
|
||||
set(IMGUI_EMSCRIPTEN_WEBGPU_FLAG "-sUSE_WEBGPU=1" CACHE STRING "Use -sUSE_WEBGPU=1 for EMSCRIPTEN WGPU implementation")
|
||||
endif()
|
||||
else() # if IMGUI_EMSCRIPTEN_WEBGPU_FLAG used, check correct version
|
||||
if(EMSCRIPTEN_VERSION VERSION_LESS "4.0.10" AND "${IMGUI_EMSCRIPTEN_WEBGPU_FLAG}" MATCHES "emdawnwebgpu")
|
||||
# it's necessary EMSCRIPTEN >= v4.0.10 (although "--use-port=path/to/emdawnwebgpu.port.py" is supported/tested from v4.0.8)
|
||||
message(FATAL_ERROR "emdawnwebgpu needs EMSCRIPTEN version >= 4.0.10")
|
||||
endif()
|
||||
endif()
|
||||
|
||||
add_compile_options(-sDISABLE_EXCEPTION_CATCHING=1 -DIMGUI_DISABLE_FILE_FUNCTIONS=1)
|
||||
else() # Native/Desktop build
|
||||
find_package(SDL3 REQUIRED CONFIG REQUIRED COMPONENTS SDL3)
|
||||
|
||||
if(NOT IMGUI_DAWN_DIR AND NOT IMGUI_WGPU_DIR) # if it's Native/Desktop build, IMGUI_DAWN_DIR or IMGUI_WGPU_DIR must be specified
|
||||
message(FATAL_ERROR "Please specify the Dawn or WGPU base directory")
|
||||
endif()
|
||||
|
||||
if(IMGUI_DAWN_DIR AND IMGUI_WGPU_DIR) # both IMGUI_DAWN_DIR and IMGUI_WGPU_DIR cannot be set
|
||||
message(FATAL_ERROR "Please specify only one between Dawn / WGPU base directory")
|
||||
endif()
|
||||
|
||||
if(APPLE) # Add SDL3 module to get Surface, with libs and file property for MacOS build
|
||||
set_source_files_properties(${IMGUI_DIR}/backends/imgui_impl_wgpu.cpp PROPERTIES COMPILE_FLAGS "-x objective-c++")
|
||||
set(OS_LIBRARIES "-framework CoreFoundation -framework QuartzCore -framework Metal -framework MetalKit -framework Cocoa")
|
||||
endif()
|
||||
|
||||
if(IMGUI_DAWN_DIR) # DAWN-Native build options
|
||||
set(IMGUI_DAWN_DIR CACHE PATH "Path to Dawn repository")
|
||||
if(NOT IMGUI_DAWN_DIR)
|
||||
message(FATAL_ERROR "Please specify the Dawn repository by setting IMGUI_DAWN_DIR")
|
||||
endif()
|
||||
|
||||
option(DAWN_USE_GLFW OFF) # disable buildin GLFW in DAWN when we use SDL2 / SDL3
|
||||
|
||||
option(DAWN_FETCH_DEPENDENCIES "Use fetch_dawn_dependencies.py as an alternative to using depot_tools" ON)
|
||||
set(DAWN_BUILD_MONOLITHIC_LIBRARY "STATIC" CACHE STRING "Build monolithic library: SHARED, STATIC, or OFF.")
|
||||
|
||||
# Dawn builds many things by default - disable things we don't need
|
||||
option(DAWN_BUILD_SAMPLES "Enables building Dawn's samples" OFF)
|
||||
option(TINT_BUILD_CMD_TOOLS "Build the Tint command line tools" OFF)
|
||||
option(TINT_BUILD_DOCS "Build documentation" OFF)
|
||||
option(TINT_BUILD_TESTS "Build tests" OFF)
|
||||
if(NOT APPLE)
|
||||
option(TINT_BUILD_MSL_WRITER "Build the MSL output writer" OFF)
|
||||
endif()
|
||||
if(WIN32)
|
||||
option(DAWN_FORCE_SYSTEM_COMPONENT_LOAD "Allow system component fallback" ON)
|
||||
option(TINT_BUILD_SPV_READER "Build the SPIR-V input reader" OFF)
|
||||
option(TINT_BUILD_WGSL_READER "Build the WGSL input reader" ON)
|
||||
option(TINT_BUILD_GLSL_WRITER "Build the GLSL output writer" OFF)
|
||||
option(TINT_BUILD_GLSL_VALIDATOR "Build the GLSL output validator" OFF)
|
||||
option(TINT_BUILD_SPV_WRITER "Build the SPIR-V output writer" ON)
|
||||
option(TINT_BUILD_WGSL_WRITER "Build the WGSL output writer" ON)
|
||||
endif()
|
||||
# check if WAYLAND is the current Session Type and enable DAWN_USE_WAYLAND Wayland option @compile time
|
||||
# You can override this using: cmake -DDAWN_USE_WAYLAND=X (X = ON | OFF)
|
||||
if(LINUX)
|
||||
if($ENV{XDG_SESSION_TYPE} MATCHES wayland)
|
||||
option(DAWN_USE_WAYLAND "Enable support for Wayland surface" ON)
|
||||
endif()
|
||||
endif()
|
||||
|
||||
add_subdirectory("${IMGUI_DAWN_DIR}" "${CMAKE_CURRENT_BINARY_DIR}/dawn" EXCLUDE_FROM_ALL)
|
||||
|
||||
set(LIBRARIES webgpu_dawn ${OS_LIBRARIES})
|
||||
else() # WGPU-Native build options
|
||||
set(WGPU_NATIVE_LIB_DIR ${IMGUI_WGPU_DIR}/lib)
|
||||
find_library(WGPU_LIBRARY NAMES libwgpu_native.a wgpu_native.lib wgpu_native HINTS ${WGPU_NATIVE_LIB_DIR} REQUIRED)
|
||||
if(WIN32)
|
||||
set(OS_LIBRARIES d3dcompiler ws2_32 userenv bcrypt ntdll opengl32 Propsys RuntimeObject)
|
||||
elseif(UNIX AND NOT APPLE)
|
||||
set(OS_LIBRARIES "-lm -ldl")
|
||||
endif()
|
||||
|
||||
set(LIBRARIES ${WGPU_LIBRARY} ${OS_LIBRARIES})
|
||||
endif()
|
||||
endif()
|
||||
|
||||
add_executable(${IMGUI_EXECUTABLE} ${IMGUI_EXAMPLE_SOURCE_FILES})
|
||||
|
||||
target_include_directories(${IMGUI_EXECUTABLE} PUBLIC
|
||||
${IMGUI_DIR}
|
||||
${IMGUI_DIR}/backends
|
||||
${SDL3_INCLUDE_DIRS}
|
||||
)
|
||||
|
||||
target_compile_definitions(${IMGUI_EXECUTABLE} PUBLIC "IMGUI_EXAMPLE_SDL3_WGPU")
|
||||
|
||||
# Enable warning level compiler option only for IMGUI_EXAMPLE_SOURCE_FILES
|
||||
if (MSVC)
|
||||
target_compile_options(${IMGUI_EXECUTABLE} PUBLIC /W4) # warning level 4
|
||||
else()
|
||||
target_compile_options(${IMGUI_EXECUTABLE} PUBLIC -Wall) # -Wextra -Wpedantic
|
||||
endif()
|
||||
|
||||
# IMGUI_IMPL_WEBGPU_BACKEND_DAWN/WGPU internal define is set according to:
|
||||
# EMSCRIPTEN: by used FLAG
|
||||
# --use-port=emdawnwebgpu --> IMGUI_IMPL_WEBGPU_BACKEND_DAWN enabled (+EMSCRIPTEN)
|
||||
# -sUSE_WEBGPU=1 --> IMGUI_IMPL_WEBGPU_BACKEND_WGPU enabled (+EMSCRIPTEN)
|
||||
# NATIVE: by used SDK installation directory
|
||||
# if IMGUI_DAWN_DIR is valid --> IMGUI_IMPL_WEBGPU_BACKEND_DAWN enabled
|
||||
# if IMGUI_WGPU_DIR is valid --> IMGUI_IMPL_WEBGPU_BACKEND_WGPU enabled
|
||||
|
||||
if(NOT EMSCRIPTEN) # WegGPU-Native settings
|
||||
if(IMGUI_DAWN_DIR)
|
||||
target_compile_definitions(${IMGUI_EXECUTABLE} PUBLIC "IMGUI_IMPL_WEBGPU_BACKEND_DAWN")
|
||||
else()
|
||||
target_compile_definitions(${IMGUI_EXECUTABLE} PUBLIC "IMGUI_IMPL_WEBGPU_BACKEND_WGPU")
|
||||
target_include_directories(${IMGUI_EXECUTABLE} PUBLIC ${IMGUI_WGPU_DIR}/include)
|
||||
endif()
|
||||
|
||||
target_link_libraries(${IMGUI_EXECUTABLE} INTERFACE webgpu_cpp PUBLIC ${LIBRARIES} SDL3::SDL3)
|
||||
else() # Emscripten settings
|
||||
set(CMAKE_EXECUTABLE_SUFFIX ".html")
|
||||
|
||||
if("${IMGUI_EMSCRIPTEN_WEBGPU_FLAG}" MATCHES "emdawnwebgpu")
|
||||
target_compile_options(${IMGUI_EXECUTABLE} PUBLIC "${IMGUI_EMSCRIPTEN_WEBGPU_FLAG}")
|
||||
target_compile_definitions(${IMGUI_EXECUTABLE} PUBLIC "IMGUI_IMPL_WEBGPU_BACKEND_DAWN")
|
||||
else()
|
||||
target_compile_definitions(${IMGUI_EXECUTABLE} PUBLIC "IMGUI_IMPL_WEBGPU_BACKEND_WGPU")
|
||||
endif()
|
||||
message(STATUS "Using ${IMGUI_EMSCRIPTEN_WEBGPU_FLAG} WebGPU implementation")
|
||||
|
||||
target_compile_options(${IMGUI_EXECUTABLE} PUBLIC "-sUSE_SDL=3")
|
||||
target_link_options(${IMGUI_EXECUTABLE} PRIVATE
|
||||
"${IMGUI_EMSCRIPTEN_WEBGPU_FLAG}"
|
||||
"-sUSE_SDL=3"
|
||||
"-sWASM=1"
|
||||
"-sASYNCIFY=1"
|
||||
"-sALLOW_MEMORY_GROWTH=1"
|
||||
"-sNO_EXIT_RUNTIME=0"
|
||||
"-sASSERTIONS=1"
|
||||
"-sDISABLE_EXCEPTION_CATCHING=1"
|
||||
# "-sNO_FILESYSTEM=1"
|
||||
"--shell-file=${CMAKE_CURRENT_LIST_DIR}/../libs/emscripten/shell_minimal.html"
|
||||
)
|
||||
set_target_properties(${IMGUI_EXECUTABLE} PROPERTIES OUTPUT_NAME "index")
|
||||
endif()
|
||||
@@ -0,0 +1,103 @@
|
||||
#
|
||||
# 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.
|
||||
# (On Windows, you may need to execute emsdk_env.bat or encmdprompt.bat ahead)
|
||||
#
|
||||
# Running `make -f Makefile.emscripten` will produce three files:
|
||||
# - web/index.html
|
||||
# - web/index.js
|
||||
# - web/index.wasm
|
||||
#
|
||||
# All three are needed to run the demo.
|
||||
|
||||
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_wgpu.cpp
|
||||
OBJS = $(addsuffix .o, $(basename $(notdir $(SOURCES))))
|
||||
UNAME_S := $(shell uname -s)
|
||||
CPPFLAGS =
|
||||
LDFLAGS =
|
||||
EMS =
|
||||
|
||||
##---------------------------------------------------------------------
|
||||
## EMSCRIPTEN OPTIONS
|
||||
##---------------------------------------------------------------------
|
||||
|
||||
# ("EMS" options gets added to both CPPFLAGS and LDFLAGS, whereas some options are for linker only)
|
||||
EMS += -s USE_SDL=3
|
||||
EMS += -s DISABLE_EXCEPTION_CATCHING=1
|
||||
LDFLAGS += -s WASM=1
|
||||
LDFLAGS += -s ALLOW_MEMORY_GROWTH=1
|
||||
LDFLAGS += -s ASYNCIFY=1
|
||||
LDFLAGS += -s NO_EXIT_RUNTIME=0
|
||||
LDFLAGS += -s ASSERTIONS=1
|
||||
|
||||
# (1) Using legacy WebGPU implementation (Emscripten < 4.0.10)
|
||||
#EMS += -DIMGUI_IMPL_WEBGPU_BACKEND_WGPU
|
||||
#LDFLAGS += -s USE_WEBGPU=1
|
||||
|
||||
# or (2) Using newer Dawn-based WebGPU port (Emscripten >= 4.0.10)
|
||||
EMS += --use-port=emdawnwebgpu
|
||||
LDFLAGS += --use-port=emdawnwebgpu
|
||||
|
||||
# Build as single file (binary text encoded in .html file)
|
||||
#LDFLAGS += -sSINGLE_FILE
|
||||
|
||||
# Emscripten allows preloading a file or folder to be accessible at runtime.
|
||||
# The Makefile for this example project suggests embedding the misc/fonts/ folder into our application, it will then be accessible as "/fonts"
|
||||
# See documentation for more details: https://emscripten.org/docs/porting/files/packaging_files.html
|
||||
# (Default value is 0. Set to 1 to enable file-system and include the misc/fonts/ folder as part of the build.)
|
||||
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
|
||||
|
||||
##---------------------------------------------------------------------
|
||||
## FINAL BUILD FLAGS
|
||||
##---------------------------------------------------------------------
|
||||
|
||||
CPPFLAGS += -I$(IMGUI_DIR) -I$(IMGUI_DIR)/backends
|
||||
#CPPFLAGS += -g
|
||||
CPPFLAGS += -Wall -Wformat -Os $(EMS)
|
||||
LDFLAGS += --shell-file ../libs/emscripten/shell_minimal.html
|
||||
LDFLAGS += $(EMS)
|
||||
|
||||
##---------------------------------------------------------------------
|
||||
## BUILD RULES
|
||||
##---------------------------------------------------------------------
|
||||
|
||||
%.o:%.cpp
|
||||
$(CXX) $(CPPFLAGS) $(CXXFLAGS) -c -o $@ $<
|
||||
|
||||
%.o:$(IMGUI_DIR)/%.cpp
|
||||
$(CXX) $(CPPFLAGS) $(CXXFLAGS) -c -o $@ $<
|
||||
|
||||
%.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 -f $(EXE) $(OBJS) $(WEB_DIR)/*.js $(WEB_DIR)/*.wasm $(WEB_DIR)/*.wasm.pre
|
||||
@@ -0,0 +1,167 @@
|
||||
## How to Build
|
||||
|
||||
|
||||
---
|
||||
|
||||
### Using CMake
|
||||
#### Building for desktop (WebGPU-native) with Google Dawn:
|
||||
1. `git clone https://github.com/google/dawn dawn`
|
||||
2. `cmake -B build -DIMGUI_DAWN_DIR=dawn`
|
||||
3. `cmake --build build`
|
||||
The resulting binary will be found at one of the following locations:
|
||||
* build/Debug/example_sdl3_wgpu[.exe]
|
||||
* build/example_sdl3_wgpu[.exe]
|
||||
|
||||
#### Building for desktop (WebGPU-Native) with WGPU:
|
||||
1. download WGPU-Native autogenerated binary modules for your platform/compiler from: https://github.com/gfx-rs/wgpu-native/releases
|
||||
2. unzip the downloaded file in `your_preferred_folder`
|
||||
3. `cmake -B build -DIMGUI_WGPU_DIR=your_preferred_folder` ("full path" or "relative" starting from current directory)
|
||||
5. `cmake --build build`
|
||||
The resulting binary will be found at one of the following locations:
|
||||
* build/Debug/example_sdl3_wgpu[.exe]
|
||||
* build/example_sdl3_wgpu[.exe]
|
||||
|
||||
#### Building for Emscripten:
|
||||
1. Install Emscripten SDK following the instructions: https://emscripten.org/docs/getting_started/downloads.html
|
||||
2. Install Ninja build system
|
||||
3. `emcmake cmake -G Ninja -B build`
|
||||
- (optional) `-DIMGUI_EMSCRIPTEN_WEBGPU_FLAG="--use-port=path/to/emdawnwebgpu_package/emdawnwebgpu.port.py"`, see below
|
||||
4. `cmake --build build`
|
||||
|
||||
#### Sync Emscripten with latest Google Dawn:
|
||||
If you want to sync Emscripten with latest DAWN release it's necessary to download the `port-emdawnwgpu-package` (released daily by Google) here:
|
||||
https://github.com/google/dawn/releases
|
||||
Unpack it in your preferred folder and to replace the step 3 with:
|
||||
|
||||
3. `emcmake cmake -DIMGUI_EMSCRIPTEN_WEBGPU_FLAG="--use-port=path/to/emdawnwebgpu_package/emdawnwebgpu.port.py" -G Ninja -B build`
|
||||
|
||||
**N.B.**
|
||||
For the WASM code produced by Emscripten to work correctly, it will also be necessary to have the "corresponding" (or newer) version of Google Canary (nightly build for developers) that includes the latest changes
|
||||
|
||||
|
||||
---
|
||||
|
||||
### CMake by step
|
||||
|
||||
#### Generate Dawn Native:
|
||||
|
||||
- `cmake -G Ninja -DIMGUI_DAWN_DIR=path_to_sdk_dir -B where_to_build_dir`
|
||||
- Using `IMGUI_DAWN_DIR` set `IMGUI_IMPL_WEBGPU_BACKEND_DAWN` compiler define
|
||||
|
||||
#### Generate WGPU Native:
|
||||
|
||||
- `cmake -G Ninja -DIMGUI_WGPU_DIR=path_to_sdk_dir -B where_to_build_dir`
|
||||
|
||||
- Using `IMGUI_WGPU_DIR` set `IMGUI_IMPL_WEBGPU_BACKEND_WGPU` compiler define
|
||||
|
||||
#### Generate Emscripten:
|
||||
|
||||
- `emcmake cmake -G Ninja -B where_to_build_dir`\
|
||||
CMake checks the EMSCRIPEN version then:
|
||||
- if EMS >= 4.0.10 uses `--use-port=emdawnwebgpu` flag to build
|
||||
- it set `IMGUI_IMPL_WEBGPU_BACKEND_DAWN` compiler define
|
||||
- if EMS < 4.0.10 uses `-sUSE_WEBGPU=1` flag to build
|
||||
- it set `IMGUI_IMPL_WEBGPU_BACKEND_WGPU` compiler define
|
||||
|
||||
#### Generate Emscripten forcing `-sUSE_WEBGPU=1` deprecated flag even with EMS >= 4.0.10
|
||||
- `emcmake cmake -G Ninja -DIMGUI_EMSCRIPTEN_WEBGPU_FLAG="-sUSE_WEBGPU=1" -B where_to_build_dir`
|
||||
- it set `IMGUI_IMPL_WEBGPU_BACKEND_WGPU` compiler define
|
||||
|
||||
#### Generate Emscripten using external WebGPU library (emdawnwebgpu_pkg)
|
||||
- `emcmake cmake -G Ninja -DIMGUI_EMSCRIPTEN_WEBGPU_FLAG="--use-port=path_to_emdawnwebgpu_pkg" -B where_to_build_dir`
|
||||
- it set `IMGUI_IMPL_WEBGPU_BACKEND_DAWN` compiler define
|
||||
- *To use external WebGPU library it's necessary to have EMS >= 4.0.10 or the minimum requirements specified by the package:*
|
||||
- https://github.com/google/dawn/releases
|
||||
|
||||
#### Build time
|
||||
|
||||
Once the procedure for the specific builder is generated, the build command is **always the same**:
|
||||
|
||||
- Build using CMake
|
||||
- `cmake --build where_to_build_dir`
|
||||
- It will use selected builder to build the example.
|
||||
|
||||
- Build explicitly:
|
||||
- `cd where_to_build_dir`
|
||||
- `ninja`
|
||||
- This is the builder chosen during the generation phase
|
||||
|
||||
---
|
||||
|
||||
### CMake useful options
|
||||
#### Generator types (alternative to **ninja** bulder):
|
||||
- `-G Ninja` to build with __ninja__ builder
|
||||
- `-G "Unix Makefiles"` to build with __make__ builder
|
||||
- `-G "Visual Studio 17 2022" -A x64` to create a VS 2022 solution (.sln) file, Windows only
|
||||
- **Native build only**
|
||||
- Not **officially** supported to build Google Dawn
|
||||
|
||||
Example:
|
||||
- using **make** instead **ninja**:
|
||||
- `cmake -G "Unix Makefiles" -DIMGUI_DAWN_DIR=path_to_sdk_dir -B where_to_build_dir`
|
||||
|
||||
**Syntax is case sensitive and the "" are necessary in case of spaces between words*
|
||||
|
||||
#### Directories
|
||||
- The directory path can be absolute or relative (starting from the current directory)
|
||||
- It's necessary to use different `where_to_build_dir` for different CMake generations
|
||||
|
||||
|
||||
#### Build type
|
||||
The default build type is **Debug**
|
||||
It is possible to use a different build type using:
|
||||
- `-DCMAKE_BUILD_TYPE=Release`
|
||||
- `-DCMAKE_BUILD_TYPE=MinSizeRel`
|
||||
- `-DCMAKE_BUILD_TYPE=RelWithDebInfo`
|
||||
|
||||
Example:
|
||||
- building **Release**:
|
||||
- `cmake -G ninja -DIMGUI_WGPU_DIR=path_to_sdk_dir -DCMAKE_BUILD_TYPE=Release -B where_to_build_dir `
|
||||
|
||||
#### GLFW / SDL2 / SDL3 includes, libraries, search paths and package manager
|
||||
|
||||
Includes and libraries, by default, are searched in system/compiler paths (environment variables): you can add the path to your development tools to the environment variables without having to modify the `CMakeLists.txt` file.
|
||||
- e.g. CLang search in path specified from the following environment variables:
|
||||
- include files: CPATH, C_INCLUDE_PATH, CPLUS_INCLUDE_PATH
|
||||
- library files: LIBRARY_PATH
|
||||
|
||||
If you are using a package manager (**vcpkg** / **conan** / ... ) you need/can to specify it, adding to cmake command:
|
||||
- `-DCMAKE_TOOLCHAIN_FILE=path/to/package_manager.cmake`
|
||||
|
||||
Examples:
|
||||
|
||||
- using **vcpkg** package manager it's necessary adding:
|
||||
- `-DCMAKE_TOOLCHAIN_FILE=<vcpkg_root_dir>/scripts/buildsystems/vcpkg.cmake`
|
||||
|
||||
- full cmake command using **vcpkg** package manager:
|
||||
- `cmake -G Ninja -DIMGUI_DAWN_DIR=path_to_sdk_dir -DCMAKE_TOOLCHAIN_FILE=<vcpkg_root_dir>/scripts/buildsystems/vcpkg.cmake -B where_to_build_dir`
|
||||
|
||||
---
|
||||
|
||||
|
||||
### Using makefile
|
||||
|
||||
- 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
|
||||
|
||||
- Depending on your configuration, in Windows you may need to run `emsdk/emsdk_env.bat` in your console to access the Emscripten command-line tools.
|
||||
|
||||
- You may also refer to our [Continuous Integration setup](https://github.com/ocornut/imgui/tree/master/.github/workflows) for Emscripten setup.
|
||||
|
||||
- Then build using `make -f Makefile.emscripten` while in the `example_glfw_wgpu/` directory.
|
||||
|
||||
- Requires recent Emscripten as WGPU is still a work-in-progress API.
|
||||
|
||||
---
|
||||
|
||||
## How to Run
|
||||
|
||||
To run on a local machine:
|
||||
- Make sure your browse supports WGPU and it is enabled. WGPU is still WIP not enabled by default in most browser.
|
||||
- `make serve` will use Python3 to spawn a local webserver, you can then browse http://localhost:8000 to access your build.
|
||||
- Otherwise, generally you will need a local webserver:
|
||||
- Quoting [https://emscripten.org/docs/getting_started](https://emscripten.org/docs/getting_started/Tutorial.html#generating-html):<br>
|
||||
_"Unfortunately several browsers (including Chrome, Safari, and Internet Explorer) do not support file:// [XHR](https://emscripten.org/docs/site/glossary.html#term-xhr) requests, and can’t load extra files needed by the HTML (like a .wasm file, or packaged file data as mentioned lower down). For these browsers you’ll need to serve the files using a [local webserver](https://emscripten.org/docs/getting_started/FAQ.html#faq-local-webserver) and then open http://localhost:8000/hello.html."_
|
||||
- Emscripten SDK has a handy `emrun` command: `emrun web/example_glfw_wgpu.html --browser firefox` which will spawn a temporary local webserver (in Firefox). See https://emscripten.org/docs/compiling/Running-html-files-with-emrun.html for details.
|
||||
- You may use Python 3 builtin webserver: `python -m http.server -d web` (this is what `make serve` uses).
|
||||
- You may use Python 2 builtin webserver: `cd web && python -m SimpleHTTPServer`.
|
||||
- If you are accessing the files over a network, certain browsers, such as Firefox, will restrict Gamepad API access to secure contexts only (e.g. https only).
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user