Javascript 快速三维矩阵重切片

我有一个大小为（X，Y，Z）的3D矩阵，它作为Z矩阵存储在数据结构中，每个矩阵的大小为X。我想对这些矩阵重新切片以获得X个切片，每个Y X Z的大小。换句话说，我想在YZ平面中重新切片存储为XY切片的3D矩阵。用例是将轴向CT图像重新切片为矢状图像。我在浏览器环境中工作。

以下是我努力实现的一个例子：

我已经用Python实现了naive（迭代）解决方案，它每一个片段需要O（Y*Z）。我甚至没有费心编写相应的JavaScript实现，因为这种方法的速度太慢了好几个数量级

import glob
import numpy as np
import matplotlib.pyplot as plt
from scipy.misc import imread

height, width, depth = 512, 512, 100

volume = np.zeros((height, width, depth))

s = 0

for filename in glob.iglob('./*.jpg'):
  volume[:,:,s] =  imread(filename)[...,0]/255.0
  s += 1

reslice = np.zeros((depth, height, width))

for s in xrange(0, width):
  current = np.zeros((depth, height))
  for i in xrange(0, height):
    for j in xrange(0, depth):
      current[j,i] = volume[i,s,j]
  reslice[:,:,s] = current

该算法似乎适合并行化。例如，在CUDA中，可以将3D数据加载到全局内存中，每个像素创建一个线程，然后在新方向上对每个切片进行迭代，并在每次迭代中要求激发正确的像素以填充当前切片。这将是一个很容易编写的内核，每个片大约0（1）。但是，我无法在浏览器中访问CUDA

从CUDA到WebCL的映射相对简单，但鉴于不存在供应商支持，WebCL是毫无疑问的。因此，我认为WebGL是理想的解决方案

---

我不太确定在“WebGL”范例中如何实现这一点，但我确信它是可以实现的，而且我怀疑它也相当微不足道。然而，我似乎找不到从哪里开始，使用OpenGL进行通用计算的资源极其匮乏。如何使用OpenGL加速在浏览器中重新显示3D矩阵？

您不必使用webGL就能足够快

如果使用3D数组，JavaScript可能会太慢，但通过使用平面数组，重新切片的时间实际上与创建数组所需的时间相似

另一个技巧是使用类型化数组来减少内存使用并提高性能（Uint8Array）

我创建了一个小类来处理这样一个平面数组并对其进行切片

我认为你想要的最相关的东西实际上是在（x，y）轴或（y，z）轴上获得一个视图

由于数组创建速度非常慢，因此需要在固定缓冲区内就地构建视图。由于您还需要切片视图，因此还必须为切片视图创建缓冲区和方法。 速度很快：为您的512X512x100示例创建视图的时间不到5毫秒 （因此，事实上，您以后必须执行的putImageData将花费更多的时间！）

小提琴在这里：

下面是处理数据的类，您必须更改构造函数，使其接受真实的原始数据：

function Array3D(xSize, ySize, zSize) {
    this.xSize = xSize;
    this.ySize = ySize;
    this.zSize = zSize;
    var xyMultiplier = xSize * ySize;

    this.array = new Uint8Array(xSize * ySize * zSize);

    this.view = new Uint8Array(xSize * ySize);

    this.slicedView = new Uint8Array(ySize * zSize);

    this.valueAt = function (x, y, z) {
        return this.array[x + xSize * (y + z * ySize)];
    };

    this.setValueAt = function (x, y, z, val) {
        return this.array[x + xSize * (y + z * ySize)] = val;
    };

    this.buildView = function (z) {
        var src = this.array;
        var view = this.view;
        for (var x = 0; x < xSize; x++) {
            for (var y = 0; y < ySize; y++) {
                view[x + xSize * y] = src[x + xSize * (y + z * ySize)];
            }
        }
        return view;
    };

    this.buildSlicedView = function (x) {
        var src = this.array;
        var sView = this.slicedView;
        for (var y = 0; y < ySize; y++) {
            for (var z = 0; z < zSize; z++) {
                sView[y + ySize * z] = src[x + xSize * (y + z * ySize)];
            }
        }
        return sView;
    };
}

结果:

created in :33.92199998779688 (index):73
building view in :2.7559999871300533 (index):79
building sliced view in :5.726000003051013 

在代码的末尾，我还添加了一些代码来渲染视图

不要忘记缓存画布imageData：只创建一次，然后重新使用它以获得最佳性能

---

实际上，您可以轻松地进行实时渲染

两件事。首先，我个人不明白你所说的重新切片是什么意思。你能更清楚一点吗？我认为一个简单的例子就可以表达这个想法。第二，你能展示你已经做过和尝试过的代码吗？用例是将矢状面图像重新切片为轴向CT图像。添加了示例代码。您使用了512X512X100矩阵。1） 它是真实大小的数量级吗？2） 维度总是二的幂吗？（所以我猜高度应该是128，而不是100，在这种情况下）。3） 在阵列中存储像素数据所需的深度是多少（8位、16位、32位浮点等）？4） 所有矩阵的大小是否相同？5） 我们能假设浏览器是高效的吗（意思是：Chrome或Firefox）？谢谢你的提问！1） 是的，2）否，3）8位无符号（0-255），4）否，5）是。我的答案有答复吗？

created in :33.92199998779688 (index):73
building view in :2.7559999871300533 (index):79
building sliced view in :5.726000003051013