Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Seams between fills in canvas renderer #26

Open
Herschel opened this issue Aug 19, 2019 · 2 comments
Open

Seams between fills in canvas renderer #26

Herschel opened this issue Aug 19, 2019 · 2 comments
Labels
A-rendering Area: Rendering & Graphics A-web Area: Web & Extensions canvas Issues relating to the CanvasRenderingContext2D renderer P-low Priority: Low

Comments

@Herschel
Copy link
Member

Herschel commented Aug 19, 2019

Due to the method of anti-aliasing in most SVG renderers, shared edges will appear to have seams in the canvas render backend. "Conflation artifacts" are the technical term for these.

Example (Ruffle canvas backend on top, Flash on bottom):

image
(Also see #24)

The standard advice to avoid this is to overlap the paths, e.g. an outline fill should appear on top of the fill underneath it. But Flash almost always generates non-overlapping paths to avoid overdraw.

I'm not sure there is an easy fix for this beyond disabling AA completely with SVG properties like shape-rendering: crispEdges. But I think this will be kind of moot, as WebGL rendering (via tessellation and/or Pathfinder) will be the long-term goal over canvas.

@Herschel Herschel added A-web Area: Web & Extensions canvas Issues relating to the CanvasRenderingContext2D renderer A-rendering Area: Rendering & Graphics P-low Priority: Low labels Aug 19, 2019
@jrmuizel
Copy link

https://github.com/jrmuizel/full-scene-rasterizer is a possible solution to this problem. There's a non-full-scene rust port of this C++ code here: https://github.com/jrmuizel/raqote/blob/master/src/rasterizer.rs

@Herschel
Copy link
Member Author

For canvas renderer specifically, I was wondering if we can "fix" this by bumping out one side of any shared edges by some small threshold. When processing an SWF shape in ShapeConverter, we know whenever an edge is shared, so it might be fairly easy to split one side of the edge into two segments and bump out the midpoint. This might look bad if a shape is alphaed out, but worth a test.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-rendering Area: Rendering & Graphics A-web Area: Web & Extensions canvas Issues relating to the CanvasRenderingContext2D renderer P-low Priority: Low
Projects
None yet
Development

No branches or pull requests

2 participants