WebGPU sampler set to WGPUAddressMode_Repeat causes image rendering issues

[ypujante]

Version/Branch of Dear ImGui:

master

Back-ends:

imgui_impl_wgpu.cpp

Compiler, OS:

macOS 13.6.6

Full config/build information:

Dear ImGui 1.90.4 (19040)
--------------------------------
sizeof(size_t): 8, sizeof(ImDrawIdx): 2, sizeof(ImDrawVert): 20
define: __cplusplus=202002
define: __APPLE__
define: __GNUC__=4
define: __clang_version__=15.0.0 (clang-1500.0.40.1)
--------------------------------
io.BackendPlatformName: imgui_impl_glfw
io.BackendRendererName: imgui_impl_webgpu
io.ConfigFlags: 0x00000000
io.ConfigMacOSXBehaviors
io.ConfigInputTextCursorBlink
io.ConfigWindowsResizeFromEdges
io.ConfigMemoryCompactTimer = 60.0
io.BackendFlags: 0x0000000E
 HasMouseCursors
 HasSetMousePos
 RendererHasVtxOffset
--------------------------------
io.Fonts: 1 fonts, Flags: 0x00000000, TexSize: 512,64
io.DisplaySize: 1400.00,900.00
io.DisplayFramebufferScale: 2.00,2.00
--------------------------------
style.WindowPadding: 8.00,8.00
style.WindowBorderSize: 1.00
style.FramePadding: 4.00,3.00
style.FrameRounding: 0.00
style.FrameBorderSize: 0.00
style.ItemSpacing: 8.00,4.00
style.ItemInnerSpacing: 4.00,4.00

Details:

I was working on porting my ImGui desktop application to webgpu (Dawn) and I noticed this issue. See screenshot attached.

I have an image that I render like this:

      // kAudioJack is a texture loaded in webgpu and I keep a record of its size
      ImGui::SliderFloat("scale", &kScale, 0.1f, 2.0f);
      ImGui::Image(kAudioJack->getAsImTextureID(), {kAudioJack->fSize.x * kScale, kAudioJack->fSize.y * kScale});

As I move the scale slider, there are instances where the left of the image bleeds on the right side as can be seen on the screenshot (you can see a grey vertical line corresponding to the left edge of the image). In the ImGui demo, you can see that the bottom of the triangle bleeds on the top... The issue comes from this section in the code where the sampler is defined:

// imgui_impl_wgpu.cpp line 535
        WGPUSamplerDescriptor sampler_desc = {};
        sampler_desc.minFilter = WGPUFilterMode_Linear;
        sampler_desc.magFilter = WGPUFilterMode_Linear;
        sampler_desc.mipmapFilter = WGPUMipmapFilterMode_Linear;
        sampler_desc.addressModeU = WGPUAddressMode_Repeat;
        sampler_desc.addressModeV = WGPUAddressMode_Repeat;
        sampler_desc.addressModeW = WGPUAddressMode_Repeat;
        sampler_desc.maxAnisotropy = 1;
        bd->renderResources.Sampler = wgpuDeviceCreateSampler(bd->wgpuDevice, &sampler_desc);

Using WGPUAddressMode_ClampToEdge instead of WGPUAddressMode_Repeat fixes this issue entirely.

In other backends, for example OpenGL, because it is completely statefull it is easy to change this kind of parameter outside of ImGui. But with WebGPU, because it is stateless, there is no way to change it besides changing the (ImGui) code.

I can think of 2 ways to address the issue:

a) change the code in ImGui directly to use WGPUAddressMode_ClampToEdge instead of WGPUAddressMode_Repeat
b) add a define for this value that the user can override in imgui_config.h

I think a) is the right approach because I feel like this is an issue (= a bug) with ImGui: any texture that has data on any side will simply get repeated if the texture is scaled. It is not due to my code or my texture.

Screenshots/Video:

From my personal testing:

From code example:

Actually it is visible in the demo window. It is just harder to see because the image has a border, but it is there (I circled it in red)

Minimal, Complete and Verifiable Example code:

// Here's some code anyone can copy and paste to reproduce your issue
    static float kScale = 1.0f;
    ImGui::SliderFloat("scale", &kScale, 0.1f, 2.0f);
    auto &io = ImGui::GetIO();
    ImTextureID my_tex_id = io.Fonts->TexID;
    float my_tex_w = (float)io.Fonts->TexWidth;
    float my_tex_h = (float)io.Fonts->TexHeight;
    ImGui::Image(my_tex_id, {my_tex_w * kScale, my_tex_h * kScale});

[ypujante]

I actually realized that I have an example that I built a while ago (for the PR that I closed pending some changes that I will re-issue later on) and that also demonstrates the problem:

https://pongasoft.github.io/imgui/pr-7151/

This is a emscripten/wgpu example

Simply go to the Widgets/Images example and you can clearly see the artifacts of not clamping to edge...

[ypujante]

This PR #7468 by @JulesFouchy is the fix for this issue

[ocornut]

I have pushed a wider change 42206b3
See #7230 (comment) for more details.