imgui: example_emscripten_wgpu is throwing an error in InitWGPU function

I am building the emscripten example on windows. The console in the browser throws an error saying

Uncaught RuntimeError: Aborted(Assertion failed: WGPUInstance must be created by wgpuCreateInstance)
    at abort (index.js:676:11)
    at assert (index.js:366:5)
    at _wgpuInstanceCreateSurface (index.js:4598:7)
    at index.wasm:0x8a3f2
    at index.wasm:0x15df
    at index.js:733:22
    at callMain (index.js:5231:15)
    at doRun (index.js:5281:23)
    at index.js:5292:7

I am able to fix this by changing the line in the InitWGPU function to use the function mentioned in the error like this

wgpu::Instance instance = {};

becomes

wgpu::Instance instance = wgpu::CreateInstance(); //{};

After this I am able to see the ui in the browser.

Additionally, I was unable to compile the example in windows unless I removed this line from the MakeFile

# UNAME_S := $(shell uname -s)

I am unsure if I am fixing something correctly here or just using it in a way that is not the intended way to use it.

About this issue

Original URL
State: closed
Created a year ago
Reactions: 3
Comments: 20 (13 by maintainers)

Commits related to this issue

Examples: Emscripten+webgpu: Fixed WGPUInstance creation process + use preferred framebuffer format. (#6640, #6748) — committed to ocornut/imgui by deleted user 10 months ago

Most upvoted comments

wgpu::Instance instance = wgpu::CreateInstance(); //{};

Thanks, changing this line helped! But now I get very low-resolution version. Any clues why?

It’s not a bug, it’s just set up that way on purpose. You can prevent stretching by modifying index.html:

$ git diff HEAD -- web/index.html
diff --git a/examples/example_emscripten_wgpu/web/index.html b/examples/example_emscripten_wgpu/web/index.html
index 82b1c422..35a3efd7 100644
--- a/examples/example_emscripten_wgpu/web/index.html
+++ b/examples/example_emscripten_wgpu/web/index.html
@@ -12,8 +12,6 @@
             left: 0px;
             margin: 0px;
             border: 0;
-            width: 100%;
-            height: 100%;
             overflow: hidden;
             display: block;
             image-rendering: optimizeSpeed;

Traveller23 on Aug 24, 2023

Thanks! Moved this to #6751, i know understand that SDL does a similar thing as you did, and GLFW doesn’t, and this is why our current Makefile for the GLFW side use a different template as the one used by SDL example makefile.

ocornut on Aug 25, 2023

By the way, the latest code (commit 2000537) still outputs jagged text on my machine. (Windows 10 + chrome 116) .

I am sorry I don’t know what you are referring to here by jagged text? Is your framebuffer missized on current master? It doesn’t for me. But if you are telling me that your PR fixes it that’s good.

I apologize for my lack of description. What I mean is that until I apply my pull request, I get the same output as before:

Because you said that after applying this (https://github.com/ocornut/imgui/commit/981abb4612c67dce38285ed722fc316580a3aab5) update, some machines no longer have the jaggedness problem, so I reported my situation.

Traveller23 on Aug 25, 2023

@Traveller23 Thanks, I removed those two lines and now it renders with the same resolution just not in fullscreen:

Where would I know about these settings?

Your screenshot shows that your viewport’s size is 1280x720, but the actual size of the light blue part of the screenshot is 1600x900, so I’m guessing you’re using your browser’s zoom. You should leave the browser’s zoom level at 100%.

This 1280x720 is defined in main.cpp, you can find it by searching for “glfwCreateWindow”. There should not be any scaling of ImGui’s screen output.

Traveller23 on Aug 24, 2023