Examples: GLFW/SDL2/SDL3+WebGPU: better select surface format instead of using surface_capabilities.formats[0]. (#9576)

docs/CHANGELOG.txt

diff --git a/docs/CHANGELOG.txt b/docs/CHANGELOG.txt
index 5d01ea9..070283a 100644
--- a/docs/CHANGELOG.txt
+++ b/docs/CHANGELOG.txt
@@ -435,6 +435,7 @@
 - Examples:
   - MSVC: disabled /JMC in Visual Studio projects (unnecessary overhead).
   - GLFW/SDL2/SDL3+WebGPU: fixed running with wgpu-native missing `wgpuInstanceWaitAny()`. (#9377)
+  - GLFW/SDL2/SDL3+WebGPU: better select surface format. (#9576) [@ypujante]
   - GLFW+Metal: fixed mistakenly calling `ImGui_ImplGlfw_InitForOpenGL()`, which
     broke multi-viewport support. (#9564) [@ypujante]
   - SDL2+Metal: create Metal context without using a `SDL_Renderer`.

examples/example_glfw_wgpu/main.cpp

diff --git a/examples/example_glfw_wgpu/main.cpp b/examples/example_glfw_wgpu/main.cpp
index fe8b3de..b84641b 100644
--- a/examples/example_glfw_wgpu/main.cpp
+++ b/examples/example_glfw_wgpu/main.cpp
@@ -290,6 +290,16 @@
     return 0;
 }
 
+static WGPUTextureFormat SelectSurfaceFormat(const WGPUSurfaceCapabilities& capabilities)
+{
+    const WGPUTextureFormat preferredFormats[] = { WGPUTextureFormat_BGRA8Unorm, WGPUTextureFormat_RGBA8Unorm, WGPUTextureFormat_BGRA8UnormSrgb, WGPUTextureFormat_RGBA8UnormSrgb };
+    for (WGPUTextureFormat preferredFormat : preferredFormats)
+        for (size_t n = 0; n < capabilities.formatCount; n++)
+            if (capabilities.formats[n] == preferredFormat)
+                return preferredFormat;
+    return capabilities.formatCount > 0 ? capabilities.formats[0] : WGPUTextureFormat_Undefined;
+}
+
 #if defined(IMGUI_IMPL_WEBGPU_BACKEND_DAWN)
 static WGPUAdapter RequestAdapter(wgpu::Instance& instance)
 {
@@ -440,8 +450,7 @@
 
     WGPUSurfaceCapabilities surface_capabilities = {};
     wgpuSurfaceGetCapabilities(wgpu_surface, adapter.Get(), &surface_capabilities);
-
-    preferred_fmt = surface_capabilities.formats[0];
+    preferred_fmt = SelectSurfaceFormat(surface_capabilities);
 
     // WGPU backend: Adapter and Device acquisition, Surface creation
 #elif defined(IMGUI_IMPL_WEBGPU_BACKEND_WGPU) || defined(IMGUI_IMPL_WEBGPU_BACKEND_WGVK)
@@ -470,8 +479,7 @@
 
     WGPUSurfaceCapabilities surface_capabilities = {};
     wgpuSurfaceGetCapabilities(wgpu_surface, adapter, &surface_capabilities);
-
-    preferred_fmt = surface_capabilities.formats[0];
+    preferred_fmt = SelectSurfaceFormat(surface_capabilities);
 #endif // IMGUI_IMPL_WEBGPU_BACKEND_WGPU
 
     wgpu_surface_configuration.presentMode = WGPUPresentMode_Fifo;

examples/example_sdl2_wgpu/main.cpp

diff --git a/examples/example_sdl2_wgpu/main.cpp b/examples/example_sdl2_wgpu/main.cpp
index b0fa541..9ed5b57 100644
--- a/examples/example_sdl2_wgpu/main.cpp
+++ b/examples/example_sdl2_wgpu/main.cpp
@@ -276,6 +276,16 @@
     return 0;
 }
 
+static WGPUTextureFormat SelectSurfaceFormat(const WGPUSurfaceCapabilities& capabilities)
+{
+    const WGPUTextureFormat preferredFormats[] = { WGPUTextureFormat_BGRA8Unorm, WGPUTextureFormat_RGBA8Unorm, WGPUTextureFormat_BGRA8UnormSrgb, WGPUTextureFormat_RGBA8UnormSrgb };
+    for (WGPUTextureFormat preferredFormat : preferredFormats)
+        for (size_t n = 0; n < capabilities.formatCount; n++)
+            if (capabilities.formats[n] == preferredFormat)
+                return preferredFormat;
+    return capabilities.formatCount > 0 ? capabilities.formats[0] : WGPUTextureFormat_Undefined;
+}
+
 #if defined(IMGUI_IMPL_WEBGPU_BACKEND_DAWN)
 static WGPUAdapter RequestAdapter(wgpu::Instance& instance)
 {
@@ -427,8 +437,7 @@
 
     WGPUSurfaceCapabilities surface_capabilities = {};
     wgpuSurfaceGetCapabilities(wgpu_surface, adapter.Get(), &surface_capabilities);
-
-    preferred_fmt = surface_capabilities.formats[0];
+    preferred_fmt = SelectSurfaceFormat(surface_capabilities);
 
     // WGPU backend: Adapter and Device acquisition, Surface creation
 #elif defined(IMGUI_IMPL_WEBGPU_BACKEND_WGPU) ||  defined(IMGUI_IMPL_WEBGPU_BACKEND_WGVK)
@@ -457,8 +466,7 @@
 
     WGPUSurfaceCapabilities surface_capabilities = {};
     wgpuSurfaceGetCapabilities(wgpu_surface, adapter, &surface_capabilities);
-
-    preferred_fmt = surface_capabilities.formats[0];
+    preferred_fmt = SelectSurfaceFormat(surface_capabilities);
 #endif // IMGUI_IMPL_WEBGPU_BACKEND_WGPU
 
     wgpu_surface_configuration.presentMode = WGPUPresentMode_Fifo;

examples/example_sdl3_wgpu/main.cpp

diff --git a/examples/example_sdl3_wgpu/main.cpp b/examples/example_sdl3_wgpu/main.cpp
index c66748f..8a61d69 100644
--- a/examples/example_sdl3_wgpu/main.cpp
+++ b/examples/example_sdl3_wgpu/main.cpp
@@ -287,6 +287,16 @@
     return 0;
 }
 
+static WGPUTextureFormat SelectSurfaceFormat(const WGPUSurfaceCapabilities& capabilities)
+{
+    const WGPUTextureFormat preferredFormats[] = { WGPUTextureFormat_BGRA8Unorm, WGPUTextureFormat_RGBA8Unorm, WGPUTextureFormat_BGRA8UnormSrgb, WGPUTextureFormat_RGBA8UnormSrgb };
+    for (WGPUTextureFormat preferredFormat : preferredFormats)
+        for (size_t n = 0; n < capabilities.formatCount; n++)
+            if (capabilities.formats[n] == preferredFormat)
+                return preferredFormat;
+    return capabilities.formatCount > 0 ? capabilities.formats[0] : WGPUTextureFormat_Undefined;
+}
+
 #if defined(IMGUI_IMPL_WEBGPU_BACKEND_DAWN)
 static WGPUAdapter RequestAdapter(wgpu::Instance& instance)
 {
@@ -438,8 +448,7 @@
 
     WGPUSurfaceCapabilities surface_capabilities = {};
     wgpuSurfaceGetCapabilities(wgpu_surface, adapter.Get(), &surface_capabilities);
-
-    preferred_fmt = surface_capabilities.formats[0];
+    preferred_fmt = SelectSurfaceFormat(surface_capabilities);
 
     // WGPU backend: Adapter and Device acquisition, Surface creation
 #elif defined(IMGUI_IMPL_WEBGPU_BACKEND_WGPU) || defined(IMGUI_IMPL_WEBGPU_BACKEND_WGVK)
@@ -468,8 +477,7 @@
 
     WGPUSurfaceCapabilities surface_capabilities = {};
     wgpuSurfaceGetCapabilities(wgpu_surface, adapter, &surface_capabilities);
-
-    preferred_fmt = surface_capabilities.formats[0];
+    preferred_fmt = SelectSurfaceFormat(surface_capabilities);
 #endif // IMGUI_IMPL_WEBGPU_BACKEND_WGPU
 
     wgpu_surface_configuration.presentMode = WGPUPresentMode_Fifo;