Search code examples
javascripttextureswebgltexture2dslice

slice 3D array in arbitrary direction to generate texture

I am trying to generate a 2D texture from a 3D array given a normal and an origin.

My problem is that I can not figure out the right resolution to ensure that I do not forget any pixel in my texture.

Steps:

  1. Get the intersection of the 3D array and the plane
  2. Move intersection coordinates to 2D space
  3. Iterate through the intersection in the 2D space to get pixel values

The issue with my approach is that I can not figure out the right spacing/step to iterate in the 2D space. If the step is too big, I might miss some pixels, if the step is too small, it kills the performance.

Does my approach make sense?

Any help would be greatly appreciated. Best

== edits

Typically, the 3D array is 256x256x256 and each element of the array is a 3D voxel of dimension spacingX, spacingY, spacingZ.

enter image description here

At some point I want to use 3D texture to reslice my volume directly in WebGL, but first I am trying to figure out the logic in javascript.

If you look at the demo there: http://lessons.goxtk.com/17/, you should see the issue. Ideally, the 2D slice should always be sharp but some times, some artifacts appear on the image because the texture is missing some voxels due to incorrect reslicing.

The problem that I want to reslice this volume in any direction (not only well aligned to X/Y/Z axis). It means we do not only extract squares but also triangles from the intersection plane. And I want to generate a nice texture containing all the information from there.

I would like to be able to extract a texture as below properly.

enter image description here

With my current (incorrect) approach, I try to guess what would be the minimum resliced plane spacing and iterate through it to generate the texture. But I fail to find a correct spacing. Therefore iterating through plane with my guessed spacing, I miss a lot of information.

enter image description here

My current approach doesn't seem correct, any advice on how to achieve it would be welcome!

Best

Solution

  • The whole approach not not correct. The right way to do it is for each pixel on the screen, map it to the plane's world coordinates, then map it to IJK coordinates to find the right color.

    pixel -> plane coordinate -> IJK coordinate -> color of the pixel!