Самый быстрый способ перебрать пиксели на холсте и скопировать некоторые из них в другой

м в 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. Есть ли более быстрый способ рисовать пиксели так, как мне нужно? Спасибо

Ответы на вопрос(1)

Ваш ответ на вопрос