我正在从事 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);
}
在 200x200 的图像上完成这样的循环大约需要 3 分钟!我很确定缓慢是由最后一个函数 putImageData 引起的。有没有更快的方法以我需要的方式绘制像素?谢谢