[WASM] Shader translation error for stage VERTEX | FRAGMENT | VERTEX_FRAGMENT: error: declarations for uniform webgl_35a293005ed3e100 are inside blocks webgl_f78cc1bc68a2432b and webgl_9911ca27b46ea2fc

[sotrh]

I'm trying to migrate my tutorial to support WASM, and I'm working on my lighting example and I'm running into a translation error. Here's the message that showed up in the console:

panicked at 'wgpu error: Validation Error

Caused by:
    In Device::create_render_pipeline
      note: label = `Render Pipeline`
    Internal error in VERTEX | FRAGMENT | VERTEX_FRAGMENT shader: error: declarations for uniform `webgl_35a293005ed3e100` are inside blocks `webgl_f78cc1bc68a2432b` and `webgl_9911ca27b46ea2fc`

', /home/ben/.cargo/registry/src/github.com-1ecc6299db9ec823/wgpu-0.12.0/src/backend/direct.rs:2273:5

Stack:

__wbg_new_693216e109162396@webpack-internal:///./docs/.vuepress/components/wasm/tutorial10_lighting/tutorial10_lighting_bg.js:870:13
__wbg_new_693216e109162396@http://127.0.0.1:8080/learn-wgpu/assets/js/app.js:840:130
@http://127.0.0.1:8080/learn-wgpu/c1c0fbc7eddb7f48ef66.module.wasm:wasm-function[1248]:0x18717b
@http://127.0.0.1:8080/learn-wgpu/c1c0fbc7eddb7f48ef66.module.wasm:wasm-function[3496]:0x1d5a0a
@http://127.0.0.1:8080/learn-wgpu/c1c0fbc7eddb7f48ef66.module.wasm:wasm-function[1848]:0x1b4e65
@http://127.0.0.1:8080/learn-wgpu/c1c0fbc7eddb7f48ef66.module.wasm:wasm-function[2160]:0x1c2d69
@http://127.0.0.1:8080/learn-wgpu/c1c0fbc7eddb7f48ef66.module.wasm:wasm-function[2758]:0x1d06cb
@http://127.0.0.1:8080/learn-wgpu/c1c0fbc7eddb7f48ef66.module.wasm:wasm-function[2865]:0x1d1ca8
@http://127.0.0.1:8080/learn-wgpu/c1c0fbc7eddb7f48ef66.module.wasm:wasm-function[2218]:0x1c4add
@http://127.0.0.1:8080/learn-wgpu/c1c0fbc7eddb7f48ef66.module.wasm:wasm-function[2602]:0x1cdc33
@http://127.0.0.1:8080/learn-wgpu/c1c0fbc7eddb7f48ef66.module.wasm:wasm-function[422]:0xbafa9
@http://127.0.0.1:8080/learn-wgpu/c1c0fbc7eddb7f48ef66.module.wasm:wasm-function[2701]:0x1cf7f0
@http://127.0.0.1:8080/learn-wgpu/c1c0fbc7eddb7f48ef66.module.wasm:wasm-function[887]:0x156dcb
@http://127.0.0.1:8080/learn-wgpu/c1c0fbc7eddb7f48ef66.module.wasm:wasm-function[371]:0x7ec1e
@http://127.0.0.1:8080/learn-wgpu/c1c0fbc7eddb7f48ef66.module.wasm:wasm-function[1168]:0x17e651
@http://127.0.0.1:8080/learn-wgpu/c1c0fbc7eddb7f48ef66.module.wasm:wasm-function[3074]:0x1d3f04
__wbg_adapter_57@webpack-internal:///./docs/.vuepress/components/wasm/tutorial10_lighting/tutorial10_lighting_bg.js:784:62
real@webpack-internal:///./docs/.vuepress/components/wasm/tutorial10_lighting/tutorial10_lighting_bg.js:733:16


tutorial10_lighting_bg.js:347
    __wbg_error_09919627ac0992f5 tutorial10_lighting_bg.js:347
    __wbg_error_09919627ac0992f5 app.js:846
    <anonymous> c1c0fbc7eddb7f48ef66.module.wasm:1602128
    <anonymous> c1c0fbc7eddb7f48ef66.module.wasm:1923594
    <anonymous> c1c0fbc7eddb7f48ef66.module.wasm:1789541
    <anonymous> c1c0fbc7eddb7f48ef66.module.wasm:1846633
    <anonymous> c1c0fbc7eddb7f48ef66.module.wasm:1902283
    <anonymous> c1c0fbc7eddb7f48ef66.module.wasm:1907880
    <anonymous> c1c0fbc7eddb7f48ef66.module.wasm:1854173
    <anonymous> c1c0fbc7eddb7f48ef66.module.wasm:1891379
    <anonymous> c1c0fbc7eddb7f48ef66.module.wasm:765865
    <anonymous> c1c0fbc7eddb7f48ef66.module.wasm:1898480
    <anonymous> c1c0fbc7eddb7f48ef66.module.wasm:1404363
    <anonymous> c1c0fbc7eddb7f48ef66.module.wasm:519198
    <anonymous> c1c0fbc7eddb7f48ef66.module.wasm:1566289
    <anonymous> c1c0fbc7eddb7f48ef66.module.wasm:1916676
    __wbg_adapter_57 tutorial10_lighting_bg.js:253
    real tutorial10_lighting_bg.js:202

The code is on my web2 branch: https://github.com/sotrh/learn-wgpu/tree/web2

You should be able to reproduce the issue by cloning the web2 branch and running yarn dev. You then go to http://127.0.0.1:8080/learn-wgpu (you'll get CORS issues if you use localhost). Then go the lighting tutorial and click the button on the bottom of the screen.

I'm looking into easier ways to test the individual tutorials for WASM, but the yarn dev route definitely works.

Here's the shader in question:

// Vertex shader

struct Camera {
    view_pos: vec4<f32>;
    view_proj: mat4x4<f32>;
};
[[group(1), binding(0)]]
var<uniform> camera: Camera;

struct Light {
    position: vec3<f32>;
    color: vec3<f32>;
};
[[group(2), binding(0)]]
var<uniform> light: Light;

struct VertexInput {
    [[location(0)]] position: vec3<f32>;
    [[location(1)]] tex_coords: vec2<f32>;
    [[location(2)]] normal: vec3<f32>;
};
struct InstanceInput {
    [[location(5)]] model_matrix_0: vec4<f32>;
    [[location(6)]] model_matrix_1: vec4<f32>;
    [[location(7)]] model_matrix_2: vec4<f32>;
    [[location(8)]] model_matrix_3: vec4<f32>;
    [[location(9)]] normal_matrix_0: vec3<f32>;
    [[location(10)]] normal_matrix_1: vec3<f32>;
    [[location(11)]] normal_matrix_2: vec3<f32>;
};

struct VertexOutput {
    [[builtin(position)]] clip_position: vec4<f32>;
    [[location(0)]] tex_coords: vec2<f32>;
    [[location(1)]] world_normal: vec3<f32>;
    [[location(2)]] world_position: vec3<f32>;
};

[[stage(vertex)]]
fn vs_main(
    model: VertexInput,
    instance: InstanceInput,
) -> VertexOutput {
    let model_matrix = mat4x4<f32>(
        instance.model_matrix_0,
        instance.model_matrix_1,
        instance.model_matrix_2,
        instance.model_matrix_3,
    );
    let normal_matrix = mat3x3<f32>(
        instance.normal_matrix_0,
        instance.normal_matrix_1,
        instance.normal_matrix_2,
    );
    var out: VertexOutput;
    out.tex_coords = model.tex_coords;
    out.world_normal = normal_matrix * model.normal;
    var world_position: vec4<f32> = model_matrix * vec4<f32>(model.position, 1.0);
    out.world_position = world_position.xyz;
    out.clip_position = camera.view_proj * world_position;
    return out;
}

// Fragment shader

[[group(0), binding(0)]]
var t_diffuse: texture_2d<f32>;
[[group(0), binding(1)]]
var s_diffuse: sampler;

[[stage(fragment)]]
fn fs_main(in: VertexOutput) -> [[location(0)]] vec4<f32> {
    let object_color: vec4<f32> = textureSample(t_diffuse, s_diffuse, in.tex_coords);
    
    // We don't need (or want) much ambient light, so 0.1 is fine
    let ambient_strength = 0.1;
    let ambient_color = light.color * ambient_strength;

    let light_dir = normalize(light.position - in.world_position);
    let view_dir = normalize(camera.view_pos.xyz - in.world_position);
    let half_dir = normalize(view_dir + light_dir);

    let diffuse_strength = max(dot(in.world_normal, light_dir), 0.0);
    let diffuse_color = light.color * diffuse_strength;

    let specular_strength = pow(max(dot(in.world_normal, half_dir), 0.0), 32.0);
    let specular_color = specular_strength * light.color;

    let result = (ambient_color + diffuse_color + specular_color) * object_color.xyz;

    return vec4<f32>(result, object_color.a);
}

I'm using wgpu version 0.12.0

[kvark]

On macOS, I'm not even able to build this branch:

kvark@Mac learn-wgpu % cargo build         
   Compiling objc_exception v0.1.2
   Compiling shaderc-sys v0.7.3
   Compiling png v0.17.3
   Compiling crossbeam-channel v0.5.1
The following warnings were emitted during compilation:

warning: shaderc: searching for native shaderc libraries on system;  use '--features build-from-source' to force building from source code
warning: shaderc: cannot find native shaderc library on system; falling back to build from source

error: failed to run custom build command for `shaderc-sys v0.7.3`

[sotrh]

You shouldn't have to build the entire project. All you would need to do is run yarn dev which runs ./build-wasm.sh && vuepress dev docs.

[sotrh]

I've updated the branch, so try now.