Add initial wasm support #527

timsueberkrueb · 2024-08-03T09:40:54Z

Add initial support to run floem applications on the web using WASM and WebGPU. This only works on browsers that support WebGPU. WebGL2 via wgpu does not work because vger-rs uses storage buffers in its shaders which is not supported on WebGL2. Haven't looked into whether tinyskia can be made to work on the web.

Before this PR can be merged, the following changes need to land in winit and cosmic-text first:

dzhou121 · 2024-08-06T22:31:30Z

cosmic-text is now changed to the upstream version which doesn't have stretto

src/app_handle.rs

dzhou121 · 2024-08-24T19:52:20Z

Looks good to me now!

Although I tried to run webgpu example but my Chrome complains about the wgsl. Does it run properly for you?

timsueberkrueb · 2024-08-24T20:13:14Z

Thanks for noticing, I can reproduce it. I had other problems with Chrome before, so I mostly tested on Firefox nightly (on Linux). I'll look into these.

Error while parsing WGSL: :506:18 error: integral user-defined vertex outputs must have a '@interpolate(flat)' attribute
    @location(0) prim_index: u32,
                 ^^^^^^^^^^

:528:1 note: while analyzing entry point 'vs_main'
fn vs_main(
^^^^^^^^^^^
    @builtin(vertex_index) vid: u32,
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    @builtin(instance_index) instance: u32
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
) -> VertexOutput {
^^^^^^^^^^^^^^^^^^^
    var out: VertexOutput;
^^^^^^^^^^^^^^^^^^^^^^^^^^
    out.prim_index = instance;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


    let prim = prims.prims[instance];
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


    var q: vec2<f32>;
^^^^^^^^^^^^^^^^^^^^^
    switch(vid) {
^^^^^^^^^^^^^^^^^
        case 0u: {
^^^^^^^^^^^^^^^^^^
            q = prim.quad_bounds_min;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            //q = vec3<f32>(80.0, 80.0, 1.0); 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            out.t = prim.tex_bounds_min;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        }
^^^^^^^^^
        case 1u: {
^^^^^^^^^^^^^^^^^^
            q = vec2<f32>(prim.quad_bounds_min.x, prim.quad_bounds_max.y);
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            //q = vec3<f32>(80.0,120.0, 1.0); 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            out.t = vec2<f32>(prim.tex_bounds_min.x, prim.tex_bounds_max.y);
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        }
^^^^^^^^^
        case 2u: {
^^^^^^^^^^^^^^^^^^
            q = vec2<f32>(prim.quad_bounds_max.x, prim.quad_bounds_min.y);
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            //q = vec3<f32>(120.0,80.0, 1.0); 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            out.t = vec2<f32>(prim.tex_bounds_max.x, prim.tex_bounds_min.y);
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        }
^^^^^^^^^
        case 3u: {
^^^^^^^^^^^^^^^^^^
            q = prim.quad_bounds_max;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            //q = vec3<f32>(120.0,120.0, 1.0); 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            out.t = prim.tex_bounds_max;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        }
^^^^^^^^^
        default: { }
^^^^^^^^^^^^^^^^^^^^
    }
^^^^^


    out.p = (xforms.xforms[prim.xform] * vec4<f32>(q, 0.0, 1.0)).xy;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    out.position = vec4<f32>((2.0 * out.p / uniforms.size - 1.0) * vec2<f32>(1.0, -1.0), 0.0, 1.0);
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    out.size = uniforms.atlas_size;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


    return out;
^^^^^^^^^^^^^^^
}
^


 - While validating [ShaderModuleDescriptor]
 - While calling [Device].CreateShaderModule([ShaderModuleDescriptor]).

127.0.0.1/:1 Compilation log for [Invalid ShaderModule (unlabeled)]:
1 error(s) generated while compiling the shader:
:506:18 error: integral user-defined vertex outputs must have a '@interpolate(flat)' attribute
    @location(0) prim_index: u32,
                 ^^^^^^^^^^

:528:1 note: while analyzing entry point 'vs_main'
fn vs_main(
^^^^^^^^^^^
    @builtin(vertex_index) vid: u32,
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    @builtin(instance_index) instance: u32
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
) -> VertexOutput {
^^^^^^^^^^^^^^^^^^^
    var out: VertexOutput;
^^^^^^^^^^^^^^^^^^^^^^^^^^
    out.prim_index = instance;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


    let prim = prims.prims[instance];
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


    var q: vec2<f32>;
^^^^^^^^^^^^^^^^^^^^^
    switch(vid) {
^^^^^^^^^^^^^^^^^
        case 0u: {
^^^^^^^^^^^^^^^^^^
            q = prim.quad_bounds_min;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            //q = vec3<f32>(80.0, 80.0, 1.0); 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            out.t = prim.tex_bounds_min;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        }
^^^^^^^^^
        case 1u: {
^^^^^^^^^^^^^^^^^^
            q = vec2<f32>(prim.quad_bounds_min.x, prim.quad_bounds_max.y);
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            //q = vec3<f32>(80.0,120.0, 1.0); 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            out.t = vec2<f32>(prim.tex_bounds_min.x, prim.tex_bounds_max.y);
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        }
^^^^^^^^^
        case 2u: {
^^^^^^^^^^^^^^^^^^
            q = vec2<f32>(prim.quad_bounds_max.x, prim.quad_bounds_min.y);
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            //q = vec3<f32>(120.0,80.0, 1.0); 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            out.t = vec2<f32>(prim.tex_bounds_max.x, prim.tex_bounds_min.y);
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        }
^^^^^^^^^
        case 3u: {
^^^^^^^^^^^^^^^^^^
            q = prim.quad_bounds_max;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            //q = vec3<f32>(120.0,120.0, 1.0); 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            out.t = prim.tex_bounds_max;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        }
^^^^^^^^^
        default: { }
^^^^^^^^^^^^^^^^^^^^
    }
^^^^^


    out.p = (xforms.xforms[prim.xform] * vec4<f32>(q, 0.0, 1.0)).xy;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    out.position = vec4<f32>((2.0 * out.p / uniforms.size - 1.0) * vec2<f32>(1.0, -1.0), 0.0, 1.0);
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    out.size = uniforms.atlas_size;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


    return out;
^^^^^^^^^^^^^^^
}
^

127.0.0.1/:1 [Invalid ShaderModule (unlabeled)] is invalid.
 - While validating vertex stage ([Invalid ShaderModule (unlabeled)], entryPoint: vs_main).
 - While validating vertex state.
 - While calling [Device].CreateRenderPipeline([RenderPipelineDescriptor]).

148[Invalid RenderPipeline (unlabeled)] is invalid.
 - While encoding [RenderPassEncoder (unlabeled)].SetPipeline([Invalid RenderPipeline (unlabeled)]).

148[Invalid CommandBuffer "vger encoder" from CommandEncoder "vger encoder"] is invalid.
 - While calling [Queue].Submit([[Invalid CommandBuffer "vger encoder" from CommandEncoder "vger encoder"]])

timsueberkrueb · 2024-08-25T11:09:38Z

lapce/vger-rs#16 fixes this problem for me.

timsueberkrueb · 2024-08-25T11:15:19Z

Few things I would like to point out:

Requires new floem-vger-rs release
Requires new floem-winit release
Example adds font files to the repository. Is this okay? Otherwise we can try to find another means to load these fonts (e.g. from some CDN).

* Add initial wasm support * Bump web-time version * Run cargo fmt * Fix webgpu example * Fix clippy warning * Switch to latest floem-winit commit * Fix conditional import in keyboard.rs * Fix webgpu example * Automatically follow canvas size by default * Remove unused import * Remove unused import * Use latest floem-vger from git

vello w/ gradients and brush override vello chnages. before parley attempt parley Revert "attempt parley" This reverts commit 851ae9d8067e1ec570bed4fa865980f6b10ba33b. wip updates wip wip wip new vello fixed lapce#554 (lapce#555) - fixed tab navigation wrapping the tab button - fixed lapce#554 Add SignalGet SignalWith SignalUpdate traits (lapce#558) * Add SignalGet SignalWith SignalUpdate traits * fix doc * fix Linux make SignalUpdate non panic Add initial wasm support (lapce#527) * Add initial wasm support * Bump web-time version * Run cargo fmt * Fix webgpu example * Fix clippy warning * Switch to latest floem-winit commit * Fix conditional import in keyboard.rs * Fix webgpu example * Automatically follow canvas size by default * Remove unused import * Remove unused import * Use latest floem-vger from git add get/update from fn (lapce#559) * add get/update from fn * update radio buttons and example * Add stack ext trait * update dropdown * change custom constructors return self to allow custom styles * fix flight booker * fix other examples * better support for simple closure input * fix clippy rename SignalWith track method (lapce#562) * rename SignalWith track method * add SignalTrack trait Keyframe Animations (lapce#563) * add keyframed animations * Make animations reactive and stackable * remove old files * fix bezier * add reactive animation state control * remove animation message comment * improve easing * clippy * add delay * Fix transition on layout props * Fix animate towards default * fix animation view state * fix animation view state again * fix clippy * remove old comment * fix clippy 2

* Add initial wasm support * Bump web-time version * Run cargo fmt * Fix webgpu example * Fix clippy warning * Switch to latest floem-winit commit * Fix conditional import in keyboard.rs * Fix webgpu example * Automatically follow canvas size by default * Remove unused import * Remove unused import * Use latest floem-vger from git

timsueberkrueb marked this pull request as ready for review August 3, 2024 09:45

timsueberkrueb force-pushed the wasm branch from 31e0960 to 4d8260a Compare August 8, 2024 07:19

dzhou121 reviewed Aug 8, 2024

View reviewed changes

src/app_handle.rs Outdated Show resolved Hide resolved

timsueberkrueb added 8 commits August 24, 2024 14:30

Add initial wasm support

413f710

Bump web-time version

46372d9

Run cargo fmt

1f6d37b

Fix webgpu example

8fe385d

Fix clippy warning

a4d64a3

Switch to latest floem-winit commit

0dc38a3

Fix conditional import in keyboard.rs

8f90e89

Fix webgpu example

d9da895

timsueberkrueb force-pushed the wasm branch from e787cc3 to d9da895 Compare August 24, 2024 12:34

timsueberkrueb added 3 commits August 24, 2024 16:03

Automatically follow canvas size by default

e4a95c5

Remove unused import

13e8de3

Remove unused import

2277eba

Use latest floem-vger from git

0568b4d

dzhou121 merged commit 8dfadd0 into lapce:main Aug 27, 2024
7 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add initial wasm support #527

Add initial wasm support #527

timsueberkrueb commented Aug 3, 2024 •

edited

Loading

dzhou121 commented Aug 6, 2024

dzhou121 commented Aug 24, 2024

timsueberkrueb commented Aug 24, 2024 •

edited

Loading

timsueberkrueb commented Aug 25, 2024

timsueberkrueb commented Aug 25, 2024 •

edited

Loading

Add initial wasm support #527

Add initial wasm support #527

Conversation

timsueberkrueb commented Aug 3, 2024 • edited Loading

dzhou121 commented Aug 6, 2024

dzhou121 commented Aug 24, 2024

timsueberkrueb commented Aug 24, 2024 • edited Loading

timsueberkrueb commented Aug 25, 2024

timsueberkrueb commented Aug 25, 2024 • edited Loading

timsueberkrueb commented Aug 3, 2024 •

edited

Loading

timsueberkrueb commented Aug 24, 2024 •

edited

Loading

timsueberkrueb commented Aug 25, 2024 •

edited

Loading