me/iced
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #2271 from iced-rs/fix/wasm

Browse source 
Fix WebAssembly platform
This commit is contained in:
Héctor Ramón 2024-02-20 03:56:30 +01:00 • committed by GitHub
commit 698b9001b1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 141 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Cargo.toml
View file

@ -18,7 +18,7 @@ all-features = true
maintenance = { status = "actively-developed" }
[features]
default = ["wgpu"]
default = ["wgpu", "fira-sans"]
# Enable the `wgpu` GPU-accelerated renderer backend
wgpu = ["iced_renderer/wgpu", "iced_widget/wgpu"]
# Enables the `Image` widget
@ -53,6 +53,8 @@ highlighter = ["iced_highlighter"]
multi-window = ["iced_winit/multi-window"]
# Enables the advanced module
advanced = []
# Enables embedding Fira Sans as the default font on Wasm builds
fira-sans = ["iced_renderer/fira-sans"]
[dependencies]
iced_core.workspace = true

4
examples/tour/index.html
View file

@ -1,12 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" style="height: 100%">
<head>
<meta charset="utf-8" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tour - Iced</title>
<base data-trunk-public-url />
</head>
<body>
<body style="height: 100%; margin: 0">
<link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="z" data-bin="tour" />
</body>
</html>

1
graphics/Cargo.toml
View file

@ -18,6 +18,7 @@ all-features = true
geometry = ["lyon_path"]
image = ["dep:image", "kamadak-exif"]
web-colors = []
fira-sans = []
[dependencies]
iced_core.workspace = true

BIN
graphics/fonts/FiraSans-Regular.ttf Normal file
View file

Binary file not shown.

13
graphics/src/text.rs
View file

@ -17,6 +17,15 @@ use once_cell::sync::OnceCell;
use std::borrow::Cow;
use std::sync::{Arc, RwLock, Weak};
/// The regular variant of the [Fira Sans] font.
///
/// It is loaded as part of the default fonts in Wasm builds.
///
/// [Fira Sans]: https://mozilla.github.io/Fira/
#[cfg(all(target_arch = "wasm32", feature = "fira-sans"))]
pub const FIRA_SANS_REGULAR: &'static [u8] =
include_bytes!("../fonts/FiraSans-Regular.ttf").as_slice();
/// Returns the global [`FontSystem`].
pub fn font_system() -> &'static RwLock<FontSystem> {
static FONT_SYSTEM: OnceCell<RwLock<FontSystem>> = OnceCell::new();
@ -27,6 +36,10 @@ pub fn font_system() -> &'static RwLock<FontSystem> {
cosmic_text::fontdb::Source::Binary(Arc::new(
include_bytes!("../fonts/Iced-Icons.ttf").as_slice(),
)),
#[cfg(all(target_arch = "wasm32", feature = "fira-sans"))]
cosmic_text::fontdb::Source::Binary(Arc::new(
include_bytes!("../fonts/FiraSans-Regular.ttf").as_slice(),
)),
]),
version: Version::default(),
})

1
renderer/Cargo.toml
View file

@ -18,6 +18,7 @@ geometry = ["iced_graphics/geometry", "iced_tiny_skia/geometry", "iced_wgpu?/geo
tracing = ["iced_wgpu?/tracing"]
web-colors = ["iced_wgpu?/web-colors"]
webgl = ["iced_wgpu?/webgl"]
fira-sans = ["iced_graphics/fira-sans"]
[dependencies]
iced_graphics.workspace = true

204
wgpu/src/quad/gradient.rs
View file

@ -1,4 +1,3 @@
use crate::graphics::color;
use crate::graphics::gradient;
use crate::quad::{self, Quad};
use crate::Buffer;
@ -59,106 +58,128 @@ impl Layer {
#[derive(Debug)]
pub struct Pipeline {
#[cfg(not(target_arch = "wasm32"))]
pipeline: wgpu::RenderPipeline,
}
impl Pipeline {
#[allow(unused_variables)]
pub fn new(
device: &wgpu::Device,
format: wgpu::TextureFormat,
constants_layout: &wgpu::BindGroupLayout,
) -> Self {
let layout =
device.create_pipeline_layout(&wgpu::PipelineLayoutDescriptor {
label: Some("iced_wgpu.quad.gradient.pipeline"),
push_constant_ranges: &[],
bind_group_layouts: &[constants_layout],
});
#[cfg(not(target_arch = "wasm32"))]
{
use crate::graphics::color;
let shader =
device.create_shader_module(wgpu::ShaderModuleDescriptor {
label: Some("iced_wgpu.quad.gradient.shader"),
source: wgpu::ShaderSource::Wgsl(std::borrow::Cow::Borrowed(
if color::GAMMA_CORRECTION {
concat!(
include_str!("../shader/quad.wgsl"),
"\n",
include_str!("../shader/vertex.wgsl"),
"\n",
include_str!("../shader/quad/gradient.wgsl"),
"\n",
include_str!("../shader/color/oklab.wgsl")
)
} else {
concat!(
include_str!("../shader/quad.wgsl"),
"\n",
include_str!("../shader/vertex.wgsl"),
"\n",
include_str!("../shader/quad/gradient.wgsl"),
"\n",
include_str!("../shader/color/linear_rgb.wgsl")
)
},
)),
});
let layout = device.create_pipeline_layout(
&wgpu::PipelineLayoutDescriptor {
label: Some("iced_wgpu.quad.gradient.pipeline"),
push_constant_ranges: &[],
bind_group_layouts: &[constants_layout],
},
);
let pipeline =
device.create_render_pipeline(&wgpu::RenderPipelineDescriptor {
label: Some("iced_wgpu.quad.gradient.pipeline"),
layout: Some(&layout),
vertex: wgpu::VertexState {
module: &shader,
entry_point: "gradient_vs_main",
buffers: &[wgpu::VertexBufferLayout {
array_stride: std::mem::size_of::<Gradient>() as u64,
step_mode: wgpu::VertexStepMode::Instance,
attributes: &wgpu::vertex_attr_array!(
// Colors 1-2
0 => Uint32x4,
// Colors 3-4
1 => Uint32x4,
// Colors 5-6
2 => Uint32x4,
// Colors 7-8
3 => Uint32x4,
// Offsets 1-8
4 => Uint32x4,
// Direction
5 => Float32x4,
// Position & Scale
6 => Float32x4,
// Border color
7 => Float32x4,
// Border radius
8 => Float32x4,
// Border width
9 => Float32
let shader =
device.create_shader_module(wgpu::ShaderModuleDescriptor {
label: Some("iced_wgpu.quad.gradient.shader"),
source: wgpu::ShaderSource::Wgsl(
std::borrow::Cow::Borrowed(
if color::GAMMA_CORRECTION {
concat!(
include_str!("../shader/quad.wgsl"),
"\n",
include_str!("../shader/vertex.wgsl"),
"\n",
include_str!(
"../shader/quad/gradient.wgsl"
),
"\n",
include_str!("../shader/color/oklab.wgsl")
)
} else {
concat!(
include_str!("../shader/quad.wgsl"),
"\n",
include_str!("../shader/vertex.wgsl"),
"\n",
include_str!(
"../shader/quad/gradient.wgsl"
),
"\n",
include_str!(
"../shader/color/linear_rgb.wgsl"
)
)
},
),
}],
},
fragment: Some(wgpu::FragmentState {
module: &shader,
entry_point: "gradient_fs_main",
targets: &quad::color_target_state(format),
}),
primitive: wgpu::PrimitiveState {
topology: wgpu::PrimitiveTopology::TriangleList,
front_face: wgpu::FrontFace::Cw,
..Default::default()
},
depth_stencil: None,
multisample: wgpu::MultisampleState {
count: 1,
mask: !0,
alpha_to_coverage_enabled: false,
},
multiview: None,
});
),
});
Self { pipeline }
let pipeline = device.create_render_pipeline(
&wgpu::RenderPipelineDescriptor {
label: Some("iced_wgpu.quad.gradient.pipeline"),
layout: Some(&layout),
vertex: wgpu::VertexState {
module: &shader,
entry_point: "gradient_vs_main",
buffers: &[wgpu::VertexBufferLayout {
array_stride: std::mem::size_of::<Gradient>()
as u64,
step_mode: wgpu::VertexStepMode::Instance,
attributes: &wgpu::vertex_attr_array!(
// Colors 1-2
0 => Uint32x4,
// Colors 3-4
1 => Uint32x4,
// Colors 5-6
2 => Uint32x4,
// Colors 7-8
3 => Uint32x4,
// Offsets 1-8
4 => Uint32x4,
// Direction
5 => Float32x4,
// Position & Scale
6 => Float32x4,
// Border color
7 => Float32x4,
// Border radius
8 => Float32x4,
// Border width
9 => Float32
),
}],
},
fragment: Some(wgpu::FragmentState {
module: &shader,
entry_point: "gradient_fs_main",
targets: &quad::color_target_state(format),
}),
primitive: wgpu::PrimitiveState {
topology: wgpu::PrimitiveTopology::TriangleList,
front_face: wgpu::FrontFace::Cw,
..Default::default()
},
depth_stencil: None,
multisample: wgpu::MultisampleState {
count: 1,
mask: !0,
alpha_to_coverage_enabled: false,
},
multiview: None,
},
);
Self { pipeline }
}
#[cfg(target_arch = "wasm32")]
Self {}
}
#[allow(unused_variables)]
pub fn render<'a>(
&'a self,
render_pass: &mut wgpu::RenderPass<'a>,
@ -169,10 +190,13 @@ impl Pipeline {
#[cfg(feature = "tracing")]
let _ = tracing::info_span!("Wgpu::Quad::Gradient", "DRAW").entered();
render_pass.set_pipeline(&self.pipeline);
render_pass.set_bind_group(0, constants, &[]);
render_pass.set_vertex_buffer(0, layer.instances.slice(..));
#[cfg(not(target_arch = "wasm32"))]
{
render_pass.set_pipeline(&self.pipeline);
render_pass.set_bind_group(0, constants, &[]);
render_pass.set_vertex_buffer(0, layer.instances.slice(..));
render_pass.draw(0..6, range.start as u32..range.end as u32);
render_pass.draw(0..6, range.start as u32..range.end as u32);
}
}
}

4
wgpu/src/window/compositor.rs
View file

@ -257,7 +257,9 @@ impl graphics::Compositor for Compositor {
.create_surface(window)
.expect("Create surface");
self.configure_surface(&mut surface, width, height);
if width > 0 && height > 0 {
self.configure_surface(&mut surface, width, height);
}
surface
}

4
winit/src/application.rs
View file

@ -159,6 +159,10 @@ where
use winit::platform::web::WindowExtWebSys;
let canvas = window.canvas().expect("Get window canvas");
let _ = canvas.set_attribute(
"style",
"display: block; width: 100%; height: 100%",
);
let window = web_sys::window().unwrap();
let document = window.document().unwrap();