123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246 |
- // Dear ImGui: standalone example application for Emscripten, using GLFW + WebGPU
- // (Emscripten is a C++-to-javascript compiler, used to publish executables for the web. See https://emscripten.org/)
- // If you are new to Dear ImGui, read documentation from the docs/ folder + read the top of imgui.cpp.
- // Read online: https://github.com/ocornut/imgui/tree/master/docs
- #include "imgui.h"
- #include "imgui_impl_glfw.h"
- #include "imgui_impl_wgpu.h"
- #include <stdio.h>
- #include <emscripten.h>
- #include <emscripten/html5.h>
- #include <emscripten/html5_webgpu.h>
- #include <GLFW/glfw3.h>
- #include <webgpu/webgpu.h>
- #include <webgpu/webgpu_cpp.h>
- // Global WebGPU required states
- static WGPUDevice wgpu_device = NULL;
- static WGPUSurface wgpu_surface = NULL;
- static WGPUSwapChain wgpu_swap_chain = NULL;
- static int wgpu_swap_chain_width = 0;
- static int wgpu_swap_chain_height = 0;
- // States tracked across render frames
- static bool show_demo_window = true;
- static bool show_another_window = false;
- static ImVec4 clear_color = ImVec4(0.45f, 0.55f, 0.60f, 1.00f);
- // Forward declarations
- static bool init_wgpu();
- static void main_loop(void* window);
- static void print_glfw_error(int error, const char* description);
- static void print_wgpu_error(WGPUErrorType error_type, const char* message, void*);
- int main(int, char**)
- {
- glfwSetErrorCallback(print_glfw_error);
- if (!glfwInit())
- return 1;
- // Make sure GLFW does not initialize any graphics context.
- // This needs to be done explicitly later
- glfwWindowHint(GLFW_CLIENT_API, GLFW_NO_API);
- GLFWwindow* window = glfwCreateWindow(1280, 720, "Dear ImGui GLFW+WebGPU example", NULL, NULL);
- if (!window)
- {
- glfwTerminate();
- return 1;
- }
- // Initialize the WebGPU environment
- if (!init_wgpu())
- {
- if (window)
- glfwDestroyWindow(window);
- glfwTerminate();
- return 1;
- }
- glfwShowWindow(window);
- // Setup Dear ImGui context
- IMGUI_CHECKVERSION();
- ImGui::CreateContext();
- ImGuiIO& io = ImGui::GetIO(); (void)io;
- //io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard; // Enable Keyboard Controls
- //io.ConfigFlags |= ImGuiConfigFlags_NavEnableGamepad; // Enable Gamepad Controls
- // For an Emscripten build we are disabling file-system access, so let's not attempt to do a fopen() of the imgui.ini file.
- // You may manually call LoadIniSettingsFromMemory() to load settings from your own storage.
- io.IniFilename = NULL;
- // Setup Dear ImGui style
- ImGui::StyleColorsDark();
- //ImGui::StyleColorsClassic();
- // Setup Platform/Renderer backends
- ImGui_ImplGlfw_InitForOther(window, true);
- ImGui_ImplWGPU_Init(wgpu_device, 3, WGPUTextureFormat_RGBA8Unorm);
- // Load Fonts
- // - If no fonts are loaded, dear imgui will use the default font. You can also load multiple fonts and use ImGui::PushFont()/PopFont() to select them.
- // - AddFontFromFileTTF() will return the ImFont* so you can store it if you need to select the font among multiple.
- // - If the file cannot be loaded, the function will return NULL. Please handle those errors in your application (e.g. use an assertion, or display an error and quit).
- // - The fonts will be rasterized at a given size (w/ oversampling) and stored into a texture when calling ImFontAtlas::Build()/GetTexDataAsXXXX(), which ImGui_ImplXXXX_NewFrame below will call.
- // - Read 'docs/FONTS.md' for more instructions and details.
- // - Remember that in C/C++ if you want to include a backslash \ in a string literal you need to write a double backslash \\ !
- // - Emscripten allows preloading a file or folder to be accessible at runtime. See Makefile for details.
- //io.Fonts->AddFontDefault();
- #ifndef IMGUI_DISABLE_FILE_FUNCTIONS
- io.Fonts->AddFontFromFileTTF("fonts/Roboto-Medium.ttf", 16.0f);
- //io.Fonts->AddFontFromFileTTF("fonts/Cousine-Regular.ttf", 15.0f);
- //io.Fonts->AddFontFromFileTTF("fonts/DroidSans.ttf", 16.0f);
- //io.Fonts->AddFontFromFileTTF("fonts/ProggyTiny.ttf", 10.0f);
- //ImFont* font = io.Fonts->AddFontFromFileTTF("fonts/ArialUni.ttf", 18.0f, NULL, io.Fonts->GetGlyphRangesJapanese());
- //IM_ASSERT(font != NULL);
- #endif
- // This function will directly return and exit the main function.
- // Make sure that no required objects get cleaned up.
- // This way we can use the browsers 'requestAnimationFrame' to control the rendering.
- emscripten_set_main_loop_arg(main_loop, window, 0, false);
- return 0;
- }
- static bool init_wgpu()
- {
- wgpu_device = emscripten_webgpu_get_device();
- if (!wgpu_device)
- return false;
- wgpuDeviceSetUncapturedErrorCallback(wgpu_device, print_wgpu_error, NULL);
- // Use C++ wrapper due to misbehavior in Emscripten.
- // Some offset computation for wgpuInstanceCreateSurface in JavaScript
- // seem to be inline with struct alignments in the C++ structure
- wgpu::SurfaceDescriptorFromCanvasHTMLSelector html_surface_desc = {};
- html_surface_desc.selector = "#canvas";
- wgpu::SurfaceDescriptor surface_desc = {};
- surface_desc.nextInChain = &html_surface_desc;
- // Use 'null' instance
- wgpu::Instance instance = {};
- wgpu_surface = instance.CreateSurface(&surface_desc).Release();
- return true;
- }
- static void main_loop(void* window)
- {
- glfwPollEvents();
- int width, height;
- glfwGetFramebufferSize((GLFWwindow*) window, &width, &height);
- // React to changes in screen size
- if (width != wgpu_swap_chain_width && height != wgpu_swap_chain_height)
- {
- ImGui_ImplWGPU_InvalidateDeviceObjects();
- if (wgpu_swap_chain)
- wgpuSwapChainRelease(wgpu_swap_chain);
- wgpu_swap_chain_width = width;
- wgpu_swap_chain_height = height;
- WGPUSwapChainDescriptor swap_chain_desc = {};
- swap_chain_desc.usage = WGPUTextureUsage_RenderAttachment;
- swap_chain_desc.format = WGPUTextureFormat_RGBA8Unorm;
- swap_chain_desc.width = width;
- swap_chain_desc.height = height;
- swap_chain_desc.presentMode = WGPUPresentMode_Fifo;
- wgpu_swap_chain = wgpuDeviceCreateSwapChain(wgpu_device, wgpu_surface, &swap_chain_desc);
- ImGui_ImplWGPU_CreateDeviceObjects();
- }
- // Start the Dear ImGui frame
- ImGui_ImplWGPU_NewFrame();
- ImGui_ImplGlfw_NewFrame();
- ImGui::NewFrame();
- // 1. Show the big demo window (Most of the sample code is in ImGui::ShowDemoWindow()! You can browse its code to learn more about Dear ImGui!).
- if (show_demo_window)
- ImGui::ShowDemoWindow(&show_demo_window);
- // 2. Show a simple window that we create ourselves. We use a Begin/End pair to created a named window.
- {
- static float f = 0.0f;
- static int counter = 0;
- ImGui::Begin("Hello, world!"); // Create a window called "Hello, world!" and append into it.
- ImGui::Text("This is some useful text."); // Display some text (you can use a format strings too)
- ImGui::Checkbox("Demo Window", &show_demo_window); // Edit bools storing our window open/close state
- ImGui::Checkbox("Another Window", &show_another_window);
- ImGui::SliderFloat("float", &f, 0.0f, 1.0f); // Edit 1 float using a slider from 0.0f to 1.0f
- ImGui::ColorEdit3("clear color", (float*)&clear_color); // Edit 3 floats representing a color
- if (ImGui::Button("Button")) // Buttons return true when clicked (most widgets return true when edited/activated)
- counter++;
- ImGui::SameLine();
- ImGui::Text("counter = %d", counter);
- ImGui::Text("Application average %.3f ms/frame (%.1f FPS)", 1000.0f / ImGui::GetIO().Framerate, ImGui::GetIO().Framerate);
- ImGui::End();
- }
- // 3. Show another simple window.
- if (show_another_window)
- {
- ImGui::Begin("Another Window", &show_another_window); // Pass a pointer to our bool variable (the window will have a closing button that will clear the bool when clicked)
- ImGui::Text("Hello from another window!");
- if (ImGui::Button("Close Me"))
- show_another_window = false;
- ImGui::End();
- }
-
- // Rendering
- ImGui::Render();
- WGPURenderPassColorAttachment color_attachments = {};
- color_attachments.loadOp = WGPULoadOp_Clear;
- color_attachments.storeOp = WGPUStoreOp_Store;
- color_attachments.clearColor = { clear_color.x * clear_color.w, clear_color.y * clear_color.w, clear_color.z * clear_color.w, clear_color.w };
- color_attachments.view = wgpuSwapChainGetCurrentTextureView(wgpu_swap_chain);
- WGPURenderPassDescriptor render_pass_desc = {};
- render_pass_desc.colorAttachmentCount = 1;
- render_pass_desc.colorAttachments = &color_attachments;
- render_pass_desc.depthStencilAttachment = NULL;
- WGPUCommandEncoderDescriptor enc_desc = {};
- WGPUCommandEncoder encoder = wgpuDeviceCreateCommandEncoder(wgpu_device, &enc_desc);
- WGPURenderPassEncoder pass = wgpuCommandEncoderBeginRenderPass(encoder, &render_pass_desc);
- ImGui_ImplWGPU_RenderDrawData(ImGui::GetDrawData(), pass);
- wgpuRenderPassEncoderEndPass(pass);
- WGPUCommandBufferDescriptor cmd_buffer_desc = {};
- WGPUCommandBuffer cmd_buffer = wgpuCommandEncoderFinish(encoder, &cmd_buffer_desc);
- WGPUQueue queue = wgpuDeviceGetQueue(wgpu_device);
- wgpuQueueSubmit(queue, 1, &cmd_buffer);
- }
- static void print_glfw_error(int error, const char* description)
- {
- printf("Glfw Error %d: %s\n", error, description);
- }
- static void print_wgpu_error(WGPUErrorType error_type, const char* message, void*)
- {
- const char* error_type_lbl = "";
- switch (error_type)
- {
- case WGPUErrorType_Validation: error_type_lbl = "Validation"; break;
- case WGPUErrorType_OutOfMemory: error_type_lbl = "Out of memory"; break;
- case WGPUErrorType_Unknown: error_type_lbl = "Unknown"; break;
- case WGPUErrorType_DeviceLost: error_type_lbl = "Device lost"; break;
- default: error_type_lbl = "Unknown";
- }
- printf("%s error: %s\n", error_type_lbl, message);
- }
|