Skip to content

Antialiasing detection fails on image edges #50

@IvanSanchez

Description

@IvanSanchez

I'm running some WebGL triangles in different environments, and was surprised to see a difference in this test with one triangle:

Firefox:
rgb-triangle browser
headless-gl:
rgb-triangle headless
diff:
rgb-triangle diff

Scaling up the images in GIMP reveals that the issue is the antialiasing in the triangle (presumably due to differences in the environment):

headless-gl:
image
Firefox:
image

I've manually checked the value of the alpha channels in the pixels of the diagonal, and it's the same in all: 39.5%.

I've noticed that the antialias-detection algorithm clamps a 3x3 pixel bounding box along the edges, so I assume that the pixels that show as red in my diff image have a 2x2 bounding box, and therefore the calculations differ, ref:

pixelmatch/index.js

Lines 56 to 60 in 2188ac3

function antialiased(img, x1, y1, width, height, img2) {
var x0 = Math.max(x1 - 1, 0),
y0 = Math.max(y1 - 1, 0),
x2 = Math.min(x1 + 1, width - 1),
y2 = Math.min(y1 + 1, height - 1),

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions