Eu estou em um projeto gráfico 2D / 3D e estou enfrentando um problema de desempenho.

Meu algoritmo usa duas imagens: uma imagem e o mapa de profundidade relativo à escala de cinza. Eu também tenho uma matriz de 10 telas ("camadas") em branco em branco. Uma nota: todas as imagens têm a mesma dimensão.

Eu preciso verificar cada pixel X; Y do mapa de profundidade e, dependendo do seu valor de cor, acessar uma das 10 telas e desenhar o pixel X; Y da imagem original nela.

Algoritmo resultante é algo como:

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

Um loop como esse leva cerca de 3 minutos para completar em uma imagem de 200x200! Tenho certeza que a lentidão é causada pela última função, putImageData. Existe uma maneira mais rápida de desenhar pixels da maneira que preciso? Obrigado