Examples: GLFW+WebGPU: Rename example_emscripten_wgpu/ to example_glfw_wgpu/ (#7435, #7132)

features/sdl_renderer3_multiviewports
ocornut ago%!(EXTRA string=1 year)
parent 648278cd62
commit 7b8107e7c8
  1. 4
      .github/workflows/build.yml
  2. 5
      .gitignore
  3. 2
      backends/imgui_impl_wgpu.cpp
  4. 4
      docs/BACKENDS.md
  5. 1
      docs/CHANGELOG.txt
  6. 4
      docs/EXAMPLES.md
  7. 20
      examples/example_glfw_wgpu/CMakeLists.txt
  8. 0
      examples/example_glfw_wgpu/Makefile.emscripten
  9. 4
      examples/example_glfw_wgpu/README.md
  10. 0
      examples/example_glfw_wgpu/main.cpp
  11. 2
      examples/example_glfw_wgpu/web/index.html

@ -489,12 +489,12 @@ jobs:
popd popd
make -C examples/example_sdl2_opengl3 -f Makefile.emscripten make -C examples/example_sdl2_opengl3 -f Makefile.emscripten
- name: Build example_emscripten_wgpu - name: Build example_glfw_wgpu
run: | run: |
pushd emsdk-master pushd emsdk-master
source ./emsdk_env.sh source ./emsdk_env.sh
popd popd
make -C examples/example_emscripten_wgpu -f Makefile.emscripten make -C examples/example_glfw_wgpu -f Makefile.emscripten
Android: Android:
runs-on: ubuntu-22.04 runs-on: ubuntu-22.04

5
.gitignore vendored

@ -40,10 +40,9 @@ examples/*.o.tmp
examples/*.out.js examples/*.out.js
examples/*.out.wasm examples/*.out.wasm
examples/example_glfw_opengl3/web/* examples/example_glfw_opengl3/web/*
examples/example_glfw_wgpu/web/*
examples/example_glfw_wgpu/external/*
examples/example_sdl2_opengl3/web/* examples/example_sdl2_opengl3/web/*
examples/example_emscripten_wgpu/web/*
## Dawn build dependencies
examples/example_emscripten_wgpu/external/*
## JetBrains IDE artifacts ## JetBrains IDE artifacts
.idea .idea

@ -751,7 +751,7 @@ bool ImGui_ImplWGPU_Init(ImGui_ImplWGPU_InitInfo* init_info)
// Create buffers with a default size (they will later be grown as needed) // Create buffers with a default size (they will later be grown as needed)
bd->pFrameResources = new FrameResources[bd->numFramesInFlight]; bd->pFrameResources = new FrameResources[bd->numFramesInFlight];
for (int i = 0; i < bd->numFramesInFlight; i++) for (unsigned int i = 0; i < bd->numFramesInFlight; i++)
{ {
FrameResources* fr = &bd->pFrameResources[i]; FrameResources* fr = &bd->pFrameResources[i];
fr->IndexBuffer = nullptr; fr->IndexBuffer = nullptr;

@ -79,14 +79,14 @@ List of Renderer Backends:
imgui_impl_sdlrenderer2.cpp ; SDL_Renderer (optional component of SDL2 available from SDL 2.0.18+) imgui_impl_sdlrenderer2.cpp ; SDL_Renderer (optional component of SDL2 available from SDL 2.0.18+)
imgui_impl_sdlrenderer3.cpp ; SDL_Renderer (optional component of SDL3 available from SDL 3.0.0+) imgui_impl_sdlrenderer3.cpp ; SDL_Renderer (optional component of SDL3 available from SDL 3.0.0+)
imgui_impl_vulkan.cpp ; Vulkan imgui_impl_vulkan.cpp ; Vulkan
imgui_impl_wgpu.cpp ; WebGPU imgui_impl_wgpu.cpp ; WebGPU (web and desktop)
List of high-level Frameworks Backends (combining Platform + Renderer): List of high-level Frameworks Backends (combining Platform + Renderer):
imgui_impl_allegro5.cpp imgui_impl_allegro5.cpp
Emscripten is also supported! Emscripten is also supported!
The SDL+GL, GLFW+GL and SDL+WebGPU examples are all ready to build and run with Emscripten. The SDL+GL, GLFW+GL and GLFW+WebGPU examples are all ready to build and run with Emscripten.
### Backends for third-party frameworks, graphics API or other languages ### Backends for third-party frameworks, graphics API or other languages

@ -51,6 +51,7 @@ Other changes:
- Backends: SDL3: Fixed text inputs. Re-enable calling SDL_StartTextInput()/SDL_StopTextInput() - Backends: SDL3: Fixed text inputs. Re-enable calling SDL_StartTextInput()/SDL_StopTextInput()
as SDL3 no longer enables it by default. (#7452, #6306, #6071, #1953) [@Green-Sky] as SDL3 no longer enables it by default. (#7452, #6306, #6071, #1953) [@Green-Sky]
- Examples: GLFW+WebGPU: Added support for WebGPU-native/Dawn (#7435, #7132) [@eliasdaler, @Zelif] - Examples: GLFW+WebGPU: Added support for WebGPU-native/Dawn (#7435, #7132) [@eliasdaler, @Zelif]
- Examples: GLFW+WebGPU: Renamed example_emscripten_wgpu/ to example_glfw_wgpu/. (#7435, #7132)
----------------------------------------------------------------------- -----------------------------------------------------------------------

@ -104,8 +104,8 @@ OSX + OpenGL2 example. <BR>
(NB: imgui_impl_osx.mm is currently not as feature complete as other platforms backends. (NB: imgui_impl_osx.mm is currently not as feature complete as other platforms backends.
You may prefer to use the GLFW Or SDL backends, which will also support Windows and Linux.) You may prefer to use the GLFW Or SDL backends, which will also support Windows and Linux.)
[example_emscripten_wgpu/](https://github.com/ocornut/imgui/blob/master/examples/example_emscripten_wgpu/) <BR> [example_glfw_wgpu/](https://github.com/ocornut/imgui/blob/master/examples/example_glfw_wgpu/) <BR>
Emcripten + GLFW + WebGPU example. <BR> GLFW + WebGPU example. Supports Emscripten (web) or Dawn (desktop) <BR>
= main.cpp + imgui_impl_glfw.cpp + imgui_impl_wgpu.cpp = main.cpp + imgui_impl_glfw.cpp + imgui_impl_wgpu.cpp
Note that the 'example_glfw_opengl3' and 'example_sdl2_opengl3' examples also supports Emscripten! Note that the 'example_glfw_opengl3' and 'example_sdl2_opengl3' examples also supports Emscripten!

@ -3,8 +3,8 @@
# 2. cmake -B build -DIMGUI_DAWN_DIR=dawn # 2. cmake -B build -DIMGUI_DAWN_DIR=dawn
# 3. cmake --build build # 3. cmake --build build
# The resulting binary will be found at one of the following locations: # The resulting binary will be found at one of the following locations:
# * build/Debug/example_emscripten_wgpu[.exe] # * build/Debug/example_glfw_wgpu[.exe]
# * build/example_emscripten_wgpu[.exe] # * build/example_glfw_wgpu[.exe]
# Building for Emscripten: # Building for Emscripten:
# 1. Install Emscripten SDK following the instructions: https://emscripten.org/docs/getting_started/downloads.html # 1. Install Emscripten SDK following the instructions: https://emscripten.org/docs/getting_started/downloads.html
@ -14,7 +14,7 @@
# 4. emrun build/index.html # 4. emrun build/index.html
cmake_minimum_required(VERSION 3.10.2) cmake_minimum_required(VERSION 3.10.2)
project(imgui_example_emscripten_wgpu C CXX) project(imgui_example_glfw_wgpu C CXX)
if(NOT CMAKE_BUILD_TYPE) if(NOT CMAKE_BUILD_TYPE)
set(CMAKE_BUILD_TYPE Debug CACHE STRING "" FORCE) set(CMAKE_BUILD_TYPE Debug CACHE STRING "" FORCE)
@ -61,7 +61,7 @@ else()
set(LIBRARIES webgpu_dawn webgpu_cpp webgpu_glfw glfw) set(LIBRARIES webgpu_dawn webgpu_cpp webgpu_glfw glfw)
endif() endif()
add_executable(example_emscripten_wgpu add_executable(example_glfw_wgpu
main.cpp main.cpp
# backend files # backend files
${IMGUI_DIR}/backends/imgui_impl_glfw.cpp ${IMGUI_DIR}/backends/imgui_impl_glfw.cpp
@ -73,16 +73,16 @@ add_executable(example_emscripten_wgpu
${IMGUI_DIR}/imgui_tables.cpp ${IMGUI_DIR}/imgui_tables.cpp
${IMGUI_DIR}/imgui_widgets.cpp ${IMGUI_DIR}/imgui_widgets.cpp
) )
target_include_directories(example_emscripten_wgpu PUBLIC target_include_directories(example_glfw_wgpu PUBLIC
${IMGUI_DIR} ${IMGUI_DIR}
${IMGUI_DIR}/backends ${IMGUI_DIR}/backends
) )
target_link_libraries(example_emscripten_wgpu PUBLIC ${LIBRARIES}) target_link_libraries(example_glfw_wgpu PUBLIC ${LIBRARIES})
# Emscripten settings # Emscripten settings
if(EMSCRIPTEN) if(EMSCRIPTEN)
target_link_options(example_emscripten_wgpu PRIVATE target_link_options(example_glfw_wgpu PRIVATE
"-sUSE_WEBGPU=1" "-sUSE_WEBGPU=1"
"-sUSE_GLFW=3" "-sUSE_GLFW=3"
"-sWASM=1" "-sWASM=1"
@ -92,9 +92,9 @@ if(EMSCRIPTEN)
"-sDISABLE_EXCEPTION_CATCHING=1" "-sDISABLE_EXCEPTION_CATCHING=1"
"-sNO_FILESYSTEM=1" "-sNO_FILESYSTEM=1"
) )
set_target_properties(example_emscripten_wgpu PROPERTIES OUTPUT_NAME "index") set_target_properties(example_glfw_wgpu PROPERTIES OUTPUT_NAME "index")
# copy our custom index.html to build directory # copy our custom index.html to build directory
add_custom_command(TARGET example_emscripten_wgpu POST_BUILD add_custom_command(TARGET example_glfw_wgpu POST_BUILD
COMMAND ${CMAKE_COMMAND} -E copy_if_different "${CMAKE_CURRENT_LIST_DIR}/web/index.html" $<TARGET_FILE_DIR:example_emscripten_wgpu> COMMAND ${CMAKE_COMMAND} -E copy_if_different "${CMAKE_CURRENT_LIST_DIR}/web/index.html" $<TARGET_FILE_DIR:example_glfw_wgpu>
) )
endif() endif()

@ -6,7 +6,7 @@
- You may also refer to our [Continuous Integration setup](https://github.com/ocornut/imgui/tree/master/.github/workflows) for Emscripten setup. - 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_emscripten_wgpu/` directory. - 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. - Requires recent Emscripten as WGPU is still a work-in-progress API.
@ -18,7 +18,7 @@ To run on a local machine:
- Otherwise, generally you will need a local webserver: - 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> - 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."_ _"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_emscripten_opengl3.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. - 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 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`. - 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). - 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).

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>Dear ImGui Emscripten+WebGPU example</title> <title>Dear ImGui Emscripten+GLFW+WebGPU example</title>
<style> <style>
body { margin: 0; background-color: black } body { margin: 0; background-color: black }
.emscripten { .emscripten {
Loading…
Cancel
Save