Самый быстрый способ перебрать пиксели на холсте и скопировать некоторые из них в другой
м в 2D / 3D графический проект, и яЯ столкнулся с проблемой производительности.
Мой алгоритм берет два изображения: изображение и карту глубины серого. У меня также есть массив из 10 полотен ("слои») изначально пустой. Примечание: все изображения имеют одинаковое измерение.
Мне нужно проверить каждый пиксель X; Y карты глубины и, в зависимости от его значения цвета, получить доступ к одному из 10 полотен и нарисовать на нем пиксель X; Y исходного изображения.
Результирующий алгоритм выглядит примерно так:
for (var y = 0; y < totalHeight; ++y) {
for (var x = 0; x < totalWidth; ++x) {
var index = (y * totalWidth + x) * 4; // index of the current pixel
// parse depth level using luminosity method
var depthLevel = Math.round(
0.21 * depthData[index] +
0.71 * depthData[index + 1] +
0.07 * depthData[index + 2]
);
// get the proper layer to modify
var layerIndex = Math.floor((layersCount / 256) * depthLevel);
var layerContext = layers[layerIndex].getContext("2d");
var layerData = layerContext.getImageData(0, 0, totalWidth, totalHeight);
layerData.data[index] = originalData[index];
layerData.data[index + 1] = originalData[index + 1];
layerData.data[index + 2] = originalData[index + 2];
layerData.data[index + 3] = originalData[index + 3];
layerContext.putImageData(layerData, 0, 0);
}
Такая петля занимает около 3 минут для изображения размером 200x200! Я'Я уверен, что медлительность вызвана последней функцией, putImageData. Есть ли более быстрый способ рисовать пиксели так, как мне нужно? Спасибо