Branch step095-emscripten doesn't build

[GrigoryGraborenko]

Using emscripten version 3.1.36, when I check out branch step095-emscripten, I run these commands:
emcmake cmake -B build-web -G "Visual Studio 16 2019"
Which succeeds, but the next command fails:
cmake --build build-web

Error messages are:
imgui_impl_wgpu.cpp
C:\Code\WebGPU\LearnWebGPU-Code\imgui\backends\imgui_impl_wgpu.h(16,10): fatal error C1083: Cannot open include file: 'webgpu/webgpu.
h': No such file or directory [C:\Code\WebGPU\LearnWebGPU-Code\build-web\imgui\imgui.vcxproj]
imgui_impl_glfw.cpp
C:\Code\WebGPU\LearnWebGPU-Code\imgui\backends\imgui_impl_glfw.cpp(72,10): fatal error C1083: Cannot open include file: 'GLFW/glfw3.h
': No such file or directory [C:\Code\WebGPU\LearnWebGPU-Code\build-web\imgui\imgui.vcxproj]

Looks like webgpu.h is missing, and when I add it manually, doesn't know to look in there, so probably the cmake files need to be updated too.

The branch step095 builds and runs fine, so not sure why imgui needed to be built differently. Will continue to get it working. Love the tutorials and documentation!

[eliemichel]

Hello! You must not use the Visual Studio generator when building with emscripten. The recommended generator for cross-plateform solution is ninja, because it is very leightweight (really just a ninja.exe to save on your disk). ;)

The webgpu.h header is provided by emcc, the specific compiler that ships with emscripten. And it also provides its own variant of glfw, to use the web page as a window.

[GrigoryGraborenko]

Thanks, will try that out! I did manage to get it compiling with a mongrel combination of msys64 and windows command line, but I found I had to make 2 changes:
Change
RESOURCE_DIR="${CMAKE_CURRENT_SOURCE_DIR}/resources"
to
RESOURCE_DIR="~/resources"
in the root CMake, as well as update imgui to 1.89.5 because the backend had a recent bug introduced:
ocornut/imgui#6240

When running, I did get this JS console error:
Creating render pipeline...
App.js:7385 Uncaught TypeError: Failed to execute 'createRenderPipeline' on 'GPUDevice': Failed to read the 'fragment' property from 'GPURenderPipelineDescriptor': Failed to read the 'module' property from 'GPUProgrammableStage': Required member is undefined.
at _wgpuDeviceCreateRenderPipeline (App.js:7385:76)
at App.wasm:0x3d109
at App.wasm:0x50ee
at App.wasm:0x93eeb
at App.js:909:22
at callMain (App.js:8491:15)
at doRun (App.js:8541:23)
at App.js:8552:7

I'm hoping all this will go away if I use the ninja approach, so thanks for the info!

[eliemichel]

You need to use this branch of imgui, for the various reasons I list in the PR to imgui that should one day get fixed.

And this edit of RESOURCE_DIR is a bit suspicious, can you let me know what your folder layout is?

[GrigoryGraborenko]

The RESOURCE_DIR change was due to msys64 compiling and misunderstanding the folder string literal:

C:/msys64/home/Grisha/LearnWebGPU-Code/Application.cpp:345:43: error: use of undeclared identifier
'C'
m_texture = ResourceManager::loadTexture(RESOURCE_DIR "/fourareen2K_albedo.jpg", m_d...
^
:2:22: note: expanded from macro 'RESOURCE_DIR'
#define RESOURCE_DIR C:/msys64/home/Grisha/LearnWebGPU-Code/resources

[eliemichel]

Okey it is a problem of semicolons, you can either add them when defining the #define in the CMakeLists.txt:

target_compile_definitions(App PRIVATE
    RESOURCE_DIR="\"${CMAKE_CURRENT_SOURCE_DIR}/resources\""
)

or stringify RESOURCE_DIR whenever you use it:

#define STRINGIFY(x) #x
#define TOSTRING(x) STRINGIFY(x)
ResourceManager::loadTexture(TOSTRING(RESOURCE_DIR) "/fourareen2K_albedo.jpg", m_d...

[GrigoryGraborenko]

Yep, Ninja worked perfectly once I used your branch of ImGui. Thank you for the help!