Add mesh gradient support by YohYamasaki · Pull Request #4081 · GraphiteEditor/Graphite

YohYamasaki · 2026-04-29T12:43:56Z

Screen.Recording.2026-08-17.at.13.03.19.mp4

Add the Coons patch-based mesh gradient paint.

Neither the current SVG specification nor Vello natively supports mesh gradient rendering, so the current implementations approximate mesh gradient behavior using linear gradients and alpha masks.
A Coons patch's shape is defined by its Bézier outlines. For SVG, it is replicated by feDisplacementMap, and approximated subdividing into multiple parallelograms for Vello. This ensures that the original shape, before transformation, can be a rectangle with affine transformation. Then, the color in the rectangle is blended bi-linearly or bi-cubically depending on the chosen interpolation space.

Known issues & limitations

The performance in Vello is not the best. We should replace it with the rasterization version in the future.
No support for polar color spaces for interpolation. In the 2D color space, the shorter/longer path of the interpolation can cause contradictions.
Banding occurs in SVG when the patch size is large and strongly warped in both shape and color. This happens because the supported color bit depth for the displacement map is 8 bits per channel, which is sometimes insufficient for such a situation. This can technically be solved by subdividing the patch since a source and target size of at least 128x128px cannot cause the banding issue.

gemini-code-assist

Code Review

This pull request introduces a new "Mesh" gradient type, adding UI support in the gradient tool and implementing an initial SVG rendering path that approximates the mesh by subdividing it into an 8x8 grid of polygons. Feedback identifies critical bugs in the rendering logic, including potential panics if the geometry has fewer than four points or segments and an incorrect return statement that prevents subsequent elements from rendering. Additionally, the reviewer noted that the mesh colors are currently hardcoded and that the Vello and SVG stops table implementations are still placeholders.

- Click to add/select mesh gradient - Show transform widget inside Fill nodes

# Conflicts: # editor/src/messages/portfolio/document/data_panel/data_panel_message_handler.rs # editor/src/messages/portfolio/document/graph_operation/graph_operation_message.rs # editor/src/messages/portfolio/document/graph_operation/utility_types.rs # editor/src/messages/portfolio/document/node_graph/node_properties.rs # editor/src/messages/portfolio/document_migration.rs # node-graph/libraries/graphic-types/src/graphic.rs # node-graph/libraries/rendering/src/render_ext.rs # node-graph/libraries/rendering/src/renderer.rs # node-graph/nodes/path-bool/src/lib.rs # node-graph/nodes/vector/src/vector_nodes.rs

YohYamasaki · 2026-08-16T14:28:13Z

@cubic-dev-ai Please review

cubic-dev-ai · 2026-08-16T14:28:18Z

@cubic-dev-ai Please review

@YohYamasaki I have started the AI code review. It will take a few minutes to complete.

cubic-dev-ai

All reported issues were addressed across 36 files

_{Tip: cubic used a learning from your PR history. Let your coding agent read cubic learnings directly with the cubic MCP.

Re-trigger cubic}

# Conflicts: # node-graph/libraries/graphic-types/src/graphic.rs # node-graph/libraries/rendering/src/render_ext.rs # node-graph/libraries/rendering/src/renderer.rs # node-graph/nodes/path-bool/src/lib.rs

YohYamasaki · 2026-08-17T10:49:32Z

@cubic-dev-ai Please review

cubic-dev-ai · 2026-08-17T10:49:39Z

@cubic-dev-ai Please review

@YohYamasaki I have started the AI code review. It will take a few minutes to complete.

cubic-dev-ai

All reported issues were addressed across 36 files

_{Reply with feedback, questions, or to request a fix.

Re-trigger cubic}

cubic-dev-ai

All reported issues were addressed across 36 files

_{Reply with feedback, questions, or to request a fix.

Re-trigger cubic}

# Conflicts: # editor/src/messages/portfolio/document/storage_tests/round_trip_tests.rs # node-graph/libraries/graphic-types/src/appearance.rs # node-graph/nodes/graphic/src/graphic.rs # node-graph/nodes/vector/src/vector_nodes.rs

cubic-dev-ai

All reported issues were addressed across 2 files (changes from recent commits).

_{Reply with feedback, questions, or to request a fix.

Re-trigger cubic}

cubic-dev-ai

2 issues found across 2 files (changes from recent commits).

Confidence score: 3/5

In node-graph/libraries/rendering/src/renderer.rs, non-1 raster render_params.scale is applied after adaptive subdivision but omitted from viewport_zoom, which can leave large-scale output with incorrect subpatch positioning or coverage; include the scale when computing viewport_zoom.
In node-graph/libraries/rendering/src/renderer/mesh_gradient.rs, the transform guard accepts a collapsed parent_transform * mesh_transform when both columns are nonzero, allowing displacement-map generation from a singular transform; validate the smallest singular value before proceeding.

Prompt for AI agents (unresolved issues)


Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="node-graph/libraries/rendering/src/renderer.rs">

<violation number="1" location="node-graph/libraries/rendering/src/renderer.rs:3031">
P2: When raster output uses a `render_params.scale` other than 1, the final Vello scene is scaled after adaptive subdivision, but this value is omitted from `viewport_zoom`. Large output scales therefore leave subpatch position errors and seam inflation sized in logical pixels, producing visible approximation errors; include the physical render scale when deriving the value passed to subdivision and subpatch rendering.</violation>
</file>

<file name="node-graph/libraries/rendering/src/renderer/mesh_gradient.rs">

<violation number="1" location="node-graph/libraries/rendering/src/renderer/mesh_gradient.rs:1025">
P2: When `parent_transform * mesh_transform` is singular but both columns are nonzero, this guard accepts a collapsed output transform and proceeds to build the displacement map. Check the smallest singular value before rendering the patch.</violation>
</file>

_{Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic}

cubic-dev-ai · 2026-08-19T05:41:51Z

+	let space: GradientSpace = item.attribute_cloned_or_default(ATTR_GRADIENT_SPACE);
+	let interpolation_method: GradientInterpolation = item.attribute_cloned_or_default(ATTR_GRADIENT_INTERPOLATION);
+	let Some(evaluator) = mesh_gradient.evaluator(space, interpolation_method) else { return };
+	let viewport_zoom = if render_params.viewport_zoom > 0. { render_params.viewport_zoom } else { 1. };


P2: When raster output uses a render_params.scale other than 1, the final Vello scene is scaled after adaptive subdivision, but this value is omitted from viewport_zoom. Large output scales therefore leave subpatch position errors and seam inflation sized in logical pixels, producing visible approximation errors; include the physical render scale when deriving the value passed to subdivision and subpatch rendering.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At node-graph/libraries/rendering/src/renderer.rs, line 3031: <comment>When raster output uses a `render_params.scale` other than 1, the final Vello scene is scaled after adaptive subdivision, but this value is omitted from `viewport_zoom`. Large output scales therefore leave subpatch position errors and seam inflation sized in logical pixels, producing visible approximation errors; include the physical render scale when deriving the value passed to subdivision and subpatch rendering.</comment> <file context> @@ -3028,7 +3028,9 @@ fn render_mesh_gradient_item_to_vello(item: ItemRef<'_, MeshGradient>, scene: &m let interpolation_method: GradientInterpolation = item.attribute_cloned_or_default(ATTR_GRADIENT_INTERPOLATION); let Some(evaluator) = mesh_gradient.evaluator(space, interpolation_method) else { return }; - let Some(subpatches) = subdivide_patches_adaptive(&evaluator, mesh_transform, parent_transform, MESH_POSITION_ERROR_TOLERANCE, MESH_COLOR_ERROR_TOLERANCE) else { + let viewport_zoom = if render_params.viewport_zoom > 0. { render_params.viewport_zoom } else { 1. }; + let position_error_tolerance = MESH_POSITION_ERROR_TOLERANCE / viewport_zoom; + let Some(subpatches) = subdivide_patches_adaptive(&evaluator, mesh_transform, parent_transform, position_error_tolerance, MESH_COLOR_ERROR_TOLERANCE) else { </file context>

Suggested change

let viewport_zoom = if render_params.viewport_zoom > 0. { render_params.viewport_zoom } else { 1. };

let viewport_zoom = (if render_params.viewport_zoom > 0. { render_params.viewport_zoom } else { 1. }) * (if render_params.scale > 0. { render_params.scale } else { 1. });

cubic-dev-ai · 2026-08-19T05:41:51Z

+		// so a local space that reaches the output non-uniformly displaces both axes by the wrong amount there.
+		let mesh_to_output = (self.parent_transform * self.mesh_transform).matrix2;
+		let output_scales = DVec2::new(mesh_to_output.x_axis.length(), mesh_to_output.y_axis.length());
+		if !output_scales.is_finite() || output_scales.min_element() <= f64::EPSILON {


P2: When parent_transform * mesh_transform is singular but both columns are nonzero, this guard accepts a collapsed output transform and proceeds to build the displacement map. Check the smallest singular value before rendering the patch.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At node-graph/libraries/rendering/src/renderer/mesh_gradient.rs, line 1025: <comment>When `parent_transform * mesh_transform` is singular but both columns are nonzero, this guard accepts a collapsed output transform and proceeds to build the displacement map. Check the smallest singular value before rendering the patch.</comment> <file context> @@ -1009,15 +1016,20 @@ impl<'mesh, 'field> SvgMeshPatchRenderer<'mesh, 'field> { + // so a local space that reaches the output non-uniformly displaces both axes by the wrong amount there. + let mesh_to_output = (self.parent_transform * self.mesh_transform).matrix2; + let output_scales = DVec2::new(mesh_to_output.x_axis.length(), mesh_to_output.y_axis.length()); + if !output_scales.is_finite() || output_scales.min_element() <= f64::EPSILON { return; } </file context>

# Conflicts: # editor/src/messages/portfolio/document/overlays/utility_functions.rs # node-graph/libraries/rendering/src/render_ext.rs # node-graph/libraries/rendering/src/renderer.rs # node-graph/libraries/vector-types/src/lib.rs # node-graph/libraries/vector-types/src/vector/vector_attributes.rs # node-graph/nodes/vector/src/vector_nodes.rs

gemini-code-assist Bot reviewed Apr 29, 2026

View reviewed changes

Keavon force-pushed the master branch 2 times, most recently from 4b7a823 to 847b8e9 Compare May 17, 2026 14:37

timon-schelling force-pushed the master branch 2 times, most recently from 15fcaac to d5f0140 Compare May 17, 2026 15:37

timon-schelling force-pushed the master branch from ac6c8a5 to 51427be Compare May 31, 2026 20:32

YohYamasaki force-pushed the mesh-gradient-poc branch 2 times, most recently from 5785002 to 231773c Compare July 17, 2026 04:30

YohYamasaki force-pushed the mesh-gradient-poc branch 2 times, most recently from 6575890 to f097784 Compare July 23, 2026 03:21

YohYamasaki mentioned this pull request Aug 6, 2026

Mesh gradients #3990

Open

YohYamasaki force-pushed the mesh-gradient-poc branch from f2939fa to e5de2e0 Compare August 9, 2026 07:10

Introduce the mesh gradient model and evaluator

703ab9a

YohYamasaki force-pushed the mesh-gradient-poc branch from e5de2e0 to ededf6c Compare August 9, 2026 12:44

YohYamasaki added 14 commits August 16, 2026 23:12

Render mesh gradient paints in SVG and Vello

6fbe14f

Support mesh gradients in Fill nodes

d2c6adf

Integrate mesh gradients into Fill properties

7af29c9

Add mesh gradient editing operations

6b83664

Add the mesh gradient editing tool

b2fb247

Refactor & Add corner alpha support

6a0bd70

Add support for more mesh gradient interpolation color spaces

9a1833d

Add support for interpolation method change

c8b340f

Improve displacement map quality and performance

161a7c4

Improve mesh gradient tool/property

2fbed5a

- Click to add/select mesh gradient - Show transform widget inside Fill nodes

Fix subpatch inflation to consider transform

0ec523c

Make subdivision rendering viewport independent

40ea0d6

Fix after AI review

45c0ad6

YohYamasaki force-pushed the mesh-gradient-poc branch from 55d7bda to 4ef8f6f Compare August 16, 2026 14:25

cubic-dev-ai Bot reviewed Aug 16, 2026

View reviewed changes

Fix after AI review

7958d0f

YohYamasaki changed the title ~~Mesh gradient~~ Add mesh gradient support Aug 17, 2026

Merge branch 'master' into mesh-gradient-poc

7bf5041

# Conflicts: # node-graph/libraries/graphic-types/src/graphic.rs # node-graph/libraries/rendering/src/render_ext.rs # node-graph/libraries/rendering/src/renderer.rs # node-graph/nodes/path-bool/src/lib.rs

cubic-dev-ai Bot reviewed Aug 17, 2026

View reviewed changes

Fix after AI review

8ca9fae

YohYamasaki marked this pull request as ready for review August 17, 2026 12:11

cubic-dev-ai Bot reviewed Aug 17, 2026

View reviewed changes

YohYamasaki added 2 commits August 17, 2026 21:30

Fix after AI review

dd447d8

cubic-dev-ai Bot reviewed Aug 17, 2026

View reviewed changes

Comment thread editor/src/messages/tool/tool_messages/mesh_gradient_tool.rs Outdated

YohYamasaki added 4 commits August 17, 2026 22:14

Fix after AI review

8791bfb

Fix SVG rendering on Firefox

235d787

Fix patch inflation to be independent of the output size

36f0e71

Fix vello subpatch inflation to consider viewport zoom

9bd74b6

cubic-dev-ai Bot reviewed Aug 19, 2026

View reviewed changes

	let viewport_zoom = if render_params.viewport_zoom > 0. { render_params.viewport_zoom } else { 1. };
	let viewport_zoom = (if render_params.viewport_zoom > 0. { render_params.viewport_zoom } else { 1. }) * (if render_params.scale > 0. { render_params.scale } else { 1. });

Uh oh!

Uh oh!

Conversation

YohYamasaki commented Apr 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

YohYamasaki commented Aug 16, 2026

Uh oh!

cubic-dev-ai Bot commented Aug 16, 2026

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

YohYamasaki commented Aug 17, 2026

Uh oh!

cubic-dev-ai Bot commented Aug 17, 2026

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cubic-dev-ai Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai Bot Aug 19, 2026

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai Bot Aug 19, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

YohYamasaki commented Apr 29, 2026 •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading

cubic-dev-ai Bot left a comment •

edited

Loading