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

4
examples/tour/index.html
View file

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

1
graphics/Cargo.toml
View file

@ -18,6 +18,7 @@ all-features = true
geometry = ["lyon_path"] geometry = ["lyon_path"]
image = ["dep:image", "kamadak-exif"] image = ["dep:image", "kamadak-exif"]
web-colors = [] web-colors = []
fira-sans = []
[dependencies] [dependencies]
iced_core.workspace = true 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::borrow::Cow;
use std::sync::{Arc, RwLock, Weak}; 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`]. /// Returns the global [`FontSystem`].
pub fn font_system() -> &'static RwLock<FontSystem> { pub fn font_system() -> &'static RwLock<FontSystem> {
static FONT_SYSTEM: OnceCell<RwLock<FontSystem>> = OnceCell::new(); 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( cosmic_text::fontdb::Source::Binary(Arc::new(
include_bytes!("../fonts/Iced-Icons.ttf").as_slice(), 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(), 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"] tracing = ["iced_wgpu?/tracing"]
web-colors = ["iced_wgpu?/web-colors"] web-colors = ["iced_wgpu?/web-colors"]
webgl = ["iced_wgpu?/webgl"] webgl = ["iced_wgpu?/webgl"]
fira-sans = ["iced_graphics/fira-sans"]
[dependencies] [dependencies]
iced_graphics.workspace = true 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::graphics::gradient;
use crate::quad::{self, Quad}; use crate::quad::{self, Quad};
use crate::Buffer; use crate::Buffer;
@ -59,106 +58,128 @@ impl Layer {
#[derive(Debug)] #[derive(Debug)]
pub struct Pipeline { pub struct Pipeline {
#[cfg(not(target_arch = "wasm32"))]
pipeline: wgpu::RenderPipeline, pipeline: wgpu::RenderPipeline,
} }
impl Pipeline { impl Pipeline {
#[allow(unused_variables)]
pub fn new( pub fn new(
device: &wgpu::Device, device: &wgpu::Device,
format: wgpu::TextureFormat, format: wgpu::TextureFormat,
constants_layout: &wgpu::BindGroupLayout, constants_layout: &wgpu::BindGroupLayout,
) -> Self { ) -> Self {
let layout = #[cfg(not(target_arch = "wasm32"))]
device.create_pipeline_layout(&wgpu::PipelineLayoutDescriptor { {
label: Some("iced_wgpu.quad.gradient.pipeline"), use crate::graphics::color;
push_constant_ranges: &[],
bind_group_layouts: &[constants_layout],
});
let shader = let layout = device.create_pipeline_layout(
device.create_shader_module(wgpu::ShaderModuleDescriptor { &wgpu::PipelineLayoutDescriptor {
label: Some("iced_wgpu.quad.gradient.shader"), label: Some("iced_wgpu.quad.gradient.pipeline"),
source: wgpu::ShaderSource::Wgsl(std::borrow::Cow::Borrowed( push_constant_ranges: &[],
if color::GAMMA_CORRECTION { bind_group_layouts: &[constants_layout],
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 pipeline = let shader =
device.create_render_pipeline(&wgpu::RenderPipelineDescriptor { device.create_shader_module(wgpu::ShaderModuleDescriptor {
label: Some("iced_wgpu.quad.gradient.pipeline"), label: Some("iced_wgpu.quad.gradient.shader"),
layout: Some(&layout), source: wgpu::ShaderSource::Wgsl(
vertex: wgpu::VertexState { std::borrow::Cow::Borrowed(
module: &shader, if color::GAMMA_CORRECTION {
entry_point: "gradient_vs_main", concat!(
buffers: &[wgpu::VertexBufferLayout { include_str!("../shader/quad.wgsl"),
array_stride: std::mem::size_of::<Gradient>() as u64, "\n",
step_mode: wgpu::VertexStepMode::Instance, include_str!("../shader/vertex.wgsl"),
attributes: &wgpu::vertex_attr_array!( "\n",
// Colors 1-2 include_str!(
0 => Uint32x4, "../shader/quad/gradient.wgsl"
// Colors 3-4 ),
1 => Uint32x4, "\n",
// Colors 5-6 include_str!("../shader/color/oklab.wgsl")
2 => Uint32x4, )
// Colors 7-8 } else {
3 => Uint32x4, concat!(
// Offsets 1-8 include_str!("../shader/quad.wgsl"),
4 => Uint32x4, "\n",
// Direction include_str!("../shader/vertex.wgsl"),
5 => Float32x4, "\n",
// Position & Scale include_str!(
6 => Float32x4, "../shader/quad/gradient.wgsl"
// Border color ),
7 => Float32x4, "\n",
// Border radius include_str!(
8 => Float32x4, "../shader/color/linear_rgb.wgsl"
// 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 } 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>( pub fn render<'a>(
&'a self, &'a self,
render_pass: &mut wgpu::RenderPass<'a>, render_pass: &mut wgpu::RenderPass<'a>,
@ -169,10 +190,13 @@ impl Pipeline {
#[cfg(feature = "tracing")] #[cfg(feature = "tracing")]
let _ = tracing::info_span!("Wgpu::Quad::Gradient", "DRAW").entered(); let _ = tracing::info_span!("Wgpu::Quad::Gradient", "DRAW").entered();
render_pass.set_pipeline(&self.pipeline); #[cfg(not(target_arch = "wasm32"))]
render_pass.set_bind_group(0, constants, &[]); {
render_pass.set_vertex_buffer(0, layer.instances.slice(..)); 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) .create_surface(window)
.expect("Create surface"); .expect("Create surface");
self.configure_surface(&mut surface, width, height); if width > 0 && height > 0 {
self.configure_surface(&mut surface, width, height);
}
surface surface
} }

4
winit/src/application.rs
View file

@ -159,6 +159,10 @@ where
use winit::platform::web::WindowExtWebSys; use winit::platform::web::WindowExtWebSys;
let canvas = window.canvas().expect("Get window canvas"); 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 window = web_sys::window().unwrap();
let document = window.document().unwrap(); let document = window.document().unwrap();