Estoy en un proyecto gráfico 2D / 3D y estoy enfrentando un problema de rendimiento.

Mi algoritmo toma dos imágenes: una imagen y el mapa de profundidad de escala de grises relativa. También tengo una matriz de 10 lienzos ("capas") inicialmente en blanco. Una nota: todas las imágenes tienen la misma dimensión.

Necesito revisar cada píxel X; Y del mapa de profundidad y, dependiendo de su valor de color, acceder a uno de los 10 lienzos y dibujar el píxel X, Y de la imagen original en él.

Algoritmo resultante es 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);
}

¡Un bucle como ese tarda alrededor de 3 minutos en completarse en una imagen de 200x200! Estoy bastante seguro de que la lentitud es causada por la última función, putImageData. ¿Hay una forma más rápida de dibujar píxeles de la forma que necesito? Gracias