Error while rendering volumetric webgl2 example with different dataset

stresstensor · September 1, 2021, 7:12am

Hi Guys,
I am new to threeJS so this may be an obvious problem:
When I render the example:
https://threejs.org/examples/?q=webgl2#webgl2_materials_texture3d
it works fine (off examples page or using LiveServer).

But when I use a different nrrd file, I get the following error:
INVALID_OPERATION: texImage3D: type FLOAT but ArrayBufferView not Float32Array.
The stack looks like:
texImage3D @ three.module.js:20208
uploadTexture @ three.module.js:20971
setTexture3D @ three.module.js:20683
setValueT3D1 @ three.module.js:16187
WebGLUniforms.upload @ three.module.js:16660
setProgram @ three.module.js:24864
WebGLRenderer.renderBufferDirect @ three.module.js:23933
renderObject @ three.module.js:24486
renderObjects @ three.module.js:24458
WebGLRenderer.render @ three.module.js:24258

The nrrd files look fine in Slicer. The only difference is that the example nrrd file is 861kb compared to the 7.5mb file I am trying. IMO, from a c++ world it looks like a type mismatch somewhere, but any suggestion would be greatly appreciated!

Thanks
-AM

Mugen87 · September 1, 2021, 8:50am

Can you share the NRRD file in this thread?

stresstensor · September 1, 2021, 12:16pm

KneeError.nrrd (2.0 MB)

Hi @Mugen87 ,
Thanks for looking into it! I have uploaded the nrrd file that is causing the error. I had to cut it out a bit to satisfy the upload limit.
Thanks
-AM

Mugen87 · September 1, 2021, 2:11pm

Um, I get a totally different error when loading the asset with NRRDLoader.

What do you mean with “cut”^^? It’s probably better to share the entire asset via Google Drive or a similar service.

stresstensor · September 1, 2021, 3:02pm

I took out some of the last few layers to reduce the file size. I still get the same error with the file I posted. I have tried a few other nrrd files and get the same error.

Here is the original knee that I got the error:

@Mugen87 , just curious, what was your error?

Thanks again!
-AM

stresstensor · September 2, 2021, 2:46am

Another interesting observation is if I run the example with the Knee.nrrd file on Firefox (via LiveServer), the message is different:
WebGL warning: tex(Sub)Image[23]D: ArrayBufferView type Int16 not compatible with type FLOAT.

Thanks
-AM

Mugen87 · September 2, 2021, 8:47am

When loading the asset into webgl_loader_nrrd example I get this message three times (for each slice mesh).

three.module.js:9862 THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The “position” attribute is likely to have NaN values.

The position attribute of the plane does indeed have NaN values.

After some debugging it seems this happens because of the following code section:

github.com

mrdoob/three.js/blob/ee9e1e76b2d150123dbc98cf5e9a7b16a9b11f70/examples/jsm/loaders/NRRDLoader.js#L368-L380


      
          		if ( headerObject.vectors ) {
          
          			const xIndex = headerObject.vectors.findIndex( vector => vector[ 0 ] !== 0 );
          			const yIndex = headerObject.vectors.findIndex( vector => vector[ 1 ] !== 0 );
          			const zIndex = headerObject.vectors.findIndex( vector => vector[ 2 ] !== 0 );
          
          			const axisOrder = [];
          			axisOrder[ xIndex ] = 'x';
          			axisOrder[ yIndex ] = 'y';
          			axisOrder[ zIndex ] = 'z';
          			volume.axisOrder = axisOrder;
          
          		} else {

With your asset, the resulting axis order is just [ 'z' ] because xIndex, yIndex and zIndex are all zero. That happens because the code assume an axis definition looks like so:

[0.9375000000000002, 0, 0]

However, in your asset it looks like so:

[0.3319472434711307, 0.00012250095587679915, 0.00591713997077279]

Since there are no 0 values, the code can’t detect the axis order.

I don’t know NRRD but it would be important to know whether the standard allows such definitions. If so, the loader requires a change.

stresstensor · September 2, 2021, 7:51pm

I am no expert in nrrd either. The nrrd files are from:
https://public.cancerimagingarchive.net/nbia-search/

What still puzzles me is how your error is different. I however still get the texImage3D: type FLOAT but ArrayBufferView not Float32Array error. I also tried with cdn.skypack.dev version of three JS, just in case my local version is older.

Thanks
-AM

Mugen87 · September 2, 2021, 9:15pm

I did not try to use a 3D texture. I just want to test if the loader is able to load the file so it can be rendered as planes like in webgl_loader_nrrd.

stresstensor · September 2, 2021, 9:42pm

Ok, cool. In that case, here is a folder with a few nrrd files for you to try.

One thought about the data from the knee model you mention above: Do you think that the Y and Z in that vector is noise and there should be a threshold below which it should assume 0.0, perhaps a percentage of the largest component?
Best
-AM

Mugen87 · September 3, 2021, 9:00am

I don’t know that, sorry. When I add a threshold, the file can be loaded without runtime errors but the resulting planes do not look correct. I’m afraid this issue can only be solved by someone with good understanding of the NRRD standard.

In any event, would you be willing to file an issue at GitHub? In this way, it’s possible to ping devs who could possibly help.

stresstensor · September 8, 2021, 10:57pm

Sure, I can add an issue.
Thanks
-AM

Topic		Replies	Views
Question related to volume rendering using nrrd file Questions volume-rendering	0	955	June 27, 2019
Texture with NRRDLoader Questions textures	0	946	April 7, 2021
texSubImage2D: ArrayBufferView not big enough for request Questions textures	7	2548	June 10, 2022
Is it possible to render a non-FloatType 3D texture? Questions textures , shaders	8	453	February 17, 2024
Volume Rendering of CT Scan Questions nrrd-loader	2	1678	May 28, 2021

Error while rendering volumetric webgl2 example with different dataset

Related topics