#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 🙂