Sample app: Added WebGPU mode (close #168)

MikhailGorobets · MikhailGorobets · commit 41bad61f767c · 2024-07-15T11:31:03.000+06:00
diff --git a/.github/workflows/build-emscripten.yml b/.github/workflows/build-emscripten.yml
@@ -8,6 +8,7 @@ jobs:
       matrix:
         os:         ["windows-latest", "ubuntu-20.04", "macos-14"]
         build_type: ["Debug", "Release"]
+        cmake_args: ["-DDILIGENT_EMSCRIPTEN_STRIP_DEBUG_INFO=ON"]
         exclude:
           # Exclude MacOS-Release
           - os:         "macos-14"
@@ -41,6 +42,7 @@ jobs:
       uses: DiligentGraphics/github-action/configure-cmake@v1
       with:
         build-type: ${{ matrix.build_type }}
+        cmake-args: ${{ matrix.cmake_args }}
 
     - name: Build
       if:   success()
diff --git a/CMakeLists.txt b/CMakeLists.txt
@@ -9,7 +9,8 @@ else()
     set(DILIGENT_INSTALL_SAMPLES OFF)
 endif()
 
-option(DILIGENT_BUILD_SAMPLE_BASE_ONLY "Build only SampleBase project" OFF)
+option(DILIGENT_BUILD_SAMPLE_BASE_ONLY      "Build only SampleBase project" OFF)
+option(DILIGENT_EMSCRIPTEN_STRIP_DEBUG_INFO "Strip debug information from Emscripten build" OFF)
 
 function(add_sample_app APP_NAME IDE_FOLDER SOURCE INCLUDE SHADERS ASSETS)
 
diff --git a/SampleBase/CMakeLists.txt b/SampleBase/CMakeLists.txt
@@ -18,6 +18,7 @@ if(PLATFORM_WIN32)
         src/Win32/resources/directx12-logo.bmp
         src/Win32/resources/vulkan-logo.bmp
         src/Win32/resources/opengl-logo.bmp
+        src/Win32/resources/webgpu-logo.bmp
         src/Win32/resources/Win32AppResource.rc
     )
 
@@ -129,7 +130,11 @@ elseif(PLATFORM_EMSCRIPTEN)
         set(HTML_TEMPLATE_FILE 
             ${SAMPLE_BASE_SOURCE_DIR}/src/Emscripten/resources/emscripten_template.html
         )          
-        target_link_options(${TARGET_NAME} PRIVATE "SHELL: --shell-file '${HTML_TEMPLATE_FILE}'")   
+
+        target_link_options(${TARGET_NAME} PRIVATE "SHELL: --shell-file '${HTML_TEMPLATE_FILE}' -s WASM_BIGINT")
+        if(${CMAKE_BUILD_TYPE} STREQUAL "Debug" AND DILIGENT_EMSCRIPTEN_STRIP_DEBUG_INFO)
+            target_link_options(${TARGET_NAME} PRIVATE "SHELL: -gseparate-dwarf -g0")
+        endif()
     endfunction()
     
 else()
diff --git a/SampleBase/src/Emscripten/SampleAppEmscripten.cpp b/SampleBase/src/Emscripten/SampleAppEmscripten.cpp
@@ -24,7 +24,6 @@
 
 
 #include "SampleApp.hpp"
-#include "RenderDeviceGLES.h"
 #include "ImGuiImplEmscripten.hpp"
 #include <emscripten.h>
 #include <emscripten/html5.h>
@@ -38,7 +37,11 @@ class SampleAppEmscripten : public SampleApp
 public:
     SampleAppEmscripten()
     {
+#if WEBGPU_SUPPORTED
+        m_DeviceType = RENDER_DEVICE_TYPE_WEBGPU;
+#else
         m_DeviceType = RENDER_DEVICE_TYPE_GLES;
+#endif
     }
 
     void OnWindowCreated(const char* CanvasID, int32_t WindowWidth, int32_t WindowHeight) override
diff --git a/SampleBase/src/Emscripten/resources/emscripten_template.html b/SampleBase/src/Emscripten/resources/emscripten_template.html
@@ -34,7 +34,9 @@
 <body>
     <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
     <script type='text/javascript'>
-        var Module = {
+    var Module;    
+    (async() => {
+        Module= {
             preRun: [],
             postRun: function() {
                 var canvas = document.getElementById('canvas');
@@ -69,9 +71,30 @@
                 // no run dependencies to log
             }
         };
+        
         window.onerror = function () {
             console.log("onerror: " + event);
         };
+
+        {
+            const requiredFeatures = [
+                "depth-clip-control",
+                "depth32float-stencil8",
+                "texture-compression-bc",
+                "indirect-first-instance",
+                "shader-f16",
+                "rg11b10ufloat-renderable",
+                "bgra8unorm-storage",
+                "float32-filterable",
+            ];        
+
+            const adapter = await navigator.gpu.requestAdapter();   
+            const device = await adapter.requestDevice({
+                requiredFeatures: requiredFeatures.filter(feature => adapter.features.has(feature)),
+            });
+            Module.preinitializedWebGPUDevice = device;
+        }
+    })();
     </script>
     {{{ SCRIPT }}}
 </body>
diff --git a/SampleBase/src/SampleApp.cpp b/SampleBase/src/SampleApp.cpp
@@ -60,10 +60,18 @@
 #    include "EngineFactoryMtl.h"
 #endif
 
+#if WEBGPU_SUPPORTED
+#    include "EngineFactoryWebGPU.h"
+#endif
+
 #include "imgui.h"
 #include "ImGuiImplDiligent.hpp"
 #include "ImGuiUtils.hpp"
 
+#if PLATFORM_EMSCRIPTEN
+#    include <emscripten/html5_webgpu.h>
+#endif
+
 namespace Diligent
 {
 
@@ -136,7 +144,7 @@ void SampleApp::InitializeDiligentEngine(const NativeWindow* pWindow)
 
     Uint32 NumImmediateContexts = 0;
 
-#if D3D11_SUPPORTED || D3D12_SUPPORTED || VULKAN_SUPPORTED
+#if D3D11_SUPPORTED || D3D12_SUPPORTED || VULKAN_SUPPORTED || WEBGPU_SUPPORTED
     auto FindAdapter = [this](auto* pFactory, Version GraphicsAPIVersion, GraphicsAdapterInfo& AdapterAttribs) {
         Uint32 NumAdapters = 0;
         pFactory->EnumerateAdapters(GraphicsAPIVersion, NumAdapters, nullptr);
@@ -414,7 +422,6 @@ void SampleApp::InitializeDiligentEngine(const NativeWindow* pWindow)
         break;
 #endif
 
-
 #if METAL_SUPPORTED
         case RENDER_DEVICE_TYPE_METAL:
         {
@@ -442,6 +449,50 @@ void SampleApp::InitializeDiligentEngine(const NativeWindow* pWindow)
         break;
 #endif
 
+#if WEBGPU_SUPPORTED
+        case RENDER_DEVICE_TYPE_WEBGPU:
+        {
+#    if EXPLICITLY_LOAD_ENGINE_WEBGPU_DLL
+            // Load the dll and import LoadGraphicsEngineWebGPU() function
+            auto GetEngineFactoryWebGPU = LoadGraphicsEngineWebGPU();
+#    endif
+            EngineWebGPUCreateInfo EngineCI;
+            if (m_ValidationLevel >= 0)
+                EngineCI.SetValidationLevel(static_cast<VALIDATION_LEVEL>(m_ValidationLevel));
+
+            auto* pFactoryWebGPU = GetEngineFactoryWebGPU();
+            m_pEngineFactory     = pFactoryWebGPU;
+
+            NumImmediateContexts = std::max(1u, EngineCI.NumImmediateContexts);
+            ppContexts.resize(NumImmediateContexts + EngineCI.NumDeferredContexts);
+            m_TheSample->ModifyEngineInitInfo({pFactoryWebGPU, m_DeviceType, EngineCI, m_SwapChainInitDesc});
+
+            if (EngineCI.NumDeferredContexts != 0)
+            {
+                LOG_WARNING_MESSAGE("Deferred contexts are not supported in WebGPU mode");
+                EngineCI.NumDeferredContexts = 0;
+            }
+
+#    if PLATFORM_EMSCRIPTEN
+            (void)FindAdapter;
+            WGPUDevice   wgpuDevice   = emscripten_webgpu_get_device();
+            WGPUInstance wgpuInstance = wgpuCreateInstance(nullptr);
+            pFactoryWebGPU->AttachToWebGPUDevice(wgpuInstance, nullptr, wgpuDevice, EngineCI, &m_pDevice, ppContexts.data());
+#    else
+            EngineCI.AdapterId = FindAdapter(pFactoryWebGPU, EngineCI.GraphicsAPIVersion, m_AdapterAttribs);
+            pFactoryWebGPU->CreateDeviceAndContextsWebGPU(EngineCI, &m_pDevice, ppContexts.data());
+#    endif
+            if (!m_pDevice)
+            {
+                LOG_ERROR_AND_THROW("Unable to initialize Diligent Engine in WebGPU mode. The API may not be available, "
+                                    "or required features may not be supported by this GPU/driver/OS version.");
+            }
+
+            if (!m_pSwapChain && pWindow != nullptr)
+                pFactoryWebGPU->CreateSwapChainWebGPU(m_pDevice, ppContexts[0], m_SwapChainInitDesc, *pWindow, &m_pSwapChain);
+        }
+        break;
+#endif
         default:
             LOG_ERROR_AND_THROW("Unknown device type");
             break;
@@ -664,7 +715,8 @@ SampleApp::CommandLineStatus SampleApp::ProcessCommandLine(int argc, const char*
                                  {"gl", RENDER_DEVICE_TYPE_GL},
                                  {"gles", RENDER_DEVICE_TYPE_GLES},
                                  {"vk", RENDER_DEVICE_TYPE_VULKAN},
-                                 {"mtl", RENDER_DEVICE_TYPE_METAL} //
+                                 {"mtl", RENDER_DEVICE_TYPE_METAL},
+                                 {"wgpu", RENDER_DEVICE_TYPE_WEBGPU} //
                              };
                          return ArgsParser.ParseEnum("mode", 'm', DeviceTypeEnumVals, m_DeviceType);
                      });
@@ -711,6 +763,13 @@ SampleApp::CommandLineStatus SampleApp::ProcessCommandLine(int argc, const char*
         LOG_ERROR_MESSAGE("Metal is not supported. Please select another device type");
     }
 #endif
+#if !WEBGPU_SUPPORTED
+    if (m_DeviceType == RENDER_DEVICE_TYPE_WEBGPU)
+    {
+        m_DeviceType = RENDER_DEVICE_TYPE_UNDEFINED;
+        LOG_ERROR_MESSAGE("WebGPU is not supported. Please select another device type");
+    }
+#endif
 
     if (ArgsParser.Parse("capture_path", m_ScreenCaptureInfo.Directory))
         m_ScreenCaptureInfo.AllowCapture = true;
@@ -784,6 +843,8 @@ SampleApp::CommandLineStatus SampleApp::ProcessCommandLine(int argc, const char*
             m_DeviceType = RENDER_DEVICE_TYPE_D3D11;
 #elif GL_SUPPORTED || GLES_SUPPORTED
             m_DeviceType = RENDER_DEVICE_TYPE_GL;
+#elif WEBGPU_SUPPORTED
+            m_DeviceType = RENDER_DEVICE_TYPE_WEBGPU;
 #endif
         }
     }
diff --git a/SampleBase/src/SampleBase.cpp b/SampleBase/src/SampleBase.cpp
@@ -95,6 +95,13 @@ void SampleBase::ModifyEngineInitInfo(const ModifyEngineInitInfoAttribs& Attribs
         break;
 #endif
 
+#if WEBGPU_SUPPORTED
+        case RENDER_DEVICE_TYPE_WEBGPU:
+        {
+            // Nothing to do
+        }
+        break;
+#endif
         default:
             LOG_ERROR_AND_THROW("Unknown device type");
             break;
diff --git a/SampleBase/src/Win32/SampleAppWin32.cpp b/SampleBase/src/Win32/SampleAppWin32.cpp
@@ -73,6 +73,10 @@ INT_PTR CALLBACK SelectDeviceTypeDialogProc(HWND   hwndDlg,
                     g_DeviceType = Diligent::RENDER_DEVICE_TYPE_VULKAN;
                     EndDialog(hwndDlg, wParam);
                     return TRUE;
+                case ID_WEBGPU:
+                    g_DeviceType = Diligent::RENDER_DEVICE_TYPE_WEBGPU;
+                    EndDialog(hwndDlg, wParam);
+                    return TRUE;
             }
             break;
 
@@ -105,6 +109,13 @@ INT_PTR CALLBACK SelectDeviceTypeDialogProc(HWND   hwndDlg,
             BOOL VulkanSupported = FALSE;
 #endif
             SetButtonImage(hwndDlg, ID_VULKAN, IDB_VULKAN_LOGO, VulkanSupported);
+
+#if WEBGPU_SUPPORTED
+            BOOL WebGPUSupported = TRUE;
+#else
+            BOOL WebGPUSupported = FALSE;
+#endif
+            SetButtonImage(hwndDlg, ID_WEBGPU, IDB_WEBGPU_LOGO, WebGPUSupported);
         }
         break;
     }
diff --git a/SampleBase/src/Win32/resources/Win32AppResource.h b/SampleBase/src/Win32/resources/Win32AppResource.h
@@ -7,18 +7,20 @@
 #define IDB_VULKAN_LOGO                 103
 #define IDB_DIRECTX11_LOGO              104
 #define IDB_DIRECTX12_LOGO              105
+#define IDB_WEBGPU_LOGO                 106
 #define ID_VULKAN                       1001
 #define ID_OPENGL                       1002
 #define ID_DIRECT3D11                   1003
 #define ID_DIRECT3D12                   1004
+#define ID_WEBGPU                       1005
 
 // Next default values for new objects
 // 
 #ifdef APSTUDIO_INVOKED
 #ifndef APSTUDIO_READONLY_SYMBOLS
-#define _APS_NEXT_RESOURCE_VALUE        106
+#define _APS_NEXT_RESOURCE_VALUE        108
 #define _APS_NEXT_COMMAND_VALUE         40001
-#define _APS_NEXT_CONTROL_VALUE         1005
+#define _APS_NEXT_CONTROL_VALUE         1006
 #define _APS_NEXT_SYMED_VALUE           101
 #endif
 #endif
diff --git a/SampleBase/src/Win32/resources/Win32AppResource.rc b/SampleBase/src/Win32/resources/Win32AppResource.rc
@@ -52,7 +52,7 @@ END
 // Dialog
 //
 
-IDD_DEVICE_TYPE_SELECTION_DIALOG DIALOGEX 0, 0, 198, 213
+IDD_DEVICE_TYPE_SELECTION_DIALOG DIALOGEX 0, 0, 198, 265
 STYLE DS_SETFONT | DS_MODALFRAME | DS_FIXEDSYS | DS_CENTER | WS_POPUP | WS_CAPTION
 CAPTION "Please select rendering backend"
 FONT 12, "MS Shell Dlg", 400, 0, 0xCC
@@ -61,6 +61,7 @@ BEGIN
     DEFPUSHBUTTON   "Direct3D12",ID_DIRECT3D12,47,61,103,43,BS_BITMAP,WS_EX_CLIENTEDGE
     DEFPUSHBUTTON   "OpenGL",ID_OPENGL,47,109,103,43,BS_BITMAP,WS_EX_CLIENTEDGE
     DEFPUSHBUTTON   "Vulkan",ID_VULKAN,47,157,103,43,BS_BITMAP,WS_EX_CLIENTEDGE
+    DEFPUSHBUTTON   "WebGPU",ID_WEBGPU,47,205,104,43,BS_BITMAP,WS_EX_CLIENTEDGE
 END
 
 
@@ -77,7 +78,7 @@ BEGIN
         LEFTMARGIN, 7
         RIGHTMARGIN, 187
         TOPMARGIN, 7
-        BOTTOMMARGIN, 201
+        BOTTOMMARGIN, 253
     END
 END
 #endif    // APSTUDIO_INVOKED
@@ -107,6 +108,8 @@ IDB_DIRECTX11_LOGO      BITMAP                  "directx11-logo.bmp"
 
 IDB_DIRECTX12_LOGO      BITMAP                  "directx12-logo.bmp"
 
+IDB_WEBGPU_LOGO         BITMAP                  "webgpu-logo.bmp"
+
 #endif    // English (United States) resources
 /////////////////////////////////////////////////////////////////////////////
 
diff --git a/SampleBase/src/Win32/resources/webgpu-logo.bmp b/SampleBase/src/Win32/resources/webgpu-logo.bmp
