volume rendering using processing.js

Question

Given a stack of 2d images, how do I produce a volume-rendered effect using Processing/Processing.js?

Currently my idea is to do the volume rendering using java (something like imageJ)->obtain the faces of the volume-rendered image as individual jpegs and to use these to form a textured cube in Processing.

I was wondering if someone had a better suggestion or any tips on how to go about the proposed methodology.

This question was asked a while ago, but I'd like to still point out that you cannot mix Java into Processing code that you intend to run on the web using Processing.js, as the code will run in a browser, not a JVM. Any non-Processing Java objects and methods that you might call simply don't exist and will cause runtime errors. — Mike 'Pomax' Kamermans, Jul 07 '12 at 15:20

score 0 · Answer 1 · answered Oct 07 '12 at 01:56

In processing/processing.js you can just load your images into an array and display them with a offset in the z axis. You might find that using peasycam will make it easier to see what is going on in 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;
    }
}

If you wanted to do something more like a voxel display of the image data, you could read the image color information with PImage.pixels[] and display translucent a box() of the same color.

I agree with Mike in the comments. If you want to do the same in processing.js, you must only use built in methods/libraries unless you can find a javascript equivalent.

If I am way off, maybe posting an image of what you are going for would help to clarify your question.

volume rendering using processing.js

1 Answers1