processing - 使用 processing.js 进行体积渲染

Question

给定一堆二维图像，如何使用 Processing/Processing.js 产生体积渲染效果？

目前我的想法是使用 java(类似于 imageJ)进行体积渲染 -> 获取体积渲染图像的面作为单独的 jpeg，并使用它们在 Processing 中形成带纹理的立方体。

我想知道是否有人有更好的建议或关于如何实现所提议方法的任何提示。

Answer 1

在 processing/processing.js 中，您可以将图像加载到数组中，并在 z 轴上显示偏移量。您可能会发现使用 peasycam将使您更容易以 3d 形式查看正在发生的事情。

PImage[] imageArr; // load your images in setup()
float zOffset = 10;

void draw() {
    for (int i = 0; i < imageArr.length; i++) {
         float zVal = zOffset * float(i) - float(imageArr.length)*zOffset/2;
         pushMatrix();
         translate(0,0,zVal);
         imageMode(CENTER);
         image(imageArr[i], 0, 0);
         popMatrix;
    }
}

如果您想做一些更像是图像数据的体素显示，您可以使用 PImage.pixels[] 读取图像颜色信息并显示半透明的 box() 相同的颜色。

我同意迈克的评论。如果你想在 processing.js 中做同样的事情，你必须只使用内置的方法/库，除非你能找到等效的 javascript。

如果我离题太远，也许张贴一张你想要的图片有助于澄清你的问题。