2D 中随机点上的值的插值答案

【问题标题】：Interpolation of values on random points in 2D2D 中随机点上的值的插值
【发布时间】：2021-04-07 04:17:41
【问题描述】：

让我从一个例子开始。在 OpenGL 中，当您在每个顶点上绘制具有不同颜色的三角形时，其间的点上的颜色值会被插值：

现在，假设我收集了随机点，可以这样表示（黑色被视为缺少颜色）：

如何有效地插入这些点，以便获得均匀填充的图片？

【问题讨论】：

Delaunay 三角剖分，然后是一些重心插值。空间边界需要小心。
是否没有基于图像处理的方法（图像作为输入，而不是点的集合）？
@HighPerformanceMark 您所说的“空间边界需要注意”是什么意思。我的意思是我知道为什么，但你建议什么方法？
@mrpyo：这取决于您想要实现的目标。例如，左上角的像素是否应该是黑色的，因为它位于点云之外？还是应该是亮紫色，因为紫色的光点很近？如果您使用Bowyer-Watson algorithm，您将从围绕图像的巨大三角形开始。你可以使这个三角形的顶点变黑。如果它足够大，边框应该具有与最近点相似的颜色。您还可以沿着这些边缘镜像靠近边缘的点以获得均匀分布。
你解决了吗？我也想这样做。

【解决方案1】：

我的建议是用一个值对颜色进行编码，然后从 (xi, yi, ci) 进行曲面拟合 c=f(x,y)，其中 xi 和 yi 是点的 (x,y) 坐标i 和 ci 是点 i 处的编码颜色值。您不需要在边界空间做额外的处理，因为评估边界点的颜色值与评估任何点的颜色相同。

【讨论】：

【解决方案2】：

将区域划分为三角形。从这里选择您的方法http://en.wikipedia.org/wiki/Point_set_triangulation。
对于每个三角形，像往常一样对单个三角形执行插值

【讨论】：

【解决方案3】：

另一个stackoverflow问题的解决方案帮助了我： https://jsfiddle.net/87nw05kz/

const canvas = document.getElementById("testcanvas");
const context = canvas.getContext("2d");
const colors = [{x:10,y:10,r:255,g:0,b:0},
                            {x:190,y:10,r:0,g:127,b:0},
                            {x:100,y:190,r:0,g:0,b:255},
                            {x:200,y:100,r:0,g:0,b:0},
                            {x:190,y:190,r:127,g:255,b:127}];

function distance(x1, y1, x2, y2) {
        let dx = x1 - x2;
    let dy = y1 - y2;
    return Math.sqrt(dx * dx + dy * dy);
}
function calculateColor(x, y) {
        let total = 0;
        for (let i = 0; i < colors.length; i++) {
            let c = colors[i];
        let d = distance(c.x, c.y, x, y);
        if (d === 0) {
                return c;
        }
        d = 1 / (d * d);
        c.d = d;
        total += d;
        }
    let r = 0, g = 0, b = 0;
        for (let i = 0; i < colors.length; i++) {
            let c = colors[i];
            let ratio = c.d / total;
        r += ratio * c.r;
        g += ratio * c.g;
        b += ratio * c.b;
    }
    r = Math.floor(r);
    g = Math.floor(g);
    b = Math.floor(b);
    return {r:r,g:g,b:b};
}
              
function processImage() {
    const imgData = context.getImageData(0, 0, canvas.width, canvas.height);
    const pixels = imgData.data;
    const width = canvas.width;
    const height = canvas.height;
    const count = width * height * 4;
    for (let i = 0; i < count; i += 4) {
            let x = (i / 4) % width;
        let y = Math.floor(i / 4 / width);
        let color = calculateColor(x, y);
        pixels[i] = color.r;
        pixels[i+1] = color.g;
        pixels[i+2] = color.b;
        pixels[i+3] = 255;
        
    }
    context.putImageData(imgData, 0, 0);
}

processImage();

【讨论】：