Finding too little descriptors and matches are wrong

[SelaO]

I'm using the corner detection from here: https://github.com/wellflat/imageprocessing-labs/tree/master/cv/corner_detection

I transform the corners to be in the same format the descriptors function expects just like your example, yet I'm getting too little matches with reciproalMatch() and more with just match(), but both are pretty wrong.

Just the corners of the two images (overlaying on top of one another):

no overlay:

reciprocalMatch:

match:

Code:

function descriptors(imageData1, coordCorners1, imageData2, coordCorners2){
    window.descriptorLength = 256;
    window.matchesShown = 30;
    tracking.Brief.N = window.descriptorLength;

    const corners1 = flattenCornersArray(coordCorners1);
    const corners2 = flattenCornersArray(coordCorners2);

    var gray1 = tracking.Image.grayscale(imageData1.data, width, height);
    var gray2 = tracking.Image.grayscale(imageData2.data, width, height);

    // var corners1 = tracking.Fast.findCorners(gray1, width, height);
    // var corners2 = tracking.Fast.findCorners(gray2, width, height);

    var descriptors1 = tracking.Brief.getDescriptors(gray1, width, corners1);
    var descriptors2 = tracking.Brief.getDescriptors(gray2, width, corners2);

    var matches = tracking.Brief.reciprocalMatch(corners1, descriptors1, corners2, descriptors2);

    matches.sort(function (a, b) {
        return b.confidence - a.confidence;
    });

    const canvas = $('#canvas')[0];
    const context = canvas.getContext('2d');
    context.lineWidth = 3;
    for (var i = 0; i < Math.min(window.matchesShown, matches.length); i++) {
        var color = '#ffff00';
        context.fillStyle = color;
        context.strokeStyle = color;
        context.fillRect(matches[i].keypoint1[0], matches[i].keypoint1[1], 4, 4);
        context.fillRect(matches[i].keypoint2[0] , matches[i].keypoint2[1], 4, 4);

        context.beginPath();
        context.moveTo(matches[i].keypoint1[0], matches[i].keypoint1[1]);
        context.lineTo(matches[i].keypoint2[0] , matches[i].keypoint2[1]);
        context.stroke();
    }
}

function flattenCornersArray(corners){
    const arr = [];
    for(let c of corners){
        arr.push(c.coord.x, c.coord.y);
    }
    return arr;
}

Why doesn't it match properly?

PS: Adding blur doesn't help.

Orginal images:

[murat-aka]

There are different corner detection algorithms. The one used here might not be good enough for what you want.

What are you trying to achieve. Are you after the glass area. Can use blob detection for that instead. I.e colour tracking.