Данные из пикселя изображения в соответствующую вершину

#javascript #image-processing #three.js #getpixel

#javascript #обработка изображений #three.js #getpixel

Вопрос:

Я пытаюсь поместить свое лицо, записанное с камеры, и сделать его немного неровным.

Я снимаю видео с камеры и помещаю его в плоскость с помощью текстуры. Из facedetection у меня есть изображение в оттенках серого, похожее на карту высот, из которого я хочу взять пиксельные данные и применить их к соответствующим вершинам, но это немного искажает ставку.

Длина pixeldata меньше, чем количество доступных вершин, поэтому проблема, вероятно, в правильном назначении.

В настоящее время я делаю это так, как показано в airtightinteractive.com/demos/js/webcammesh/:

 function getPictureData() {
    var canvas = document.getElementById('debug');
    var context = canvas.getContext('2d');

    var imgd = context.getImageData(0, 0, vidWidth, vidHeight);
    var pix = imgd.data;
    return pix;
}

function getColor(x, y, data) {
    var base = (Math.floor(y) * (vidWidth   1)   Math.floor(x)) * 4;
    var c = {
        r: data[base   0],
        g: data[base   1],
        b: data[base   2],
        a: data[base   3]
    };
    return c.r   c.g   c.b
}

function getDepth() {
    var data = getPictureData();
    //console.log(data);
    for (var i = 0; i < vidWidth  1; i  ) {
        for (var j = 0; j < vidHeight  1; j  ) {
            cubeGeometry.vertices[j * (vidWidth   1)   i].z = getColor(i,j,data)/55;
        }
    }
    cubeGeometry.verticesNeedUpdate = true;
}
  

Есть идеи, как сопоставить пиксель с соответствующей ему вершиной?

Комментарии:

1. слепое предположение: попробуйте просто vidWidth вместо vidWidth 1 .

2. @mrdoob спасибо, я только что заметил комментарий. Я пробовал ранее, и это действительно помогло — marky.pl/vu/wce . кстати. спасибо за threejs 🙂