Custom shader wasm-compatible?

[scambier]

I'm using pixels for my own project, with the minimal-web example as a base. It works quite well, and I'm having fun with it :)
I've been trying to integrate the noise shader example, and while it works in native build, the wasm build crashes at startup.

It seems the crash happens during the call to Device::create_render_pipeline. Is it expected (i.e. are there modifications to apply to make the custom shader work for the web), or is there something broken on my side?

[parasyte]

I'm glad you are enjoying it, so far!

I haven't tried using a custom shader with the WebGL backend, but I can confidently say crashes are never expected. My first guess is that it could be relying on something that isn't quite working on WebGL yet.

Sample code (and maybe the backtrace or other error messages) would probably be helpful. But in the meantime, I could attempt to combine the two examples independently and see if I can reproduce the issue.

[scambier]

combine the two examples independently and see if I can reproduce the issue.

That's exactly what I did :) https://github.com/scambier/pixels-wasm-shader

I also got a more complete error message (I wasn't using run-wasm in my other project):

panicked at 'wgpu error: Validation Error

Caused by:
    In Device::create_render_pipeline
      note: label = `NoiseRenderer pipeline`
    In the provided shader, the type given for group 0 binding 2 has a size of 4. As the device does not support `DownlevelFlags::BUFFER_BINDINGS_NOT_16_BYTE_ALIGNED`, the type must have a size that is a multiple of 16 bytes.

', C:\Users\cambi\.cargo\registry\src\github.com-1ecc6299db9ec823\wgpu-0.15.1\src\backend\direct.rs:3024:5

Stack:

__wbg_get_imports/imports.wbg.__wbg_new_abda76e883ba8a5f@http://localhost:8000/minimal-web.js:330:21
console_error_panic_hook::hook::h511ef37bda845a46@http://localhost:8000/minimal-web_bg.wasm:wasm-function[1241]:0x17436a
core::ops::function::Fn::call::h66d1e3935af5c573@http://localhost:8000/minimal-web_bg.wasm:wasm-function[4266]:0x1d3e97
std::panicking::rust_panic_with_hook::h7f7102b82d51338f@http://localhost:8000/minimal-web_bg.wasm:wasm-function[1978]:0x1ac9b5
std::panicking::begin_panic_handler::{{closure}}::hfa40135feb109919@http://localhost:8000/minimal-web_bg.wasm:wasm-function[2190]:0x1b6b3c
std::sys_common::backtrace::__rust_end_short_backtrace::haf21bfec9a028e09@http://localhost:8000/minimal-web_bg.wasm:wasm-function[4259]:0x1d3e5d
rust_begin_unwind@http://localhost:8000/minimal-web_bg.wasm:wasm-function[2667]:0x1c4fbd
core::panicking::panic_fmt::he4489d678d6570d5@http://localhost:8000/minimal-web_bg.wasm:wasm-function[3026]:0x1cbb99
core::ops::function::Fn::call::h099d1bcc0b598391@http://localhost:8000/minimal-web_bg.wasm:wasm-function[1989]:0x1ad36e
wgpu::backend::direct::ErrorSinkRaw::handle_error::hb0cb284e44b181f3@http://localhost:8000/minimal-web_bg.wasm:wasm-function[1453]:0x1896cd
<wgpu::backend::direct::Context as wgpu::context::Context>::device_create_render_pipeline::h1bc78c2675dacf7a@http://localhost:8000/minimal-web_bg.wasm:wasm-function[426]:0xaa0dc
<T as wgpu::context::DynContext>::device_create_render_pipeline::hae3fcc79374be9e2@http://localhost:8000/minimal-web_bg.wasm:wasm-function[2589]:0x1c3260
wgpu::Device::create_render_pipeline::hc5455132d86d4932@http://localhost:8000/minimal-web_bg.wasm:wasm-function[2078]:0x1b1b88
minimal_web::renderers::NoiseRenderer::new::hc3146e734bd43e9a@http://localhost:8000/minimal-web_bg.wasm:wasm-function[524]:0xe19f3
minimal_web::run::{{closure}}::h1c571aba69f7d21d@http://localhost:8000/minimal-web_bg.wasm:wasm-function[383]:0x764d8
wasm_bindgen_futures::task::singlethread::Task::run::h5e9f49afb58daace@http://localhost:8000/minimal-web_bg.wasm:wasm-function[1983]:0x1acd7e
wasm_bindgen_futures::queue::Queue::new::{{closure}}::h5792ce7fa23a89dd@http://localhost:8000/minimal-web_bg.wasm:wasm-function[1250]:0x175377
<dyn core::ops::function::FnMut<(A,)>+Output = R as wasm_bindgen::closure::WasmClosure>::describe::invoke::h7f1f5bef6806f9cf@http://localhost:8000/minimal-web_bg.wasm:wasm-function[3489]:0x1d0b5f
__wbg_adapter_46@http://localhost:8000/minimal-web.js:225:10
real@http://localhost:8000/minimal-web.js:202:20


minimal-web.js:346:21

It looks like it's fixable directly in the shader code gfx-rs/wgpu#2832

That's a good excuse to learn a bit of wgsl and try to fix that myself 👍