2021-01-28 18:37:34 +08:00
// 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 ) ;
2021-01-28 19:11:26 +08:00
// 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 * ) ;
2021-01-28 18:37:34 +08:00
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 ) ;
2021-01-28 19:11:26 +08:00
if ( ! window )
{
2021-01-28 18:37:34 +08:00
glfwTerminate ( ) ;
return 1 ;
}
// Initialize the WebGPU environment
2021-01-28 19:11:26 +08:00
if ( ! init_wgpu ( ) )
{
2021-01-28 18:37:34 +08:00
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 ( ) ;
2022-07-07 02:58:20 +08:00
//ImGui::StyleColorsLight();
2021-01-28 18:37:34 +08:00
// Setup Platform/Renderer backends
2021-02-11 00:27:33 +08:00
ImGui_ImplGlfw_InitForOther ( window , true ) ;
2021-01-28 18:37:34 +08:00
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
2021-01-28 19:11:26 +08:00
// This function will directly return and exit the main function.
2021-01-28 18:37:34 +08:00
// 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 ;
}
2021-01-28 19:11:26 +08:00
static bool init_wgpu ( )
2021-01-28 18:37:34 +08:00
{
wgpu_device = emscripten_webgpu_get_device ( ) ;
if ( ! wgpu_device )
return false ;
2021-01-28 19:11:26 +08:00
wgpuDeviceSetUncapturedErrorCallback ( wgpu_device , print_wgpu_error , NULL ) ;
2021-01-28 18:37:34 +08:00
2021-01-28 19:11:26 +08:00
// Use C++ wrapper due to misbehavior in Emscripten.
2021-01-28 18:37:34 +08:00
// Some offset computation for wgpuInstanceCreateSurface in JavaScript
// seem to be inline with struct alignments in the C++ structure
2021-01-28 19:11:26 +08:00
wgpu : : SurfaceDescriptorFromCanvasHTMLSelector html_surface_desc = { } ;
2021-01-28 18:37:34 +08:00
html_surface_desc . selector = " #canvas " ;
2021-01-28 19:11:26 +08:00
wgpu : : SurfaceDescriptor surface_desc = { } ;
2021-01-28 18:37:34 +08:00
surface_desc . nextInChain = & html_surface_desc ;
// Use 'null' instance
2021-01-28 19:11:26 +08:00
wgpu : : Instance instance = { } ;
2021-01-28 18:37:34 +08:00
wgpu_surface = instance . CreateSurface ( & surface_desc ) . Release ( ) ;
return true ;
}
2021-01-28 19:11:26 +08:00
static void main_loop ( void * window )
2021-01-28 18:37:34 +08:00
{
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 = { } ;
2021-05-17 00:55:58 +08:00
swap_chain_desc . usage = WGPUTextureUsage_RenderAttachment ;
2021-01-28 18:37:34 +08:00
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 ) ;
2022-09-15 00:19:50 +08:00
// 2. Show a simple window that we create ourselves. We use a Begin/End pair to create a named window.
2021-01-28 18:37:34 +08:00
{
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 ( ) ;
}
2021-01-28 19:11:26 +08:00
// Rendering
2021-01-28 18:37:34 +08:00
ImGui : : Render ( ) ;
2021-05-17 00:55:58 +08:00
WGPURenderPassColorAttachment color_attachments = { } ;
2021-01-28 18:37:34 +08:00
color_attachments . loadOp = WGPULoadOp_Clear ;
color_attachments . storeOp = WGPUStoreOp_Store ;
2022-04-23 02:38:59 +08:00
color_attachments . clearValue = { clear_color . x * clear_color . w , clear_color . y * clear_color . w , clear_color . z * clear_color . w , clear_color . w } ;
2021-05-17 00:55:58 +08:00
color_attachments . view = wgpuSwapChainGetCurrentTextureView ( wgpu_swap_chain ) ;
2021-01-28 18:37:34 +08:00
WGPURenderPassDescriptor render_pass_desc = { } ;
render_pass_desc . colorAttachmentCount = 1 ;
render_pass_desc . colorAttachments = & color_attachments ;
2021-01-28 19:11:26 +08:00
render_pass_desc . depthStencilAttachment = NULL ;
2021-01-28 18:37:34 +08:00
WGPUCommandEncoderDescriptor enc_desc = { } ;
WGPUCommandEncoder encoder = wgpuDeviceCreateCommandEncoder ( wgpu_device , & enc_desc ) ;
WGPURenderPassEncoder pass = wgpuCommandEncoderBeginRenderPass ( encoder , & render_pass_desc ) ;
ImGui_ImplWGPU_RenderDrawData ( ImGui : : GetDrawData ( ) , pass ) ;
2022-03-15 19:32:49 +08:00
wgpuRenderPassEncoderEnd ( pass ) ;
2021-01-28 18:37:34 +08:00
WGPUCommandBufferDescriptor cmd_buffer_desc = { } ;
WGPUCommandBuffer cmd_buffer = wgpuCommandEncoderFinish ( encoder , & cmd_buffer_desc ) ;
2021-05-17 00:55:58 +08:00
WGPUQueue queue = wgpuDeviceGetQueue ( wgpu_device ) ;
2021-01-28 18:37:34 +08:00
wgpuQueueSubmit ( queue , 1 , & cmd_buffer ) ;
}
2021-01-28 19:11:26 +08:00
static void print_glfw_error ( int error , const char * description )
2021-01-28 18:37:34 +08:00
{
printf ( " Glfw Error %d: %s \n " , error , description ) ;
}
2021-01-28 19:11:26 +08:00
static void print_wgpu_error ( WGPUErrorType error_type , const char * message , void * )
2021-01-28 18:37:34 +08:00
{
const char * error_type_lbl = " " ;
2021-01-28 19:11:26 +08:00
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 " ;
2021-01-28 18:37:34 +08:00
}
printf ( " %s error: %s \n " , error_type_lbl , message ) ;
}