Cannot make uniform work on WASM build

[lobis]

I made https://github.com/lobis/fractal-explorer in order to learn rust / gpu, which is based on this great tutorial. The latest commit at the time of writing is da6d8e1113ce8dc6b1dc6731562639d8d9f3f585.

My goal was to have the project compile as a native application (works!) and also as a web app using WASM (this doesn't work).

I think the problem is due to uniforms, I am not sure if I am using them correctly since it seems very user unfriendly (but I am not familiar with graphics programming so...). For example in order for my program to work I have to define additional members in the uniform struct to act as padding (maybe there is a cleaner solution?)

pub struct Uniform {
    pub mouse: [f32; 2],
    pub time: f32,
    _padding0: i32, // necessary to avoid error
    pub domain: [[f32; 2]; 2],
    pub c: [f32; 2],
    pub mandelbrot: i32,
    _padding1: i32, // necessary to avoid error
}

(file)

This solution seems to work for the desktop application. However the web version doesn't seem to work. (I build it via wasm-pack build --target web).

I get the following error on my browser console:

[.WebGL-00004C560356AA00] GL_INVALID_OPERATION: It is undefined behaviour to use a uniform buffer that is too small.

Honestly I am not sure how to debug this error, maybe it doesn't even have to do with uniforms and my WASM configuration is just wrong (first time I build for this target).

I would greatly appreciate any help as I would love to showcase my little project as a web app 🙏🏻

[kpreid]

I haven't been able to think of exactly what the problem might be here, but one thing I would suggest is reordering your struct members so that you need as little manual padding as possible. This not only saves memory but protects against implementation bugs. (wgpu has to work across many different graphics APIs which have different ideas about alignment requirements, and I've personally encountered one bug. It's still wgpu's responsibility to deal with them, but that doesn't mean there aren't unfixed ones.)

The simplest way to do this (in the absence of vec3s) is to order the members from largest alignment to smallest.

struct Uniform {
   domain: mat2x2<f32>, // align 8 size 16, running total 16
   mouse: vec2<f32>,    // align 8 size 8, running total 24
   c: vec2<f32>,        // align 8 size 8, running total 32
   time: f32,           // align 4 size 4, running total 36 
   mandelbrot: i32,     // align 4 size 4, running total 40 
}

pub struct Uniform {
    pub domain: [[f32; 2]; 2],
    pub mouse: [f32; 2], 
    pub c: [f32; 2],  
    pub time: f32,
    pub mandelbrot: i32,
    pub _padding: [f32; 2],
}

The padding at the end of the Rust struct is necessary because WebGL (but not other targets; this is a “downlevel” restriction) requires the uniform buffer's overall size to be a multiple of 16 bytes.

[lobis]

Oh, now I remember when I hit this problem myself. You need to declare the end-padding to 16 bytes in the shader itself, not just in the Rust code. That is, add a field like _padding: vec2<f32>, to the end of the WGSL struct, matching the Rust.

Sadly this doesn't fix the original error, with this fix I just get my original error back (GL_INVALID_OPERATION: It is undefined behaviour to use a uniform buffer that is too small.).

I tried googling the error and found some posts that could be helpful such as https://stackoverflow.com/questions/64625090/problems-with-uniform-buffers-in-webgl2 but I am not sure how / if its possible to apply the suggestion.

[kpreid]

If you're getting that error then the struct declarations must not be matching in some way. I don't know why, though. Perhaps someone more familiar with GPU layout issues will have some ideas.

[lobis]

If you're getting that error then the struct declarations must not be matching in some way. I don't know why, though. Perhaps someone more familiar with GPU layout issues will have some ideas.

Thank you for your time. I posted a question on stack overflow, hopefully somebody will solve it 🤞🏻

[grovesNL]

Looks like there's something wrong with how we handle the matrix in this uniform in the GL backend (possibly on WebGL only). I don't have time to look into it right now, but using a vec4 instead should help you to workaround it for now, e.g.:

 struct Uniform {
-   domain: mat2x2<f32>, 
+   domain: vec4<f32>,
    mouse: vec2<f32>,
    c: vec2<f32>,        
    time: f32,          
    mandelbrot: i32
    padding: vec2<f32>,
 }

/* ... */

-    let domain_size: vec2<f32> = vec2<f32>(my_uniform.domain[0].y - my_uniform.domain[0].x, my_uniform.domain[1].y - my_uniform.domain[1].x);
-    let domain_center: vec2<f32> = vec2<f32>(my_uniform.domain[0].y + my_uniform.domain[0].x, my_uniform.domain[1].y + my_uniform.domain[1].x) / 2.0;
+    let domain_size: vec2<f32> = vec2<f32>(my_uniform.domain[1] - my_uniform.domain[0], my_uniform.domain[3] - my_uniform.domain[2]);
+    let domain_center: vec2<f32> = vec2<f32>(my_uniform.domain[1] + my_uniform.domain[0], my_uniform.domain[3] + my_uniform.domain[2]) / 2.0;

[lobis]

Looks like there's something wrong with how we handle the matrix in this uniform in the GL backend (possibly on WebGL only). I don't have time to look into it right now, but using a vec4 instead should help you to workaround it for now, e.g.:

 struct Uniform {
-   domain: mat2x2<f32>, 
+   domain: vec4<f32>,
    mouse: vec2<f32>,
    c: vec2<f32>,        
    time: f32,          
    mandelbrot: i32
    padding: vec2<f32>,
 }

/* ... */

-    let domain_size: vec2<f32> = vec2<f32>(my_uniform.domain[0].y - my_uniform.domain[0].x, my_uniform.domain[1].y - my_uniform.domain[1].x);
-    let domain_center: vec2<f32> = vec2<f32>(my_uniform.domain[0].y + my_uniform.domain[0].x, my_uniform.domain[1].y + my_uniform.domain[1].x) / 2.0;
+    let domain_size: vec2<f32> = vec2<f32>(my_uniform.domain[1] - my_uniform.domain[0], my_uniform.domain[3] - my_uniform.domain[2]);
+    let domain_center: vec2<f32> = vec2<f32>(my_uniform.domain[1] + my_uniform.domain[0], my_uniform.domain[3] + my_uniform.domain[2]) / 2.0;

Thank you very much! it works fine, this solved my issue.