2024-03-24 14:18:10 +01:00
// Dear ImGui: standalone example application for using GLFW + WebGPU
2024-04-16 12:08:45 +02:00
// - Emscripten is supported for publishing on web. See https://emscripten.org.
// - Dawn is used as a WebGPU implementation on desktop.
2023-09-11 13:47:08 +02:00
// Learn about Dear ImGui:
// - FAQ https://dearimgui.com/faq
// - Getting Started https://dearimgui.com/getting-started
// - Documentation https://dearimgui.com/docs (same as your local docs/ folder).
// - Introduction, links and more at the top of imgui.cpp
2021-01-28 11:37:34 +01:00
# include "imgui.h"
# include "imgui_impl_glfw.h"
# include "imgui_impl_wgpu.h"
# include <stdio.h>
2024-03-24 14:18:10 +01:00
2024-01-22 14:20:24 +01:00
# ifdef __EMSCRIPTEN__
2021-01-28 11:37:34 +01:00
# include <emscripten.h>
# include <emscripten/html5.h>
# include <emscripten/html5_webgpu.h>
2024-03-24 14:18:10 +01:00
# else
# include <webgpu/webgpu_glfw.h>
2024-01-22 14:20:24 +01:00
# endif
2024-03-24 14:18:10 +01:00
2021-01-28 11:37:34 +01:00
# include <GLFW/glfw3.h>
# include <webgpu/webgpu.h>
# include <webgpu/webgpu_cpp.h>
2024-01-22 14:20:24 +01:00
// This example can also compile and run with Emscripten! See 'Makefile.emscripten' for details.
# ifdef __EMSCRIPTEN__
# include "../libs/emscripten/emscripten_mainloop_stub.h"
# endif
2021-01-28 11:37:34 +01:00
// Global WebGPU required states
2024-03-24 14:18:10 +01:00
static WGPUInstance wgpu_instance = nullptr ;
2023-08-24 10:04:50 +02:00
static WGPUDevice wgpu_device = nullptr ;
static WGPUSurface wgpu_surface = nullptr ;
static WGPUTextureFormat wgpu_preferred_fmt = WGPUTextureFormat_RGBA8Unorm ;
static WGPUSwapChain wgpu_swap_chain = nullptr ;
2024-03-24 14:18:10 +01:00
static int wgpu_swap_chain_width = 1280 ;
static int wgpu_swap_chain_height = 720 ;
2021-01-28 11:37:34 +01:00
2021-01-28 12:11:26 +01:00
// Forward declarations
2024-03-24 14:18:10 +01:00
static bool InitWGPU ( GLFWwindow * window ) ;
2024-01-22 14:20:24 +01:00
static void CreateSwapChain ( int width , int height ) ;
static void glfw_error_callback ( int error , const char * description )
{
printf ( " GLFW Error %d: %s \n " , error , description ) ;
}
static void wgpu_error_callback ( 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 ) ;
}
2021-01-28 11:37:34 +01:00
2023-02-02 16:27:33 +01:00
// Main code
2021-01-28 11:37:34 +01:00
int main ( int , char * * )
{
2024-01-22 14:20:24 +01:00
glfwSetErrorCallback ( glfw_error_callback ) ;
2021-01-28 11:37:34 +01:00
if ( ! glfwInit ( ) )
return 1 ;
// Make sure GLFW does not initialize any graphics context.
2023-02-02 16:27:33 +01:00
// This needs to be done explicitly later.
2021-01-28 11:37:34 +01:00
glfwWindowHint ( GLFW_CLIENT_API , GLFW_NO_API ) ;
2024-03-24 14:18:10 +01:00
GLFWwindow * window = glfwCreateWindow ( wgpu_swap_chain_width , wgpu_swap_chain_height , " Dear ImGui GLFW+WebGPU example " , nullptr , nullptr ) ;
2024-01-22 14:20:24 +01:00
if ( window = = nullptr )
2021-01-28 11:37:34 +01:00
return 1 ;
// Initialize the WebGPU environment
2024-03-24 14:18:10 +01:00
if ( ! InitWGPU ( window ) )
2021-01-28 12:11:26 +01:00
{
2021-01-28 11:37:34 +01:00
if ( window )
glfwDestroyWindow ( window ) ;
glfwTerminate ( ) ;
return 1 ;
}
2024-03-24 14:18:10 +01:00
CreateSwapChain ( wgpu_swap_chain_width , wgpu_swap_chain_height ) ;
2021-01-28 11:37:34 +01:00
glfwShowWindow ( window ) ;
// Setup Dear ImGui context
IMGUI_CHECKVERSION ( ) ;
ImGui : : CreateContext ( ) ;
ImGuiIO & io = ImGui : : GetIO ( ) ; ( void ) io ;
2023-03-10 18:35:03 +01:00
io . ConfigFlags | = ImGuiConfigFlags_NavEnableKeyboard ; // Enable Keyboard Controls
io . ConfigFlags | = ImGuiConfigFlags_NavEnableGamepad ; // Enable Gamepad Controls
2021-01-28 11:37:34 +01:00
// Setup Dear ImGui style
ImGui : : StyleColorsDark ( ) ;
2022-07-06 20:58:20 +02:00
//ImGui::StyleColorsLight();
2021-01-28 11:37:34 +01:00
// Setup Platform/Renderer backends
2021-02-10 17:27:33 +01:00
ImGui_ImplGlfw_InitForOther ( window , true ) ;
2024-01-22 14:20:24 +01:00
# ifdef __EMSCRIPTEN__
2024-07-08 15:53:23 +02:00
ImGui_ImplGlfw_InstallEmscriptenCallbacks ( window , " #canvas " ) ;
2024-01-22 14:20:24 +01:00
# endif
2024-01-22 14:46:41 +01:00
ImGui_ImplWGPU_InitInfo init_info ;
init_info . Device = wgpu_device ;
init_info . NumFramesInFlight = 3 ;
init_info . RenderTargetFormat = wgpu_preferred_fmt ;
init_info . DepthStencilFormat = WGPUTextureFormat_Undefined ;
ImGui_ImplWGPU_Init ( & init_info ) ;
2021-01-28 11:37:34 +01:00
// 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.
2023-04-11 11:25:14 +02:00
// - If the file cannot be loaded, the function will return a nullptr. Please handle those errors in your application (e.g. use an assertion, or display an error and quit).
2021-01-28 11:37:34 +01:00
// - 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.
2022-09-19 17:45:05 +02:00
// - Use '#define IMGUI_ENABLE_FREETYPE' in your imconfig file to use Freetype for higher quality font rendering.
2021-01-28 11:37:34 +01:00
// - 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
2022-09-19 17:45:05 +02:00
//io.Fonts->AddFontFromFileTTF("fonts/segoeui.ttf", 18.0f);
2024-04-16 12:08:45 +02:00
//io.Fonts->AddFontFromFileTTF("fonts/DroidSans.ttf", 16.0f);
2022-09-19 17:45:05 +02:00
//io.Fonts->AddFontFromFileTTF("fonts/Roboto-Medium.ttf", 16.0f);
2021-01-28 11:37:34 +01:00
//io.Fonts->AddFontFromFileTTF("fonts/Cousine-Regular.ttf", 15.0f);
//io.Fonts->AddFontFromFileTTF("fonts/ProggyTiny.ttf", 10.0f);
2023-04-11 11:25:14 +02:00
//ImFont* font = io.Fonts->AddFontFromFileTTF("fonts/ArialUni.ttf", 18.0f, nullptr, io.Fonts->GetGlyphRangesJapanese());
//IM_ASSERT(font != nullptr);
2021-01-28 11:37:34 +01:00
# endif
2024-01-22 14:20:24 +01:00
// Our state
bool show_demo_window = true ;
bool show_another_window = false ;
ImVec4 clear_color = ImVec4 ( 0.45f , 0.55f , 0.60f , 1.00f ) ;
// Main loop
# ifdef __EMSCRIPTEN__
// 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 = nullptr ;
EMSCRIPTEN_MAINLOOP_BEGIN
# else
while ( ! glfwWindowShouldClose ( window ) )
# endif
{
// Poll and handle events (inputs, window resize, etc.)
// You can read the io.WantCaptureMouse, io.WantCaptureKeyboard flags to tell if dear imgui wants to use your inputs.
// - When io.WantCaptureMouse is true, do not dispatch mouse input data to your main application, or clear/overwrite your copy of the mouse data.
// - When io.WantCaptureKeyboard is true, do not dispatch keyboard input data to your main application, or clear/overwrite your copy of the keyboard data.
// Generally you may always pass all inputs to dear imgui, and hide them from your application based on those two flags.
glfwPollEvents ( ) ;
2024-07-31 17:47:38 +02:00
if ( glfwGetWindowAttrib ( window , GLFW_ICONIFIED ) ! = 0 )
{
ImGui_ImplGlfw_Sleep ( 10 ) ;
continue ;
}
2024-01-22 14:20:24 +01:00
// React to changes in screen size
int width , height ;
glfwGetFramebufferSize ( ( GLFWwindow * ) window , & width , & height ) ;
2024-04-05 19:07:39 +02:00
if ( width ! = wgpu_swap_chain_width | | height ! = wgpu_swap_chain_height )
2024-01-22 14:20:24 +01:00
{
ImGui_ImplWGPU_InvalidateDeviceObjects ( ) ;
CreateSwapChain ( width , height ) ;
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 create 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 / io . Framerate , io . 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 ( ) ;
2024-03-24 14:18:10 +01:00
# ifndef __EMSCRIPTEN__
// Tick needs to be called in Dawn to display validation errors
wgpuDeviceTick ( wgpu_device ) ;
# endif
2024-01-22 14:20:24 +01:00
WGPURenderPassColorAttachment color_attachments = { } ;
2024-03-06 13:44:37 +01:00
color_attachments . depthSlice = WGPU_DEPTH_SLICE_UNDEFINED ;
2024-01-22 14:20:24 +01:00
color_attachments . loadOp = WGPULoadOp_Clear ;
color_attachments . storeOp = WGPUStoreOp_Store ;
color_attachments . clearValue = { 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 = nullptr ;
WGPUCommandEncoderDescriptor enc_desc = { } ;
WGPUCommandEncoder encoder = wgpuDeviceCreateCommandEncoder ( wgpu_device , & enc_desc ) ;
WGPURenderPassEncoder pass = wgpuCommandEncoderBeginRenderPass ( encoder , & render_pass_desc ) ;
ImGui_ImplWGPU_RenderDrawData ( ImGui : : GetDrawData ( ) , pass ) ;
wgpuRenderPassEncoderEnd ( pass ) ;
WGPUCommandBufferDescriptor cmd_buffer_desc = { } ;
WGPUCommandBuffer cmd_buffer = wgpuCommandEncoderFinish ( encoder , & cmd_buffer_desc ) ;
WGPUQueue queue = wgpuDeviceGetQueue ( wgpu_device ) ;
wgpuQueueSubmit ( queue , 1 , & cmd_buffer ) ;
2024-03-24 14:18:10 +01:00
# ifndef __EMSCRIPTEN__
wgpuSwapChainPresent ( wgpu_swap_chain ) ;
# endif
wgpuTextureViewRelease ( color_attachments . view ) ;
wgpuRenderPassEncoderRelease ( pass ) ;
wgpuCommandEncoderRelease ( encoder ) ;
wgpuCommandBufferRelease ( cmd_buffer ) ;
2024-01-22 14:20:24 +01:00
}
# ifdef __EMSCRIPTEN__
EMSCRIPTEN_MAINLOOP_END ;
# endif
// Cleanup
ImGui_ImplWGPU_Shutdown ( ) ;
ImGui_ImplGlfw_Shutdown ( ) ;
ImGui : : DestroyContext ( ) ;
glfwDestroyWindow ( window ) ;
glfwTerminate ( ) ;
2021-01-28 11:37:34 +01:00
return 0 ;
}
2024-04-16 12:08:45 +02:00
# ifndef __EMSCRIPTEN__
static WGPUAdapter RequestAdapter ( WGPUInstance instance )
{
auto onAdapterRequestEnded = [ ] ( WGPURequestAdapterStatus status , WGPUAdapter adapter , const char * message , void * pUserData )
{
if ( status = = WGPURequestAdapterStatus_Success )
* ( WGPUAdapter * ) ( pUserData ) = adapter ;
else
printf ( " Could not get WebGPU adapter: %s \n " , message ) ;
} ;
WGPUAdapter adapter ;
wgpuInstanceRequestAdapter ( instance , nullptr , onAdapterRequestEnded , ( void * ) & adapter ) ;
return adapter ;
}
static WGPUDevice RequestDevice ( WGPUAdapter & adapter )
{
auto onDeviceRequestEnded = [ ] ( WGPURequestDeviceStatus status , WGPUDevice device , const char * message , void * pUserData )
{
if ( status = = WGPURequestDeviceStatus_Success )
* ( WGPUDevice * ) ( pUserData ) = device ;
else
printf ( " Could not get WebGPU device: %s \n " , message ) ;
} ;
WGPUDevice device ;
wgpuAdapterRequestDevice ( adapter , nullptr , onDeviceRequestEnded , ( void * ) & device ) ;
return device ;
}
# endif
2024-03-24 14:18:10 +01:00
static bool InitWGPU ( GLFWwindow * window )
2021-01-28 11:37:34 +01:00
{
2024-03-24 14:18:10 +01:00
wgpu : : Instance instance = wgpuCreateInstance ( nullptr ) ;
# ifdef __EMSCRIPTEN__
2021-01-28 11:37:34 +01:00
wgpu_device = emscripten_webgpu_get_device ( ) ;
if ( ! wgpu_device )
return false ;
2024-03-24 14:18:10 +01:00
# else
2024-04-16 12:08:45 +02:00
WGPUAdapter adapter = RequestAdapter ( instance . Get ( ) ) ;
2024-03-24 14:18:10 +01:00
if ( ! adapter )
return false ;
2024-04-16 12:08:45 +02:00
wgpu_device = RequestDevice ( adapter ) ;
2024-03-24 14:18:10 +01:00
# endif
2021-01-28 11:37:34 +01:00
2024-03-24 14:18:10 +01:00
# ifdef __EMSCRIPTEN__
2021-01-28 12:11:26 +01:00
wgpu : : SurfaceDescriptorFromCanvasHTMLSelector html_surface_desc = { } ;
2021-01-28 11:37:34 +01:00
html_surface_desc . selector = " #canvas " ;
2021-01-28 12:11:26 +01:00
wgpu : : SurfaceDescriptor surface_desc = { } ;
2021-01-28 11:37:34 +01:00
surface_desc . nextInChain = & html_surface_desc ;
2023-08-24 10:04:50 +02:00
wgpu : : Surface surface = instance . CreateSurface ( & surface_desc ) ;
2024-03-24 14:18:10 +01:00
2023-08-24 10:04:50 +02:00
wgpu : : Adapter adapter = { } ;
wgpu_preferred_fmt = ( WGPUTextureFormat ) surface . GetPreferredFormat ( adapter ) ;
2024-03-24 14:18:10 +01:00
# else
wgpu : : Surface surface = wgpu : : glfw : : CreateSurfaceForWindow ( instance , window ) ;
if ( ! surface )
return false ;
wgpu_preferred_fmt = WGPUTextureFormat_BGRA8Unorm ;
# endif
wgpu_instance = instance . MoveToCHandle ( ) ;
2024-01-22 10:45:41 +01:00
wgpu_surface = surface . MoveToCHandle ( ) ;
2021-01-28 11:37:34 +01:00
2024-03-24 14:18:10 +01:00
wgpuDeviceSetUncapturedErrorCallback ( wgpu_device , wgpu_error_callback , nullptr ) ;
2021-01-28 11:37:34 +01:00
return true ;
}
2024-01-22 14:20:24 +01:00
static void CreateSwapChain ( int width , int height )
2021-01-28 11:37:34 +01:00
{
2024-01-22 14:20:24 +01:00
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 = wgpu_preferred_fmt ;
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 ) ;
2021-01-28 11:37:34 +01:00
}