`minimal-web` example does not work; Pixels error: DeviceNotFound

[YohYamasaki]

First of all, thanks a lot for creating this superb project. I am really enjoying working with this😀

Description of the bug

The minimal-web example does not work and produces the following error when used with Chromium or Firefox Nightly:

Pixels error: DeviceNotFound(RequestDeviceError { inner: WebGpu(JsValue(OperationError: Failed to execute 'requestDevice' on 'GPUAdapter': The limit "maxInterStageShaderComponents" with a non-undefined value is not recognized.
OperationError: Failed to execute 'requestDevice' on 'GPUAdapter': The limit "maxInterStageShaderComponents" with a non-undefined value is not recognized.
    at imports.wbg.__wbg_requestDevice_a420ce594b90ac7c (http://localhost:8000/minimal-web.js:1766:26)
    at minimal_web-26813c67351e12ea.wasm.__wbg_requestDevice_a420ce594b90ac7c externref shim (http://localhost:8000/minimal-web_bg.wasm:wasm-function[5227]:0x248b2f)
    at minimal_web-26813c67351e12ea.wasm.<wgpu::backend::webgpu::ContextWebGpu as wgpu::context::Context>::adapter_request_device::h0aab6ee78646990d (http://localhost:8000/minimal-web_bg.wasm:wasm-function[633]:0xab5ad)
    at minimal_web-26813c67351e12ea.wasm.<T as wgpu::context::DynContext>::adapter_request_device::hea1ff2f44cafe0e4 (http://localhost:8000/minimal-web_bg.wasm:wasm-function[3275]:0x227755)
    at minimal_web-26813c67351e12ea.wasm.wgpu::Adapter::request_device::hab6cbb18c1f4445c (http://localhost:8000/minimal-web_bg.wasm:wasm-function[3003]:0x21de1a)
    at minimal_web-26813c67351e12ea.wasm.minimal_web::run::{{closure}}::h019c72d4338a1e9a (http://localhost:8000/minimal-web_bg.wasm:wasm-function[596]:0x7dbbf)
    at minimal_web-26813c67351e12ea.wasm.wasm_bindgen_futures::queue::QueueState::run_all::hbfb1e1bb638ff566 (http://localhost:8000/minimal-web_bg.wasm:wasm-function[1742]:0x1c5f4d)
    at minimal_web-26813c67351e12ea.wasm.wasm_bindgen_futures::queue::Queue::new::{{closure}}::hcd343e20c63bf1b0 (http://localhost:8000/minimal-web_bg.wasm:wasm-function[5117]:0x247e85)
    at minimal_web-26813c67351e12ea.wasm.<dyn core::ops::function::FnMut<(A,)>+Output = R as wasm_bindgen::closure::WasmClosure>::describe::invoke::hf98ff0a4e83a9aae (http://localhost:8000/minimal-web_bg.wasm:wasm-function[5115]:0x247e56)
    at minimal_web-26813c67351e12ea.wasm.closure1263 externref shim (http://localhost:8000/minimal-web_bg.wasm:wasm-function[5469]:0x24a303))) })

To Reproduce

Steps to reproduce the behavior:

1. Install the latest version of Chrome or Firefox nightly
2. Clone the main branch of the pixels repo
3. Build the project and start the local server with cargo run-wasm --release --package minimal-web
4. See the above error

Environments

Reproduced in the two different environments.

• Debian GNU/Linux 12 (bookworm), Linux 6.14.6-1-liquorix-amd64
• macOS Sonoma 14.3.1 On the linux environment, --enable-unsafe-webgpu --enable-features=Vulkan is provided to the Chromium to enable webgpu.

Additional context

The example worked on Chromium version 129 without any issues before I updated to the latest version. (I did not test the older versions of Firefox nightly). I would assume that this came from the removal of the maxInterStageShaderComponents property since chromium v135. Updating the wgpu version should resolve the issue. Chrome Platform Status | Feature: Remove WebGPU limit maxInterStageShaderComponents (Removed) Remove `SupportedLimits.maxInterStageShaderComponents` · Issue #6290 · gfx-rs/wgpu

[parasyte]

Thanks for the report! This error is caused by the old version of wgpu, which should "fix itself" if we upgrade. This information is according to https://github.com/gfx-rs/wgpu/issues/7496#issuecomment-2787936125 (I have not tried it myself).

[markusmoenig]

@parasyte Is there a specific reason why you cannot update the wgpu version ? WASM is broken right now and all dependencies are way ahead wgpu wise.

[parasyte]

@markusmoenig I just haven't been keeping up on maintenance. There are no technical blockers to my knowledge, apart from the known issues with keeping everything in sync (https://github.com/parasyte/pixels/issues/392#issuecomment-1938014062).

In terms up updating wgpu, #402 is the most recent PR for it. But it's fallen behind, too (merge conflicts).

[markusmoenig]

@parasyte I assumed you were busy. But will you be able to update it in the short term ?

If not I guess the best way for me is to maintain my own fork.

[parasyte]

Yeah, I'm planning to do some updates. I have set aside some time today to start making progress! Thanks for your patience, and the reminder.

[markusmoenig]

Maybe just maintain the core ? I don't think it's your job to maintain so many examples. Thats asking for trouble. The community can do that.

[markusmoenig]

Any update on this ? :)

[parasyte]

I have an uncommitted patch that updates all dependencies for the examples. It's incomplete. I got dragged into other things before I could dedicate enough time to get through it. I can at least open a draft PR with it today.

I think you are right, getting the examples under control is a really difficult part of the job. But breaking the dependency to the unpublished main crate will help a lot.

[markusmoenig]

Bump ...

[mmastrac]

A workaround that allows minimal-web to work in both Firefox and Chrome (remove console.log statements if you prefer less noise)

    js_sys::eval(r#"""
        console.log("Patching WebGPU GPUAdapter.requestDevice");
        const _oldRequestDevice = window?.GPUAdapter?.prototype?.requestDevice;
        if (_oldRequestDevice) {
            window.GPUAdapter.prototype.requestDevice = async function(limits) {
                delete limits?.requiredLimits?.maxInterStageShaderComponents;
                try {
                    console.log("Requesting WebGPU device with limits:", limits);
                    const device = await _oldRequestDevice.call(this, limits);
                    console.log("WebGPU device acquired:", device);
                    return device;
                } catch (e) {
                    console.error("Error requesting WebGPU device:", e);
                    throw e;
                }
            };
        }
    """#).expect("Failed to evaluate WebGPU patch");