wip: first poc

Approximate Coons patch by creating bilinear gradient in parallelograms.
Each subgrid's color does not have C1 continuity, so we can see
 steps of colors in the strongly skewed scene. This could be
 solved by using bicubic interpolation.

Author: YohYamasaki

node-graph/libraries/no-std-types/src/color/color_types.rs

@@ -1101,6 +1101,20 @@ impl Color {
 	}
 }
 
+pub fn bilerp_color(c00: Color, c10: Color, c01: Color, c11: Color, u: f64, v: f64) -> Color {
+	let (u, v) = (u as f32, v as f32);
+	let w00 = (1. - u) * (1. - v);
+	let w10 = u * (1. - v);
+	let w01 = (1. - u) * v;
+	let w11 = u * v;
+	Color::from_rgbaf32_unchecked(
+		w00 * c00.r() + w10 * c10.r() + w01 * c01.r() + w11 * c11.r(),
+		w00 * c00.g() + w10 * c10.g() + w01 * c01.g() + w11 * c11.g(),
+		w00 * c00.b() + w10 * c10.b() + w01 * c01.b() + w11 * c11.b(),
+		w00 * c00.a() + w10 * c10.a() + w01 * c01.a() + w11 * c11.a(),
+	)
+}
+
 #[cfg(test)]
 mod tests {
 	use super::*;

node-graph/libraries/rendering/src/renderer.rs

@@ -2,7 +2,7 @@ use crate::render_ext::RenderExt;
 use crate::to_peniko::BlendModeExt;
 use core_types::blending::BlendMode;
 use core_types::bounds::{BoundingBox, RenderBoundingBox};
-use core_types::color::{Alpha, Color};
+use core_types::color::{Alpha, Color, bilerp_color};
 use core_types::math::quad::Quad;
 use core_types::render_complexity::RenderComplexity;
 use core_types::table::{Table, TableRow};
@@ -17,14 +17,15 @@ use graphic_types::vector_types::subpath::Subpath;
 use graphic_types::vector_types::vector::click_target::{ClickTarget, FreePoint};
 use graphic_types::vector_types::vector::style::{Fill, PaintOrder, RenderMode, Stroke, StrokeAlign};
 use graphic_types::{Artboard, Graphic};
-use kurbo::{Affine, Cap, Join, Shape};
+use kurbo::{Affine, Cap, Join, ParamCurve, Shape};
 use num_traits::Zero;
 use std::collections::{HashMap, HashSet};
 use std::fmt::Write;
 use std::hash::{Hash, Hasher};
 use std::ops::Deref;
 use std::sync::{Arc, LazyLock};
 use vector_types::gradient::{self, GradientSpreadMethod};
+use vector_types::vector::misc::point_to_dvec2;
 use vello::*;
 
 /// Cached 16x16 transparency checkerboard image data (two 8x8 cells of #ffffff and #cccccc).
@@ -972,7 +973,123 @@ impl Render for Table<Vector> {
 				Fill::Gradient(g) if g.gradient_type == GradientType::Mesh
 			);
 			if is_mesh_fill {
-				log::debug!("hoge");
+				// Split the mesh into 8 x 8 subgrids
+				let grid_num = 8;
+				let grid_stride_uv = 1. / grid_num as f64;
+
+				let segments: Vec<_> = row.element.segment_iter().map(|(_, path_seg, _, _)| path_seg).collect();
+				let points = row.element.point_domain.positions();
+
+				let top_seg = segments[0];
+				let right_seg = segments[1];
+				let bottom_seg = segments[2];
+				let left_seg = segments[3];
+
+				let top_left_color = Color::RED;
+				let top_right_color = Color::BLUE;
+				let bottom_left_color = Color::GREEN;
+				let bottom_right_color = Color::YELLOW;
+
+				let bilerp = |u: f64, v: f64| points[3] * (1. - u) * (1. - v) + points[2] * u * (1. - v) + points[0] * (1. - u) * v + points[1] * u * v;
+
+				// Create the position and color info of the grid that is splitted from the original mesh
+				let mut grid_info: Vec<Vec<(DVec2, Color)>> = vec![];
+
+				for i in 0..=grid_num {
+					let u = i as f64 * grid_stride_uv;
+					let mut grid_info_row: Vec<(DVec2, Color)> = vec![];
+
+					for j in 0..=grid_num {
+						let v = j as f64 * grid_stride_uv;
+						let c1_u = point_to_dvec2(bottom_seg.eval(1. - u));
+						let c2_u = point_to_dvec2(top_seg.eval(u));
+						let d1_v = point_to_dvec2(left_seg.eval(v));
+						let d2_v = point_to_dvec2(right_seg.eval(1. - v));
+						let lc = (1. - v) * c1_u + v * c2_u;
+						let ld = (1. - u) * d1_v + u * d2_v;
+
+						let pos = lc + ld - bilerp(u, v);
+						let color = bilerp_color(bottom_left_color, bottom_right_color, top_left_color, top_right_color, u, v);
+						grid_info_row.push((pos, color));
+					}
+					grid_info.push(grid_info_row);
+				}
+
+				// Create poloygons using the vertex position data
+				let mut idx = generate_uuid();
+
+				for i in 0..grid_num {
+					for j in 0..grid_num {
+						let bl = grid_info[i][j];
+						let tl = grid_info[i][j + 1];
+						let br = grid_info[i + 1][j];
+						let tr = grid_info[i + 1][j + 1];
+
+						// linear gradient for the bottom line
+						write!(
+							&mut render.svg_defs,
+							r##"<linearGradient id="gb{idx}" x1="{}" y1="{}" x2="{}" y2="{}" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#{}"/><stop offset="1" stop-color="#{}"/></linearGradient>"##,
+							bl.0.x,
+							bl.0.y,
+							br.0.x,
+							br.0.y,
+							bl.1.to_rgb_hex_srgb_from_gamma(),
+							br.1.to_rgb_hex_srgb_from_gamma(),
+						)
+						.unwrap();
+
+						// linear gradient for the top line
+						write!(
+							&mut render.svg_defs,
+							r##"<linearGradient id="gt{idx}" x1="{}" y1="{}" x2="{}" y2="{}" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#{}"/><stop offset="1" stop-color="#{}"/></linearGradient>"##,
+							tl.0.x,
+							tl.0.y,
+							tr.0.x,
+							tr.0.y,
+							tl.1.to_rgb_hex_srgb_from_gamma(),
+							tr.1.to_rgb_hex_srgb_from_gamma(),
+						)
+						.unwrap();
+
+						// top mask gradient
+						write!(
+							&mut render.svg_defs,
+							r##"<linearGradient id="gm{idx}" x1="{}" y1="{}" x2="{}" y2="{}" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="black"/><stop offset="1" stop-color="white"/></linearGradient>"##,
+							(bl.0.x + br.0.x) / 2.,
+							(bl.0.y + br.0.y) / 2.,
+							(tl.0.x + tr.0.x) / 2.,
+							(tl.0.y + tr.0.y) / 2.,
+						)
+						.unwrap();
+
+						// mask
+						write!(
+							&mut render.svg_defs,
+							r##"<mask id="m{idx}" maskUnits="userSpaceOnUse"><polygon points="{},{} {},{} {},{} {},{}" fill="url(#gm{idx})"/></mask>"##,
+							bl.0.x, bl.0.y, br.0.x, br.0.y, tr.0.x, tr.0.y, tl.0.x, tl.0.y,
+						)
+						.unwrap();
+
+						render.leaf_tag("polygon", |attributes| {
+							attributes.push("points", format!("{},{} {},{} {},{} {},{}", bl.0.x, bl.0.y, br.0.x, br.0.y, tr.0.x, tr.0.y, tl.0.x, tl.0.y));
+							attributes.push("fill", format!("url(#gb{idx})"));
+						});
+
+						render.leaf_tag("polygon", |attributes| {
+							attributes.push("points", format!("{},{} {},{} {},{} {},{}", bl.0.x, bl.0.y, br.0.x, br.0.y, tr.0.x, tr.0.y, tl.0.x, tl.0.y));
+							attributes.push("fill", format!("url(#gt{idx})"));
+							attributes.push("mask", format!("url(#m{idx})"));
+						});
+
+						idx += 1;
+					}
+				}
+
+				// Create a linear gradients, bottom-left -> bottom-right
+
+				// Create a linear gradient mask from top to bottom
+
+				// Create a linear gradient, top->left -> top->right with applying the mask
 				return;
 			}
 

node-graph/nodes/vector/src/vector_nodes.rs

@@ -109,51 +109,6 @@ where
 	content
 }
 
-// #[node_macro::node(category("Vector: Style"), path(graphene_core::vector), properties("fill_properties"))]
-// async fn mesh_gradient(
-// 	_: impl Ctx,
-// 	/// The content with vector paths to apply the mesh gradient to.
-// 	mut content: Table<Vector>,
-// 	/// The top-left color of the gradient.
-// 	#[default(Color::BLACK)]
-// 	top_left_color: Table<Color>,
-// 	/// The top-right color of the gradient.
-// 	#[default(Color::BLACK)]
-// 	top_right_color: Table<Color>,
-// 	/// The bottom-left color of the gradient.
-// 	#[default(Color::BLACK)]
-// 	bottom_left_color: Table<Color>,
-// 	/// The bottom-right color of the gradient.
-// 	#[default(Color::BLACK)]
-// 	bottom_right_color: Table<Color>,
-// 	_backup_color: Table<Color>,
-// 	_backup_gradient: Gradient,
-// ) -> Table<Vector> {
-// 	for vector in content.vector_iter_mut() {
-// 		let grid_num = 8;
-// 		let grid_stride_uv = 1. / grid_num as f64;
-
-// 		let segments: Vec<_> = vector.element.segment_iter().collect();
-// 		let points = vector.element.point_domain.positions();
-// 		let top_seg = segments.get(0).unwrap_throw().1;
-// 		let right_seg = segments.get(1).unwrap_throw().1;
-// 		let bottom_seg = segments.get(2).unwrap_throw().1;
-// 		let left_seg = segments.get(3).unwrap_throw().1;
-
-// 		let bilerp = |u: f64, v: f64| points[0] * (1. - u) * (1. - v) + points[1] * u * (1. - v) + points[2] * (1. - u) * v + points[3] * u * v;
-
-// 		for i in 0..=grid_num {
-// 			for j in 0..=grid_num {
-// 				let u = i as f64 * grid_stride_uv;
-// 				let v = j as f64 * grid_stride_uv;
-// 				let pos = point_to_dvec2(top_seg.eval(u)) + point_to_dvec2(bottom_seg.eval(1. - u)) - bilerp(u, v);
-// 			}
-// 		}
-// 	}
-
-// 	content
-// }
-
 /// Applies a fill style to the vector content, giving an appearance to the area within the interior of the geometry.
 #[node_macro::node(category("Vector: Style"), path(graphene_core::vector), properties("fill_properties"))]
 async fn fill<F: Into<Fill> + 'n + Send, V: VectorTableIterMut + 'n + Send>(