Jestem w projekcie graficznym 2D / 3D i mam problem z wydajnością.

Mój algorytm przyjmuje dwa obrazy: obraz i mapę głębokości względnej skali szarości. Mam też tablicę 10 płócien („warstw”) początkowo pustych. Uwaga: wszystkie obrazy mają ten sam wymiar.

Muszę sprawdzić każdy piksel X; Y mapy głębokości i, w zależności od wartości koloru, uzyskać dostęp do jednego z 10 płótna i narysować na nim piksel X; Y oryginalnego obrazu.

Wynikowy algorytm wygląda następująco:

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);
}

Taka pętla trwa około 3 minut na obrazie 200x200! Jestem pewien, że powolność jest spowodowana przez ostatnią funkcję putImageData. Czy istnieje szybszy sposób rysowania pikseli w sposób, w jaki potrzebuję? Dziękuję Ci