Source-linked AI summary
Windfoil: Closed-Form Coverage for Real-Time and Differentiable Vector Graphics
Matt DesLauriers
TL;DR
Rasterization uses a winding test that is not naturally differentiable, and existing approaches use sampling or smooth approximations while display and optimization may use different coverage models. Windfoil evaluates box-filtered winding for quadratic Bézier contours in closed form, sharing that evaluation across rendering and fitting. It reports closer agreement with a box-filter reference than Skia or Slug and comparable or better fitting quality than DiffVG and Bézier Splatting at a fraction of their per-step cost.
Problem
Rasterization’s inside/outside winding test has zero derivative almost everywhere, and differentiable renderers use sampling or smooth approximations while exported results may be displayed with a different coverage model.
Source: §1 · p. 1Method
Results
Windfoil matches a box-filter reference more closely than Slug and Skia, with comparable or better reconstruction quality at a fraction of the per-step cost of DiffVG and Bézier Splatting.
Source: §9 · p. 7Takeaways & Limitations
The optimizer and display share a coverage model, so the loss observes the same image rendered for real-time or print use.
Source: §8 · p. 7The axis-aligned box footprint is not exact under rotation, shear, or perspective, and averaging winding before applying a fill rule can differ in some edge cases.
Source: §8 · p. 7
Abstract
from arXiv · showhide
We present Windfoil, a GPU-friendly algorithm that treats rasterisation and differentiable vector graphics as two sides of the same problem by evaluating the box-filtered winding number of quadratic B\'ezier contours in closed form. We implement this in WebGPU, allowing it to run across a range of environments, including a web browser on a consumer laptop, and apply the system to real-time 2D rendering, high-resolution rasterisation for print media, and a differentiable renderer. We compare our renderer against Skia, a production-grade engine, and Slug, a popular GPU rasterisation algorithm for games and real-time applications, measuring fidelity to a reference box-filtered coverage. Our renderer matches the reference more closely than either, at performance comparable to Slug. We also compare our optimiser against DiffVG and B\'ezier Splatting, where it reaches equivalent or better reconstruction quality at a fraction of the per-step cost, scaling to tens of thousands of shapes at interactive rates.
1 Introduction
GPU vector rendering still struggles to combine crisp, scale-invariant antialiasing with real-time performance, while differentiable renderers can optimize scenes using coverage models different from those used for display. Windfoil evaluates box-filtered winding in closed form for rendering and fitting, and reports stronger fidelity than Skia or Slug alongside faster optimization than DiffVG and Bézier Splatting at comparable or better reconstruction quality.
1 Introduction
- GPU antialiasing methods often trade accuracy or scale invariance for speed by approximating coverage or flattening curves to line segments.Applying a winding test once per pixel produces visible stepping along curved and diagonal edges.Source: §1 · p. 1
- The shared closed-form evaluation makes gradients follow the same coverage model as the rendered image, unlike optimization followed by export to a renderer with a different coverage model.The introduction notes that optimized results are commonly exported as vector paths for display with a renderer such as Skia.Source: §1 · pp. 1–2
- Windfoil presents an extensible 2D vector primitive for adjustable filter kernels, real-time shape fitting, and CLIP-guided text-to-sketch synthesis [29].The paper also motivates differentiable rendering for optimizing curves, colors, and appearance toward raster-based or vision-language-model losses.Source: §1 · pp. 1–2
- Windfoil computes the box-filtered winding number of closed quadratic Bézier contours in closed form, for both display and differentiable optimization.The WebGPU implementation uses a fragment shader for display and a compute pipeline for optimization.Source: §1 · pp. 1–2
- Windfoil matches a box-filter reference more closely than Skia or Slug, while its optimizer is faster than DiffVG and Bézier Splatting at comparable or better reconstruction quality.The system is also described as running across consumer runtimes, including a browser.Source: §1 · p. 2
2 Related Work
Prior work accelerates vector graphics through GPU path rendering, exact filtering, and differentiable renderers, but often approximates coverage or relies on separate techniques. Windfoil integrates quadratic-contour winding per pixel in closed form and applies the fill rule after integration.
2.1 Hardware-Accelerated Vector Graphics
- Baked distance fields for text can be memory hungry, resolution-limited, slow to compute, and prone to curve artifacts.Flattening curves to a device tolerance can be costly for real-time, scale-invariant rendering.Source: §2.1 · p. 2
- GPU vector-rendering approaches include implicit curve evaluation, lattice-based distance approximations, ray-based coverage, winding accumulation, and tiled GPU pipelines.Slug estimates coverage from horizontal and vertical ray crossings; Windfoil takes inspiration from its per-fragment gather over bands but uses a different coverage implementation and acceleration structure.Source: §2.1 · p. 2
- Earlier exact-filtering methods include polygon clipping [3, 27], closed-form Bézier filtering, and exact trapezoid coverage with approximated curved coverage.Windfoil integrates quadratic-contour winding in closed form per pixel, gathers with horizontal row bands, and applies the fill rule after integration; a recent preprint instead approximates clipped area with rectangles and trapezoids.Source: §2.1 · p. 2
2.2 Differentiable Vector Graphics
- DiffVG offers Monte Carlo and analytic-approximation render modes, while Bézier Splatting renders curves as many Gaussians and can accelerate some tasks.Applications including CLIPDraw, CLIPasso, CLIPascene, DiffSketcher, and SVGDreamer optimize through differentiable vector renderers [8] [33] [34] [37] [38].Source: §2.2 · p. 2
3 Method
Windfoil represents shapes with closed quadratic Bézier contours and computes antialiased coverage by averaging winding over each pixel footprint before applying a fill rule. Its boundary-integral evaluation supports rasterisation and differentiation, with differences from exact filtered coverage at self-crossings and overlapping contours.
3.1 Box-Filtered Winding
- Closed, directed quadratic Bézier contours are evaluated per pixel by averaging winding over a rectangular footprint, then applying the selected fill rule to obtain coverage.The fill rule maps the averaged winding to coverage in [0, 1].Source: §3 · p. 3, §3.1 · p. 3
- The method agrees with exact box-filtered coverage where winding varies by at most one across a footprint, but can differ at self-crossings and overlapping contours.Errors are confined to pixels whose footprints intersect those regions; the axis-aligned box is also approximate under rotation, shear, or perspective.Source: §3.1 · p. 3
3.2 Boundary Integral
- Green’s theorem rewrites the footprint winding integral as a boundary integral, with rising crossings adding clipped strip width and falling crossings subtracting it.Quadratic curves are subdivided at coordinate extrema, clipped to the footprint’s vertical range, and integrated in closed form.Source: §3.2 · p. 3
3.3 Rasterisation and Differentiation
- After summing boundary contributions, Windfoil normalizes by footprint area, applies the fill rule and opacity, then composites shapes in painter’s order.With positive filter sizes, coverage varies continuously as curves move, and evaluation is piecewise differentiable for gradients with respect to control points, colours, and opacities.Source: §3.3 · p. 3
4 GPU Acceleration
Windfoil uses CPU-preprocessed curves and separate WebGPU backends for display and differentiable rendering. Both evaluate coverage from the same curve representation, with backend-specific acceleration for their workloads.
4 GPU Acceleration
- Windfoil targets JavaScript runtimes and WebGPU, with CPU preprocessing repeated each optimisation step when geometry changes.The display backend preprocesses each unique shape once; the differentiable backend re-evaluates preprocessing as geometry changes.Source: §4 · p. 3
4.1 Rasterisation for Display
- The display path draws instanced, padded quads and uses horizontal row bands to restrict each fragment to nearby curve pieces.Bands with many pieces can be sorted for early traversal termination; below roughly four pixels in width and height, a precomputed banded ink profile approximates coverage.Source: §4.1 · pp. 3–4
4.2 Differentiable Coverage
- Differentiable coverage uses up to three candidate slots per curve for monotone pieces; zero-length intervals and collapsed pieces contribute nothing.A JAX port provides a correctness reference and demonstrates gradients with respect to control points, colour, opacity, and filter width.Source: §4.2 · p. 4, §4.3 · p. 4
4.3 Accelerating Differentiation
- The compute backend tiles the scene and builds draw-ordered lists of potentially contributing shapes, which the forward pass composites per pixel.The GPU backward pass recomputes forward quantities, propagates image gradients through compositing and coverage, and maps gradients from monotone pieces to quadratic control points; model-specific pullbacks map renderer gradients to optimised parameters.Source: §4.3 · p. 4
- Figure 3 compares different filter kernels and production renderers on a sunburst scene of 256 thin strokes.Image fitting uses GPU mean-squared error, and image-space gradients can also come from external objectives such as a Python server computing CLIP loss.Source: §4.3 · p. 4, Figure 3 · p. 5
5 Results
Windfoil achieves high coverage fidelity and comparable display performance to Slug, while its image-fitting benchmarks report strong reconstruction quality at lower optimisation cost. Its rasterisation can disagree with the box-filtered fill in pixels spanning conflicting winding regions.
5.1 Rasterisation
- Raster validation compares against a 24× box-downsampled reference with the minification guard disabled; Windfoil and DiffVG share initial geometry, colours, and opacities, unlike Bézier Splatting’s native initialisation.The fitting benchmarks ran on an NVIDIA RTX 2000 Ada Generation GPU.Source: §5.1 · p. 5, §5.2 · p. 5
- Windfoil’s mean absolute coverage error is 1.2 × 10−4, versus 1.1 × 10−3 for Slug and 1.6 × 10−3 for Skia—about 9× and 13× larger.The Windfoil error is in the same range as the supersampled reference’s sampling error.Source: §5.1 · p. 5
- Rasterisation can disagree with the box-filtered fill when a pixel footprint spans self-crossings, overlapping contours, or multiple even-odd transitions.Errors are confined to pixels whose footprints span the conflicting winding regions; additional per-fragment samples or contour preprocessing can reduce them in many cases.Source: §5.1 · p. 5
- Display performance is comparable overall: Windfoil is 1.2–2.6× faster under magnification and 5–6× faster under minification, while Slug leads by 1.2–2.8× through the middle zoom range.On an Apple M2 MacBook Air, both methods stay within a 60 fps frame budget at every zoom level for common workloads such as thousands of text or icon glyphs.Source: §5.1 · p. 5
5.2 Differentiation
- On Kodak, Windfoil reaches DiffVG’s final quality on 20 of 24 images (243× median speed-up) and Bézier Splatting’s on all 24 (196×).At native resolution with 512 shapes after 800 steps, mean PSNR is 26.60 dB for Windfoil, 26.41 dB for DiffVG, and 22.80 dB for Bézier Splatting; mean step times are 3.2 ms, 336 ms, and 29 ms, respectively.Source: §5.2 · p. 5
- On Färlev at 512 × 288 with 4,096 shapes and 800 steps, Windfoil reaches 26.77 dB in 10.1 s, versus DiffVG’s 21.31 dB in 1,658 s and Bézier Splatting’s 22.61 dB in 132 s.Parity speed-ups are 947× at 512 shapes and 2,145× at 4,096 shapes; Windfoil leads by 0.53 dB and 4.86 dB, respectively.Source: §5.2 · pp. 5–6
- With 10,000 and 50,000 shapes on Färlev at 4096 × 2304, Windfoil reaches 23.23 and 25.46 dB in 65.6 and 176 s for 800 steps.The baselines were not tested at those shape counts, and each benchmark was run once using the same initialisation seed.Source: §5.2 · p. 6
6 Use Cases
Windfoil’s use cases span adjustable filtering, high-resolution print export, image fitting, and CLIP-guided text-to-sketch synthesis. The examples include large tiled renders, coarse-to-fine fitting, and semantic optimisation across different scene sizes.
Adjustable Filter Kernels
- Filter width can be widened for an analytic box blur and annealed toward a single pixel for coarse-to-fine fitting; tent and cubic B-spline filters use quadrature and cost more.The alternative kernels are demonstrated for reducing moiré and shimmering in dense line work.Source: §6 · p. 6
High-Resolution Print Export
- Windfoil renders print images in tiles without boundary artefacts, with tests up to 30,000×30,000 pixels and support for floating-point compositing and high-bit-depth, wide-gamut, HDR exports.Independent per-pixel evaluation avoids storing the full PNG in active GPU or CPU memory; adjustable filters and the same winding calculation handle thin features.Source: §6 · pp. 6–7
Image Fitting
- Windfoil supports image fitting under mean-squared error across runtimes including a web browser, for applications such as tracing vector outlines to a target image.The section directs readers to the comparison with DiffVG and Bézier Splatting in Table 1 and Figure 4.Source: §6 · p. 7
Text-to-Sketch
- Across prompts and initialisations, Windfoil reaches lower CLIP loss than DiffVG at 64, 128, and 256 shapes, and is also tested at 50,000 and 100,000 shapes.Figure 5 shows scenes of 256 translucent rectangles, with four optimisation runs using different random seeds.Source: §6 · p. 7, Figure 5 · p. 7
7 AI Disclosure
The authors disclose that an LLM first proposed the closed-form, GPU-friendly box-filtered winding formulation during an author-directed search. The author implemented and validated it, while LLM tools remained involved in later development.
7 AI Disclosure
- Fable first proposed the closed-form, GPU-friendly box-filtered winding formulation during an approximately one-hour, author-directed search.The search took place in the author’s existing vector graphics toolkit, where ideas could be tested against visual checks, performance benchmarks, and numerical validators.Source: §7 · p. 7
- The author subsequently implemented, tested, and validated the formulation, while proposed methods continued to be tested, benchmarked, refined, or rejected under the author’s direction.The author recognised the differentiable-renderer extension after releasing the initial technical details and code online.Source: §7 · p. 7
- The literature review did not identify prior work describing the same specific combination of per-pixel closed-form evaluation, single-shader curve summation, and single-axis band acceleration.Source: §7 · p. 7
8 Discussion and Limitations
Windfoil uses one closed-form box-filtered winding evaluation for display and fitting, so the loss observes the same coverage model as the rendered image. Its accuracy and implementation have boundaries involving pixel footprints, contour types, unsupported effects, and fixed-point gradient accumulation.
8 Discussion and Limitations
- The shared closed-form evaluation lets display and fitting use the same coverage model, so optimisation evaluates the image rendered for real-time or print use.Source: §8 · p. 7
- Averaging winding before applying a fill rule can differ from filtering the filled image at some self-crossing edges, and filtering shapes before compositing can differ from filtering the composited scene.The axis-aligned pixel box is exact under translation and axis-aligned scaling, but not under rotation, shear, or perspective; wider tent and cubic kernels use fixed-tap quadrature rather than closed-form convolutions.Source: §8 · p. 7
- The implementation supports only closed quadratic contours; stroked paths and cubic curves require conversion, and the differentiable renderer lacks clipping masks and paint effects such as gradients and textures.Fixed-point integer atomics make gradient sums independent of accumulation order but introduce quantisation and overflow risk.Source: §8 · p. 7
9 Conclusion
Windfoil unifies rasterisation and differentiable vector graphics with a shared closed-form box-filtered winding evaluation. It matches a box-filter reference more closely than Slug and Skia, while offering competitive performance and lower optimisation cost than DiffVG and Bézier Splatting.
9 Conclusion
- Windfoil matches a box-filter reference more closely than Slug and Skia, with scale-invariant rendering, adjustable filter kernels, and performance competitive with Slug.Source: §9 · p. 7
- For image fitting, Windfoil achieves comparable or better reconstruction quality at a small fraction of the per-step cost of DiffVG and Bézier Splatting.Source: §9 · p. 7
- The WebGPU implementation supports rasterisation and optimisation across browser and server runtimes, which the authors present as a foundation for vector-graphics design, rendering, and machine-learning applications.Source: §9 · p. 8